CODEWITHSUNDEEP
htmlcsssizehtml-lists
ridermansb
ridermansb

Reputation: 11059

Fix size tag "li" and for bold font size decrease

I have this site, please note that in a:hover put the source as bold. The problem is that the font size decreases and eventually I read it also decreases.

There are two errors in the HTML you would like your help:

  1. The source should not decrease when ally is in bold. In the event a:hover can not change the size of the tag li.
  2. The tag li must have fixed size, and not size depending on content. How can I fix the size of the li?

Upvotes: 0

Views: 3689

Answers (3)

Jason Gennaro
Jason Gennaro

Reputation: 34855

You can prevent the boxes from jumping by

  1. floating the lis
  2. adding a width to the lis
  3. adding left and right padding to the lis
  4. taking the hover off the a and adding it to the lis

--

ul#menu li {
 float:left; 
 width:120px; 
 background-color: #676767; 
 text-align:center; 
 padding:20px 20px; 
 margin:0 .25em;
}

ul#menu li a {
 color: #FFFFFF; 
 text-decoration: none;
} 

ul#menu li:hover {
 font-weight: bold; 
 background-color: #868686; 
 color: #FFFFFF;
}

http://jsfiddle.net/jasongennaro/5jJg3/10/

Important:

  1. the bolder text still jumps, but the boxes do not
  2. you will only be able to click on the text ** however you can make the entire li clickable with js, if you like.

Upvotes: 1

amypellegrini
amypellegrini

Reputation: 1026

I took the liberty to touch your css code to achieve the desired result. It would be:

ul#menu li
{
    background-color: #676767;
    display: inline-block;
    text-align: center;
}
ul#menu li a
{
    letter-spacing: 1px;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    padding: 0;
    text-decoration: none;
    width: 100px;
}
ul#menu li a:hover
{
   letter-spacing: 1px;
   font-weight: bold;
   background-color: #868686;
   color: #FFFFFF;
}

What I did was:

  • Remove padding from li and a elements (it should be 0)
  • Set the a element to display:block with fixed width and height
  • Set letter-spacing of a and a:hover to 1px so they keep the same space between characters
  • Keep the text in the center with line-height and text-align:center

The problem was that padding was pushing the box borders when the element changed its size.

Upvotes: 1

AllisonC
AllisonC

Reputation: 3099

I don't know if I understood your question correctly, but can't you put 

ul#menu li
{
   width:200px; //change this amount...
}

Upvotes: 2

Related Questions