/    Sign up×
Community /Pin to ProfileBookmark

CSS tips to create a stylish left hand nav.

Copy linkTweet thisAlerts:
Oct 17.2006

Hi All

In a previous post I made some simple technical changes to my left hand nav. Thanks for your advice.

However I would appreciate any style advice anyone might have. Basically I replaced a complicated nav containing javascript and gifs with the css nav you now see on [url]www.kjbeckett.com[/url]. However the response to the new look has been poor. I think people believe the pure text looks unprofessional.

Can anyone recommend any css tweaks I could make to the nav for it to look a bit more stylish?

Kind regards

Paul

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAOct 17.2006 — Apply to your links:

- a width, then add display: block;

- a margin, so they aren't so close together

- padding, so the "box" highlight looks more like a box

- increase the text size: it's microscopic on my PC, and I've got my glasses on

- align all of you left-hand section components. (not just the menu links) The ragged edge really looks tacky.
Copy linkTweet thisAlerts:
@kjbeckettauthorOct 17.2006 — Thanks. I am currently uploading a 1px padding around the box to see how that looks.

I dont fully understand a couple of you points - sorry:

  • 1. a width, then add display: block;


  • 2. align all of you left-hand section components.


    • I think it could also do with removing the indent on the top level links and reducing the indent on the sub level links. Do you know if this is possible?

    Paul
    Copy linkTweet thisAlerts:
    @KravvitzOct 17.2006 — 1) <a>s are display:inline; by default, thus the width property does not apply to them, so to be able to give them a width you need to set them to display:block;

    2) I'm not sure what KDLA means either.

    3) Yes. These three articles explain how to style lists.

    http://www.alistapart.com/articles/taminglists/

    http://css.maxdesign.com.au/listutorial/

    http://www.webreference.com/programming/css_lists/

    And this one explains a fix for a common IE bug:

    [url=http://www.csscreator.com/node/6745]White space bug revisited--the definitive fix[/url]
    Copy linkTweet thisAlerts:
    @KDLAOct 17.2006 — I meant line up everything that is around the navigation with the navigation: the graphics, search form, site map/advanced search links, and the chat components. Make it so if someone places a ruler along the left edge of the page, each things lines up. What you've got now is too jagged, sort of a crazy quilt of coding pieces.

    KDLA
    Copy linkTweet thisAlerts:
    @kjbeckettauthorOct 18.2006 — Hi KDLA

    I understand now thanks. I have been trying to line the left hand nav up with the currency conversion but cant figure out how to remove the indent for all my trying.

    Paul
    Copy linkTweet thisAlerts:
    @_Aerospace_Eng_Oct 18.2006 — Well if you would actually follow up on your old threads you would have the answer

    http://www.webdeveloper.com/forum/showthread.php?t=124985

    A ul has a default margin and padding.
    ×

    Success!

    Help @kjbeckett spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...