Question 212181 in Html Question posted in
Some basic documentation can be found here.

Html – when i add bg and border to footer it combines with the upper content, how do i solve it? what is the actual problem?

The footer properties are atomatically are attached to upper content, i did not add any attribute to the upper div.
css image

html image

webpage image

I want footer and upper content to be separate contents and work with diffrent attributes.

Tags:

3

Answers


  1. 0

    I don’t know the issue however exactly I did experience it. to fix it I did the following:

    footer {
  background-color: black;
  color: white;
  position: fixed;
  /* ^ this is the important part to fix it */
  margin-top: 2%;
  height: 40px;
  width: 100%;
  bottom: 0;
  /* ^ this too */
}
    <html>

<body>
  <footer>
    lorem ipsum de lore set amet
  </footer>
</body>

</html>

    my only concern with this is i think it creates a secondary problem of a small margin on the left side, that may just be an issue with my code though.

    Login or Signup to reply.
  2. 0

    You shouldn’t use float and width for layouts, use flexbox instead. Flexbox is very simple and perfect. Flexbox automatically scales the element, means you don’t event have to set the width of the elements.

    Here’s your code by using flexbox and modified a bit.

    .main-cont {
    display: flex !important;
    justify-content: center;
    margin: 10px 0px; 
    width: 100%;
    box-sizing: border-box;
    border: none;
}

div.left, div.middle, div.right {
    border-radius: 5px; 
    box-sizing: border-box; 
    margin: 10px 0px; 
    padding: 4px; 
    position: relative;
    display: block;
}

.footer { 
    border: 2px solid black;
    background-color: rgb(230, 227,224);
    padding: 10px; 
    margin-top: 10px; 
    text-align: center;
 } 
    <div class="main-cont">
    <div class="left">Lorem ipsum, dolor sit amet consectetur </div>
    <div class="middle">Lorem, ipsum dolor sit amet consectet</div>
    <div class="right">Lorem ipsum dolor sit amet, consectetur </div>
</div>
<div class="footer">
    <h2>Bye</h2>
</div>

    Isn’t it working perfectly just like you expected.

    Also, remember that, you shouldn’t provide images or links to images of your code. You should provide the code instead if you want it answered.

    Login or Signup to reply.
  3. 0

    Based on the source you sent it is working correctly. However without loading the style.css and normalize.css.It usually overlaps some CSS rule when there are many imports and at this point it sees the question of the order in which it is called (first instructions with !important, then the CSS line, then inside the style block, order of the imported files). Start by inspecting the elements with F12 in your browser to see if there is any padding or margin in the header or at the beginning of the section with id home.

    Another tip, use semantics. Elements like header, main and footer.

    <body>
    <!-- header design -->
    <header class="header">
        <a href="#" class="logo">Testing</a>
        <nav class="navbar">
            <a href="#home" class="active">Home</a>
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#portfolio">Portfolio</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <!-- home section design -->
    <main>
        <section class="home" id="home">
            <div class="home-content">
                <h1>Testing</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos corporis nam error officiis atque beatae molestias voluptatibus debitis.</p>
            </div>
        </section>
    </main>

    <footer>
        <a href="#" class="logo">Testing</a>
        <nav class="navbar">
            <a href="#home" class="active">Home</a>
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#portfolio">Portfolio</a>
            <a href="#contact">Contact</a>
        </nav>
    </footer>
</body>

    So you can write the rule directly for the element.

    <style>
header nav a { color: #00c617; }
footer nav a { color: #00a6de; }
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search