/    Sign up×
Community /Pin to ProfileBookmark

Vertical Navigation

Copy linkTweet thisAlerts:
May 18.2005

Following this tutorial: [url]http://www.photoshoplab.com/tutorial_Easy-Website-Rollovers.html[/url]

I was able to make a horizontal navigation bar without much problem. How do I turn this into a vertical navigation bar? All the tutorials I’ve seen that address vertical navigation bars put the links in lists, but I do not see how this can work with lists. Thank you.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@David_HarrisonMay 18.2005 — Perhaps [url=http://www.alistapart.com/articles/taminglists/]this article[/url] would help some.
Copy linkTweet thisAlerts:
@NogDogMay 18.2005 — The quick solution: add "clear: left;" to the style for "#navi a". The better solution for either method is to mark it up as a styled <ul> list.
Copy linkTweet thisAlerts:
@jobowooauthorMay 18.2005 — I implemented the vertical navigation on my page, and after a few tweaks I was able to place it where I wanted to. The new navigation looks awesome in IE, however, when I view it in Firefox, the links get all scrunched up. Does anyone know how to fix that?

Here's the link to the page:

http://www.jobowoo.com/asdf/

The link to the stylesheet:

http://www.jobowoo.com/asdf/style.css

Thanks ?
Copy linkTweet thisAlerts:
@David_HarrisonMay 19.2005 — This: #button li {
border-bottom: 1px solid #90bade;
margin: 0;
width: 100%;
}Seems to fix it, however you do seem to have some odd white gaps creeping in between the li's. #90bade probably has something to do that.
Copy linkTweet thisAlerts:
@gwyn779May 19.2005 — Good reference for many types of navigation lists: http://css.maxdesign.com.au/listutorial/
Copy linkTweet thisAlerts:
@jobowooauthorMay 19.2005 — This: #button li {
border-bottom: 1px solid #90bade;
margin: 0;
width: 100%;
}Seems to fix it, however you do seem to have some odd white gaps creeping in between the li's. #90bade probably has something to do that.[/QUOTE]

I changed #90bade to black and some of the links still have gaps in between them...ah well. I suppose its better than it used to be, unless anyone else knows how to fix it ?
×

Success!

Help @jobowoo 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.18,
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,
)...