Given the following code, how can I make the height of wrapper div extend all the way down.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
.wrapperDiv {
position: relative;
width: 800px;
background-color: #FFFF00;
margin-right: auto;
margin-left: auto;
}
.content {
position: absolute;
width: 95%;
top: 55px;
background-color: #008000;
}
.footer {
position: absolute;
width: 95%;
height: 50px;
background-color: #FF00FF;
bottom: 5px;
}
.header {
position: absolute;
width: 95%;
height: 50px;
background-color: #CCFF33;
top: 5px;
}
</style>
</head>
<body>
<div id="wrapper" class="wrapperDiv">
<div id="layer2" class="footer">
3</div>
<div id="layer3" class="header">
1</div>
<div id="layer1" class="content">
2<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
END</div>
</div>
</body>
</html>
Add this:
html, body, .wrapperDiv {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
You will then have problems with your wrapperDiv being wider than the divs it contains. Not sure what you want to do about that.
You can use javascript to get the offsetheight of the absolute element and add it to the height of your parent div.
Related
text-align:center isn't working to center my buttons. I've also tried "margin:0px auto" but that didn't work either. I'm just trying to stack the buttons vertically in the middle of the page with a small space between them. How do I do it?
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align:center;
margin:0px auto;
background-image:url("one1.jpg");
background-repeat:repeat-x;
}
.bf_button {
display:block;
background: url(bf_button_fon_right.gif) no-repeat 100%;
float: left;
outline: none;
padding-right: 32px;
text-decoration: none;
}
.bf_button:hover {
text-decoration: none;
}
.bf_button span{
display:block;
background: url(bf_button_fon_left.gif) no-repeat;
white-space: nowrap;
line-height: 74px;
padding: 0 0 0 32px;
font-family: Arial, Verdana;
font-size: 34px;
font-weight: normal;
color: rgb(0,0,0);
text-transform: none;
}
</style>
</head>
<body>
<img src="one.jpg"></img>
</body>
<div style="text-align:center;">
<br /> <br /> <br />
<span>Time & Attendance (Kronos)</span>
<br /> <br /> <br />
<span>401K</span>
<br /> <br /> <br />
<span>Medical: </span>
<br /> <br /> <br />
<span>Dental, Vision, Life, AD&D: </span>
<br /> <br /> <br />
<span>Flex Programs: </span>
</div>
</html>
You are floating your buttons to the left, which means they will naturally move to the left.
Remove the float: left; from .bf_button
Add a static width to .bf_button (since you defined it as a block).
Add margin: 0 auto; to .bf_button
The final CSS definition should look something like this:
.bf_button {
display:block;
background: url(bf_button_fon_right.gif) no-repeat 100%;
outline: none;
margin: 0 auto;
padding-right: 32px;
text-decoration: none;
width: 150px;
}
You can also remove the <br /> <br /> <br /> as it's not needed when setting the buttons to display: block;. Block elements (or those with display: block) will automatically drop to a new line and stack. To add spacing, simply add a bottom or top margin to your buttons.
Another note. You are closing your <body> tag too soon. Your </body> tag should be directly before your </html> tag.
I've been looking for this in google and it says that the css code is margin: 0 auto;. I tried it and it doesn't work for me. Please help. Thanks in advance.
login.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Log In</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="formLogin">
<table class="formTable">
<tr>
<td>Username: </td>
<td> <input type="text" id="loginusername" name="loginusername"/> </td>
</tr>
<tr>
<td>Password: </td>
<td> <input type="password" id="loginpassword" name="loginpassword"/> </td>
</tr>
</table>
<div align="center">
<input type="submit" id="btnlogin" name="btnlogin" value="Log In"/>
<input type="submit" id="btncancelogin" name="btncancelogin" value="Cancel"/>
</div>
</div>
</body>
</html>
stylesheet.css
table.formTable {
margin-left: auto;
margin-right: auto;
}
table.formTable td {
padding: 8px;
}
#formLogin {
width: 360px;
background-color: #eeeeee;
margin: 0 auto;
padding: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
If you want to center it vertically also try reading this.
Update:
Try this code. Of course you can move CSS out to your css file. Tested in IE9 and FF6:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Log In</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<style type="text/css">
#wrapper{
background-color: #ccf;
position: relative;
text-align: left;
width: 100%;
height: 100%;
margin: 0px auto;
}
#content{
background-color: transparent;
position: absolute;
top: 40%;
left: 0px;
width: 100%;
margin-top: auto;
text-align: center;
min-width: 900px;
}
table.formTable {
margin-left: auto;
margin-right: auto;
}
table.formTable td {
padding: 8px;
}
#formLogin {
width: 360px;
background-color: #eeeeee;
margin: 0 auto;
padding: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="formLogin">
<table class="formTable">
<tr>
<td>Username: </td>
<td> <input type="text" id="loginusername" name="loginusername"/> </td>
</tr>
<tr>
<td>Password: </td>
<td> <input type="password" id="loginpassword" name="loginpassword"/> </td>
</tr>
</table>
<div align="center">
<input type="submit" id="btnlogin" name="btnlogin" value="Log In"/>
<input type="submit" id="btncancelogin" name="btncancelogin" value="Cancel"/>
</div>
</div>
</div>
</div>
</body>
</html>
Like Hachi says try text-align:center; but you could also add this to your CSS:
body {
width:100%;
}
This will give your page a width, so your elements will have a width to use.
Update:
Didn't realise you wanted it vertically centered too. You could put the whole thing in a table cell and use valign="middle" to center it.
I think it's about DOCTYPE. Have try to put DOCTYPE
HTML 5
<!DOCTYPE HTML>
<html>
HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
I've got a page that has a background color for the main container, but for some reason, the color ends just below the header div. The page and the CSS validate in the w3 validators, though, and I have no idea why and I've tried several different fixes.
CSS
body{
margin:0;
padding:0;
line-height: 1.5em;
background-color: #e5e5dc;
color: #000;
}
#maincontainer{
background-color: green;
width: 98%;
margin: 0 auto;
border: 1px solid black;
}
#topsection{
background-color: transparent;
height: 90px; /*Height of top section*/
}
#logo{
background-image: url();
text-align: center;
margin: 0 auto;
width: 100%;
}
#contentwrapper{
float: left;
width: 100%;
background-color: transparent;
}
#contentcolumn{
margin-right: 230px; /*Set right margin to RightColumnWidth*/
}
#rightcolumn{
float: left;
width: 230px; /*Width of right column in pixels*/
margin-left: -230px; /*Set left margin to -(RightColumnWidth) */
background-color: transparent;
}
#footer{
clear: left;
width: 100%;
background-color: transparent;
text-align: center;
padding: 4px 0;
border-top: 1px solid black;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
.error{
background-image: url("images/misc/scroll.jpg");
background-position: top left;
background-repeat: no-repeat;
}
a:link, a:visited{
color: #000;
text-decoration: none;
}
a:hover, a:active{
color: #000;
text-decoration: underline;
}
EDIT -- Raw html source straight from view source in my browser
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Haven • Login</title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<script src="includes/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function init()
{
var e = document.createElement('script');
e.src = 'includes/all.js';
document.getElementById('script_insertion').appendChild(e);
}
</script>
</head>
<body onload="init();">
<div id="script_insertion"></div>
<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>IMG</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<form action="./login.php?mode=login" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" size="10" title="Username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" id="password" size="10" title="Password" /></td>
</tr>
<tr>
<td><input type="reset" value="Clear" /></td>
<td><input type="submit" name="login" value="Login" /></td>
</tr>
</table>
<input type="hidden" name="remember" value="true" />
</form>
<br />
Don't have an account yet? Register here!
</div>
</div>
</div> <div id="rightcolumn">
<div class="innertube">
Chat
</div>
</div>
</div>
</body>
</html>
You are floating #contentwrapper which takes it out of the document flow so #maincontainer no longer contains it.
To contain it, you need to give #maincontainer an overflow attribute (auto should work).
FYI, adding borders to your elements are a good way to debug things like this.
If I understand correctly, this is a well addressed question. See CSS 100% height in ie or http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
Hihi, I am trying to create a slide down menu using DIV, but hit a problem that I can't really figure out how to overcome. Let's take a look at the code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#menu").click(function () {
$('#menuItem').slideDown('slow');
});
});
</script>
</head>
<body>
<div style="width: 500px; margin: 0px auto; padding: 10px;">
<div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center;">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" position: relative; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>
All I want to achieve is to make my slide down menu stay on top of my form element div. Please advice how can this be done. Many thanks!
:)
Quick and dirty: I added an absolutely-positioned outer containing for the menu, and then applied top:40px to the content div to push it down to compensate for the height of the menu.
<div style="position:absolute;width:100%;">
<div style="width: 500px; margin: 0px auto; padding: 10px; ">
<div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
</div>
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center; position:relative; top:40px; ">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" clear:both; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>
As I type this, dotty's already answered before me with a pretty much identical approach. However, in the code above, the individual menu divs are properly floating next to each other as you want them to, as they do in the first code you posted in the question.
There are probably some div and styling elements that are a little redundant there now.
Edit: It does occur to me now that the operation of the menu in dotty's code is actually probably how you intended for the menu to be.
Put the #menuItem div inside the #menu div, and set the #menuItem div's position to absolute and remove it's float.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#menu").click(function () {
$('#menuItem').slideDown('slow');
});
});
</script>
</head>
<body>
<div style="width: 500px; margin: 0px auto; padding: 10px;">
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
<div id="menuItem" style="border: 1px solid blue; position: absolute; z-index: 10; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center;">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" position: relative; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>
I am new to the world of XHTML and CSS. I put together a page that requires 3 column layout. The code gives me the desired effect across Internet Explorer, Firefox and Google Chrome however am unsure if it is the correct way to code.
I have posted the code for it before it worked and after applying the necessary changes to make it work.
Questions
Is this the correct way to code it?
Is it the best way to code?
What issues can I run into with the code?
Before it worked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
img#bg {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
position: relative;
z-index: 1;
}
#header {
background-color: orange;
}
#container {
overflow: auto;
}
#leftnav {
background-color: yellow;
float: left;
width: 100px;
}
#rightnav {
background-color: blue;
float: right;
}
#rightnav p {
border: 1px solid #000000;
font-size: small;
font-style: italic;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
ul {
margin: 0px;
padding: 5px;
}
ul li {
list-style-type: none;
display: inline;
}
</style>
</head>
<body>
<div>
<img src="images/background.jpg" alt="background" id="bg" />
</div>
<div id="wrapper">
<div id="header">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="container">
<div id="leftnav">
<ol>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ol>
</div>
<div id="rightnav">
<p>Test</p>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
After it worked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
img#bg {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
position: relative;
z-index: 1;
}
#header {
background-color: orange;
}
#container {
overflow: hidden;
}
#leftnav {
background-color: yellow;
float: left;
width: 100px;
}
#rightnav {
background-color: blue;
float: right;
width: 100px;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#rightnav p {
border: 1px solid #000000;
font-size: small;
font-style: italic;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
ul {
margin: 0px;
padding: 5px;
}
ul li {
list-style-type: none;
display: inline;
}
</style>
</head>
<body>
<div>
<img src="images/background.jpg" alt="background" id="bg" />
</div>
<div id="wrapper">
<div id="header">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="container">
<div id="leftnav">
<ol>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ol>
</div>
<div id="rightnav">
<p>Test</p>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
The code is pretty much ok - few things you may do:
1.) You don't need to define properties that are set by default in the browser: font-weight: normal; is already the default browser value for body so you can omit that if you are not changing it's look.
2.) margin: 0px; does not need the px with it - do margin: 0;
3.) Name ids and classes with content-related names - not with layout related: #rightnav might be on the right side in your current css layout but one day you may change your mind and put it on left side and the id kinda looses some relevance. #subnav might be a better choice.
4.) Don't really understand what you wanted to acomplish with this bit of code (since i don't have time to setup a live site example):
padding-bottom: 1000px;
margin-bottom: -1000px;
but looks bit ugly altough it is perfectly valid and can do the job.
5.) <img src="images/background.jpg" alt="background" id="bg" /> - If the image is a background and not content related use the css property background-image to apply it.
I won't comment on meta tags since I don't have enough knowledge about it.
A few comments with regards to meta tags...
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
These meta tags are useless.
<meta name="keywords" content="" />
The meta keywords used to matter. No search engines bother with it anymore as it's always abused.
<meta name="description" content="" />
And this meta tag is... well... not useless, but almost. The content within the page should all the describing for you.