Css - Trying to attach a div to a fixed footer

Gabrielle
November 29, 2023
110 views
0 votes
2 Answers

I’m trying a very basic site, so I apologize for the juveniles question but I’ve been stuck for 2 days and I’ve hit a wall.

The lower tabs ("bottom_ul") are to be on top of the footer and stay with the footer, regardless of the page size. When I work with the top tabs ("top_ul") they work perfectly. I’ve managed to get the tabs to the bottom, but I want them to move up and I can’t figure out how to move them up, without them sticking in that new place (like, if I position them "just right" and then resize the page, they stay in place while the rest of the page moves around them if that makes any sense).

When I resize the page, I want the bottom_ul to stay with the footer, like the top_ul does with the header.

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,700;1,300&family=Luckiest+Guy&display=swap');
#mainheader {
  background-color: rgb(39, 11, 85);
  color: white;
  width: 100%;
  height: 100px;
  text-align: center;
  font-size: 60px;
  word-spacing: 70px;
  position: fixed;
  font-family: 'Luckiest Guy', cursive;
  margin: 0px;
  padding: 0px 0px 30px 0px;
  top: 0;
  left: 0px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#top_ul {
  position: relative;
  margin-top: 120px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

li {
  float: left;
  display: inline;
  font-family: "Courier New", monospace;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: white;
}

#header_links,
#footer_links {
  border-style: solid;
  border-color: rgb(39, 11, 85);
  padding: 0px 0px 0px 3px;
}

#header_links:hover,
#footer_links:hover {
  background-color: rgb(39, 11, 85);
  color: white;
}

#bottom_ul {
  position: fixed;
  /*margin-top: 530px;*/
  display: flex;
  justify-content: space-between;
  width: 100%;
  /*flex: 0 1 auto;
  top: 0;*/
  bottom: 0;
  z-index: 1;
}

#footer_content {
  margin: 10px 150px 10px 100px;
  text-align: center;
  float: left;
  display: inline;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(39, 11, 85);
  color: white;
  text-align: center;
  padding: 10px;
  z-index: 0;
}

<div>
  <ul id="bottom_ul">
    <li id="footer_links"><a href="">About</a></li>
    <li id="footer_links"><a href="">FAQ</a></li>
    <li id="footer_links"><a href="">Scores</a></li>
    <li id="footer_links"><a href="">History</a></li>
    <li id="footer_links"><a href="">Content</a></li>
  </ul>
</div>
<footer class="footer">
  <nav>
    <ul id="footer_containter">
      <li id="footer_content">copyright info and such</li>
    </ul>
  </nav>
</footer>

HTML:
“`

    <div>
        <ul id="bottom_ul">
            <li id="footer_links"><a href="">About</a></li>
            <li id="footer_links"><a href="">FAQ</a></li>
            <li id="footer_links"><a href="">Scores</a></li>
            <li id="footer_links"><a href="">History</a></li>
            <li id="footer_links"><a href="">Content</a></li>
        </ul>
    </div>

<footer class="footer">
        <nav>
            <ul id="footer_containter">
                <li id="footer_content"> Copyright</li>
                <li id="footer_content"> Mailing: 12344 Potato Ave. <br> Veggieville, USA 15227</li>
                <li id="footer_content">Social Media Links</li>
            </ul>
        </nav>
</footer>

Tags: css footer

Answers

Is there any reason why placing the bottom_ul inside the footer wouldn’t work for you?

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,700;1,300&family=Luckiest+Guy&display=swap');
#mainheader {
  background-color: rgb(39, 11, 85);
  color: white;
  width: 100%;
  height: 100px;
  text-align: center;
  font-size: 60px;
  word-spacing: 70px;
  position: fixed;
  font-family: 'Luckiest Guy', cursive;
  margin: 0px;
  padding: 0px 0px 30px 0px;
  top: 0;
  left: 0px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#top_ul {
  position: relative;
  margin-top: 120px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

li {
  float: left;
  display: inline;
  font-family: "Courier New", monospace;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: white;
}

#header_links,
#footer_links {
  border-style: solid;
  border-color: rgb(39, 11, 85);
  padding: 0px 0px 0px 3px;
}

#header_links:hover,
#footer_links:hover {
  background-color: rgb(39, 11, 85);
  color: white;
}

#footer_content {
  margin: 10px 150px 10px 100px;
  text-align: center;
  float: left;
  display: inline;
}

#bottom_ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(39, 11, 85);
  color: white;
  text-align: center;
  padding: 10px;
}

<footer class="footer">
  <ul id="bottom_ul">
    <li id="footer_links"><a href="">About</a></li>
    <li id="footer_links"><a href="">FAQ</a></li>
    <li id="footer_links"><a href="">Scores</a></li>
    <li id="footer_links"><a href="">History</a></li>
    <li id="footer_links"><a href="">Content</a></li>
  </ul>
  <nav>
    <ul id="footer_containter">
      <li id="footer_content">copyright info and such</li>
    </ul>
  </nav>
</footer>

Side note: Using ID for styling multiple elements in CSS is generally not recommended because an ID is meant to be unique within a page. I would recommend you use a class name to assign custom styling to your elements, rather than ID as suggested here.

Best thing to do is wrap the bottom in one Div, which essentially what Jacob suggests but I have tried to simplify your code in general. Especially if your using flex. Use as many Divs as you need in the whole page like top, nav, main content etc but try and contain them together. This example works for exactly want you want but you can change the height and different viewing aspects as you need. You maybe confusing the way flex work and also CSS in general. You only have to define values once like position: fixed in the containg Div unless you have to, it will only be hard to work out whats doing what.

Also, use the inspect code in developer tools in your browser, you can play with code and see results and whats doing what.

Sorry I have not done your exact spacing and margins but its it easy enough to change now.

CSS basics –

https://www.w3schools.com/css/css_intro.asp

Flexbox basics –

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope fully it works ok.

#mainheader {
  background-color: rgb(39, 11, 85);
  color: white;
  width: 100%;
  height: 100px;
  text-align: center;
  font-size: 60px;
  word-spacing: 70px;
  position: fixed;
  font-family: 'Luckiest Guy', cursive;
  margin: 0px;
  padding: 0px 0px 30px 0px;
  top: 0;
  left: 0px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}



li {
  font-family: "Courier New", monospace;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: white;
}

#header_links,
#footer_links {
  border-style: solid;
  border-color: rgb(39, 11, 85);
  padding: 0px 0px 0px 3px;
}

#header_links:hover,
#footer_links:hover {
  background-color: rgb(39, 11, 85);
  color: white;
}

#bottom_ul {
  display: flex;
  justify-content: space-between;
  text-align: center;
  z-index: 1;
}

#footer_content {
padding-bottom : 10px;
  text-align: center;
  justify-content: space-between;
    color: white;
}

.footer {
  background-color: rgb(39, 11, 85);
  z-index: 0;
}

#container {
  position: absolute;
  width: 100%;
  height: 150;
  bottom: 0;
  text-align: center;
  justify-content: space-between;

}

<div id="container">
<div name="footer" class="footer">
  <ul id="bottom_ul">
    <li class="footer_links"><a href="">About</a></li>
    <li class="footer_links"><a href="">FAQ</a></li>
    <li class="footer_links"><a href="">Scores</a></li>
    <li class="footer_links"><a href="">History</a></li>
    <li class="footer_links"><a href="">Content</a></li>
  </ul>
  
    <ul id="footer_content">
      <li class="footer_content">copyright info and such</li>
    </ul>

</div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – Trying to attach a div to a fixed footer

Answers