Come "allargare" il main menų in % ma solo in px

[Bubz]

Ciao a tutti,
ho un problema che da principiante non riesco a risolvere. Per un amico, sto cercando di modificare un template. Prima l'ho fatto usando Beez3 e non ho avuto problemi se non andando a scoprire ad un buon punto del lavoro che aveva problemi ad "adattarsi con i device mobili" per cui ho cercato un altro template (responsive, questa volta) e ricominciato con le modifiche. Dopo aver perso quasi tutto il pomeriggio mi sono arreso ed ho deciso di venire a "rompervi le paxxe"!

Il problema: ho il main menu formato da cinque campi (home, azienda, servizi, news, contatti) e vorrei che "fosse largo" quanto "l'articolo sottostante" (900 in pixel). Farlo divindendo per 5 ed assegnare un width in pixel non mi da nessun problema ma mi piacerebbe che riducendo le dimensioni di schermo si adatti ad altri monitor e/o device. Facendolo perō in percentuale č come se il "comando" venisse ignorato.

Metto la parte di codice dove sto lavorando. La riga dopo #topmenu a { (width: 15%;) e dove il "width non lavora".

Grazie mille, Bubz

Codice: [Seleziona]


/** Topmenu (added multi-level support v1.1) **/


#topmenu_wrap {
   overflow: auto;
   min-width: 960px;
   background-color: #242424;
}


#topmenu {
   width: 900px;
   margin: auto;
   padding-left: 0px;
   font-family: 'Droid Sans', sans-serif; font-weight: 400;
   font-size: 1.2em;
   color: #969696;
}


#topmenu ul {
   float: left;
   padding: 0;
   margin: 0;
   list-style: none;
}


#topmenu a {
   width: 15%;
   display: block;
   color: #969696;
   padding-top: 20px;
   padding-bottom: 20px;
   padding-left: 24px;
   padding-right: 24px;
   text-decoration:none;
   text-transform: uppercase;
   background-color: #151515;
   box-shadow: 5px 0px 0px #222222;
}


#topmenu a:hover,
#topmenu li.active a {
   color: #fff;
   text-decoration: none;
   background-color: #535353;
}




#topmenu li:first-child {
   border-left: 1px solid #3c3c3c;
}


#topmenu li {
   float: left;
   border-right: 1px solid #3c3c3c;
}






/** Second-level lists **/


#topmenu li ul {
   position: absolute;
   font-family: 'Droid Sans', sans-serif, Helvetica, Arial;
   font-size: 12px;
   width: 172px;
   left: -999em; /* "display: none" not seen by screen readers */
   background-color: #000;
   border: 0;
   margin-left: -1px;
   z-index:100;
}


#topmenu li li,
#topmenu li li:first-child {
   border: 0;
   margin-bottom: -1px; /* iPhone/iPad fix */
}


#topmenu li li a {
   width: 172px;
   background-color: #000;
   border: 0;
   padding-top: 10px;
   padding-bottom: 10px;
}




#topmenu li ul a {
   width: 172px;
   
}


#topmenu li.active ul a:hover {
   color: #fff;
   text-decoration: none;
   background-color: #535353;
}


#topmenu li.active ul a {
   text-decoration: none;
   background-color: #000;
}


/** Level third and above **/


#topmenu li ul ul {
   margin: -39px 0 0 220px;
}


#topmenu li:hover ul ul, #topmenu li:hover ul ul ul, #topmenu li.sfhover ul ul, #topmenu li.sfhover ul ul ul {
   left: -999em;
}


#topmenu li:hover ul, #topmenu li li:hover ul, #topmenu li li li:hover ul, #topmenu li.sfhover ul, #topmenu li li.sfhover ul, #topmenu li li li.sfhover ul { /* nested under hovered items */
   left: auto;
}



[Rasjah]

Ciao Bubz, La teoria che hai esposto č giusta, ma la pratica.... hai un link al sito

[Bubz]

Grazie Rasjah, ma l'amico ha deciso di cambiare template e ho duvuto rifare tutto.

Grazie mille