Menu
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: [URL=”http://www.cs.scranton.edu/~eaganr2/sjm2/”]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.
Theres a problem with the footer, I can’t get it to stay at the bottom.
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.
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> | <a href=”#home”>Site Map</a></li>
<li> | <a href=”#search”>FAQ</a></li>
<li> | <a href=”#about”>About Us</a></li>
<li> | <a href=”#contact”>Contact Us</a></li>
<li> | <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%;
}
* {
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;
}