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:
<!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> </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;
iEntry 10th Anniversary
Announcements
Contact
Vertical centering - please help!
