www.webdeveloper.com
Results 1 to 1 of 1

Thread: Help with Page Layout for Online Store

  1. #1
    Join Date
    Mar 2010
    Posts
    16

    Help with Page Layout for Online Store

    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;
    
    }
    Last edited by Rob4226; 03-28-2010 at 08:12 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles