www.MegaLab.it

da **ssjx** » mer nov 01, 2006 10:15 pm

Ecco un nuovo problema con cui non avevo previsto di scontrarmi

come faccio a realizzare una barra di navigazione orizzontale costituita da una lista i cui elementi abbaino una dimensione fissa (altezza 30px e larghezza 120px) con l'utilizzo di immagini per lo sfondo e (ed è qui che arriva l'inghippo) che sia centrata?

Anche girando su HTML.it non sono riuscito a risolvere tutti i problemi

Codice: Seleziona tutto: <div id="navigation"> <ul> <li><a class="active" href="#">Home</a></li> <li><a href="#">Forum</a></li> <li><a href="#">About</a></li> </ul> </div>

Riepilogando il DIV occupa il 100% in larghezza, e ci sarebbero da aggiugere gli stati hover e active comunque il problema sta nel far convivere l'uso di immagini e dimensioni fisse degli elementi (in pratica come fossero bottoni) con la posizione centrale

Idee?

da **Pacopas** » gio nov 02, 2006 12:43 am

Ciao sono sempre io

certo che te li vai proprio a cercare i problemi!? [:-D]

ho cercato un po' in giro e non ho trovato nulla che risolvesse il problema;
allora ho studiato questo trucchetto che sembrerebbe funzionare (lo hai in esclusiva )

Ti posto direttamente il codice, non per toglierti il gusto di scriverlo, ho perché mi piace fare lo spaccone ma solamente per il fatto che non essendo un webmaster, non avendo seguito nessun corso e avendo come unica guida le specifiche del css
se non scrivo il codice non riesco a trovare la soluzione e in questo caso particolare sarebbe anche complicato da spiegare, quindi spero tu legga la mia buona fede.

ecco cosa ho combinato

Codice: Seleziona tutto: <html> <head> <title></title> <style type="text/css"> #barranavsup{ width:100%; text-align:center; height: 30px; background-color: #cccccc; } #barranav{ width: 360px; height: 30px; background-color: #000000; } .menu a{ float: left; background-color: #fff; background-image: url(a.gif); width:120px; height: 30px; text-align:center; text-decoration:none; } </style> </head> <body> <div id="barranavsup"> <div align="center"><div id="barranav"> <div class="menu"><a href="" title="HOME">HOME</a></div> <div class="menu"><a href="" title="FORUM">FORUM</a></div> <div class="menu"><a href="" title="ABOUT">ABOUT</a></div> </div> </div> </div> </body> </html>

per vedere se funziona prendi una immagine 120x30 rinominala a.gif (nome banale lo so) e mettila nella stessa cartella della pagina che ottieni.

una cosa importante il trucco sta nel creare il box barranav di dimensioni fisse quindi se c'è un solo bottone e il bottone a larghezza 120px; barranav avrà width: 120px;
con due bottoni width: 240px;
con tre width: 360px; (come nel tuo caso)

i margini padding e border sono settati a zero se li aumenti dovrai tenerne conto.

cosa ne dici può andare?
l'unico difetto teorico e che devi sapere prima quanti bottoni userai ma in pratica dovresti saperlo altrimenti devi solamente cambiare il valore di width

fammi sapere.

da **ssjx** » gio nov 02, 2006 10:51 pm

Si alla fine mi sembra sia l'unico trucchetto possibile

Già oggi mentre ero in giro avevo pensato ad una soluzione del genere .................. avrei preferito fosse possibile assegnare dimesioni alle liste ma pazienza [:-D]

Tnx x l'aiuto [:-D]

da **Pacopas** » gio nov 02, 2006 11:25 pm

ssjx ha scritto:Tnx x l'aiuto

Figurati (poi ora siamo soci [cool]

)

ssjx ha scritto:avrei preferito fosse possibile assegnare dimesioni alle liste ma pazienza

non ho compreso bene cosa intendi

in realtà puoi assegnare le dimensioni che vuoi.

da **ssjx** » ven nov 03, 2006 12:10 am

Ecco come ho impostato il tutto per continuare ad usare le liste (colori e particolari messi a caso, poi ci lavoro)

Codice: Seleziona tutto: <div id="navigation"> <div id="navigation2"> <ul> <li><a href="#">Link1</a></li> <li><a class="active" href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> <li><a href="#">Link5</a></li> </ul> </div> </div>

Codice: Seleziona tutto: div#navigation { background-color: #f7f8f9; background-image: url(../images/bg_nav.gif); width: 100%; height: 28px; margin: 0; padding: 0; } div#navigation2 { width: 600px; height: 28px; margin: 0 auto; padding: 0; } div#navigation2 ul{ margin: 0; padding: 0; list-style: none; text-align: center; } div#navigation2 li{ display: block; float: left; margin: auto; } div#navigation2 a{ background-color: #f7f8f9; float: left; width: 120px; height: 28px; line-height: 28px; padding: 0; text-decoration: none; } div#navigation a:hover{ background-color: #C20000; } div#navigation a.active{ background-color: #C20000; }

Avevo bisogno di continuare ad usare le liste x questioni di compatibilità con altri CSS

Se hai suggerimenti per perfezionare il codice sono ben accetti [:-D]

da **Pacopas** » ven nov 03, 2006 1:12 am

ssjx ha scritto:Ecco come ho impostato il tutto per continuare ad usare le liste (colori e particolari messi a caso, poi ci lavoro)

Perfetto! Sembra proprio che hai risolto tutto. [applauso]

scusa ma prima non avevo capito bene; quando dicevi

ssjx ha scritto:avrei preferito fosse possibile assegnare dimesioni alle liste ma pazienza

ho concentrato l'attenzione sul termine dimensioni e non su liste, avevo dimenticato che avevo usato il div nel mio codice. ecco il perché della mia risposta

Pacopas ha scritto:in realtà puoi assegnare le dimensioni che vuoi.

perché immaginavo che estrapolassi solo il metodo di centratura non il resto del codice, quindi continuando a usare le liste.

comunque sei un grande.

ps
il codice mi sembra apposto. (anche se detto da me non so quanto valore abbia)

(osservazione senza peso)
con i css si possono creare effetti graziosissimi senza immagini di sfondo, ma una immagine di poche kb non fa la differenza nel caricamento

www.MegaLab.it

[CSS] - Barra di navigazione orizzontale

[CSS] - Barra di navigazione orizzontale

Chi c’è in linea