Menu
Community /Pin to ProfileBookmark
@cootheadSep 07.2010 — #Hi there mounya,
and a warm welcome to these forums. ?
What is wrong with this CSS example?
[i]coothead[/i]
vertical centering code a little choppy when loading…
I recently found a really nice code that centers a page vertically:
[URL=”http://en.kioskea.net/faq/933-centering-vertically-a-web-page#e-js-file”]http://en.kioskea.net/faq/933-centering-vertically-a-web-page#e-js-file
What I like about it, is that when you zoom in with Chrome, nothing gets cut off. Normally other codes for centering will zoom straight into the middle, and cut off content on the left. The only problem I’m having with it, is that when the page loads in Chrome and Safari, it starts to load at the top of the page, and then quickly jumps down to where it’s centered. It looks a little choppy when you’re navigating through many pages. I’m wondering if there’s a way to get it to load in the correct position where it will stay? Any help will be greatly appreciated!
mounya
Sign in
to post a comment3 Comments(s) ↴
0
@cootheadSep 07.2010 — #Hi there mounya,and a warm welcome to these forums. ?
What is wrong with this CSS example?
[color=navy]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>horizontally and vertically centered page</title>
<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0;
background-color:#eef;
}
body {
min-height:442px; /* total vertical height of the #main */
}
#vertical{
width:100%;
height:50%;
margin-top:-221px; /* half the total vertical height of the #main */
float:left;
}
#main {
position:relative;
width:720px;
height:400px;
padding:20px;
border:1px solid #000;
margin:auto;
clear:both;
background-color:#fff;
text-align:justify;
}
</style>
</head>
<body>
<div id="vertical"></div>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis,
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi.
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div><!-- end #main -->
</body>
</html>
[/color][i]coothead[/i]