Newsgroup: it.comp.www.html
Titolo: [css] test barra navigazione

Ciao,
per fare un po' di esercizio, ed in un'ottica volta a rendere uno dei miei
siti piů accessibile, ho provato a ridisegnarne la barra di navigazione
tramite css. Vorrei un vostro parere sia sul risultato estetico, che sulla
sintesi del codice.
L'attuale menu di navigazione in flash lo potete vedere alla pagina:
http://www.carpineti.com/geologia.php
Mentre quello in css:
http://www.carpineti.com/prova.php
Il codice css che ho usato per la barra:
#boxmenu {
 font-family: Geneva, Arial, Helvetica, sans-serif;
 margin-right: 2px;
 margin-left: 2px;
 margin-top: 18px;
}
#boxmenu p {
 font-size: 11px;
 margin: 0px;
 padding: 0px;
 border: 1px solid #CC9900;
 background-color: #CC6600;
 text-transform: lowercase;
}
div.navbar {
 margin-bottom: 5px;
 padding: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-left: 0px;
}
div.navbar h4 {
 font-size: 11px;
 margin: 0px;
 padding: 0px 0px 0px 2px;
 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-weight: normal;
 background-color: #FFFF00;
 border: 1px solid #CC9900;
 font-style: italic;
}
div.navbar a {
 color: #FFFFFF;
 text-decoration: none;
 display: block;
 padding-left: 2px;
}
div.navbar p a:hover {
 color: #FFFFFF;
 text-decoration: none;
 display: block;
 background-color: #F37A01;
 margin: 0px;
 padding: 0px 0px 0px 2px;
}
Grazie!
--
Wildchild

"Wildchild"  ha scritto:
| Ciao,
| per fare un po' di esercizio, ed in un'ottica volta a rendere uno dei miei
| siti più accessibile, ho provato a ridisegnarne la barra di navigazione
| tramite css. Vorrei un vostro parere sia sul risultato estetico, che sulla
| sintesi del codice.
| L'attuale menu di navigazione in flash lo potete vedere alla pagina:
| 
http://www.carpineti.com/geologia.php
|
| Mentre quello in css:
| 
http://www.carpineti.com/prova.php
|
| Il codice css che ho usato per la barra:
[...cut...]
Ciao,
    direi che e' venuto bene, decisamente. Forse per le voci dei vari gruppi di
link avrei usato il grassetto invece del corsivo, e non sarebbe male indentare
i link (credo basti un margin-left) come nella versione flash.
Un consiglio, perchè ci sto passando anch' io ora che uso molto i css, non credo
che nessun tutorial lo dica ma viene utile:
stabilisciti un ordine degli attributi nella definizione di uno stile, e cerca di seguirli
per tutti gli stili nei css. Il mio ordine di dichiarazione a cui cerco di attenermi e'
questo:
1 - posizionamento, float
2 - dimensioni, display e overflow
3 - margin e padding
4 - bordi
5 - background e color
6 - font-family
7 - font-size
8 - altri attributi sul testo
Cosi ti verrà più semplice leggerli e modificarli.
Una cosa: a:hover eredita tutto da a, quindi in a:hover
ti basta solo cambiare il background.
Infine, prendi la buona abitudine di validare i css e l' html.
Saluti,
    SantaKlauss

 SantaKlauss
Grazie e alla prossima, spero di poter ricambiare!
Ciao!
--
Wildchild

Wildchild ha scritto:
[...]
| Non ho ancora usato i css per disegnare il layout, perchè non
| mi sento ancora del tutto pronto... sono troppe le variabili da considerare
| a causa dei bug dei vari browser.
Io sto facendo il mio primo esperimento ora: un mini-sito (credo che verrà
in tutto 10-15k di codice tra 5 pagine html e un file css) con i css-p, e lo sto
testando man mano che procedo con IE5.5, Opera7, K-Meleon e  Mozilla 1.3
validando man mano che procedo sia l' html che i css.
Devo dire che fare un sito compatibile con tutti non e' facile.. magari su
Explorer lo vedi in un modo... e con mozilla in un altro, anche se ti dirò
che Opera è quello con cui mi trovo meglio.
La prima cosa direi e' evitare il padding nei div, piuttosto inserire in un div
un paragrafo con i margini, oppure usare il box model hack di Tantek.
Poi le liste... che se non specifichi gli attributi di margin e padding rendono
in maniera molto differente. E poi tante altre cose di cui ti accorgi man mano
che testi il tuo lavoro sui differenti browsers.
La questione e' che w3schools ha una sezione quasi nulla sul posizionamento
con i css.. e in molti siti il posizionamento, quello assoluto in particolare, e'
spiegato in maniera errata o superficiale... ed e' fondamentale per strutturare
il layout di un sito con i css.
Comunque, procedi con calma e per gradi e vedrai che man mano i risultati
vengono!
Saluti,
    SantaKlauss

 di Tantek.
[...]
Scusa una domanda, ma se io non imposto il width, il padding funziona bene,
no? Il div si espande tanto quanto gli permette il tag padre, e poi rientra
dei pixel impostati con il padding... o no?
Ciao!
--
Wildchild

 esperienze di studio sui css. 
naaaa, qui nel NG ci sono, ma personalmente trovo che
di recente  sia troppo caldo. :)
se proprio siete curiosi c'e' sempre "google groups":
http://tinyurl.com/e8pu
-- 
email: goldicus1970 AT 
yahoo.it
web: 
http://www.deelan.com

Wildchild ha scritto :
| Scusa una domanda, ma se io non imposto il width, il padding funziona bene,
| no? Il div si espande tanto quanto gli permette il tag padre, e poi rientra
| dei pixel impostati con il padding... o no?
Si in questo caso penso che sia cosě, farň una prova quando ho tempo.
Quello che intendevo e' che il padding viene trattato diversamente nei vari
browsers quando le dimensioni sono specificate.
Ciao!
    SantaKlauss

 di recente  sia troppo caldo. :)
Ehehehe... io vivo in montagna!
D'estate, almeno, ha i suoi pregi! :D
--
Wildchild

 
http://www.carpineti.com/prova.php
IMHO potresti fare qualche sforzo in piu' sul fronte dell'usabilita'.
Per esempio, il link potrebbe diventare sottolineato quando ci passi
sopra il mouse.
Inoltre mi pare che la barra verticale sia eccessivamente grande. In
800x600 se ne veede la meta'
Emiliano Farinella
-- 
http://www.emiliano.farinella.org

 800x600 se ne veede la meta'
Ciao, in che senso se ne vede la metà?
Io in 800x600 vedo tutto bene!
Ciao!
--
Wildchild

| La questione e' che w3schools ha una sezione quasi nulla sul posizionamento
| con i css.. e in molti siti il posizionamento, quello assoluto in particolare, e'
| spiegato in maniera errata o superficiale... ed e' fondamentale per strutturare
| il layout di un sito con i css.
Ciao WildChild,
    volevo segnalarti che ieri su questo sito ho trovato finalmente un buon tutorial sui
css e i css-p (sono cinque paginette in cui spiega veramente bene il box model, float
e clear e i vari posizionamenti). Se vuoi dargli uno sguardo:
www.brainjar.com
Buono studio!
    SantaKlauss

 Io in 800x600 vedo tutto bene!
In 600 pixel ti sta tutto il menu?
Mi sorprende...


 Emiliano Farinella
Ma dici in verticale? Beh, ma quello č dovuto al fatto che ci sono un sacco
di voci...
--
Wildchild

 
www.brainjar.com
Grazie, sei grande! :)
--
Wildchild