|
|
Posted by Chaddy2222 on 11/10/04 11:49
Jonathan N. Little wrote:
> 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:
Thanks for the suggestions.
I made a few changes to the current stylesheet. Is it better now?
http://freewebdesign.cjb.cc/test
>
> 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..
Thx.
--
Regards Chad. http://freewebdesign.cjb.cc
Navigation:
[Reply to this message]
|