Happy Medium for Hovering Navigation "Buttons"

[Wayfarer]

Hi,

My webpage is at: http://wayfarer.brinkster.net/. The "Home" navigation
button is too tall, the other nav buttons are too short. How can I
achieve a happy medium between the two and keep the hover effect?

The stylesheet is at: http://wayfarer.brinkster.net/journeys.css.

TIA

Wayfarer

 

[Beauregard T. Shagnasty]

Wayfarer pounced upon this pigeonhole and pronounced:

Hi,

My webpage is at: http://wayfarer.brinkster.net/. The "Home" navigation
button is too tall, the other nav buttons are too short. How can I
achieve a happy medium between the two and keep the hover effect?

You have the following:

<div class="nav">
<a href="index.asp" title="Journeys' Home Page">
<br>Home<br><br></a>
</div>

The extra unnecessary <br>'s are making "Home" taller. What you should do,
from my quick glance, is have only one <div class="nav"> and make a list

The stylesheet is at: http://wayfarer.brinkster.net/journeys.css.

It's the HTML, not the styles...

 

[picayunish]

Wayfarer wrote in news:[email protected]:

Hi,

My webpage is at: http://wayfarer.brinkster.net/. The "Home" navigation
button is too tall, the other nav buttons are too short. How can I
achieve a happy medium between the two and keep the hover effect?

The stylesheet is at: http://wayfarer.brinkster.net/journeys.css.

Play with padding-top and padding-bottom of .nav instead of <br>'s round
the links.
Start with 1em.

BTW what do you think of using padding-top: 1em and padding-bottom: 1em in
".nav a".
The code looks like this:
..nav a {
display: block;
text-decoration: none;
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
font-weight: normal;
color: black;
background-color: #d8bfd8;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
}

Oh remove the redundant font family form the style sheet. Because you
already specified the font-family in the body, table{}

 

[Wayfarer]

Thus spake Beauregard T. Shagnasty:

Wayfarer pounced upon this pigeonhole and pronounced:

You have the following:

<div class="nav">
<a href="index.asp" title="Journeys' Home Page">
<br>Home<br><br></a>
</div>

The extra unnecessary <br>'s are making "Home" taller. What you should do,

I know, but without then it was too short.

from my quick glance, is have only one <div class="nav"> and make a list
inside it ( <ul><li>...), then appropriately style those elements.

I'm learning CSS (slowly), but I don't know how to do what you suggest.
Is there a webpage somewhere that I could, umm, "tastefully borrow
from" to implement it?

Thanks for your help.

Wayfarer

 

[Adrienne]

I'm learning CSS (slowly), but I don't know how to do what you suggest.
Is there a webpage somewhere that I could, umm, "tastefully borrow
from" to implement it?

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

 

[Wayfarer]

Thus spake picayunish:

Wayfarer wrote in news:[email protected]:

Play with padding-top and padding-bottom of .nav instead of <br>'s round
the links.
Start with 1em.

BTW what do you think of using padding-top: 1em and padding-bottom: 1em in
".nav a".
The code looks like this:
.nav a {
display: block;
text-decoration: none;
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
font-weight: normal;
color: black;
background-color: #d8bfd8;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
}
Oh remove the redundant font family form the style sheet. Because you
already specified the font-family in the body, table{}

I tried what you suggested, and it sized the nav buttons the way I
wanted, but unfortunately, it lost the hover effect where the whole
"button" turned white on green.

Thanks,
Wayfarer

 

[Toby A Inkster]

Thus spake Beauregard T. Shagnasty:


I'm learning CSS (slowly), but I don't know how to do what you suggest.
Is there a webpage somewhere that I could, umm, "tastefully borrow
from" to implement it?

http://www.goddamn.co.uk/tobyink/Documents/html_tutorial/css-rollovers.html

 

[picayunish]

Wayfarer wrote in news:[email protected]:

Thus spake picayunish:

I tried what you suggested, and it sized the nav buttons the way I
wanted, but unfortunately, it lost the hover effect where the whole
"button" turned white on green.

How about using the top and bottom padding in the .nav?