Can someone explain why min-height:100% on the #content <div> is not working?
Below is the CSS style:
body {
margin:0;
padding:0;
}
ul {
background-image:url(../../globavailable/images/headers/nav2.png);
height:50px;
width:100%;
margin:0;
padding:0;
top:0;
position:fixed;
}
li {
float:left;
list-style-type: none;
}
.listclass {
color:#4571C3;
padding-left:28px;
padding-right:28px;
text-decoration:none;
line-height:47px;
font-size:16px;
background-image:url(../../globavailable/images/headers/line2.png);
background-repeat: no-repeat;
display:block;
}
.listclass:hover {
color:white;
background-color:#4571C3;
/*font-weight:bold;*/
}
ul input[type="text"] {
margin-top:12px;
margin-left:210px;
border: 2px solid silver;
font-family: sans-serif;
font-size: 14px;
}
#content {
width:65%;
min-height:100%;
height:auto;
margin-left: auto;
margin-right: auto;
border-right: 1px dashed #D0D0D0;
border-left: 1px dashed #D0D0D0;
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height:50px;
color:white;
font-weight:border 2px;
text-align:center;
background-color:black;
vertical-align: middle;
line-height: 50px;
/* the same as your div height */
}
.submit-class {
border-radius: 5px;
border: 0;
width: 80px;
height:25px;
font-weight:bold;
font-family: Helvetica, Arial, sans-serif;
font-size:14px;
background: #088A29;
}
.submit-class:hover {
background: #58FA58;
}
Below is the main body HTML:
<nav>
<ul>
<li><img src="../../globavailable/images/z.png" alt="Smiley face" height="47" width="57"></li>
<li>Home</li>
<li>Blog</li>
<li>Events</li>
<li>Contact Us</li>
<li>Members</li>
<li>My Profile</li>
<li>Logout</li>
<li><input type="text" placeholder="Search..."></li>
</ul>
</nav>
<br>
<div id="content"></div>
<!-- content -->
</div> <!-- content -->
<div id="footer">All rights reserved #Chrys</div>
</body>
</html>
You need the parent element to have a size.
Add:
html, body{
height:100%;
}
Without that, the child element doesn't know what 100% height means, as in size = 100% of undefined.
HTH,
-Ted
You need to set the height of the html and body tags to 100% in order for this to work.
html, body {
height:100%
}
Body height needs to be 100% - anything outside the content area will affect this.
A div without content with a percentage of height will not have any visual existence on the page. You need to either make it a set height, have the parent have a height (body) or set height (other div) or put content in it that equals 100% of the height you want to see.
Related
hi i just wanted to code a site like BBC just for practice while doing this i got an error in li item of a ul i don't know the problem but when i give it a border-right the border take more height then the original menu, i'm pasting my code here please check it and help me??
in simple words i want list item's border to be equal to the borders of "Signin" and "logo" div
<html>
<head>
<title>BBC</title>
<style>
body{
margin:0;
font-family:Arial,Helvetica,freesans,sans-serif;
}
#top{
width:100%;
height:50px;
}
.keepcenter{
width:1100px;
margin: 0 auto;
}
#logo{
border-right:1px solid #CCCCCC;
float:left;
padding-right:5px;
height:100%;
}
#signin{
font-weight:bold;
font-size:0.9em;
border-right:1px solid #CCCCCC;
width:200px;
height:100%;
float:left;
}
#signin img{
position:relative;
top:5px;
margin-left:15px;
}
#signin p{
display:inline;
position:relative;
top:1px;
padding-left:5px;
}
#menutop{
float:left;
}
#menutop ul{
list-style-type:none;
margin:0;
padding:0;
}
#menutop li{
padding:15px 20px 10px 20px;
display:inline;
font-weight:bold;
font-size:0.9em;
float:left;
border-right:1px solid #CCCCCC;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div class="keepcenter">
<div id="logo">
<img src="images/logo.jpg" />
</div>
<div id="signin">
<img src="images/signicon.png" /><p>Sign In</p>
</div>
<div id="menutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Simply remove the top and bottom padding from the list items.
body {
margin: 0;
font-family: Arial, Helvetica, freesans, sans-serif;
}
#top {
width: 100%;
height: 50px;
}
.keepcenter {
width: 1100px;
margin: 0 auto;
}
#logo {
border-right: 1px solid #CCCCCC;
float: left;
padding-right: 5px;
height: 100%;
}
#signin {
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #CCCCCC;
width: 200px;
height: 100%;
float: left;
}
#signin img {
position: relative;
top: 5px;
margin-left: 15px;
}
#signin p {
display: inline;
position: relative;
top: 1px;
padding-left: 5px;
}
#menutop {
float: left;
}
#menutop ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menutop li {
padding: 0 20px;
display: inline;
font-weight: bold;
font-size: 0.9em;
float: left;
border-right: 1px solid #CCCCCC;
height: 100%;
}
<div id="container">
<div id="top">
<div class="keepcenter">
<div id="logo">
<img src="http://lorempixel.com/40/40" alt="BBC" />
</div>
<div id="signin">
<img src="http://lorempixel.com/g/10/10" alt="" />
<p>Sign In</p>
</div>
<div id="menutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
The list is floating though, which means that its baseline is not necessarily the same as the #signin div. In my snippet, the img in the div is small enough to not have an effect, but depending on its size, the baseline of the div (and therefore the position of the p) will move down. You may have to compensate for that in the ul.
I currently have a Header in my HTML which is a Unordered List with List Items display = inline. What I am try to accomplish is to spread each of the 5 items into an equaled space (20% Width for each) and step them centered in their respective spaces. I was able to accomplish this with a lot of ease on the Footer, but instead of List Items, I used Divs for each of the Options. Can anyone help me do the same with list? I can redo it as Divs, but I'd like to at least know how to make the list work.
How it should be
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
}
#header li {
display:inline;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
I hope I was able to illustrate what I am trying to accomplish, but if it is still unclear please let me know. Thanks in advance for any help.
You can try like this ,I hope it will helps you.
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
}
#header .holder {
width:100%;
float:left;
}
#header ul {
display: table;
margin: 0;
padding: 0;
width: 100%;
}
#header a {
color: #ffffff;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#header li {
display: table-cell;
padding: 5px 0;
position: relative;
text-align: center;
vertical-align: middle;
width: 20%;
}
#header li:after {
border-left: 1px solid #2f477a;
content: "";
height: 20px;
position: absolute;
right: 0;
top: 8px;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
ul {
display: flex;
}
#header li {
...
flex: 1;
display: flex;
align-items: center;
justify-content: center;
...
}
https://jsfiddle.net/234zzgn7/
Add this css. Ofcourse this is using flexbox which is something that I found to be extremely awesome. But you should investigate whether your users support it or not.
http://caniuse.com/#search=flexbox
Here try this. Changes are on #header li and #header a
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
display:block;
width:100%;
box-sizing:border-box;
}
#header li {
display:inline-block;
box-sizing:border-box;
width:20%;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
I've been working on a site that I've been using ems and % in as I want to make it responsive. It's my first time attempting this.
I had the same site working using px.
I'm having this issue where content in the header and footer is not re-sizing properly. The content moves down past their containers or overlaps other content.
I.e. say in my footer i have the parent content set to 100% width and then the children divs set to various percentages of it.
The children then move down out of their containers and even the footer itself when I re-size.
Here's My JsFiddle
In my code here I've just put the footer code as it will just look messy if I put it all
<footer class="site-footer">
<div class="leftfoot">
<div class="footercontent">
<div class="logocopyright">
Tali.Zorah 2015 ©
</div>
</div>
</div>
<div class="rightfoot">
<div class="legal">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>LEGAL NOTICE</li>
<li>PRIVACY POLICY</li>
</ul>
</div>
<div class="social">
<ul class="socicons">
<li>
<a class="facebook" href="https://www.facebook.com"> <img src="http://placehold.it/350x150"></a>
</li>
<li>
<a class="twitter" href="https://www.twitter.com"><img src="http://placehold.it/350x150"></a>
</li>
<li>
<a class="instagram" href="https://www.instagram.com"><img src="http://placehold.it/350x150"></a>
</li>
</ul>
</div>
</div>
</footer>
And the footer CSS:
.footercontent{
position:absolute;
min-width:100%;
max-width:100%;
}
.logofooter{
float:left;
margin-left:2%;
min-width: 10%;
max-width: 10%;
min-height:100%;
}
.mysitefooter-logo {
min-height: 100%;
min-width:10%;
max-width:100%;
margin-top: -1%;
margin-right:1%;
}
.logocopyright{
float:left;
margin-top:5%;
margin-left:2%;
min-width:100%;
padding-top:1%;
}
.leftfooter{
min-width:10%;
max-width:15%;
float:left;
}
.rightfooter{
min-width:85%;
max-width:90%;
float:right;
}
.logocopyright a {
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size:.6em;
}
.logocopyright a:hover{
color: #FFF;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background: #1874CD;
}
.legal{
background-color:#009;
min-width:70%;
max-width:80%;
float:left;
}
.legal a:hover {
color: #FFF;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background: #1874CD;
}
.legal ul li {
display:inline-block;
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
font-size:.8em;
margin-left:8%;
min-width:10%;
max-width:100%;
}
.legal ul > :first-child {
margin-left:5%;
}
.legal a {
font-size:1em;
color:#FFF;
}
.social{
min-width:15%;
max-width:20%;
float:right;
margin-top: -4%;
color:#000000;
}
.social li {
display:inline-block;
}
.socicons{
min-width:80%;
max-width:100%;
}
.socicons li{
display:inline;
}
.facebook{
min-width:8%;
max-width:10%;
}
.facebook img
{
min-width:8%;
max-width:20%;
}
.twitter{
min-width:8%;
max-width:10%;
}
.twitter img
{
min-width:8%;
max-width:20%;
}
.instagram{
min-width:8%;
max-width:10%;
}
.instagram img
{
min-width:8%;
max-width:20%;
}
If you want a responsive site absolute positioning is not a good idea. Just use a width of 100% and try using viewport(vw) width instead of ems.
maybe I fixed a little. I updated:
'id' into footer tag.
little jscript.
here's my js code:
var footer = document.getElementById("guestAttempt");
footer.setAttribute("float","left");
footer.setAttribute("margin-left","3em");
footer.setAttribute("margin-bottom","0em");
https://jsfiddle.net/unt5zbL8/6/embedded/result/
I have a div(bottom) at the bottom of my page.
It has a background image and another div(bottomnav) with an unordered list for the navigation.
When I change bottomnav's position to absolute the entire bottom div gets shifted up into the div above it. also, i have another div called cc. that one i can change to absolute without any problems.
This is my code:
html
<div id="bottom">
<div id="bottomnav">
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div id="cc">©2014 European Homemakers</div>
and this is my css:
#bottom
{
background-image:url(../Images/home_bottom.png);
width: 960px;
margin-left:auto;
margin-right:auto;
min-height: 100px;
background-repeat:no-repeat;
position:relative;
}
#bottomnav
{
font-size: 20px;
}
#bottomnav ul {
list-style-type: none;
height:auto;
}
#bottomnav li
{
display:inline;
padding:20px;
}
#bottomnav a {
text-decoration: none;
color: #FF9200;
}
#cc
{
text-align:right;
color: #FF9200;
position:absolute;
bottom: 5px;
right: 5px;
font-size:20px;
}
Im pretty new to web design so Im not sure why changing bottomnav to absolute changes the layout.
Working Fiddle
First of all you are not closing #bottom div, Secondly as #bottom is position: relative so any thing inside it will be absolute relative to this div. Therefore, remove footer div out of it.
HTML
<div id="bottom">
<div id="bottomnav">
<ul>
<li>Home
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="cc">©2014 European Homemakers</div>
CSS
#bottom {
background-image:url(../Images/home_bottom.png);
width: 960px;
margin-left:auto;
margin-right:auto;
min-height: 100px;
background-repeat:no-repeat;
position:relative;
}
#bottomnav {
font-size: 20px;
}
#bottomnav ul {
list-style-type: none;
height:auto;
}
#bottomnav li {
display:inline;
padding:20px;
}
#bottomnav a {
text-decoration: none;
color: #FF9200;
}
#cc {
color: #FF9200;
font-size:20px;
position: absolute;
bottom: 5px;
right: 5px;
}
If you are expecting for footer to always be at bottom regards the content, then this will help you.
DEMO
You need to change you structure.
As like the title, here is my case.
The header part is ok for me, i manage to center it, but the menu part, i just cant figure it.
This is the HTML Part:
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<div id="menu">
<div id="menu_button">
HOME
</div>
<div id="menu_button">
PRODUCTS
</div>
<div id="menu_button">
GALLERY
</div>
<div id="menu_button">
INFO
</div>
<div id="menu_button">
ABOUT US
</div>
</div>
</div>
Here is the CSS part:
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
float:left;
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu #menu_button{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu #menu_button a:link, #container #menu #menu_button a:visited{
text-decoration:none;
color:inherit;
}
#container #menu #menu_button:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
Looking forward to your reply, thanks.
it is semantically better not to use div for menu (instead use followed by
it's wrong to repeat many times an id (instead use classes, or combine css selectors - for your html #menu-button is the same as #menu div).
Here the html + css corrected with the centered menu
<html>
<head>
<style>
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu li{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu li a:link, #container #menu li a:visited{
text-decoration:none;
color:inherit;
}
#container #menu li:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
/*centered menu */
nav ul{
margin: 10px auto;
width: 755px;
}
</style>
</head>
<body
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<nav id="menu">
<ul>
<li>
HOME
</li>
<li>
PRODUCTS
</li>
<li>
GALLERY
</li>
<li>
INFO
</li>
<li>
ABOUT US
</li>
</ul>
</nav>
</div>
</body>
</html>
The centering is obtained giving a specific width to the ul (it could have also been a div or whatever) and giving it an "auto" margin for right and left.
well floating something will mean its taken out of the flow (somewhat) and just, as the title suggests, floating left.
try and remove it:
float:left;
So:
#container #menu {
background: none repeat scroll 0 0 #FFC341;
float: left;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
#container #menu #menu_button {
background: none repeat scroll 0 0 #FFC341;
border-right: thin solid #FF9900;
color: #000000;
display: inline-block;
float: left;
font-size: 18px;
margin: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 150px;
}
Since the width for #menu is set as 100%, it takes up the whole width of the parent element, i.e #container, whose width is auto, i.e the width of the window.
So, you need to set the width of #menu and align it to the center, by getting rid of the float and the following changes :
#container #menu {
width: 755px; /* 151px x 5 elements */
margin:0 auto; /* Instead of padding */
position:relative;
overflow:hidden;
}
and for the yellow background, just wrap your #menu around with a #menuWrapper div, and also as Italy specified, id should be unique on a page. Use class instead.
HTML :
<div id="menuWrapper">
<div id="menu">
<div class="menu_button">
HOME
</div>
<div class="menu_button">
PRODUCTS
</div>
<div class="menu_button">
GALLERY
</div>
<div class="menu_button">
INFO
</div>
<div class="menu_button">
ABOUT US
</div>
</div>
</div>
CSS :
#menuWrapper {
background:#ffc341;
}
Also, it's better to use ul-li elements for the menu items instead of div
Full HTML + CSS : JSFiddle
You may try to modify the container menu in the css part
#container #menu
{
margin:auto;
width:85%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
Try this and comment here for any issues..