CODEWITHSUNDEEP
htmlcsshtml-lists
Busti
Busti

Reputation: 5604

Changing lists font size re-sizes the whole li

Im trying to create a header by using html lists but when I try to change the font size to a smaller value it automatically re-sizes the whole li.

Here is an example of what I mean: Comment out the font size tag to see what I mean...

HTML:

<ul id="header">
<li><a><h1>Home</h1></a>
</li>
<li><a><h1>Link2</h1></a>
</li>
<li><a><h1>Link3</h1></a>
</li>
<li><a><h1>Link4</h1></a>
</li>
<li><a><h1>Link5</h1></a>
</li>
<li><a><h1>Link6</h1></a>
</li>

Css:

#header {
    width: 70em;
    height: 4em;
    padding: 0;
    margin: 0;
    margin-bottom: 1px;
    list-style: none
}

#header li {
    /*font-size: 8pt;*/
    color: #FFF;
    display: inline;
    margin-right: -3px;
}

    #header a {
    display: inline-block;
    width: 9.94em;
    height: 4em;
    background: #FDB813;
}

Should I use divs instead or is there another solution?

Upvotes: 0

Views: 155

Answers (6)

Dino
Dino

Reputation: 806

Add a css property

#header a{
    font-size: 8pt;  
}

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

Since the dimensions of the a element have been set using the em unit, they change when the font size of the element is changed. This also changes the dimensions of the enclosing li element, since the a element is its only content.

The conclusions depend on what you want. By setting dimensions using the em unit, you explicitly want them to depend on the font size. If you do not want that, use some other unit, such as px (though this unavoidably raises the question what happens when the font size is increased so that it is larger than the height set in px units).

Upvotes: 0

fossman83
fossman83

Reputation: 347

I would create a div as the header and then put the ul inside it. You will have more control over styling. To change just the font size on the a tags, add the font-size ; to the #header a {}.

Upvotes: 0

clever_bassi
clever_bassi

Reputation: 2480

Please add this :

#header h1{
    font-size: 8pt;  
}

Thanks.

Upvotes: 2

Khan
Khan

Reputation: 2982

When you use display: inline the size of the element will depend on the text (and the size of the text). There are many ways to change this.

If you want the header to always take up the same width, consider floating the elements and setting a percentage width, depending on the number of elements (5 elements = 20% width).

You can also set the background color on the #header element, so that always takes up the same amount of space, but the links change size within it.

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

You are using the em unit for setting the width/height of the links.

em are relative to the font size, so when you change that you alter their dimensions as well

Upvotes: 1

Related Questions