...

View Full Version : How should I improve this layout ?



jeddi
02-13-2009, 10:31 AM
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)

http://www.expert-world.com/im/test/scn01.jpg

and the 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



.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;
}

Rowsdower!
02-13-2009, 03:25 PM
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!

jeddi
02-13-2009, 03:36 PM
Thanks but I am not ready for a full site reveiw just yet.

Just wanted to get this crappy menu looking better.

Any ideas ?

Rowsdower!
02-13-2009, 07:42 PM
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.

jeddi
02-13-2009, 07:49 PM
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.
:thumbsup:

Avril
02-13-2009, 07:58 PM
Something like this, perhaps?

<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!

jeddi
02-14-2009, 02:58 AM
Yes -
I think that looks better than the centered one I did
- thanks.

Excavator
02-14-2009, 03:56 AM
Expanding on Avril's example, this has a DocType, complete markup, indented and commented, and it's valid -
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum