17 replies [Last post]
sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

greetings-

i've poured through the Search results and found many questions about vertical navigation bars using lists, but i was unable to find a situation like mine.

i have a list that is now my nav bar. i have all the different "states" created in the style sheet (link, visited, hover, active.... in that order). i have my nice gray background with black border when i hover. i have the gray stretching fully from left to right to cover the whole div.

http://www.junkproductions.com/test/index.html

what i have been unable to figure out is how to get a little more "space" (whether it's via padding, line height, whatever) above and below the actual top and bottom of the letters of the links when i hover over them. i'll say it another way. when i hover over a link and the gray background appears with the black border, it looks like the black border is nearly touching the top and bottom of the letters in the link. is there a way to pad above and below the word "Home" to get that gray box to s-t-r-e-t-c-h a little higher and lower around the word Home?

HTML

<div id="sidenav">
			<ul id="navlist">
				<li><a href="#">Home</a></li><li><a href="#">Breckenridge House</a></li><li><a href="#">Location</a></li><li><a href="#">Photo Gallery</a></li><li><a href="#">Floor Plans</a></li><li><a href="#">Rates</a></li><li><a href="#">Local Links</a></li><li><a href="#">Contact Us</a></li>
			</ul>
		</div>

CSS

#sidenav { background-color: #1e5599; position: absolute; top: 100px; left: 0; width: 150px; height: 500px; }
#sidenav ul { margin-left: 0; padding-top: 15px; padding-left: 0; list-style-type: none; white-space: nowrap; }
#sidenav a { font-size: 13px; line-height: 14px; padding-left: 10px; display: block; }
#sidenav a:link { color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; border: solid 1px #1e5599; }
#sidenav a:visited { color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; border: solid 1px #1e5599; }
#sidenav a:hover { color: #000; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #d4d0c7; background-position: 150px 0; text-decoration: none; border: solid 1px black; }
#sidenav a:active { color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; border: solid 1px #1e5599; }

I'm working on a Win machine and testing with Firefox first.

Here's what i've tried in order to get the gray box to be "taller".

1. add top/bottom padding to #sidenav a
2. add top/bottom padding to #sidenav li
3. add top/bottom padding to #navlist and/or margin to same.
4. make lineheight 20px for #sidenav ul
5. make lineheight 20px for #sidenav a
6. make lineheight 20px for #sidenav a:link
7. make lineheight 20px for #sidenav li
8. make lineheight 20px for #navlist

now i have a headache... Oups
some of those id's have been removed from the code if they made no change and were of no other use to me.

does anyone have any ideas about what to try next? bourbon, i think.....

thanks for any ideas.

-pete

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 31 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

vertical navigation with list... again

What's wrong with adding a line-height to the hover attribute?

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

please forgive me!

i figured out how to do it by pure accident, and in the process i found what i consider to be a major "glitch" of Firefox.....

here's what i was doing during my original testing. i opened my html file, made a change and launched Firefox. since i knew i was going to be trying lots of changes, i left Firefox open, made another change, saved the html file and held down Shift, while clicking Refresh.... it appeared there was no change....

i discovered that Firefox is unlike IE.... it doesn't go back and read the file when you Shift-Refresh.....

i found this out when i was changing a color on the page and wanted to see what it looked like.... and there was no change in the color.

so, the end result is that padding top and bottom of #sidenav a did the trick. thanks for reading and sorry for taking up the bandwidth when i would have figured it out myself in the first try if i was testing properly....

have a great weekend,
pete

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

vertical navigation with list... again

Just hit refresh - no shift

Anonymous
Anonymous's picture
Guru

Re: please forgive me!

Quote:
sheikyerbouti
Ah, a Zappa fan, maybe? Smile

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

vertical navigation with list... again

FZ was brilliant....

"well i heard that some Sheik
just bought your country last week
and you suckers ain't gettin' nothin'....."

what part of pennsyltucky??

Anonymous
Anonymous's picture
Guru

vertical navigation with list... again

sheikyerbouti wrote:
what part of pennsyltucky??
New Castle

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

vertical navigation with list... again

i was born in York, home of peppermint patties and barbells....
but i left years ago.

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

vertical navigation with list... again

wolfcry911 wrote:
Just hit refresh - no shift

no dice... i just changed an image in the html code and saved the page, went to my open Firefox browser, clicked refresh (without holding down the Shift button) and the old image still appears on the page.... it didn't go back and read the code.... simply used the cached version.

is there a setting i need to toggle in Preferences or something? because that's kindof a DRAG....

thanks,
pete

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 1 week ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

vertical navigation with list... again

CTRL F5 usually refreshes the page.
Web developer toolbar has an option (Option/reset page)

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 14 years 13 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

vertical navigation with list... again

DanA-

ctrl + F5 did refresh the page, but still didnt' get my changes to show.... very strange.

i know i downloaded the Web developer package along with the browswer, but i don't see it listed anywhere as a toolbar that i can view... any ideas on how to get that part to show up? i would've guessed it installed with the browser when i ran the setup.exe or whatever it was that installed the browser.....

thanks,
pete

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

vertical navigation with list... again

The web developer thingy on install adds the DOM inspector and something else. The WebDeveloper extension is completely different. You need to get it separately. Goto Tools->extensions->get more extensions.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

vertical navigation with list... again

In Firefox, [ctl]r for refresh and [ctl][shift]r for forced refresh, where cache is ignored.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

vertical navigation with list... again

Gary the function key does work in FF as well as the Ctrl+shift+R :

F5 = refresh/reload

Ctrl+F5 = forced refresh/reload.

Same as in IE, nice as it cuts down on commands to remember and is one less key to fumble over.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

vertical navigation with list... again

But function keys are far far away while 'r' is within reach and [ctl][shift] is a single finger keypress.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

vertical navigation with list... again

You must have short fingers Smile
"[ctrl][shift] is a single finger keypress" F5 is a single keypress and right in front of me, easy target with two hands on the keyboard, but es igual. I do prefer not filling my head up with extra commands though, limited ram and storage.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

vertical navigation with list... again

I'll confess I can't reach F5 with my hands on the home keys. Besides, I learned [ctl]r first on Lynx. The old IBM keyboards had the F keys off to the side anyway. I think there was a set of alt or A keys across the top. Some other old fart will have to check me on that.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

vertical navigation with list... again

Gary wrote:
Some other old fart will have to check me on that.


I don't think that's a very nice way of referring to Roy, do you?

I naturally can't confirm that as I'm far too young a fart and only go back to the days of the 2086.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me