a con display block di lunghezza fissa per tutti che vada a capo

**Quinn** · 13-12-2005, 11:37

ciao

ho un div

codice:

div.redinnercontent{width:100%}

che contiene queste informazioni:

codice:

<div class="lecterselector">
	<p class="titleimg">[img]/images/texts/title-artist.gif[/img]</p>
	

A B C D E</p>
	

F G H I J</p>
	

M N O P Q</p>
	

R S T U V</p>
	

W X Y Z #</p>
</div>

legate nel css a queste altre:

codice:

div.lecterselector{margin-left:10px;text-align:center}
div.lecterselector a, a:visited{display:inline;text-decoration:none;font-weight:bold}
div.lecterselector a:hover{text-decoration:underline;font-style:normal}

praticamente serve a scegliere le lettere tramite link.
Vorrei fare in modo che gli a abbiano tutti la stessa lunghezza...ma senza che questo pregiudichi la possibilità che restringendo la finestra vadano a capo, uno sotto l'altro.
mi sono spiegato?

**Mich_** · 13-12-2005, 12:12

Ho modificato il primo codice: non si vedeva nulla nella schermata, per cui ho portato tutto piu` a sinistra.

Nel tuo CSS c'e` una cosa strana: definisci uno stile per gli a dentro il tuo div e lo stesso stile per tutti gli a:visited della pagina: non credo fosse quello che volevi/intendevi.

Per risolvere il tuo problema puoi dare larghezza fissa ai tuoi blocchi a (ad esempio 4 em):

codice:

div.lecterselector { 
  margin-left:10px;
  text-align:center;
}
div.lecterselector a, 
div.lecterselector a:visited {
  display:inline;
  width: 4em;
  text-decoration:none;
  font-weight:bold;
}
div.lecterselector a:hover {
  text-decoration:underline;
  font-style:normal;
}

Per il browser IE potrebeb essere necessario applciare un hack (il width viene visto come min-width)

**Quinn** · 13-12-2005, 12:57

grazie della risposta Mich.
avevo dimenticato una parte forse fondamentale per comprendere meglio il tutto.
Ecco la pagina di esempio, purtroppo il metodo width in em non funziona ne su FF ne su IE :-/

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div.lecterselector { 
  margin-left:10px;
  text-align:center;
}
div.lecterselector a, 
div.lecterselector a:visited {
  display:inline;
  width: 4em;
  text-decoration:none;
  font-weight:bold;
}
div.lecterselector a:hover {
  text-decoration:underline;
  font-style:normal;
}
div.redcontainer{width:95%;margin:auto;background:#E56C3E}
div.redcontainer p{line-height:24px;margin:2px}
div.redcontainer a, div.redcontainer a:visited{color:#FF8A00;text-decoration:none;border:1px solid #CA5D32;background:none;padding:3px;background:#FFFFFF }
div.redcontainer a:hover{text-decoration:underline;font-style:normal;background:#FBC8B4}
div.redinnercontent{width:100%}

</style>

</head>

<body>
<div class="redcontainer">
																<div class="lecterselector">
																	<p class="titleimg">[img]/images/texts/title-artist.gif[/img]</p>
																	

A B C D E</p>
																	

F G H I J</p>
																	

M N O P Q</p>
																	

R S T U V</p>
																	

W X Y Z #</p>
																</div>
</div>
</body>
</html>

**Mich_** · 13-12-2005, 15:29

Ho fatto un errore.
Non si puo` definire la larghezza per un oggetto con display:inline

occorre cambare sistema.
Tu non vuoi oggettini di tipo inline, ma blocco, che vanno affiancati con il float:

codice:

div.lecterselector a, 
div.lecterselector a:visited {
  display:block;
  float: left;
  width: 4em;
  text-decoration:none;
  font-weight:bold;
}

Eventualmente puo` non servire la suddivisione in tanti

: un

unico puo` bastare, eventualmente limitando la larghezza (con un max-width) nei casi in cui sia inserito in una finestra troppo larga.

**Quinn** · 13-12-2005, 15:50

perfettamente ragione, errore mio grazie mille

Discussione: a con display block di lunghezza fissa per tutti che vada a capo

Strumenti discussione

Ricerca discussione

Visualizza

a con display block di lunghezza fissa per tutti che vada a capo

Permessi di invio