Въпрос за меню с дължина 100% ?

[confiscate]

Здравейте ,
Искам да направя най-отгоре на страницата ми меню , което да е с дължина 100% и да се оразмерява според различните резолюции. Може ли да ми кажете най-правилния начин ? И друго важно е , че не искам менюто да е с фон цвят , а с фон картинка. Ето пример какво съм направил аз.

<div id="wrap">
    <div id="navBar">
        <ul>
            <li>Начало</li>
            <li>За мен</li>
            <li>Галерии</li>
            <li>Слайдове</li>
            <li>Форум</li>
            <li>Ревюта</li>
            
        </ul>
    </div>
</div>

[css]p,h1,h2,h3,h4,ul,a,img {
margin: 0;
padding: 0;
}

img {
border: none;
}

/* ---------- Стилове на всички списъци ---------- */
ul {
list-style-type:none;
overflow:hidden;
}



html,body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color:#fff;
line-height: 1.5em;
text-align: left;
margin: 0 auto;
padding: 0;
}


#wrap{
min-width:1000px;
min-height:100%;
margin: 0 auto;
}

#navBar {background: url(../img/wallpaper.jpg) no-repeat center bottom; background-size:100%; height:100px; }
#navBar ul {width: 500px; height:100%; margin:0 auto;}
#navBar li {float:left; padding-left:15px;}[/css]

Искам да ми кажете най-правилния начин. И защо като го правя с фон цвят, като задам width:100% всичко е както трябва , като сменя фонът да е картинка и задам width:100% , менюто се оразмерява спрямо wrap , а не спрямо резолюцията ?
Благодаря предварително !

 

[stoqnski]

пробвай с :
[css]width: auto;[/css] , но по принцип става с :
[css]width: 100%;[/css]

 

[stankata90]

[css]
p,h1,h2,h3,h4,ul,a,img {
margin: 0;
padding: 0;
}

img {
border: none;
}

/* ---------- Стилове на всички списъци ---------- */
ul {
list-style-type:none;
overflow:hidden;
}

html,body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color:#000;
line-height: 1.5em;
text-align: left;
margin: 0 auto;
padding: 0;

}

#wrap{
min-width:1000px;
min-height:100%;
margin: 0 auto;
}

#navBar {
height: 100px;
background: url(../img/wallpaper.jpg) no-repeat center top;
background-size: cover;
}

#navBar ul {
width: 500px;
margin:0 auto;
}

#navBar li {
float:left;
padding-left:15px;
}

[/css]

пробвай така. Но имай в предвид, че при голяма разделителна способност, изображението може да се разтегли прекалено и да не лови окото.