I've been trying to follow this post and this post on the below code with little success. When there is scrolling content in the div above the footer, the footer floats around in the middle of the scrollable content. I'm sure that there is a simpler solution than what I'm trying below:
.container {
width: 964px;
}
#footer {
background-color: #000000;
height: auto;
margin-top: 0px;
bottom: 0px;
}
#footer-container {
background-color: #000000;
}
#footer-container #footer {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/footer-logo.png") no-repeat scroll 20px 23px #000;
padding-bottom: 49px;
}
#footer .top {
border-bottom: 1px solid #7F7F7F;
margin-left: 82px;
padding-bottom: 16px;
padding-top: 33px;
}
#footer .text-logo {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/text-logo.png") no-repeat croll 0 0 transparent;
float: left;
height: 28px;
width: 176px;
}
#footer .slogan {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/slogan.png") no-repeat scroll 0 0 transparent;
float: right;
height: 12px;
margin-top: 14px;
width: 259px;
background-color: #000000;
}
#footer .links {
float: left;
margin-left: 81px;
margin-top: 13px;
}
#footer .links a {
color: #fff;
}
#footer .links li {
font-size: 12px;
font-weight: bold;
margin-bottom: 13px;
text-decoration: underline;
}
#footer .social {
float: right;
margin-left: 37px;
margin-right: 5px;
margin-top: 14px;
}
#footer .social li {
margin-bottom: 7px;
text-decoration: underline;
}
#footer .social a {
color: #FFFFFF;
font-size: 12px;
padding-left: 26px;
}
#footer .social .facebook {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 0px 4px transparent;
}
#footer .social .twitter {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 0px -20px transparent;
}
#footer .social .youtube {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 4px -42px transparent;
padding-left: 15px;
}
#footer .social .itunes {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 4px -66px transparent;
padding-left: 15px;
}
#footer .updated {
clear: right;
color: #9B9B9B;
float: right;
font-size: 10px;
margin-top: 14px;
}
#footer-container ul li {
text-align: left
}
<div id="footer-container" style="margin: 0 auto; width: auto;" align="center" background-color="#000000" ;>
<div id="footer" class="chrome-center clearfix">
<div class="top clearfix">
<a href="http://www.me.com/">
<div class="text-logo"></div>
</a>
<div class="slogan"></div>
</div>
<ul class="links">
<li>Frequently Asked Questions
</li>
<li>Website Policies
</li>
<li>Contact Us
</li>
</ul>
<ul class="social">
<li class="youtube">YouTube
</li>
<li class="itunes">iTunes
</li>
</ul>
<ul class="social">
<li class="facebook">Facebook
</li>
<li class="twitter">Twitter
</li>
</ul>
<div class="updated">
<p>Last Updated: 03/06/2015</p>
</div>
</div>
<!--! end of #footer-->
</div>
<!--! end of #footer-container -->
Related
I am trying to create my own little Code Player. Similar to jsfiddle site. Right now I am having trouble with CSS.
I would like to center my menubar ( the buttons HTML, CSS, Javascript, result) in the topbar.
I just started learning HTML, CSS and Javascript. Do you have an idea how I can solve this problem?
#header {
width: 99%;
height: 50px;
background-color: steelblue;
margin-top: -10px;
margin-left: -10px;
}
#appname {
padding: 20px 0px 10px 20px;
float: left;
color: white;
font-size: 20;
font-style: italic;
}
#run {
float: right;
margin: 20px 20px 10px 0px;
}
#menu {
width: 500px;
margin: 0 auto;
padding-top: -1px;
}
#menu ul {
height: 30px;
}
#menu li {
list-style: none;
float: left;
height: 20px;
padding: 5px 10px;
border: 1px solid grey;
background-color: white;
}
#menu li:hover {
background-color: darkgrey;
}
.break {
clear: both;
}
<div id="header">
<div id="appname">
<b>Code Player</b>
</div>
<div id="run">
<button>RUN</button>
</div>
<div id="menu">
<ul>
<li id="buttonHTML">HTML</li>
<li id="buttonCSS">CSS</li>
<li id="buttonJS">Javascript</li>
<li id="buttonResult">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
Use this styles for your menu:
#menu {
width: 500px;
margin: 0 auto;
padding-top: -1px;
display: flex;
justify-content: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
No need for the width and margin on #menu. Then you can use display: flex; justify-content: center; padding: 0; on #menu ul to center it's contents. I also removed the floats from #menu li because they're no longer necessary.
#header {
width: 99%;
height: 50px;
background-color: steelblue;
margin-top: -10px;
margin-left: -10px;
}
#appname {
padding: 20px 0px 10px 20px;
float: left;
color: white;
font-size: 20;
font-style: italic;
}
#run {
float: right;
margin: 20px 20px 10px 0px;
}
#menu {
padding-top: -1px;
}
#menu ul {
display: flex;
justify-content: center;
padding: 0;
}
#menu li {
list-style: none;
height: 20px;
padding: 5px 10px;
border: 1px solid grey;
background-color: white;
}
#menu li:hover {
background-color: darkgrey;
}
.break {
clear: both;
}
<div id="header">
<div id="appname">
<b>Code Player</b>
</div>
<div id="run">
<button>RUN</button>
</div>
<div id="menu">
<ul>
<li id="buttonHTML">HTML</li>
<li id="buttonCSS">CSS</li>
<li id="buttonJS">Javascript</li>
<li id="buttonResult">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
If you apply text-align: center to your header and change the div containing the list to display:inline-block it should do the trick. I also removed the padding, margin, and width:
#header {
width: 99%;
height: 50px;
background-color: steelblue;
margin-top: -10px;
margin-left: -10px;
text-align:center;
}
#appname {
padding: 20px 0px 10px 20px;
float: left;
color: white;
font-size: 20;
font-style: italic;
}
#run {
float: right;
margin: 20px 20px 10px 0px;
}
#menu {
margin: 0 auto;
padding-top: -1px;
display:inline-block;
}
#menu ul {
height: 30px;
padding:0;
margin:0;
}
#menu li {
list-style: none;
float: left;
height: 20px;
padding: 5px 10px;
border: 1px solid grey;
background-color: white;
}
#menu li:hover {
background-color: darkgrey;
}
.break {
clear: both;
}
<div id="header">
<div id="appname">
<b>Code Player</b>
</div>
<div id="run">
<button>RUN</button>
</div>
<div id="menu">
<ul>
<li id="buttonHTML">HTML</li>
<li id="buttonCSS">CSS</li>
<li id="buttonJS">Javascript</li>
<li id="buttonResult">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
Can someone help me align the text inside li? I tried vertical-align: middle; but it doesn't seem to work.
Here is my code.
#menu {
clear: both;
border-color: #004F7B;
background-color: #414446;
border-width: 1px 0px 0px;
border-style: solid;
width: 100%;
text-align: center;
overflow: hidden;
height: 120px;
position: absolute;
z-index: 1000;
}
#menu .menu-content {
text-align: center;
max-width: 980px;
margin: 0px auto;
color: white;
line-height: 70px;
font-size: 1.5em;
}
#menu li {
float: left;
width: 200px;
}
#menu ul,
li {
list-style-type: none;
}
#menu li a {
color: #E5EAED;
text-transform: uppercase;
text-decoration: none;
float: left;
display: inline;
padding: 0px 30px;
height: 60px;
margin: 10px 1px 0px;
line-height: 60px;
}
#menu li.logo {
margin: 0px 190px 0px -40px;
width: 180px;
text-align: center;
}
<div class="wrapper">
<div class="custom-header">
<div id="menu">
<div class="menu-content">
<ul>
<li class="logo">
<img src="" alt="">
</li>
<li>Racing
</li>
<li>Bike
</li>
<li>Car Parking
</li>
</ul>
</div>
</div>
</div>
</div>
Here is an image for reference:
As i understand from the image you provided, you are trying to maintain equal distance between text and you have given width 200px to li and that is why you text is not aligning properly. Try below css , hope this will help you.
#menu {
clear: both;
border-color: #004F7B;
background-color: #414446;
border-width: 1px 0px 0px;
border-style: solid;
width: 100%;
text-align: center;
overflow: hidden;
height: 120px;
position: absolute;
z-index: 1000;
}
#menu .menu-content {
text-align: center;
max-width: 980px;
margin: 0px auto;
color: white;
line-height: 70px;
font-size: 1.5em;
}
#menu li {
float: left;
width: auto;
text-align: center;
}
#menu ul, li {
list-style-type: none;
}
#menu li a {
color: #E5EAED;
text-transform: uppercase;
text-decoration: none;
float: none;
display: inline;
padding: 0px 30px;
height: 60px;
margin: 10px 1px 0px;
line-height: 60px;
}
#menu li.logo {
margin: 0px 190px 0px -40px;
width: 180px;
text-align: center;
}
<div class="wrapper">
<div class="custom-header">
<div id="menu">
<div class="menu-content">
<ul>
<li class="logo"><img src="" alt=""></li>
<li>Racing</li>
<li>Bike</li>
<li>Car Parking</li>
</ul>
</div>
</div>
</div>
</div>
You might consider using display:flex
#menu {
border-color: #004F7B;
background-color: #414446;
border-width: 1px 0px 0px;
border-style: solid;
}
#menu .menu-content {
}
.menu-content ul {
display: flex;
justify-content:center;
}
.menu-content ul li {
list-style-type: none;
margin:25px;
}
#menu li a {
color: #E5EAED;
text-transform: uppercase;
text-decoration: none;
}
#menu li.logo {
}
<div class="wrapper">
<div class="custom-header">
<div id="menu">
<div class="menu-content">
<ul>
<li class="logo">
<img src="" alt="">
</li>
<li>Racing
</li>
<li>Bike
</li>
<li>Car Parking
</li>
</ul>
</div>
</div>
</div>
</div>
Hope this helps
Ok so something wierd is happenning to my page.
I have a navigation bar which looks like this.
Now when I add a form input anywhere in the page, it just suddenly breaks.
Also, it only happens in chrome and is fine in other browsers.
what is causing this?.. I checked all the components and found that if i remove the input box , it becomes fine.
/*Layout*/
.wrapper {
background: red;
max-width: 80em;
/*1280px*/
margin: 0 auto;
}
.header {
background: white;
padding-left: 45px;
/*3.515625%;*/
}
.logo {
float: left;
padding-top: 17px;
/*17px*/
padding-bottom: 16px;
/*16px*/
}
.header-right {
float: right;
}
.navigation {
float: left;
padding: 0 12px;
}
.menu-btn {
float: right;
}
.slider {
height: 590px;
background: grey;
}
img {
display: block;
}
/*style for navigation bar*/
.navigation ul {
list-style: none;
}
.navigation ul li {
float: left;
padding: 0 15px;
background: ;
}
.navigation ul li a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 9px;
color: #49443d;
background: url('../images/menu-arrow.png') right center no-repeat;
padding-right: 7px;
line-height: 59px;
}
.navigation ul li a:hover {
color: #fe444b;
background: url('../images/menu-arrow-active.png') right center no-repeat;
}
.navigation .active a {
color: #fe444b;
background: url('../images/menu-arrow-active.png') right center no-repeat;
}
.search-menu {
float: left;
width: 57px;
height: 59px;
background: url('../images/search-icon.png') center center no-repeat;
border-left: 1px solid #ededed;
}
.search-menu a {
display: block;
}
.shopping-cart {
float: left;
width: 56px;
background: url('../images/shopping-cart.png') 17px center no-repeat;
border-left: 1px solid #ececec;
border-right: 1px solid #7d7d7d;
}
.cart-item-no {
line-height: 59px;
padding-right: 14px;
float: right;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #575861;
}
.burger-btn {
float: left;
width: 56px;
height: 59px;
background: url('../images/burger-btn.png') center center no-repeat;
background-color: #333333;
border-left: 1px solid #161616;
border-right: 1px solid #161616;
}
<div class="wrapper">
<!-- header starts here-->
<div class="header clrfix">
<div class="logo">
<a href="#">
<img src="images/logo.png">
</a>
</div>
<div class="header-right clrfix">
<div class="navigation">
<ul>
<li class="active">HOME
</li>
<li>PAGES
</li>
<li>BLOG
</li>
<li>PORTFOLIO
</li>
<li>ELEMENTS
</li>
<li>SHOP
</li>
</ul>
</div>
<div class="menu-btn clrfix">
<a href="#">
<div class="search-menu">
</div>
</a>
<a href="#">
<div class="shopping-cart">
<span class="cart-item-no">
0
</span>
</div>
</a>
<a href="#">
<div class="burger-btn">
</div>
</a>
</div>
</div>
</div>
<!-- slider starts here -->
<div class="slider">
<form>
<input type="text" name="email" placeholder="Your email">
</form>
</div>
</div>
You need to add float: left and width: 100% to your header class to achieve what you need. Also you need to remove the padding-left from header class and add padding individually to the logo class to get rid of any bottom scroll issue. Try the below code and let me know everything is working perfectly or not.
/*Layout*/
.wrapper {
background: red;
max-width: 80em;
/*1280px*/
margin: 0 auto;
}
.header {
background: white;
float: left;
width: 100%;
/*3.515625%;*/
}
.logo {
float: left;
padding: 16px;
}
.header-right {
float: right;
}
.navigation {
float: left;
padding: 0 12px;
}
.menu-btn {
float: right;
}
.slider {
height: 590px;
background: grey;
}
img {
display: block;
}
/*style for navigation bar*/
.navigation ul {
list-style: none;
}
.navigation ul li {
float: left;
padding: 0 15px;
background: ;
}
.navigation ul li a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 9px;
color: #49443d;
background: url('../images/menu-arrow.png') right center no-repeat;
padding-right: 7px;
line-height: 59px;
}
.navigation ul li a:hover {
color: #fe444b;
background: url('../images/menu-arrow-active.png') right center no-repeat;
}
.navigation .active a {
color: #fe444b;
background: url('../images/menu-arrow-active.png') right center no-repeat;
}
.search-menu {
float: left;
width: 57px;
height: 59px;
background: url('../images/search-icon.png') center center no-repeat;
border-left: 1px solid #ededed;
}
.search-menu a {
display: block;
}
.shopping-cart {
float: left;
width: 56px;
background: url('../images/shopping-cart.png') 17px center no-repeat;
border-left: 1px solid #ececec;
border-right: 1px solid #7d7d7d;
}
.cart-item-no {
line-height: 59px;
padding-right: 14px;
float: right;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #575861;
}
.burger-btn {
float: left;
width: 56px;
height: 59px;
background: url('../images/burger-btn.png') center center no-repeat;
background-color: #333333;
border-left: 1px solid #161616;
border-right: 1px solid #161616;
}
Check out this Fiddle for more clarifications.
This question was posted a few years ago By Sally but she solved it herself and her solution is not working for me.
I have gone through practically all of the relevant sticky footer pages on this site and a bunch from other places but I cannot find anything answering this question. I am sure it has to do with my layout but I have tried every way I have researched and can think of and this is the closest I could get to a sticky footer I am happy with.
Here is the HTML I am working with.
<body>
<div id="container">
<header class="main-header">
<img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<body class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs">
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</body>
<footer class="footer">
<div class="quote">
<h6>""</h6>
<p> - </p>
</div>
</footer>
</div>
</body>
and the CSS
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content: " ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover{
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
.footer .quote {
float: right;
color: rgb(56, 56, 56);
}
.footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
.footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
Here is my JSfiddle
In my normal full screen the three 300px x 300px squares fit in a line and everything is well and good but when the window size is reduced (like the one in my fiddle) the squares turn into two lines and are pushed off the screen. The footer stays in place at the bottom of the screen until you scroll then it just stays put and does not follow the bottom of the page.
I would like the footer to either get pushed to the bottom of the screen when the squares get forced into two lines.
-or-
Stay at the bottom of the screen and scroll with the user.
Any help would be very much appreciate!
I removed the excess body and turned it into a div. I ended the container before the footer and added a push div, equal in height to the footer. Seems to work now. Check out the fiddle
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content:" ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover {
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
.push{height:60px;}
footer {
position: relative;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
footer .quote {
float: right;
color: rgb(56, 56, 56);
}
footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
<body>
<div id="container">
<header class="main-header"> <img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<div class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs"> <a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</div>
</div>
<div class="push"></div>
<footer class="footer">
<div class="quote">
<h6>"Hello"</h6>
<p>-</p>
</div>
</footer>
</body>
I have a header on my website, with a list in it. The list is aligned properly on 100% size, but when I ctrl-scroll to expand, the text in the list goes out of the header area.
HTML
body {
margin: 0;
}
.header {
background-color: #606060;
text-align: center;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 125%;
height: 4.5%;
width: 100%;
line-height: 50%;
margin-left: auto;
margin-right: auto;
position: fixed;
overflow: hidden;
top: 0px;
}
#headerLinks {
list-style-type: none;
text-shadow: 3px 3px 3px #aaaaaa;
}
#headerLinks li {
display: inline-block;
padding-left: 2%;
padding-right: 2%;
text-align: center;
color: #ffffff;
}
#headerLinks a {
color: #ffffff;
text-decoration: none;
}
#headerLinks a:hover {
color: #cccccc;
}
.introContent {
background-color: #cccccc;
height: 40%;
width: 100%;
margin-top: 2%;
}
<div class="header">
<div id="headerLinks">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
I want the list text to remain inside the header at all times.
EDIT: If I remove the height, since there is a position:fixed; the other containers will get overlapped by the header on zooming.
In your .header class, remove the height attribute - the browser will set the height of that div based on the content inside it (in this case, your menu items).
body {
margin: 0;
}
.header {
background-color: #606060;
text-align: center;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 1.25em;
height: 2.5em;
width: 100%;
line-height: 50%;
margin-left: auto;
margin-right: auto;
position: fixed;
overflow: hidden;
top: 0px;
}
#headerLinks {
list-style-type: none;
text-shadow: 3px 3px 3px #aaaaaa;
}
#headerLinks li {
display: inline-block;
padding-left: 2%;
padding-right: 2%;
text-align: center;
color: #ffffff;
}
#headerLinks a {
color: #ffffff;
text-decoration: none;
}
#headerLinks a:hover {
color: #cccccc;
}
.introContent {
background-color: #cccccc;
height: 40%;
width: 100%;
margin-top: 2%;
}
<div class="header">
<div id="headerLinks">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
If you want to be able to scale everything relatively when you zoom you should use em units instead of percentages.