CODEWITHSUNDEEP
htmlcssmenu
Mihai Bujanca
Mihai Bujanca

Reputation: 4219

Menu items not displayed properly

I know the cause of my problem, however I can't really find a way to solve it- my customer wants the menu to be as long as the page container- or as close as possible (960px)-however this might happen if I zoom in or out the page. I can't really find a solution to that (other than making the menu small enough to fit in the container. printscreen-

HTML:

<div id="page_menu" style=" margin-left:auto;margin-right:auto; width: 960px">
            <a href='/index.html'> Home </a>
            <a href='/stii.html'> Stii ce sa intrebi? </a>
            <a href='/diferit/html'> Ce e DIFERIT? </a>
            <a href='/oferta.html'> Oferta </a>
            <a href='/cumparare.html'> Cum cumpar? </a>
            <a href='/livrare.html'> Livrare </a>
            <a href='/noutati.html'> Noutati </a>
            <a href='/despre.html'> Despre noi </a>
            <a href='/contact.html'> Contact </a>
            <a href='/parteneri.html'> Parteneri </a>
        </div>

CSS:

#page_menu a {
    float: left;
    text-transform:none;
    color:#F1EFED;
    font-size:20px;
    padding:10px 15px 10px 14px;
    background-color: #84c225;
    text-decoration: none;
    border-right: 1px solid #ffffff;
}

Upvotes: 0

Views: 104

Answers (2)

Mr Lister
Mr Lister

Reputation: 46569

Given your HTML, this style would do what you want:

#page_menu {
    display:table;
    width:960px;
    text-transform:none;
    background-color: #84c225;
    border:none;
    margin:0 auto;
}
#page_menu a {
    display:table-cell;
    padding:10px 5px;
    border-right: 1px solid #ffffff;
    text-align:center;
    text-decoration:none;
    font:16px 'Arial', sans-serif;
    color:#F1EFED;
}

You originally had 20px for a font size, but I found that doesn't fit. So you may have to test a bit which font size suits best.

See Fiddle

By the way, I can't test on many browsers now, but I'm not sure if they all handle display:table-cell on an a element well. You may want to play it safe and put each of the a elements in a div and give those divs the table cell styles.

Upvotes: 1

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

<style>
#page_menu a {
float: left;
text-transform:none;
color:#F1EFED;
font-size:20px;
height:40px;
line-height:40px;
padding:0px 7px;
text-align:center;    
text-decoration: none;
border-right: 1px solid #ffffff;
}
.page_menu a:last-child
{
border:none;
}
</style>
<div id="page_menu" style=" margin-left:auto;margin-right:auto; width: 960px; background-color: #84c225;height:40px">
<a href='/index.html'> Home </a>
<a href='/stii.html'> Stii ce sa intrebi? </a>
<a href='/diferit/html'> Ce e DIFERIT? </a>
<a href='/oferta.html'> Oferta </a>
<a href='/cumparare.html'> Cum cumpar? </a>
<a href='/livrare.html'> Livrare </a>
<a href='/noutati.html'> Noutati </a>
<a href='/despre.html'> Despre noi </a>
<a href='/contact.html'> Contact </a>
<a href='/parteneri.html'> Parteneri </a>
</div>

Upvotes: 0

Related Questions