Newby CSS: block links

[GoldEmish]

Ciao,
ho iniziato da poco ad usare i css e avrei una domanda da farvi.
Con questo codice:

<style type="text/css">
a.menu{
 display:block;
 background-image:url(images/back.jpg);
 width:162px;
 height:42px;
}
-->
</style>
...
HomeNews

ottengo l'effetto desiderato:
due link con una img di sfondo.
Il mio problema è che questi due link non restano appaiati, ma risultano uno sopra l'altro. Perchè?
Tra le tag <a> non c'è nessun

,<div> o
eppure non riesco a metterli uno a fianco all'altro.
Mi potreste aiutare?
Grazie

[salasir]

prova ad aggiungere

float: left;

[pierofix]

Aspetta. Innanzitutto stai facendo un errore nella struttura: non puoi inserire link adiacenti senza un carattere stampato non linkato tra essi (per motivi di accessibilità).

Se devi fare un menù ti consiglio la solita tecnica che sfrutta le liste non ordinate (ul). Prova a fare una ricerca nel forum.

P.S. Comunque, nello specifico, quello che mancava alla tua soluzione era il float:left applicato ai marcatori a. Ti consiglio comunque di abbandonare quella tecnica.

[thomas_anderson]

Poichè hai dichiarato block i due link si dispongono come elementi di blocco, uno sopra l'altro. Hai bisogno di aggiungere un'altra proprietà:

a.menu{
 display:block;
 background-image:url(images/back.jpg);
 width:162px;
 height:42px;
 float: left;
 margin: xx;
 padding: 0;
}

[GoldEmish]

Originariamente inviato da pierofix
Aspetta. Innanzitutto stai facendo un errore nella struttura: non puoi inserire link adiacenti senza un carattere stampato non linkato tra essi (per motivi di accessibilità).

Non ho capito
Scusa...
intendi dentro a href=""?
Perchè il link manca perchè devo ancora inserirlo, ma chiaramente lo scriverò appena completo le altre pag.

In effetti con float ho risolto grazie.

L'ultima cosa.
All'interno del block il testo è allineato al centro in alto, come posso allinearlo al centro sia verticalmente sia orizzontalmente in modo sia al centro dell'immagine?
Grazie.

[salasir]

Per l'allineamento dovrebbe bastare

line-height:42px; text-align: center;

.
Per il resto, Pierofix ti faceva notare che come l'hai scritto si dovrebbe vedere qualcosa del genere

HomeNews

che diventa illeggibile e indistinguibile un link dall'altro.
Dovresti inserire tra i due link almeno un carattere di divisione e due spazi (p.e. " | ")

[pierofix]

Originariamente inviato da salasir
Dovresti inserire tra i due link almeno un carattere di divisione e due spazi (p.e. " | ")

Sì, ecco, mi ero espresso con una traduzione schifosa del punto 10.5 delle WCAG 1.0. Scusa ancora. Il fatto, comunque, è che ti consiglio di usare una lista per i tuoi menù: se fai una ricerca trovi tutto ciò che c'è da sapere.

[thomas_anderson]

salasir ti ha detto di specificare il valore di line-height per l'allineamento verticale, valore che deve essere pari all'altezza (cfr. Gianluca Troiani, "CSS. Guida completa", Apogeo, cap.5).

[GoldEmish]

MMh, non è così,
io vedo i due link appaiati in maniera corretta:
http://www.polirenato.com
Eppure tra le tag <a> non c'è niente.

[thomas_anderson]

Non è una questione di layout ma di accessibilità. mai sentito parlare degli screen reader?