I keep having this trouble whenever I code.
I set the height to 100%. I want the div to reach the bottom of the page no matter how much information is in it with the exception of a 300px margin at the bottom.
Currently I have not set the margin at the bottom yet.
As you can see, it does not reach the bottom of the page and I want it too. I realize your computer it may, since my screen is fairly big.
The DIV is called "wrapper".
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Design At Ease - Home</title>
</head>
<body>
<div id="header">
<div id="logo"><a class="logoclass">DesignAtEase.com</a></div>
<ul id="headerlinks">
<li>Home</li>
<li>Coding</li>
<li>Graphics</li>
<li>Database</li>
<li>Support</li>
<li>More</li>
</ul>
</div>
<ul id="quicklinks">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>HTML</li>
<li>CSS</li>
<li>Photoshop</li>
</ul>
<div id="wrapper"></div>
</body>
</html>
CSS
body{
background:#fffffc;
margin: auto auto;
}
#header{
background:#e5e5e5;
height:35px;
width:100%;
border-bottom: 1px #c9c9c9 solid;
}
#headerlinks{
position:relative;
display:inline;
float:right;
margin-right:5%;
bottom:37px;
}
#headerlinks li{
display:inline;
padding-left:25px;
}
#headerlinks li a{
color:#777777;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#headerlinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#headerlinks li a:active{
color:#00B2EE;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#logo{
position:relative;
color:black;
margin-left:5%;
top:5px;
}
.logoclass{
color:#212121;
display:inline;
font-size:24px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
background:#e5e5e5;
border-bottom: 1px #c9c9c9 solid;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
top:-46px;
position:relative;
clear: right;
}
#quicklinks li{
position:relative;
top:2px;
display:inline;
padding-right:20px;
}
#quicklinks li a{
color:#777777;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks li a:active{
color:#00B2EE;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#wrapper{
position:relative;
top:-62px;
margin-left: auto;
margin-right: auto;
width:90%;
height:100%;
background:#fafafa;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
}
Here's the solution I always use.
http://www.cssstickyfooter.com/
You set:
html, body {height: 100%;}
Add your 300px bottom padding to main wrapper and then negative margin -300px to footer to overlay it above that padding.
Use a huge wrapper for everything except the footer:
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
Check out that link for more.
Cheers!
Using height 100% will take up 100% height of the container - so you'd need to set body and html to 100% height too.
I think that you wanna stick the #wrapper at bottom of the page (except some space from bottom)
I've changed your code in the fiddle: http://jsfiddle.net/FgGn5/
#wrapper{
position:absolute;
bottom:20px;
margin: 0 5%;
width:90%;
height:20px;
background:red;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
}
It needs an absolute position to stick to the bottom. Because of the absolute position, we are forced to specify margin-right and margin-left. Fortunately because of the percent base width, it's simple.
Hope it helps.
In my experience, you'll have the best success across the various common browsers by employing a JavaScript solution. I would strongly suggest using jQuery to make your life a little easier. Then you could essentially set the #wrapper DIV equal to the body height minus the #header and #quicklinks. It would look something like this:
var windowHeight = $(window).height();
var headerHeight = $('#header').outerHeight(false);
var linksHeight = $('#quicklinks').outerHeight(false);
var wrapperHeight = windowHeight - (headerHeight + linksHeight);
$('#wrapper').css('min-height', wrapperHeight);
Note: I'm making using of min-height, because the contents of the #wrapper DIV may actually already push it to the bottom of the screen.
See this fiddle for a quick and dirty example: http://jsfiddle.net/HLJJc/
Related
I don`t understand why I have margin from the left:
CSS:
html, body {
font-family:Myriad Pro, sans-serif;
font-size:18px;
color:#000;
margin:0px;
padding:0px;
background: url('./images/background.png');
}
#container {
width:890px;
height:530px;
margin:36px auto;
}
#userList {
width:228px;
height:355px;
float:right;
border:1px solid #cccccc;
}
.users li {
list-style-type:none;
background-color: #f2f2f2;
width:100%;
height:50px;
border-bottom: 1px solid #cccccc;
}
HTML:
<div id="userList"><ul class="users"><li><img src="./pic/none.png">Piet van Meerdijk</li><li><img src="./pic/none.png">Henk v/d Wal</li></ul></div>
When I put margin-left:-40px; in the CSS code the li item will be on the left now, but then have I a margin on the right. Why?
JSfiddle: http://jsfiddle.net/8Cwcy/
The <ul> tag has an automatic padding of 40px so you will need to change that to 0px:
ul {
padding: 0px;
}
This should work across all browsers.
Fiddle: http://jsfiddle.net/8Cwcy/3/
By default a lot of HTML elements have their own CSS rules in many browsers, and <ul> tag has a padding by default. You need to set padding:0px to de <ul> tag:
ul{
padding:0px;
}
http://jsfiddle.net/8Cwcy/1/
If you want to know more about CSS reset rules follow this link.
i'm having a bit of a brain melting problem. I have a master div thats pretty much the body (don't ask me why, i was getting desperate), and within that div is a head div, and within that div is the navigation bar. It's a clear hierarchy. The problem is, whenever i try to use percents to adjust the height and width of the navigation bar or the head div, nothing happens. Zip, zero, nada. I've tried changing the positions to absolute, relative, even static. I've removed the Master Div, i've reordered the hierarchy, but nothing seems to work. Eventually i got to the point where i figured out that when i used pixels, i got the change wanted. (Obviously had to do a bit of conversion). My first thought was hierarchy, but again, it's clear, with no missing ending tags, no weird parents or children.
HTML
<div id="master_div">
<div id="head_div">
<div id="title_div">
<p id="title">A Challenging Sew</p>
<p id="subtitle">A sewing room, Venti Starbucks and a iPod classic....with a weekly Monday update to keep me on task....lets see what happens....</p>
</div>
<div id="nav_bar">
<ul>
<li><a class="nav_bar_links" href="/home">Home</a></li>
<li><a class="nav_bar_links" href="/about">About</a></li>
<li><a class="nav_bar_links" href="/projects/2013">Projects for 2013/2014</a></li>
<li><a class="nav_bar_links" href="http://www.flickr.com/photos/91959855#N02/collections/72157632507621761/">Completed</a></li>
<li><a class="nav_bar_links" href="/archive">Archives</a></li>
<li><a class="nav_bar_links" href="/subscribe">Subscribe</a></li>
<li><a class="nav_bar_links" id="sign_in" href="#">Sign In</a></li>
</ul>
</div>
</div>
</div>
CSS
body
{
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 15px;
padding:0 !important;
}
#master_div
{
position:relative;
width:100%;
height:100%;
margin:0;
padding:0;
}
/* Navigation Page */
#scary_tree
{
position:absolute;
right:40%;
top:25%;
}
/* Home */
/* TODO: Make Responsive Home Page */
#head_div
{
background-color:whitesmoke;
position:absolute;
height:63px;
width:100%;
margin:0;
padding:0;
}
/* A Challenging Sew + A sewing room, Venti Starbucks and a iPod classic..*/
#title_div
{
background-color:white;
opacity: .7;
position:relative;
height:30px;
width:100%;
top:15px;
border-top: solid 1px #e7e7e7;
border-bottom: solid 1px #e7e7e7;
}
#title
{
position:absolute;
left:3%;
top:-9%;
font-size:100%;
margin:0;
padding:0;
}
#subtitle
{
position:absolute;
left:3%;
top:50%;
padding:0;
margin:0;
font-size:40%;
line-height: 1.2;
}
#nav_bar
{
position:absolute;
top:100%;
height:15%;
width:100%;
background-color:whitesmoke;
border-top: solid 1px #e7e7e7;
border-bottom: solid 1px #e7e7e7;
margin:0;
padding:0;
}
#nav_bar ul {
margin:0;
padding:0;
position:relative;
height:20px;
top:-8px;
}
#nav_bar li {
display:inline;
}
#nav_bar a:link,a:visited {
margin:0;
padding-left:5px;
text-decoration: none;
color: black;
font-size:50%;
}
#nav_bar #sign_in
{
position:absolute;
right:2%;
top:3px;
margin:0;
padding:0;
}
Note: I am using a reset file. However, i still have margin and padding :0 in there because it doesn't really seem to be taking hold.
Feel free to critique me on my coding style, still learning!
You might wan to try
min-height: 100%;
min-width: 100%;
position: absolute;
Found the cause, setting my master div's position to relative was the issue. Have no idea why but hey. It works now. Sort of.
I'm making a vertical unordered block list (inside a div), in which I have a border under each li. But somehow the borders don't fit the whole width of the div. I guess the ul has to exactly fit in the div in order to do this, but I don't know how.
This is screen shot of the div and the ul in it:
And this is the CSS code I'm using:
.stats-list li{
zoom: 1;
border-bottom:1px solid #ececec;
border-spacing:30px;
display:block;
text-align:left;
margin-bottom:20px;
color:#ffffff;
height:40px;
}
.stats-list ul{
list-style-type:none;
}
I've never come across this problem before. Does anyone have any solution? Thanks.
UPDATE (HTML code):
<div class="checkin-stats-right">
<ul class="stats-list">
<li>bla blaaa</li>
<li>blaaaa</li>
<li>blaaaaaa</li>
</ul>
</div>
Another update (CSS code of the parent div):
.checkin-stats-right{
background-color: #cfcfcf;
width: 320px;
height: 180px;
margin-right: auto;
float:left;
margin-left:25px;
margin-top:25px;
}
By default, the UL element usually has a padding-left set to a certain amount of pixels. Try this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.stats-list li {
zoom: 1;
border-bottom:1px solid #ececec;
border-spacing:30px;
display:block;
text-align:left;
margin-bottom:20px;
color:#ffffff;
height:40px;
}
ul.stats-list {
list-style-type:none;
padding-left: 0;
}
.checkin-stats-right {
background-color: #cfcfcf;
width: 320px;
height: 180px;
margin-right: auto;
float:left;
margin-left:25px;
margin-top:25px;
}
</style>
</head>
<body>
<div class="checkin-stats-right">
<ul class="stats-list">
<li>bla blaaa</li>
<li>blaaaa</li>
<li>blaaaaaa</li>
</ul>
</div>
</body>
</html>
.stats-list ul {
padding-left: 0;
}
Also note that "ul.stats-list" in your HTML doesn't match ".stats-list ul"
I have some code like this:
<div id="sidemenu">
<div id="sidemenuhdr">Beauty Courses</div>
<ul id="sidebarmenu">
<li><b>Professional Skincare & Facials</b></li>
<li><b>Spray Tanning</b></li>
<li><b>Eyelash Extensions</b></li>
<li><b>Electrical Facials</b></li>
<li><b>Holistic Facials</b></li>
<li><b>Diamond Peel Microdermabrasion</b></li>
<li><b>Natural Facelift Massage</b></li>
</ul>
</div>
With CSS like this:
#sidemenu{
width:316px;
float:left;
margin: 5px 10px 5px 0;
background-color:#ffe2d6;
border: 2px solid #3b003b;
display:block;
}
#sidebarmenu{
width:250px;
display:block;
padding:0px;
margin:2px;
list-style:none;
height:20px;
position:relative;
z-index:500;
font-family:arial, verdana, sans-serif;
}
#sidebarmenu li{
float:left;
}
#sidebarmenu li a{
display:block;
height:20px;
line-height:20px;
background:none;
color:#000000;
text-decoration:none;
font-size:14px;
font-weight:bold;
padding:5px 5px 5px 5px;}
Thing is, the result I'm getting is
Professional Skincare & Facials
Spray Tanning
Eyelash Extensions
Electrical Facials Holistic Facials
Diamond Peel Microdermabrasion
Natural Facelift Massage
It is putting Electrical Facials and Holistic Facials on the same line.
Any ideas?
Change #sidebarmenu li to this:
#sidebarmenu li{
clear:both;
}
That would do the trick!
The a elements are display:block, but your li elements are float: left. What exactly do you expect?
The short answer is to put in:
#sidebarmenu li{
float: left;
clear: left;
}
If you just remove the float, you won't get the pink stretch to the bottom. That's because you've set height: 20px on #sidebarmenu.
You should consider having as few styles as possible and to separate styling from markup (i.e. don't use <b> there, use font-weight.
Just remove #sidebarmenu li{float:left; } if you want to li element from top to bottom
i have made a toolbar using links placed inside listitems but the problem is that i cant get my toolbar to sit on a "div" placed below it. This is what i want to see.
but this is what am getting in firefoxNotice the space between my 'toolbar' and the div below it. Questionswhy is the code displaying properly in jsfiddle but displaying badly if i run it directly in fierfox?How can i solve the problem?
ps:
here is the html
<html><head>
<link rel='stylesheet' type='text/css' href='style.css'>
</head><body>
<div id='headercontainer'>
<h2>welcome to research club</h2>
<ul class='mainNavigation'>
<li><a class='currentPage' href='#'>Home</a></li>
<li><a href='#'>Meetups</a></li>
<li><a href='#'>Feedback</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
<div id='page'>
<p> this is a simple paragraph inside the page that is full of meaningless words but tries to populate a page . mama miya tolina galya mamba eno.</p>
</div><!--#page-->
</html>
Here is the css
div#headercontainer
{
position:relative;
}
div#page
{
margin:0px 50px 0px 50px;
padding:0 450px 0 30px;
position:relative;
background:#181C21;
clear:right;
color:white;
}
ul.mainNavigation
{
list-style:none;
margin:0px 50px 0px 0px;
position:absolute;
bottom:0; right:0;
padding:0;
}
ul.mainNavigation li
{
background:#192839;
color:white;
float:left;
height:1.6em;
padding:5px;
}
ul.mainNavigation li a
{
color:#bbbbbb;
display:block;
text-decoration:none;
height:1.6em;
font-size:0.9em;
}
ul.mainNavigation li a:hover
{
border-bottom:2px solid #0F67ff;
color:white;
}
ul.mainNavigation li a.currentPage
{
border-bottom:2px solid #176092;
}
I'm guessing that you haven't added a general selector to put all margins and paddings to 0, in this case you would need to add:
div#headercontainer {
position:relative;
padding:0px;
margin:0px;
}
or
*{
padding:0px;
margin:0px;
border:0px;
}
All browsers have some basic setups for non defined elements meaning I can set the I want all texts to be white instead of black and if you haven't set the color all the texts will be written in white.
Hoping this will help…
Use float and clear instead of position absolute.
Like this:
div#headercontainer{
float:left;
position:relative;
}
h2{
float:left;
}
ul.mainNavigation{
float:right;
}
#page{
clear:both;
float:left;
}
Hope this help... (This is my first answer on this website :S)