Please check site

csa · #1 (**permalink**) Mar 21st, 2006, 15:28

I've just built this homepage to XHTML Strict 1.0 please can all you CSS experts have a look and give me some advice on how I can improve my code?

http://www.buysmarter.co.uk/test/indexnew2.html

I may have to get rid of the Speed Search, as this isn't compliant, and I'm not sure how to get it to be. Advice would be welcome, but I'm more concerned regarding my top navigation menu.

1. I've cheated and added a   after each item to add space? I assume you shouldn't do this, so how should this be laid out?

2. There are a few anomalies with my positioning of my navigation which is starting to disappear in FF. Is this something to do with padding and margins?

Thanks

Code: Select all

/* CSS Document */
body {
text-align:center;
background:#000000; 
margin-top: 0px;
font-family:Arial, Helvetica, sans-serif;
}
#container{
width: 760px;
border: solid white 0px; 
position: relative;
}
#logo{
width: 760px;
height: 37px;
border-bottom:2px solid #FFFFFF;
float: none;
}
#nav{
width: 760px;
height: 37px;
border: solid red 0px; 
}
#homeimages{
width: 760px;
height: 97px;
}
h1{
font-size:14px;
color:#FFFFFF;
font-weight:bold;
}
#bodyright{
width:230px;
float:right;
background-color:#000000;
padding-top: 10px;
margin-top: 10px;
text-align:left;
padding-left: 30px;
}
#bodymiddle{
width:470px;
float:right;
background-color:#000000;
text-align:left;
padding-top: 10px;
margin-top: 10px;
}
#bodyleft{
width: 60px;
float:left;
background-color:#000000;
padding-top: 10px;
}
p{
font-size: 12px;
color:#FFFFFF;
}
p span{
font-size: 12px;
color:#9D9264;
}
ul{
}
#listone{
display:block;
font-size: 11px;
color:#FFFFFF;
padding-right:25px;
}
#topnav{
font-size: 11px;
color:#FFFFFF;
}
#bottomlinks{
width: 732px;
float:right;
border-top:2px solid white;
}
.goldlinks{
font-size:10px;
color:#9D9264;
text-align:left;
}
a.goldlinks{
font-size:10px;
color:#9D9264;
text-decoration:none;
}
a.goldlinks:hover{
font-size:10px;
color:#9D9264;
text-decoration:underline;
}
.artistlinks{
font-size:10px;
color:#FFFFFF;
padding-top: 8px;
text-align:left;
}
a.artistlinks{
font-size:10px;
color:#FFFFFF;
text-decoration:none;
}
a.artistlinks:hover{
font-size:10px;
color:#FFFFFF;
text-decoration:underline;
}
#topnavright{
width: 160px;
height: 30px;
float:right;
padding-top: 20px;
color:#FFFF00;
}
#topnavmiddle{
width: 422px;
height: 30px;
float:right;
padding-top: 20px;
text-align:left;
color:#9D9264
}
.topnavmiddle{
font-size:12px;
color:#9D9264;
padding-top: 8px;
text-align:left;
}
a.topnavmiddle{
font-size:12px;
color:#9D9264;
text-decoration:none;
}
a.topnavmiddle:hover{
font-size:12px;
color:#FFFFFF;
text-decoration:underline;
}
#topnavleft{
width: 170px;
height: 30px;
color:#FF99FF;
text-align:left;
padding-left: 1px;
padding-top: 15px;
float:left;
}
#navlist li
{
display: inline;
list-style-type: none;
font-size: 12px;
color:#9D9264;
text-align:left;
font-weight:bold;
}
a.navlist{
list-style-type: none;
font-size: 12px;
color:#9D9264;
text-decoration:none;
}
a.navlist:hover{
font-size: 12px;
color:#9D9264;
text-decoration:underline;
}
#navlistcheckout li
{
display: inline;
list-style-type: none;
font-size: 12px;
color:#FFFFFF;
text-align:left;
font-weight:bold;
}
a.navlistcheckout{
list-style-type: none;
font-size: 12px;
color:#FFFFFF;
text-decoration:none;
}
a.navlistcheckout:hover{
font-size: 12px;
color:#FFFFFF;
text-decoration:underline;
}

herkalees · #2 (**permalink**) Mar 22nd, 2006, 15:23

Now it is valid:
XHTML

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Language" content="en-us"/>
<link href="tedbakerartorig.css" media="screen" rel="stylesheet" type="text/css" />
<link href="test_print.CSS" media="print" rel="stylesheet" type="text/css" />
<title>Reproductions of masterpiece paintings by famous Artists from Ted Baker Art</title>
</head>
<body>
<div id="container">
<div id="logo"><img src="images/tedbakerart.gif" alt="Ted Baker Art" title="Ted Baker Art"/></div>
<div id="nav">
<div id="topnavright">
<ul id="navlistcheckout">
<li><a href="#" class="navlistcheckout">View Cart &nbsp;</a></li>
<li><a href="#" class="navlistcheckout">Checkout</a></li>
</ul>
</div>
<div id="topnavmiddle">
<ul id="navlist">
<li><a href="#" class="navlist">Gallery&nbsp;&nbsp;</a></li>
<li><a href="#" class="navlist">About the Paintings&nbsp;&nbsp;</a></li>
<li><a href="#" class="navlist"> Ordering&nbsp;&nbsp;</a></li>
<li><a href="#" class="navlist">FAQ&nbsp;&nbsp;</a></li>
<li><a href="#" class="navlist"> About Us&nbsp;&nbsp;</a></li>
<li><a href="#" class="navlist">Contact Us</a></li>
</ul>
</div>
<!--topmiddle end-->
<div id="topnavleft">
<input type="text" name="SS" size="15" value="Speed Search" onfocus="this.value='';this.style.background='#FFFFFF'" />
<input name="action" type="image" src="images/go.gif" />
<input type="hidden" name="PR" value="-1" />
<input type="hidden" name="TB" value="A" />
<input type="hidden" name="SHOP" value="" />
</div>
</div>
<!--nav end-->
<div id="homeimages"><img src="images/artimages.jpg" alt="Famous Artists" width="760" height="97" title="Reproductions"/></div>
<div id="bodyright"><img src="images/masterpieceframe.gif" alt="Masterpiece" width="192" height="161" title="Masterpiece"/>
<ul id="listone">
<li>Satisfaction guaranteed</li>
<li>Many paintings held in stock</li>
<li>Free delivery anywhere in the UK</li>
<li>Paintings come securely wrapped &amp; boxed</li>
</ul>
</div>
<!--bodyright end-->
<div id="bodymiddle">
<h1>Fine Art Reproductions</h1>
<p><span>Have you ever wondered what it would be like to have a masterpiece or two hanging on the wall in your home?...something
by Renoir, Van Gogh, Monet, Picasso or Dali perhaps? If you think you can't afford it - think again! These amazing
oil paintings can be yours from as little as &pound;75.</span></p>
<p>At Ted Baker Art we sell reproductions of paintings by the world's best artists. They are hand painted by skilled
artists in oil on canvas, and mounted on wooden stretchers, ready to hang.</p>
<p>Take your pick from a huge selection that includes the old masters, impressionists, surrealists and modern artists
- both famous paintings and lesser known works.</p>
<p>But that's not all - send us any picture as we will have it painted in oils for you - Why not have your children,
grandchildren, pets or house painted?</p>
<p>All our paintings come with a <span><a href="#" class="bodylinks">7 day, no questions asked</a>, <a href="#" class="bodylinks">money
back guarantee</a></span> so you can purchase with complete confidence.</p>
<p>So why not find our more<span><a href="#" class="bodylinks"> about the paintings</a></span> and take a look around
our<span> <a href="#" class="bodylinks">gallery</a>.</span></p>
<p>Please read our <span><a href="#" class="bodylinks">ordering information</a></span> before placing your order. All
orders are subject to our <span><a href="#"class="bodylinks">terms and conditions</a>.</span></p>
</div>
<!--bodymiddle end-->
<div id="bodyleft"></div>
<div id="bottomlinks" class="goldlinks">Copyright Ted Baker Art Ltd 2006 <a href="#" class="goldlinks">Privacy Policy</a> | <a href="#" class="goldlinks">Terms  &amp; Conditions</a> | <a href="#" class="goldlinks">Sitemap</a>
<div class="artistlinks"><a href="#" class="artistlinks">Auguste Renoir</a> | <a href="#" class="artistlinks">Boucher</a> | <a href="#" class="artistlinks">Claude
Monet</a> | <a href="#" class="artistlinks">Manet Edovard</a> | <a href="#" class="artistlinks">Edvard Munch</a> | <a href="#" class="artistlinks">Gustav
Klimpt</a> | <a href="#" class="artistlinks">Henri Matisse</a> | <a href="#" class="artistlinks">Joan Miro</a> | <a href="#" class="artistlinks">Pablo
Cezanne</a> | <a href="#" class="artistlinks">Paul Cezanne</a> | <a href="#" class="artistlinks">Paul Gauguin</a> | <a href="#" class="artistlinks">Paul
Klee</a> | <a href="#" class="artistlinks">Salvador Dali</a> | <a href="#" class="artistlinks">Tintorreto</a> | <a href="#" class="artistlinks">Cave
Paintings</a> </div>
</div>
</div>
<!--container end-->
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Language" content="en-us"/>
<link href="tedbakerartorig.css" media="screen" rel="stylesheet" type="text/css" />
<link href="test_print.CSS" media="print" rel="stylesheet" type="text/css" />
<title>Reproductions of masterpiece paintings by famous Artists from Ted Baker Art</title>
</head>
<body>
<div id="container">
<div id="logo"><img src="images/tedbakerart.gif" alt="Ted Baker Art" width="758" height="35" title="Ted Baker Art"/></div>
<div id="nav">
<div id="topnavright">
<ul id="navlistcheckout">
<li><a href="#" class="navlistcheckout">View Cart &nbsp;</a></li>
<li><a href="#" class="navlistcheckout">Checkout</a></li>
</ul>
</div>
<div id="topnavmiddle">
<ul id="navlist">
<li><a href="#" class="navlist">Gallery&nbsp;&nbsp;</a></li>
<li><a href="#" class="navlist">About the Paintings&nbsp;&nbsp;</a></li>
<li><a href="#" class="navlist"> Ordering&nbsp;&nbsp;</a></li>
<li><a href="#" class="navlist">FAQ&nbsp;&nbsp;</a></li>
<li><a href="#" class="navlist"> About Us&nbsp;&nbsp;</a></li>
<li><a href="#" class="navlist">Contact Us</a></li>
</ul>
</div>
<!--topmiddle end-->
<div id="topnavleft">
<input type="text" name="SS" size="15"  value="Speed Search" onfocus="this.value='';this.style.background='#FFFFFF'" />
<input name="action" type="image" src="images/go.gif" />
<input type="hidden" name="PR" value="-1" />
<input type="hidden" name="TB" value="A" />
<input type="hidden" name="SHOP" value="" />
</div>
</div>
<!--nav end-->
<div id="homeimages"><img src="images/artimages.jpg" alt="Famous Artists" width="760" height="97" title="Reproductions"/></div>
<div id="bodyright"><img src="images/masterpieceframe.gif" alt="Masterpiece" width="192" height="161" title="Masterpiece"/>
<ul id="listone">
<li>Satisfaction guaranteed</li>
<li>Many paintings held in stock</li>
<li>Free delivery anywhere in the UK</li>
<li>Paintings come securely wrapped &amp; boxed</li>
</ul>
</div>
<!--bodyright end-->
<div id="bodymiddle">
<h1>Fine Art Reproductions</h1>
<p><span>Have you ever wondered what it would be like to have a masterpiece or two hanging on the wall in your home?...something
by Renoir, Van Gogh, Monet, Picasso or Dali perhaps? If you think you can't afford it - think again! These amazing
oil paintings can be yours from as little as &pound;75.</span></p>
<p>At Ted Baker Art we sell reproductions of paintings by the world's best artists. They are hand painted by skilled
artists in oil on canvas, and mounted on wooden stretchers, ready to hang.</p>
<p>Take your pick from a huge selection that includes the old masters, impressionists, surrealists and modern artists
- both famous paintings and lesser known works.</p>
<p>But that's not all - send us any picture as we will have it painted in oils for you - Why not have your children,
grandchildren, pets or house painted?</p>
<p>All our paintings come with a <span><a href="#" class="bodylinks">7 day, no questions asked</a>, <a href="#" class="bodylinks">money
back guarantee</a></span> so you can purchase with complete confidence.</p>
<p>So why not find our more<span><a href="#" class="bodylinks"> about the paintings</a></span> and take a look around
our<span> <a href="#" class="bodylinks">gallery</a>.</span></p>
<p>Please read our <span><a href="#" class="bodylinks">ordering information</a></span> before placing your order. All
orders are subject to our <span><a href="#"class="bodylinks">terms and conditions</a>.</span></p>
</div>
<!--bodymiddle end-->
<div id="bodyleft"></div>
<div id="bottomlinks" class="goldlinks">Copyright Ted Baker Art Ltd 2006 <a href="#" class="goldlinks">Privacy Policy</a> | <a href="#" class="goldlinks">Terms  &amp; Conditions</a> | <a href="#" class="goldlinks">Sitemap</a>
<div class="artistlinks"><a href="#" class="artistlinks">Auguste Renoir</a> | <a href="#" class="artistlinks">Boucher</a> | <a href="#" class="artistlinks">Claude
Monet</a> | <a href="#" class="artistlinks">Manet Edovard</a> | <a href="#" class="artistlinks">Edvard Munch</a> | <a href="#" class="artistlinks">Gustav
Klimpt</a> | <a href="#" class="artistlinks">Henri Matisse</a> | <a href="#" class="artistlinks">Joan Miro</a> | <a href="#" class="artistlinks">Pablo
Cezanne</a> | <a href="#" class="artistlinks">Paul Cezanne</a> | <a href="#" class="artistlinks">Paul Gauguin</a> | <a href="#" class="artistlinks">Paul
Klee</a> | <a href="#" class="artistlinks">Salvador Dali</a> | <a href="#" class="artistlinks">Tintorreto</a> | <a href="#" class="artistlinks">Cave
Paintings</a> </div>
</div>
</div>
<!--container end-->
</body>
</html>

herkalees · #3 (**permalink**) Mar 22nd, 2006, 15:23

CSS:

Code: Select all

/* CSS Document */
body {
text-align:center;
background:#000000; 
margin-top: 0px;
font-family:Arial, Helvetica, sans-serif;
}
#container{
width: 760px;
border: solid white 0px; 
position: relative;
}
#logo{
width: 760px;
height: 37px;
border-bottom:2px solid #FFFFFF;
float: none;
}
#nav{
width: 760px;
height: 37px;
border: solid red 0px; 
}
#homeimages{
width: 760px;
height: 97px;
}
h1{
font-size:14px;
color:#FFFFFF;
font-weight:bold;
}
#bodyright{
width:230px;
float:right;
background-color:#000000;
padding-top: 10px;
margin-top: 10px;
text-align:left;
padding-left: 30px;
}
#bodymiddle{
width:470px;
float:right;
background-color:#000000;
text-align:left;
padding-top: 10px;
margin-top: 10px;
}
#bodyleft{
width: 60px;
float:left;
background-color:#000000;
padding-top: 10px;
}
p{
font-size: 12px;
color:#FFFFFF;
}
p span{
font-size: 12px;
color:#9D9264;
}
ul{
}
#listone{
display:block;
font-size: 11px;
color:#FFFFFF;
padding-right:25px;
}
#topnav{
font-size: 11px;
color:#FFFFFF;
}
#bottomlinks{
width: 732px;
float:right;
border-top:2px solid white;
}
.goldlinks{
font-size:10px;
color:#9D9264;
text-align:left;
}
a.goldlinks{
font-size:10px;
color:#9D9264;
text-decoration:none;
}
a.goldlinks:hover{
font-size:10px;
color:#9D9264;
text-decoration:underline;
}
.artistlinks{
font-size:10px;
color:#FFFFFF;
padding-top: 8px;
text-align:left;
}
a.artistlinks{
font-size:10px;
color:#FFFFFF;
text-decoration:none;
}
a.artistlinks:hover{
font-size:10px;
color:#FFFFFF;
text-decoration:underline;
}
#topnavright{
width: 160px;
height: 30px;
float:right;
padding-top: 20px;
color:#FFFF00;
}
#topnavmiddle{
width: 422px;
height: 30px;
float:right;
padding-top: 20px;
text-align:left;
color:#9D9264
}
.topnavmiddle{
font-size:12px;
color:#9D9264;
padding-top: 8px;
text-align:left;
}
a.topnavmiddle{
font-size:12px;
color:#9D9264;
text-decoration:none;
}
a.topnavmiddle:hover{
font-size:12px;
color:#FFFFFF;
text-decoration:underline;
}
#topnavleft{
width: 170px;
height: 30px;
color:#FF99FF;
text-align:left;
padding-left: 1px;
padding-top: 15px;
float:left;
}
#navlist li
{
display: inline;
list-style-type: none;
font-size: 12px;
color:#9D9264;
text-align:left;
font-weight:bold;
}
a.navlist{
list-style-type: none;
font-size: 12px;
color:#9D9264;
text-decoration:none;
}
a.navlist:hover{
font-size: 12px;
color:#9D9264;
text-decoration:underline;
}
#navlistcheckout li
{
display: inline;
list-style-type: none;
font-size: 12px;
color:#FFFFFF;
text-align:left;
font-weight:bold;
}
a.navlistcheckout{
list-style-type: none;
font-size: 12px;
color:#FFFFFF;
text-decoration:none;
}
a.navlistcheckout:hover{
font-size: 12px;
color:#FFFFFF;
text-decoration:underline;
}

As far as using the non-breaking back space (   ) after each anchor, why not just add padding-right:8px; to the class which is an attribute on the anchor elements?

csa · #4 (**permalink**) Mar 23rd, 2006, 09:27

Herkalees,

Thanks for looking at this, I've been comparing your CSS and Xhtml code to mine, the only thing I have noticed are...

The search script
The removal of the width and height on the top header

The only thing I've noticed is that my top navigation still decends lower in FF than in IE.

Have you done any other changes which I've missed? How did you stop the top header Fine Art Reproductions from dissappearing into the top images in FF?

Thanks

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Please check out my site	prevail	Free Web Site Critique	3	Jun 10th, 2008 00:34
Check out my site	coldy	Free Web Site Critique	2	Apr 24th, 2008 11:39
Check out this Web site, please!	phoon	Free Web Site Critique	4	Apr 10th, 2008 14:03
Check Site	csa	Web Page Design	4	Jun 30th, 2006 08:46

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Please check site