CODEWITHSUNDEEP
csswebhtml-lists
arnoapp
arnoapp

Reputation: 2506

Highlight element in navigation

Hell I'm making a navigation where one specific Element should be highlighted from other elements of the navigation. I created a css class highlighted where i increase font the size. But then the text is not on the same hight as the smaller texts.

#navigation .bar a.highlight{
font-size: large;
}

It looks like this: enter image description here

Sorry I'm new to css and html and I guess it's an easy solution.

Please take a look at my code http://jsfiddle.net/FcbJv/

Upvotes: 0

Views: 125

Answers (3)

Nick Tomlin
Nick Tomlin

Reputation: 29221

First, I would suggest not using keywords like large in your CSS for font-size, instead use px or em units (better for maintainability, and browsers can interpret these keywords differently).

You can achieve the effect you want by decreasing the line-height on your .highlight menu item in proportion to the increase in font-size. This maintains the vertical rythm of your menu items.

CSS

/*EM  (personal preference) */

#navigation .bar a.highlight{
   font-size: 1.4em; /* we increase size by .4ems */
   line-height:.6em; /* so we reduce line-height by .4 ems */
}

/* PX */

#navigation .bar a.highlight{
    font-size: 18px; /* just guessing here, make sure to set this to the actual desired height */
    line-height:10px;
}

Upvotes: 2

Gabe
Gabe

Reputation: 330

Aligning things vertically in CSS is one of the things that can make you go crazy.

Try improving the line-height of the list items:

line-height: 16px;

Also, try to be specific with the font-size you want instead of using large because it can vary from browser to browser.

Upvotes: 1

Anil
Anil

Reputation: 21910

You need to add a line-height.

Try this:

#navigation .bar a.highlight {
    font-size: large;
    line-height: 12px; /*Same as your font-size for normal items*/
}

Because your font size for the page is 12px, a line-height of 12px will vertically center it. If you change the font-size, be sure to change the line-height.

Check this JSFiddle.

Upvotes: 1

Related Questions