this is the hardest site ive ever worked on because i dont know how to do ecommerce squares where the product and description go together, and my product boxes float too far right in ie6. if anyone could look at my code and say if i did the boxes the right way (im pretty sure i didnt) and why my boxes float a little to the right in ie6. any help GREATLY appreciated on this one, its very complex for me. thanks. derek.
here is the page im talking about, my first ecommerce attempt.
http://derekvanderven.com/computer_ecommerce/index.html
and here is the css for the page (cringe)...
Code:
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #71838A;
}
#wrapper {
overflow: auto;
margin: 0 auto 0 auto;
width: 750px;
background-color: #B0BBBF;
}
#header {
margin: 0 auto 0 auto;
background-image: url(slice_front_images/header.jpg);
background-repeat: no-repeat;
width: 750px;
height: 81px;
}
#left_nav_container{
float: left;
margin: 0 auto 0 21px;
width: 175px;
border: 1px solid #999999;
background-color: #C0C0C0;
padding-top: 20px;
}
/**********************************left links code************************/
#left_links {
width: 175px;
height: 700px;
margin: 0 auto 0 auto;
}
#left_links ul li a:link, #left_links ul li a:visited {
font-weight:bold;
color:#375B97;
text-decoration:none;
font-size:84%;
display:block;
height:1.8em;
}
#left_links ul li a:hover, #left_links ul li a:active{
color: #000;
text-decoration:none;
}
#left_links ul li {
position:relative;
left:-20px;
list-style-type:none;
}
/*************************************end left links*********************/
#header_image {
float: left;
width: 352px;
height: 188px;
background-image: url(slice_front_images/header_image.jpg);
background-repeat: no-repeat;
border: 2px solid gray;
}
/*****************************front sales*******************************/
#front_sales_container {
float: left;
width: 352px;
height: 525px;
border: 2px solid gray;
background-color: white;
}
.front_sales_divs {
float: left;
width: 130px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: 27px;
border: 1px solid gray;
}
.front_sales_divs img {
float: right;
padding-top: 5px;
padding-right: 5px;
}
.front_sales_text {
float: left;
width: 130px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding: bottom: 5px;
font-size:70%;
line-height: 90%;
}
/*******************************footer************************/
#footer {
margin: 0 auto 0 auto;
width: 750px;
color: white;
background-color: gray;
text-align: center;
}
#footer a:link , #footer a:visited {
text-decoration: none;
color: white;
}
#footer a:active, #footer a:hover {
text-decoration: none;
color: blue;
}
and here is the html for the page
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" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="computer.css" rel="stylesheet" type="text/css"/>
<title>Computer Ecommerce home</title>
</head>
<body>
<div id="wrapper">
<div id="header"> </div><!--end header-->
<div id="left_nav_container">
<div id="left_links"><ul>
<li><a href="motherboards.html">Motherboards</a></li>
<li><a href="processors.html">Processors</a></li>
<li><a href="memory.html">Memory</a></li>
<li><a href="hard_drives.html">Hard Drives</a></li>
<li><a href="monitors.html">Monitors</a></li>
<li><a href="case.html">Case</a></li>
<li><a href="ups.html">UPS</a></li>
<li><a href="video.html">Video Cards</a></li>
<li><a href="cd.html">CD/CDR</a></li>
<li><a href="data.html">Data Storage</a></li>
<li><a href="devices.html">I/O Devices</a></li>
<li><a href="multimedia.html">Multimedia</a></li>
<li><a href="removable.html">Removable Storage</a></li>
<li><a href="scanners.html">Scanners & Printers</a></li>
<li><a href="hubs.html">Hubs and Routers</a></li>
<li><a href="speakers.html">Speakers</a></li>
<li><a href="software.html">Software</a></li>
</ul>
</div><!--end left links-->
</div> <!--end leftnav container-->
<div id="header_image"></div><!--end header image-->
<div id="front_sales_container">
<div class="front_sales_divs">
<img src="slice_front_images/computer.jpg" width="59" height="62">
<div class= "front_sales_text">
<strong>Dell Computer</strong> <strong> $999 </strong> <br />
<br />
Maybe better to build<br />
your own.<br />
</div><!--end front sales text-->
</div><!--end front sales divs-->
<div class="front_sales_divs"> <img src="slice_front_images/headphones.jpg" height= "56" />
<div class= "front_sales_text">
<strong>Cool Headphones</strong> <strong><br />
<br />
$99 </strong> <br />
<br />
Quality headphones!!!<br />
</div><!--end front sales text--></div>
<div class="front_sales_divs"><img src="slice_front_images/video_card.jpg" height= "54"/>
<div class= "front_sales_text">
<strong>Nvidea video card </strong> <strong><br />
<br />
$299 <br />
<br />
</strong> Hottest fastest card!!</div>
<!--end front sales text--></div>
<div class="front_sales_divs"><img src="slice_front_images/monitor.jpg" height="59" / >
<div class= "front_sales_text">
<strong>Awesome Monitor </strong> <strong><br />
<br />
$1299<br />
<br />
</strong> Incredible monitor!!!</div>
<!--end front sales text--></div>
<div class="front_sales_divs"><img src="slice_front_images/dvd_rw.jpg" width="55" height="61" />
<div class= "front_sales_text">
<strong>Uber DVD drive!!! </strong> <strong><br />
<br />
$125.99<br />
<br />
</strong>This one is amazing!</div>
<!--end front sales text--></div>
<div class="front_sales_divs">
<img src="slice_front_images/Seagate_Hard_Disk.jpg"width="74" height="62" />
<div class= "front_sales_text">
<strong>Ultimate uber drive!</strong> <strong><br />
<br />
$9999999,99999.00<br />
<br />
</strong>This one is the best!</div>
</div>
</div>
<!--end front sales container-->
</div><!--end wrapper-->
<div id="footer">© site design by<a href="http://derekvanderven.com"> derekvanderven.com </a></div>
<!--end footer-->
</body>
</html>
|
; on my wrapper div. and im getting a scrollbar in firefox. if anyone can help me out id greatly appreciate it. thank you. derek
