Barra nav con CSS e XHTML

**Shores** · 10-11-2003, 00:34

Che centra: se lasci visibility:hidden; quello che succede è che se il testo dentro la span è molto lungo, la A viene dilatata rispetto alla width specificata, a meno che non si sia detto overflow:hidden;...

Mi spiego: supponi di avere una immagine di sfondo larga 100px, e supponi di mettere nella span "Questo è un link molto bello ed interessante nonchè fantasticamente veloce da caricare", quel che succede è che con visibility:hidden; la A viene di certo dilatata oltre i 100px orizzontali, deformando la barra dei link...

Sono stato più chiaro?

**antos** · 10-11-2003, 01:08

avevo capito anche prima ma dipende dal contesto in cui si va ad utilizzare, tu hai ipotizzato una situazione io un'altra leggermente diversa...cambiano dei piccoli dettagli ma la maggior parte del codice è uguale..

**panta** · 11-11-2003, 09:55

faccio solo presente un dettaglio per evitare confusioni... img è risaputamente INLINE... non block

ciao

**Shores** · 11-11-2003, 11:43

Originariamente inviato da panta
faccio solo presente un dettaglio per evitare confusioni... img è risaputamente INLINE... non block

ciao

Uhm, se vogliamo essere pignoli, IMG non è "risaputamente" (interessante neologismo!) inline, ma invece è una via di mezzo: inline-block.

Ciao!

**Mich_** · 11-11-2003, 12:18

Originariamente inviato da Shores
Uhm, se vogliamo essere pignoli, IMG non è "risaputamente" (interessante neologismo!) inline, ma invece è una via di mezzo: inline-block.

Ciao!

Non credo che esista una "via di mezzo" tra inline e block.

img e` di default inline (infatti un'immagine resta dentro il testo se viene scritta dentro il testo: non va a capo prima e dopo). Si puo`, tramite CSS, renderla block.

Certo e` che un'immagine occupa di solito un'altezza piu` alta del testo, per cui e` preferbile metterla su un lato, ma questo non ha nulla a che fare con il fatto che sia inline.

Ciao
Michele

**floyd46** · 11-11-2003, 12:39

Ciao a tutti
vedo che da quando ho postato il mio 3d, siete in tanti ad aver risposto.
Cmq posso dire di aver risolto il mio problema, cioè la mia barra di nav orizzontale;
posto qui una parte di codice, altrimenti sarebbe 1 pò lunghetto scriverlo tutto!!

Nel file ".css" ho creato i miei #div, in queto modo:

body{margin:0;padding:0;text-align:center;}

#navbar{width:760px;height:22px;float:left;display :inline;}

#script{width:70px;height:22px;display:inline;}

#grafica{width:70px;height:22px;display:inline;}

a.script:link{background-image:url(script_off.gif)}
a.script:visited{background-image:url(script_on.gif)}
a.script:hover{ background-image:url(script_on.gif)}

a.grafica:link{background-image:url(grafica_off.gif)}
a.grafica:visited{background-image:url(script_on.gif)}
a.grafica:hover{background-image:url(script_on.gif)}

ecc......

Nella pagina html ho inserito questo codice:

<body>
<div id="navbar">

<div id="script">[img]script_off.gif[/img]</div>

<div id="grafica">[img]grafica_off.gif[/img]</div>

ecc......
</div>

</body>

Nella mia pagina html appare la barra di navigazione orizzontale, fatta di "gif" che io mi sono creato a parteed ottengo l'effetto "a:hover" al posto del codice JavaScript.

Era questo che chiedevo con la mia domanda; chiedo scusa ancora se non sono stato chiaro nell'esporla.

Se qualcuno riscontrasse errori in questa parte di codice che ho postato, o suggerisce altri modi x ottenere la stessa cosa, sarei contento di imparare da chi ne sa di + di me!!

Grazie a tutti e a presto

-Floyd-

**Shores** · 11-11-2003, 17:43

Originariamente inviato da Mich_
Non credo che esista una "via di mezzo" tra inline e block.

img e` di default inline (infatti un'immagine resta dentro il testo se viene scritta dentro il testo: non va a capo prima e dopo). Si puo`, tramite CSS, renderla block.

Certo e` che un'immagine occupa di solito un'altezza piu` alta del testo, per cui e` preferbile metterla su un lato, ma questo non ha nulla a che fare con il fatto che sia inline.

Ciao
Michele

Beh, allora qua mi infastidisco un po'.

Qui http://www.w3.org/TR/CSS21/visuren.html#display-prop trovate la definizione ufficiale della proprietà display, dove, guardacaso, è previsto un valore inline-block, e ne viene spiegato anche il significato, che guardacaso è che l'elemento è inline esternamente, ma internamente viene formattato come se fosse un block, per esempio non è possibile spezzarlo...

Dopodichè, nelle definizioni all'inizio della specifica si dice che IMG è un "replaced element", cosa dalla quale si deduce che, perlomeno di default, la display per i replaced è inline-block, come si può vedere anche nei fogli di stile standard per l'html presenti alla fine di alcune delle versioni della specifica CSS.

Saluti!

**Mich_** · 11-11-2003, 18:04

Hai ragione. Le specifiche del W3C CSS2 dicono questo.

Non lo avevo mai incontrato, neppure sul testo su cui ho studiato i CSS.

Comunque il CSS1 ha solo 4 valori per il display: block | inline | list-item | none

Il problema che si pone ora e`: quali browser riconoscono questi valori? Quali browser riconoscono il CSS2?

Ciao
Michele

**panta** · 11-11-2003, 18:23

non hai notato una cosa tipo "CSS21" nella barra dell'indirizzo?

vai in fondo alla pagina e clicca su "contents" e vedrai che lì stanno parlando del non del CSS 1 e nemmeno del 2, ma del CSS 2.1, e vedrai anche che quella è una working draft scritta il 15 settembre 2003

Di conseguenza parte degli argomenti descritti in tale documento è + che altro indirizzata al futuro

cmq sia vai una bella cosa

prendi il seguente codice e mettilo in un xhtml

[img]icona[/img]
[img]icona[/img]
[img]icona[/img]
[img]icona[/img]
[img]icona[/img]

e guarda in tutti i browsers che succede senza mettere alcun css...

adesso invece allo stesso html associa come CSS

img {
display: block;
}

e vedi come cambiano le cose.

Per finire quell'inline-block come potrebbe riferirsi al tag img che non può contenere assolutamente nulla fuorchè l'immagine stessa? è ovvio che non puoi madare a capo un pezzetto dell'immagine

[p.s.: "risaputamente" non mi pare un neologismo e se lo fosse non me ne prendo il merito, l'ho semplicemente acquisito, grazie cmq]

ciao

**Shores** · 11-11-2003, 19:03

Beh, per cominciare "risaputamente" non c'è in nessun vocabolario, ma tant'è...

Quanto poi al fatto che inline-block sia più o meno supportata dai browser, questo è un fatto che io non ho nemmeno preso in considerazione; ho semplicemente detto che considerare le immagini come semplici inline non è del tutto corretto, visto che in realtà non si comportano come tali.

Se poi tu avessi letto bene, ho appunto scritto che le specifiche dicono che inline-block significa che ESTERNAMENTE l'elemento viene considerato inline, mentre SOLO internamente viene considerato un block, quindi il tuo esempio andrebbe corretto con:

img {
display: inline;
}

dato che, ai fini del layout, l'inline-block si comporta come un inline che abbia delle dimensioni intrinseche (come ogni altro replaced element).

E scommetto che ora mettere o togliere il css non cambia di una virgola il layout, giusto?

Per concludere, evidentemente il tag IMG, che può essere correttamente sostituito da un OBJECT, che è a sua volta un replaced element, è anch'esso un replaced element, tipo di elemento che come da specifiche viene segnalato come esempio per spiegare l'inline-block...

Direi che dedurre che di default in CSS2.1 il tag IMG è inline-block è lineare, ma forse sono io che ho un'immaginazione fervida...

Ciao!

Discussione: Barra nav con CSS e XHTML

Strumenti discussione

Ricerca discussione

Visualizza

Barra nav ottenuta.

Permessi di invio