Issue
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>
Solution
The simplest solution would be to simply put your #bottom_ul
inside the #footer
div.
If you're not able to modify the HTML structure, you could position the ul the same way you do the footer, but with a different bottom
value to leave room for the footer:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
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;
display: flex;
justify-content: space-between;
width: 100%;
bottom: 4em;
}
#footer_content {
margin: 10px 150px 10px 100px;
text-align: center;
display: inline;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(39, 11, 85);
color: white;
text-align: center;
padding: 10px;
}
<div>
<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>
</div>
<footer class="footer">
<nav>
<ul id="footer_containter">
<li id="footer_content">copyright info and such</li>
</ul>
</nav>
</footer>
Answered By - Daniel Beck
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.