Hello,
I spent sometime changing somethings and using the better code. The template was very helpful Paul.
This is what I have so far:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body {
margin:0;
padding:0
}
body {
background: #000;
color:#fff;
font-family:Arial, Helvetica, sans-serif
}
#header {
width:100%;
overflow:hidden;
font-size:85%;
}
#gbar {
float:left;
margin:0;
padding:2px;
list-style:none;
font-size:13px;
}
#gbar li {
display:inline;
margin:0 4px 0 0;
}
#gbar li a, #gbar li a:visited {
color:#fff;
text-decoration:none;
}
#gbar li a:hover {
color:#fff;
text-decoration:underline;
}
.cornerBox {
float:right;
width:320px;
background:#fff;
color:#000;
padding:2px 5px;
margin-right: 5px
}
#container{
width:100%;
}
#container li a, #cotainer li, a:visited {
color:#fff;
text-decoration:none;
}
#container li a:hover{
color:#fff;
text-decoration:underline;
}
#main{
margin:auto 0px auto 0px;
}
#main, #footer {
clear:both;
}
#logoContainer{
height:171px;
padding-top:22px;
}
#logo{
padding-top:26px;
border:none;
width:364px;
height:144px;
}
#slogan{
width:642px;
}
#copyright{
color:#fff;
font-size:9pt;
}
#copyright li a, #copyright li a:visted{
color:#fff;
text-decoration:none;
}
#copyright li a:hover{
text-decoration:underline;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<ul id="gbar">
<li><a href="http://www.google.com/imghp?hl=en&tab=wi">About</a></li>
<li><a href="http://video.google.com/?hl=en&tab=wv">Art</a></li>
<li><a href="http://maps.google.com/maps?hl=en&tab=wl">Blog</a></li>
<li><a href="http://mail.google.com/mail/?hl=en&tab=wm">Contact</a></li>
<li><a href="http://mail.google.com/mail/?hl=en&tab=wm">Downloads</a></li>
<li><a href="http://news.google.com/nwshp?hl=en&tab=wn">Media</a></li>
<li><a href="http://news.google.com/nwshp?hl=en&tab=wn">Music</a></li>
<li><a href="http://www.google.com/prdhp?hl=en&tab=wf">Store</a></li>
</ul>
<div class="cornerBox">Put ticker here</div>
</div>
<div id="main">
<div id="logoContainer"><a href="assets/images/irfanGoogle.png"><img id="logo" alt="Irfan" src="assets/images/irfanGoogle.png"></a>
</div>
<div id="slogan">
slogan goes here
</div>
<div id="footer">
<p id="copyright">© 2010, Irfan Mir<br /> <a href="#/">Copyright statement</a></p>
</div>
</div>
</div>
</body>
</html>
However, for some reason I an encountering two issues
1.) I can not get the place-holder image (#logoContianer), slogan (#slogan), or footer (#footer) in the centre of the page as the ppor layout I linked to above had it.
In other words, I can not get the dic#main centred. I tried using margin:auto 0 auto 0 in lines 61-63 and then I even tried setting the main div;s width to 100% in lines 50-52, but that does not even work. I know centring involves zeroes and autos in margin, but I can not remember if the top & bottom are supposed to be auto or 0 and the opposite for right & left. However, I tried both and neither seems to centre the div.
2.) I can not get the text-decoration to none and the colour to zero for the link to the copyright statement in the paragaph #footer. I want it to remain white, but have an underline on hover as the links in the upper right corner, but my styling, as seen in lines 84 -90, do not seem to work.
Thank you for all your help tus far and I hope that you can help me with these two problems.
Also if there is anything I am doing that is outdated, improper, or bad in code then please let me know.
Thanks in Advance and I hope to hear form you soon,
Team 1504