vertical centering
Posted: Mon Jan 12, 2009 12:24 am
~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:
Posting Code in the Forums to learn how to do it too.
i have this code snippet
this should vertically center the div #page
im trying to make a page
where the header is 192px
the footer is 192px
and the pageContainer is whatever height is left over
and #page will scroll (overflow) up and down inside of that
i dont want to use positioning or margin hacks
i know there is a way i just cant remember
all my old code is on my dead laptop hard drive
if anyone can remember how to do this
i would sure appreciate some help
daedalus thanks you!
THUNDERCATS!
HOOOOOOOOOOOOOOOOOOOO!
~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:
Posting Code in the Forums to learn how to do it too.
i have this code snippet
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>asdasd</title>
<link rel="stylesheet" type="text/css" href="css/screen.css" />
<style type="text/css">
*
{
margin: 0;
padding: 0;
font-family: tahoma;
}
body
{
width: 100%;
height: 100%;
font-size: 10pt;
/*overflow: hidden;*/
}
p
{
margin: 1em;
text-indent: 1em;
}
body div#container div#top
{
border: 1px solid red;
display: block;
position: absolute;
top: 0;
width: 100%;
height: 192px;
}
body div#container div#pageContainer
{
border: 1px solid red;
margin-top: 192px;
margin-bottom: 192px;
width: 100%;
height: auto;
}
body div#container div#pageContainer div#page
{
border: 1px solid blue;
width: 800px;
margin: auto;
}
body div#container div#bottom
{
border: 1px solid red;
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 192px;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
</div>
<div id="pageContainer">
<div id="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo ligula, convallis ac, consequat at, feugiat et, lorem. Curabitur interdum elit sit amet tellus. Donec dignissim arcu quis nisi. Quisque rutrum. Aenean mollis pede ac dui. Fusce ullamcorper tincidunt libero. Fusce sapien nulla, tempor a, condimentum a, convallis non, mauris. Cras pellentesque tellus vel ante. Nunc ultricies varius nibh. In justo. Pellentesque vel justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, nisi sed bibendum suscipit, metus urna pharetra urna, nec vulputate ligula ipsum vitae purus. Ut quis sem nec velit ultrices molestie. Mauris purus enim, auctor ac, blandit eu, venenatis sit amet, lorem. Nullam diam. Fusce malesuada tristique ligula. Mauris in erat. Maecenas ante.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla porta, nibh at pharetra mollis, enim dolor scelerisque tortor, et mattis leo leo fermentum enim. Integer consectetur, massa sed ultricies fermentum, elit lacus varius lacus, ut convallis velit enim et risus. Quisque consectetur, enim quis pellentesque fermentum, neque massa venenatis eros, ut ultricies magna elit ut turpis. Donec nec mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent fringilla. Curabitur ac pede id ante aliquam lobortis. Nulla convallis, odio id pharetra tincidunt, sapien odio aliquet urna, eu vestibulum diam nunc eget dolor. Mauris at tortor nec lacus ornare auctor. Aenean non sem ac arcu auctor sodales. Vestibulum metus nunc, dapibus sit amet, aliquam ac, congue quis, odio. Pellentesque lobortis dignissim lorem. Vivamus lacus mauris, dictum dapibus, hendrerit ut, bibendum quis, ipsum. In a massa quis orci suscipit pulvinar. Quisque quis odio vel lorem dictum tempus.</p>
<p>Maecenas ornare pharetra nibh. Vestibulum sollicitudin, lectus ut tristique viverra, tellus sapien commodo sem, ut blandit sapien velit in justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam a odio a nibh tempus bibendum. Nullam placerat lacinia tortor. Sed nibh. Donec porttitor rhoncus eros. Nunc id ante at leo lobortis blandit. Donec accumsan vulputate turpis. Pellentesque id orci a arcu tristique elementum. Integer at enim ut lectus luctus dapibus. Nulla fringilla mattis purus. Vestibulum ac metus vitae tortor dictum consequat. Sed libero lectus, faucibus eget, scelerisque in, mollis sit amet, lacus. Donec hendrerit luctus diam. Mauris pulvinar, massa at ullamcorper convallis, ante ipsum posuere arcu, sed semper ante neque a tellus.</p>
<p>Nulla eget turpis eu mi rutrum pulvinar. Praesent rutrum, eros a tincidunt egestas, metus orci faucibus ipsum, quis sollicitudin purus mi ac risus. Donec massa. Maecenas hendrerit semper purus. Nam auctor nulla et magna. Morbi elit lectus, tristique in, tincidunt at, venenatis ornare, neque. Donec mauris. Curabitur non arcu. Mauris dolor. Integer ornare dui et augue.</p>
<p>Praesent mi metus, pulvinar et, pharetra consequat, aliquam eu, tortor. Aenean accumsan vestibulum ante. Suspendisse turpis. Phasellus nec mauris. Cras purus eros, ornare in, rutrum in, rhoncus vel, urna. Sed dignissim, neque vitae sodales auctor, tortor nisl auctor orci, elementum varius pede dui sed tortor. Aenean turpis diam, blandit eget, fermentum consectetur, ullamcorper et, nisi. Sed ultrices lacinia nibh. Phasellus euismod iaculis metus. Suspendisse est. Quisque posuere diam quis tellus. Maecenas ut orci.</p>
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
im trying to make a page
where the header is 192px
the footer is 192px
and the pageContainer is whatever height is left over
and #page will scroll (overflow) up and down inside of that
i dont want to use positioning or margin hacks
i know there is a way i just cant remember
all my old code is on my dead laptop hard drive
if anyone can remember how to do this
i would sure appreciate some help
daedalus thanks you!
THUNDERCATS!
HOOOOOOOOOOOOOOOOOOOO!
~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: