Help with Page Layout for Online Store

**Rob4226** · 03-28-2010, 07:21 PM

Hi,

I am in the process of making an online store with HTML/CSS and php/mySQL.
Since this is my first time using CSS I just need to someone to take a look at my code to see if I'm doing things the correct way for an online store with SEO in mind. Heres my questions and code:

Link to page: http://www.cs.scranton.edu/~eaganr2/sjm2/

1. Am I laying out the page correctly setting the left: attributes of the divs? and am I using divs how there supposed to be used? I'm used to using layouts with panels but these divs don't always display the way i think they should so sometimes I feel like I'm "jerry rigging" it with margins.

2. Theres a problem with the footer, I can't get it to stay at the bottom.

3. Theres a problem with the links on the left, when they are clicked they turn into the format of the links on the top of the page.

4. How should I display the items in the content area, eventually the items will be pulled from a database so should each picture,title,description,price,add to cart button be placed inside of a div and then added to the productList page through php? Thanks

code:

index.php

Code:


<html>

<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="leftNav.css" />
<link rel="stylesheet" type="text/css" href="sideCart.css" />
<link rel="stylesheet" type="text/css" href="productList.css" />
<link rel="stylesheet" type="text/css" href="footer.css" />
</head>

<body>


<div id ="container">
<img id = "topBanner" src="img/Banner3.gif"/>
<div id="topNav">
<ul>
<li><a id = "top" href="#home">Home</a></li>
<li><a href="#home">Top Sellers</a></li>
<li><a href="#search">Specials</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
<li><a href="#contact">Checkout</a></li>
</ul>

</div>

<div id="leftNav">
<img id = "leftNavImg" src="img/menuNecklaces.gif"/>
<ul id = "leftNavUl">
<li><a href="#home">Beaded</a></li>
<li><a href="#home">Crystal</a></li>
<li><a href="#search">Stones</a></li>
<li><a href="#about">Blue</a></li>
<li><a href="#contact">Red</a></li>
<li><a href="#contact">Green</a></li>
</ul>

<img id = "leftNavImg" src="img/menuEarrings.gif"/>

<ul id = "leftNavUl">
<li><a href="#home">Beaded</a></li>
<li><a href="#home">Crystal</a></li>
<li><a href="#search">Stones</a></li>
<li><a href="#about">Blue</a></li>
<li><a href="#contact">Red</a></li>
<li><a href="#contact">Green</a></li>
</ul>

<img id = "leftNavImg" src="img/menuBracelets.gif"/>

<ul id = "leftNavUl">
<li><a href="#home">Beaded</a></li>
<li><a href="#home">Crystal</a></li>
<li><a href="#search">Stones</a></li>
<li><a href="#about">Blue</a></li>
<li><a href="#contact">Red</a></li>
<li><a href="#contact">Green</a></li>
</ul>


</div>


<div id = "productList">

<img src="img/JewelPic1.jpg"/>
<img src="img/JewelPic2.jpg"/>
<img src="img/JewelPic3.jpg"/>
<img src="img/JewelPic4.jpg"/>
<img src="img/JewelPic5.jpg"/>
<img src="img/JewelPic6.jpg"/>

</div>

<div id = "rightNav">
<div id = "sideCart">
<img id = "sideCartTitlePic" src="img/cart2.gif"/>
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
</ul>


</div>

<div id ="paypalImg">
<img id = "sidePaypal" src="img/paypalV.gif"/>
</div>
</div>

<div id = "footer">

</div>
<div id="push"></div>

</div>

<div id = "footer">
<img src="img/paypalH.gif"/>
<ul>
<li><a href="#home">Home</a></li> 
<li>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#home">Site Map</a></li>
<li>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#search">FAQ</a></li>
<li>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#about">About Us</a></li>
<li>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#contact">Contact Us</a></li>
<li>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#contact">Shopping Cart</a></li>
</ul>

</div>

</body>
</html>

main.css

Code:

body, html
{
	/*background-image:url('img/grey1.jpg'); */
	background: #E0E0E0;
	height: 100&#37;;
}

* {
	margin: 0;
}

#container {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -140px; /* the bottom margin is the negative value of the footer's height */
}


#topNav
{
   list-style:none;
   /*margin:0 0 lem 0;*/
   padding:0;
   width: 100%;

}

#topBanner
{   
	display: block;
	margin-left: 40px;
	/* For center
	margin-left: auto;
	margin-right: auto;
	*/
}	

#topNav ul
{
list-style-type:none;

/*margin:0 auto;*/
margin-left: 40px;
margin-top: 6px;
margin-bottom: 10px;
padding:0;
overflow:hidden;

 width: 930px;

}

#topNav li
{

float:left;

/*
border-right-style:ridge;
border-bottom-style:ridge;
border-left-style:ridge;


border-style: outset;
border-color: #CC66CC;
border-width: 4px;
*/
}

#topNav a:link,a:visited
{
display:block;
width:155px;
font-weight:bold;
font-size: 20px;
color:#585858;
background-color:#F8F8F8;
text-align:center;
padding-left:0px;
padding-right:0px;
padding-top: 5px;
padding-bottom:5px;
text-decoration:none;
/*text-transform:uppercase;*/
}

#topNav a:hover,a:active
{
background-color:#B8B8B8;
color:#303030;

}

leftNav.css

Code:

#leftNav
{
   /*float:left;
   list-style:none;

   padding:0;*/
   width: 150px;
   background-color: #C8C8C8;
   float: left;
   /*
   clear: both;
   border-left-style: solid;
   border-right-style: solid;
   */
   border-style: solid;
   border-width: 2px;
   margin-left: 40px;
   margin-top: 0px;

}

#leftNavUl
{
	 list-style-type: disc;
   margin-top: 5px;
   margin-bottom: 12px;
   padding-left: 25px;


}

#leftNavImg
{

}

sideCart.css

Code:

#rightNav
{
   padding:0;
   width: 174px;
   position:absolute;
   left: 798px;
   top: 230px;
}
	
#sideCart
{
   background-color: #C8C8C8;
   border-style: solid;
   border-width: 2px;
  /* margin-left: 795px;
   margin-top: 49px;
   position:absolute;*/

}

#sideCartTitlePic
{
   padding: 0;
   margin: 0;
}

#sidePaypal
{
   padding: 0;
   /*
   margin-top: 15;
   margin-left: 612;
   */
   
}

#paypalImg
{
	margin-left: 12px;	
	margin-top: 20px;	
}

productList.css

Code:

#productList
{
   /*margin-left: 300px;*/
   padding:0;
   border-style: solid;
   border-width: 2px;
   width: 586px;
   /*length: 700px;*/
   position:absolute;
   left: 201px;
   top: 230px;
   background-color: white;
}

#productList img
{
	margin: 20px;
}

footer.css

Code:

#footer, #push {
	height: 140px; /* .push must be the same height as .footer */
	clear: both;
}

#footer ul
{
list-style-type:none;

/*margin:0 auto;*/
margin-left: 40px;
margin-top: 6px;
margin-bottom: 140px;
padding:0;
overflow:hidden;

 width: 800px;

}

#footer li
{
	float:left;
	margin-top: 20px;
}

#footer img
{
	float: left;
	margin-right: 30px;
	margin-left: 10px;

}

Thread: Help with Page Layout for Online Store

Thread Tools

Display

Help with Page Layout for Online Store

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions