Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts

    How should I improve this layout ?

    There doesn't seem to be a design sub-forum so I hope asking in this
    one is OK

    Any help much appreciated

    How would you display this:

    I am building my website and the category menu looks pretty lame.
    How do you think I should lay it out ?

    Here is a pic

    (Some of the links have been "visited" so color is different)



    and the code:

    Code:
    <div class="pg_whole">
      <span class="cat">Current Category:  Traffic</span>
    <div class="menuCATtop">Categories
    
    <div class='menuCAT'>
    <ul>
    <li> <a href=\"traffic/free.html\" >Traffic </a></li>
    <li> <a href=\"seo/free.html\" >S.E.O. </a></li>
    <li> <a href=\"niche/free.html\" >Niche </a></li>
    <li> <a href=\"affiliate/free.html\" >Affiliate </a></li>
    <li> <a href=\"ppc/free.html\" >P.P.C. </a></li>
    </ul>
    </div>
    </div>
    
    <div class='menuCAT'>
    <ul>
    <li> <a href=\"copy-writing/free.html\" >Copy writing </a></li>
    <li> <a href=\"sales-systems/free.html\" >Sales systems </a></li>
    <li> <a href=\"product-creation/free.html\" >Product creation </a></li>
    <li> <a href=\"website-design/free.html\" >Website design </a></li>
    <li> <a href=\"graphics/free.html\" >Graphics </a></li>
    </ul>
    </div>";
    and the CSS

    Code:
    .pg_whole{
      width: 880px;
    	font-weight: normal;
    	margin: 0px auto;
    	float: left;
    }
    
    
    .menuCATtop{
    	font-size: 14px;
    	font-weight: bold;
      float:left;
    }
    
    .menuCAT {  
     margin: 0px ;
     float:left;
    }
    
    .menuCAT ul{  
     padding: 0;
     list-style-type: none;
     margin: 10px 0px 0px 0px;
    }
    
    .menuCAT ul li {
      text-align: left;
    }
    
    .menuCAT ul li a{
      font-size: 14px;
      color: #347EED;
      font-weight: bold;
      text-decoration: none;
    	padding: 4px 6px 4px 6px;
    }
    
    
    .menuCAT ul li a:visited{
      color: #666699; 
    }
    
    .menuCAT ul li a:hover {	
      color: #fff;	
    	background: #6699cc; 
    	text-decoration: none;
    }

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Contact a moderator to have your post moved here:

    http://209.188.89.109/forumdisplay.php?f=37

    Once you have your post in the right place I'd recommend putting up a live sample page of your design. You can get free crappy hosting from a number of sources if you don't already have a host and the reviews will be MUCH better.

    Good luck!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thanks but I am not ready for a full site reveiw just yet.

    Just wanted to get this crappy menu looking better.

    Any ideas ?

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Hmm, well without seeing the rest of the page it's hard to give any specific advice. I understand what you mean about not wanting a full review, but it's kind of like asking what to change about a 4-piece suit based on a picture of the lapel. Can you link to your page here at least? If not, do you have a full screenshot we can see?

    What colors are you using? Any graphics on the page that can/should be carried over into the navigation? Any details and images you can give will help me get a better picture of things.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Yes - I see your point.

    I will transfer the entire site to a temp domain and then come back and give the link.

    Thanks for your advice.

  • #6
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    Something like this, perhaps?
    Code:
    <html>
    
    	<head>
    		<title></title>
    <style type="text/css">
    
    body {
    margin:0px;
    padding:0px;
    }
    
    .pg_whole{
      width: 880px;
    	font-weight: normal;
    	margin-left:auto;
    	margin-right: auto;
    	border: 1px solid #000000;
    }
    
    #header {float: left; width: 880px; height: 30px; font-family: verdana, tahoma, sans-serif; font-size: 18px; font-weight: 600; text-align: center; line-height: 30px; background-color: #6c8fb8; color: #293675;}
    
    #mainpane {float: left; width: 860px; font-family: verdana, tahoma, sans-serif; font-size: 12px; padding:10px; border:1px solid #FF0000;}
    
    .cat {font-family: verdana, tahoma, sans-serif; font-size: 14px; font-weight: 600;}
    
    .menuCATtop{
    	font-size: 14px;
    	font-weight: bold;
      float:left;
    font-family: verdana, tahoma, sans-serif; font-size: 14px;
    }
    
    .menuCAT {  
     margin: 0px ;
     float:left;
    }
    
    .menuCAT ul{  
     padding: 0;
     list-style-type: none;
     margin: 10px 0px 0px 0px;
    }
    
    .menuCAT ul li {
      text-align: left;
    }
    
    .menuCAT ul li a{
      font-size: 14px;
      color: #347EED;
      font-weight: bold;
      text-decoration: none;
    	padding: 4px 6px 4px 6px;
    }
    
    
    .menuCAT ul li a:visited{
      color: #666699; 
    }
    
    .menuCAT ul li a:hover {	
      color: #fff;	
    	background: #6699cc; 
    	text-decoration: none;
    }
    
    .maintitle{font-family: verdana, tahoma, sans-serif; font-size: 18px; font-weight: 500; color:#347EED; margin-bottom: 12px;}
    .secondtitle {font-family: verdana, tahoma, sans-serif; font-size: 14px; font-weight: 600; color:#347EED;}
    </style>
    	</head>
    	<body>
    <div class="pg_whole">
    <div id="header">Resources - Professional Articles
    </div>
    <div id="mainpane">
    <div class="maintitle">Current Category:  Traffic</div>
    <div class="secondtitle">Categories</div>
    
    <div class='menuCAT'>
    <ul>
    <li> <a href=\"traffic/free.html\" >Traffic </a></li>
    <li> <a href=\"seo/free.html\" >S.E.O. </a></li>
    <li> <a href=\"niche/free.html\" >Niche </a></li>
    <li> <a href=\"affiliate/free.html\" >Affiliate </a></li>
    <li> <a href=\"ppc/free.html\" >P.P.C. </a></li>
    </ul>
    </div>
    
    
    <div class='menuCAT'>
    <ul>
    <li> <a href=\"copy-writing/free.html\" >Copy writing </a></li>
    <li> <a href=\"sales-systems/free.html\" >Sales systems </a></li>
    <li> <a href=\"product-creation/free.html\" >Product creation </a></li>
    <li> <a href=\"website-design/free.html\" >Website design </a></li>
    <li> <a href=\"graphics/free.html\" >Graphics </a></li>
    </ul>
    </div>
    </div>
    I've put borders so you can see what divs they pertain to. Works on Safari. See if it works on the other browsers as well.

    Cheers!

  • #7
    Senior Coder
    Join Date
    May 2006
    Posts
    1,683
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Yes -
    I think that looks better than the centered one I did
    - thanks.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Expanding on Avril's example, this has a DocType, complete markup, indented and commented, and it's valid -
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    body {
    	font: 600 18px/30px Verdana, Geneva, sans-serif;
    	color: #293675;
    	background: #FC6;	
    }
    * { 
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #pg_whole{
    	width: 880px;
    	margin: 0 auto;
    	font-weight: normal;
    	overflow: auto;
    	background: #fff;
    	border: 1px solid #000000;
    }
    #header {
    	width: 880px; 
    	height: 30px; 
    	background: #6c8fb8;
    }
    #mainpane {
    	float: left; 
    	width: 860px; 
    	font-size: 12px; 
    	padding: 10px; 
    }
    #maintitle{
    	font-weight: 500; 
    	color: #347EED; 
    	margin-bottom: 12px;
    }
    #secondtitle {
    	font-size: 14px; 
    	color:#347EED;
    }
    /***************nav****************/
    #one {
    	width: 100px;
    	border-right: 1px solid #000;
    	background: #f00; /*for testing only*/
    }
    #two {
    	width: 150px;
    	background: #00f; /*for testing only*/
    }
    		ul.menuCAT{  
    			float:left;
    			margin: 10px 10px 0 0;
    			list-style-type: none;
    		}
    		ul.menuCAT li {
    			text-align: left;
    		}
    		ul.menuCAT li a{
    			font-size: 14px;
    			color: #347EED;
    			font-weight: bold;
    			text-decoration: none;
    			padding: 4px 6px 4px 6px;
    		}
    		ul.menuCAT li a:visited{
    		  color: #666699; 
    		}
    		ul.menuCAT li a:hover {	
    			color: #fff;	
    			background: #6699cc; 
    		}
    #content {
    margin: 10px 0 0 275px;
    text-align: justify;
    background: #ccc; /*for testing only*/
    }
    </style>
    </head>
    <body>
        <div id="pg_whole">
            	<div id="header">Resources - Professional Articles</div>
            <div id="mainpane">
            	<div id="maintitle">Current Category:  Traffic</div>
            	<div id="secondtitle">Categories</div>  
                        <ul class="menuCAT" id="one">
                            <li> <a href="traffic/free.html" >Traffic </a></li>
                            <li> <a href="seo/free.html" >S.E.O. </a></li>
                            <li> <a href="niche/free.html" >Niche </a></li>
                            <li> <a href="affiliate/free.html" >Affiliate </a></li>
                            <li> <a href="ppc/free.html" >P.P.C. </a></li>
                        </ul>  
                    <ul class="menuCAT" id="two">
                        <li> <a href="copy-writing/free.html" >Copy writing </a></li>
                        <li> <a href="sales-systems/free.html" >Sales systems </a></li>
                        <li> <a href="product-creation/free.html" >Product creation </a></li>
                        <li> <a href="website-design/free.html" >Website design </a></li>
                        <li> <a href="graphics/free.html" >Graphics </a></li>
                    </ul>
                <div id="content">
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                        sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                        sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                <!--end content--></div>
            <!--end mainpane--></div>
        <!--end pg_whole--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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