view on http://www.eveo.org
download site for easy modification:
http://www.eveo.org/backup/eveo.rar
http://www.eveo.org/backup/eveo.zip
As you can see right now, it is centered horizontally and vertically using an easy table method:
<table cellpadding="0" cellspacing="0">
<tr>
<td align="left">
*put anything in here and it will be aligned horizontally and vertically
</td>
</tr>
</table>
accompanying CSS:
table
{
height: 100%;
width: 100%;
vertical-align: middle;
}
However, in my document I did not set a doctype, I only have:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
If I add a standard doctype such as the following:
<!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" lang="en" xml:lang="en">
my table method is no longer valid and does not work. So I need a new way to center my webpage vertically and horizontally regardless of browser window size.
There are some cross-browser solutions that don't require Javascript or hacking.
One good example is here
Have a look also on this one.
For some learning, check this excellent example of gtalbot about horizonal align in CSS.
good luck >)
HTML
<div id="container"></div>
CSS
div#container {
width: 200px;
height: 200px;
margin-left: -100px; /* Half of width */
margin-top: -100px; /* Half of height */
position: absolute; left: 50%; top: 50%;
}
You can do this with CSS/HTML, but the method I'm going to use will work best if your height is known, or you can use JavaScript to grab the height.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Centered Page</title>
</head>
<body>
<div class="container">
<!-- My Content will be 500px tall -->
</div>
</body>
</html>
CSS:
.container { height:500px; margin:-250px /* Half the height container */ auto; position:absolute; top:50%; width:960px; }
JavaScript (jQuery): If you don't know the height or if it changes.
(function() {
var $container = $('.container'),
height = $container.outerHeight();
$container.css({
'marginTop': (height/2) * -1
});
})();
There is an easy way to center a page using just CSS using inline-blocks: http://jsfiddle.net/CUd8G/
It works when there are a very little content: http://jsfiddle.net/CUd8G/1/
When there are a lot of content: http://jsfiddle.net/CUd8G/2/
With fixed width (however, it works with unknown width/height): http://jsfiddle.net/CUd8G/3/
This is the minimum you need to do it in only html and css without javascript
<!doctype html><html><head><style>
table.inner{width:100%;}
table.outer{text-align:center; width:100%; height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px;}
</style></head><body>
<table class='outer' cellspacing='0px' cellpadding='0px'><tr><td></td></tr><tr><td>
<table class='inner' cellspacing='0px' cellpadding='0px'><tr><td></td></tr><tr><td>
INSPIRATIONAL
CELEBRATIONAL
MUPPETATIONAL
</td></tr><tr><td></td></tr></table>
</td></tr><tr><td></td></tr></table>
</body></html>
Related
why is my form div at bottom of parent div? it wants me to say more, but the question has been asked and it's pretty clear... why is the form div appearing at the bottom of my header div? i know i can hack it and give it a negative top margin, but I KNOW that's not proper form. what gives? thx.
html:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="login">
<input type="text" placeholder="EMAIL ADDRESS" value="" name="email" id="user">
</div><!-- end login div -->
</div><!--end header div -->
</body>
</html>
css:
#charset "utf-8";
/* CSS Document */
body {
margin: 0px;
padding: 0px;
}
input {
float: right;
margin-left:15px;
}
#header {
background-image:url(images/headerGradient.png);
background-repeat: repeat;
margin:0px;
padding:0px;
width:auto;
height:72px;
display:block;
}
#logo {
background-image:url(images/logo.png);
width: 182px;
height: 66px;
vertical-align:middle;
margin-left: 60px;
}
It's because your logo div has no floating style set.
Try to add
float:left
to #logo div
Demo: http://jsfiddle.net/eyMJa/1/
Using float in Css I have found becomes really annoying and makes getting layout how you want it kinda difficult, Unless you can watch a fair few youtube video's until you master it.
I'm trying to use:
position:absolute;
instead, and then setting
top:Number of Pixels or percentage/em;
right:Number of Pixels or percentage/em;
bottom:Number of Pixels or percentage/em;
left:Number of Pixels or percentage/em;
also
position:relative;
Seems to add blank space in the dimensions of the div again messing up the layout, where Absolute acts kind of like float, but without the annoying interactive or page jerking of the other two methods.
If you do use float for whatever reason, remember to add Clear float after each time you use it unless you specifically need to keep it.
Hope this helps
I have the following HTML code with CSS:
<!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>
<style type="text/css">
div.scroll
{
background-color:#00FFFF;
position:absolute;
top:0%;
left:0%;
width:10%;
height:100%;
}
div.hidden
{
background-color:#00FF00;
position:absolute;
top:0%;
left:50%;
width:20%;
height:100%;
}
div.menu
{
position:absolute;
top:70%;
left:20%;
width:80%;
}
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>
<div class="menu">
<div class="scroll">Scroll: You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<div class="hidden">Hidden: You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</div>
</body>
As you can see I want two of the divisions to have color - they don't and I can't figure out why. The file has an html extension and I have used both IE7 and FF 3.0.3 to test.
What perplexes me the most is that it is almost a verbatim copy of an example from W3C schools that does show color! Link to example: W3C example.
The problem is height:100%; . It means that the element use all the height of its parent, in this case the <div class="menu">, which is 0px because all its content is positioned with absolute.
You can either remove it if you want each div of have the size of its text, or set a height in pixel if you want to apply the same height to the both divs.
Remove height: 100%; from your div.scroll and div.hidden CSS classes.
I have a main div in the center of my page with an id of "panel".
I want to position another div, "toolbar" so that it is top aligned and flush against the side of the "panel" div.
Like so
And I want the panel div to remain centered. (Currently doing this by setting margin-left/margin-right to auto)
Absolute positioning on the toolbar breaks when I resize the window.
I've also tried floating them inside a wrapper, but invariably this moves the panel from the center...
This feels like it should simple, am I overlooking something? What is the best way to accomplish this?
Current live example here:
Example
Thanks for any advice..
Markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en-US" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="toolbar">
Toolbar
</div>
<div id="panel">
Panel
</div>
</body>
</html>
CSS:
#toolbar{
border:1px solid black;
color:red;
width:100px;
height:200px;
}
#panel{
border:1px solid black;
color: blue;
margin-left:auto;
margin-right:auto;
width:500px;
height:500px;
}
See: http://jsfiddle.net/thirtydot/ywc5f/
In the HTML, you can move #toolbar inside #panel, then use absolute positioning.
CSS:
#panel {
position: relative;
}
#toolbar {
position: absolute;
left: -102px; /* width of #toolbar + border */
top: -1px; /* border */
}
HTML:
<div id="panel">
Panel
<div id="toolbar">
Toolbar
</div>
</div>
User floats. See this fiddle.
you're using an absolute width for both of those so put them in another div as a wrapper and give it the width of the the middle one + (the narrow one x 2)
then use auto on the new wrapper div and use float left on both the interior divs
How how to make <a> text align bottom? I have added height = line-height, and vertical-align:bottom; but the text still in the middle of the div. How to do? Thanks
Test in http://jsfiddle.net/BanAz/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#layer{width:198px;height:48px;line-height:48px;border:1px #000 solid;vertical-align:bottom;}
#layer a{text-decoration:none;}
</style>
</head>
<body>
<div id="layer">
menu
</div>
</body>
</html>
Options include:
Remove line-height: 48px and add display: table-cell to #layer:
http://jsfiddle.net/jgQ9k/1/
Note that this won't work for IE7, because display: table-cell isn't supported.
Use a large line-height: http://jsfiddle.net/jgQ9k/2/
And the method I would actually use:
Add position: relative to #layer, and position:absolute; bottom:0 to #layer a:
http://jsfiddle.net/jgQ9k/3/
The height size (48px) is equal to line-height size (48px). Try to increase the height size, and you will see the css properties work fine and the text will be positioned on the bottom
#layer {
display: table-cell;
}
I want to have a web page that contains 3 parts: A header at the top of the page , a footer (both of which having specific height in px)and the main part of the page which should be a div or table cell with the appropriate height attribute in order to take all the available space between them. I want the page to take 100% of the browser window height, trying to avoid scrollbars. The problems I have are the following:
USING DIVs
a) If I set the maindiv height to 100%, the page overflows and I get a vertical scrolbar. (the maindiv's height is set to the 100% of the browser window)
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html{
height: 100%;
max-height:100%;
width: 100%;
margin:0;
padding:0;
}
div{padding:0;margin:0;}
#containerdiv{height:100%;width:100%;background-color:#FF9;border:0;}
#headerdiv{height:150px;width:100%;background-color:#0F0;border:0;}
#footerdiv{height:50px;width:100%;background-color:#00F;border:0; }
#maindiv{
background-color:#F00;
height:100%;
}
div{border:#000 medium solid;border:0;}
</style>
<body>
<div id="containerdiv">
<div id="headerdiv">headerdiv</div>
<div id="maindiv">maindiv</div>
<div id="footerdiv">footerdiv</div>
</div>
</body>
</html>
b) If I set the maindiv height to auto, the maindiv height is depending on it's content, which is not what I want.
USING tables
a) If I set the main cell height to 100% it works fine with Firefox but in Internet Explorer 8 I get a vertical scrollbar (you can use the next code block using th style="height:100%"
instead of "auto" to see this.)
b) If I set the main cell to auto it seems to be working both in IE and FF but then I have the problem that anything I put inside the maincell (table or div) cannot get maincell's full height in IE.
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
height: 100%;
width: 100%;
margin:0;
padding:0;
}
table{border:#000 0px solid}
</style>
<body>
<table style="background:#063" cellpadding="0" cellspacing="0" border="0">
<tr><th style="height:150px;background-color:#FF0"></th></tr>
<tr>
<th style="height:auto"><table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:auto">nested cell</th></tr></table>
</th>
</tr>
<tr><th style="height:50px;background-color:#FF0"></th></tr>
</table>
</body>
</html>
</html>
Any ideas? Maybe there is an easier way to define the size of the main part of the page in px using javascript? (my javascript skills are pretty poor so any help with this is welcome!)
Rather than using percentages, you can define the #centerdiv using top and bottom properties, for example:
#centerdiv {
position:absolute;
top: 160px; /*10px between header and this div at top*/
bottom: 60px; /*10px between footer and this div at bottom*/
width:100%;
background-color:#FF9;
border:0;
}