|
|
Posted by Jonathan N. Little on 11/25/87 11:49
Chaddy2222 wrote:
> Jonathan N. Little wrote:
>> Chaddy2222 wrote:
>>> Hi all.
>>> I am currently re-designing my site to use a CSS based layout. I was
>>> just wandering if anyone could give me some feedback on how it looks,
>>> suggestions on how it could be improved that sort of thing.
>>> The test page is at: http://freewebdesign.cjb.cc/test
>>> Only the index page is up at this stage, I will add content and build
>>> the site from the index page once it's working well.
>>>
>> Visually, I would add some left and right padding to your main DIVs so
>> that the text has some 'breathing room' from the sides of the viewport.
>>
>> Similar request for navigational list. You need more separation between
>> the items so they are more visually discrete. Either more space between
>> or some kind of separator treatment.
> Ok. I have made a few change: http://freewebdesign.cjb.cc/test
>
Okay better, but two things. If you need to adjust spacing in elements,
do not employ technique but adjust margins and/or padding. Then
you can fine tune with CSS rather then editing your markup. Secondly, I
have issue with your use of DL for your links. They are a simple list of
links, not a definition list. Use UL not DL. Example and I have cleaned
up your CSS a little:
CSS:
/* Adjusted margins and padding to improve clickable area on links */
..links { margin: .5em; }
..links UL { list-style: none; }
..links LI { display: inline; padding: 0 .5em; }
..links LI A { text-decoration: none; padding: 0 .25em; }
..links LI A:link,
..links LI A:visited {
color: rgb(51, 102, 153);
background-color: rgb(255, 255, 204);
border-bottom: 1px dashed rgb(51, 102, 153);
}
..links LI A:hover,
..links LI A:active {
color: rgb(73, 81, 92);
background-color: rgb(255, 255, 102);
border-bottom-style: solid;
/*
since your have a dashed border on the links
rather than turn text-decoration on and off
on your links I just change the border style
*/
}
HTML:
<div class="links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
I also defined as a class you you can use in other areas on the page,
like your lower links...
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|