Fri, 2005-08-05 23:23
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... 
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
Fri, 2005-08-05 23:39
#1
vertical navigation with list... again
What's wrong with adding a line-height to the hover attribute?
Fri, 2005-08-05 23:47
#2
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
Sat, 2005-08-06 00:26
#3
vertical navigation with list... again
Just hit refresh - no shift
Sat, 2005-08-06 00:56
#4
Re: please forgive me!
Quote:
Ah, a Zappa fan, maybe? sheikyerbouti
Sun, 2005-08-07 06:05
#5
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??
Sun, 2005-08-07 12:07
#6
vertical navigation with list... again
sheikyerbouti wrote:
New Castle what part of pennsyltucky??
Sun, 2005-08-07 15:15
#7
vertical navigation with list... again
i was born in York, home of peppermint patties and barbells....
but i left years ago.
Sun, 2005-08-07 20:42
#8
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
Sun, 2005-08-07 20:52
#9
vertical navigation with list... again
CTRL F5 usually refreshes the page.
Web developer toolbar has an option (Option/reset page)
Sun, 2005-08-07 21:02
#10
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
Sun, 2005-08-07 21:48
#11
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
Sun, 2005-08-07 21:50
#12
vertical navigation with list... again
In Firefox, [ctl]r for refresh and [ctl][shift]r for forced refresh, where cache is ignored.
cheers,
gary
Sun, 2005-08-07 22:09
#13
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.
Sun, 2005-08-07 23:02
#14
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
Mon, 2005-08-08 01:06
#15
vertical navigation with list... again
You must have short fingers
"[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.
Mon, 2005-08-08 03:39
#16
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
Mon, 2005-08-08 08:11
#17
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.