Vertical centering - please help!

mpnuttall · #1 (**permalink**) Apr 16th, 2008, 09:22

Hi there

I really hope someone can help with this as I'm beginning to despair.

I'm somewhat of a CSS (and HTML for that matter) novice, and have been trying to understand enough to build my site.

I've got most things sorted and looking reasonable, but can't get my page content (not the header image or menu though) to vertically center. You can see what I mean here:

www.conkerphotography.co.uk/about.htm

It looks okay on a 1024 wide or smaller monitor, but looks very unbalanced on larger ones.

I've tried all sorts of ideas from various sites but think my lack of understanding of the basics is holding me back.

I've pasted the page code for the above link below, and also the code from my 'maincss.css' style sheet which informs most of the layout. Can someone please advise what i need to add and where?

Any support would be greatly appreciated.

Many thanks, mpnuttall

Page code

Code: Select all

<!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>About Conker Photography</title>
<link href="main_css.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body { margin:0; padding:0; position:absolute; height:100%; background-color:c3d43a; width:100%; } </style>
</head>

<body><div class="full"></div>
    <div class="normal">
    <div id="header"><img src="http://www.webforumz.com/images/new_header.jpg" alt="Header" width="529" height="65" align="top"/></div>


    <div id="navigation">

    <h2><ul id="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.htm">About</a></li>
    <li><a href="gallery2.htm">Gallery</a></li>
    <li><a href="ordering.htm">Ordering</a></li>
    <li><a href="contact.htm">Contact</a></li>
    </ul>
    </h2>
    </div>


  
      <div id="main">
    <FONT SIZE=1 color=#888888>
      <FONT SIZE=1 color=#c3d43a><B>What's with the name?</B></FONT><BR><FONT SIZE=1 color=#888888>

Conkers are great. They’re green, spiky, and make for one of the best childhood games ever. And it’s a great word too – just         try saying it out loud. Go on, no-ones watching…
    <BR><BR>

    <FONT SIZE=1 color=#c3d43a><B>Tell me a bit more about the photographs on the site</B></FONT><BR><FONT SIZE=1 color=#888888>

All the photos on this site are taken by Mark Nuttall, and were mostly taken in the Peak District, England. Photos from other locations do raise their heads here too, and if you have a question about a particular photo then just <a href="contact.htm">ask</a>. <P>New photos are added to the site regularly so stick it in your bookmarks/favourites and be sure to check back every once in a while: 
<script language="JavaScript1.2" type="text/javascript">
     function CreateBookmarkLink() {
        title="Conker Photography"; 
        url="http://www.conkerphotography.co.uk";
        if (window.sidebar) { // Mozilla Firefox Bookmark
            window.sidebar.addPanel(title, url,"");
        } else if( window.external ) { // IE Favorite
            window.external.AddFavorite( url, title); }
        else if(window.opera && window.print) { // Opera Hotlist
            return true; }
     }

     if (window.external) {
      document.write('<a href="javascript:CreateBookmarkLink()");"> bookmark/add to favourites now.</a>'); 
      } else  if (window.sidebar) {
      document.write('<a href="javascript:CreateBookmarkLink()");"> bookmark/add to favourites now.</a>'); 
     } else if (window.opera && window.print) {    
       document.write('<a href="javascript:CreateBookmarkLink()");"> bookmark/add to favourites now.</a>');
     } 
</script>


    <BR><BR>
    <FONT SIZE=1 color=#c3d43a><B>But wait - I still have more questions!</B></FONT><BR><FONT SIZE=1 color=#888888>

No problem, just <a href="contact.htm">get in touch</a> and you’ll get a reply faster than you can say conker…or at least within a day or two.
    </p>
      <p>Thanks for visiting.</p>
      <p>&nbsp;</p>

    </div>
</div>
</body>
</html>


Main CSS

/* Generic Selectors */

body {
    font-family: "Verdana", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: ##999999;
    background-color: #c3d43a;
    
}



h1 {
    font-family: "Verdana", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: lighter;
    color: #999999;
}

h2 {
    font-family: "Verdana", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: lighter;
    color: #999999;
}

 

/**************** Pseudo classes ****************/

a:link {
    color: #666666;
}

li a:link {
    color: #666666;
    text-decoration: none;

}

a:visited {

color: #666666;

text-decoration: underline;


}

li a:visited {

color: #669933;

text-decoration: none;


}

a:hover {
    color: #c3d43a;
    padding-bottom: 5px;
    font-weight: normal;
    text-decoration: underline;
}

li a:hover {
    display: block;
    color: #FFFFFF;
    padding-bottom: 5px;
    font-weight: normal;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #999999;
}

a:active {

color: rgb(255, 0, 102);



}


.full { 
    position:absolute; 
    top:0; 
    left:9%; 
    width:80%; 
    height:100%; 
    background-color:white; 
    padding:0 1em; 
} 

.normal { 
    position:absolute; top:0; 
    left:9%; 
    width:80%; 
    height:auto; 
    background-color:white; 
    padding:0 1em; 
} 


/************************* ID's *************************/

#navigation {
    z-index: 10;
    width: 350px;
    height: 30px;
    font-weight: lighter;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    font-family: "Verdana", Arial, Helvetica, sans-serif;
}

#outer {
    width: 70%;
    background-color:#FFFFFF;
    margin-left: auto;
        margin-right: auto;
        padding: 0px;
}
#header {
       width: 529px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

#main {
    width: 80%;
    background-color:#FFFFFF;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

#form {
    width: 80%;
    background-color:#FFFFFF;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

#paypal {
    width: 37%;
    background-color:#FFFFFF;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

#centerDoc {
    position: relative;
    z-index: 15;
    width: 70%;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;

mpnuttall · #2 (**permalink**) Apr 16th, 2008, 09:48

Forgot to say, the height of each pages content (i.e. the bit in the div="main" section) varies, so I can't use fixed widths and heights for these elements and need the positioning to adjust in the same way the width does when the browser window is resized.

dab42pat · #3 (**permalink**) Apr 16th, 2008, 10:05

Hi

I have treied on various resolutions and cant see your problem.

The page you mention has this.

HTML: Select all

 body { margin:0; padding:0; position:absolute; height:100%; background-color:c3d43a; width:100%; }

Try this instead.

HTML: Select all

 body { margin:0 auto;  height:100%; background-color:c3d43a; width:100%; }

I havent tested it but it might work, also check out http://browsershots.org/ to see how it looks in various browsers and resolutions.

HTH

Pat

mpnuttall · #4 (**permalink**) Apr 16th, 2008, 10:47

Thanks for the reply Pat. I tried your code, though it hasn't changed anything. Maybe I wasn't clear about what i'm looking to achieve - I don't have a 'problem' as such (in so far as the layout I have works) but wanted to change it from this:

to this:

I.E. the content 'floats' in the centre of the screen regardless of window size/resolution. Is this possible?

Thanks again, mpnutall

saltedm8 · #5 (**permalink**) Apr 16th, 2008, 11:02

this might help you http://www.wpdfd.com/editorial/thebox/deadcentre4.html

dab42pat · #6 (**permalink**) Apr 16th, 2008, 11:05

In your #main. give your margin-top something like 150px. That should remain constant.

mpnuttall · #7 (**permalink**) Apr 16th, 2008, 11:38

Thanks both.

Pat - I don't actually want it to remain a constant distance from the top, I want it to stay centred as the page is resized.

saltedm8 - I'll give this a try. It looks like it might achieve what i want, but as I said I'm a novice and think I might struggle to integrate it in to my existing code :oS

Thanks again, mpnuttall

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Vertical Menu. Can someone help?	CoolNeb	Web Page Design	3	Jul 16th, 2007 18:00
Div Vertical Align	jwalker80	Web Page Design	5	Jan 30th, 2007 23:34
vertical centering woes	gwx03	Web Page Design	6	Jun 5th, 2004 21:43
Tip : Vertical and Horizontal Centering - Solved!	gwx03	Web Page Design	0	Dec 15th, 2003 06:11
Vertical Centering in CSS	gwx03	Web Page Design	1	Dec 5th, 2003 15:36

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Vertical centering - please help!