elenco di div

**ant_alt** · 16-06-2006, 17:02

nel mio menu verticale vorrei ke l':hover del testo (l'hover cambia lo sfondo del testo) continui fino al bordo destro del div..avevo pensato di utilizzare un elenco di div..ma così sorgono un sacco di problemi di margini padding e punti elenco

il gif è abbastanza esplicativa

non voglio il primo hover (solo sul testo)ma il secondo (ke continua x tutta la larghezza del div)

**pierofix** · 16-06-2006, 17:10

Postaci l'HTML della struttura del tuo menu: ragioneremo su quella.

**ant_alt** · 16-06-2006, 21:53

HTML

codice:

<body>
<div id="container">[img]head copia.jpg[/img]<div id="left">
  

125</p>
  </div>
<div id="right"></div></div>
<div id="nav">
  <ul>[*]<div class="elenco">Home</div>[*]<div class="elenco">Tecnica ed allenamento</div>
	[*]<div class="elenco">Didattica</div>[*]<div class="elenco"> Formazione</div>
	[*]Alimentazione[*]Competizioni
	[*]Rivista On-line
	[*]Glossario[*]Editoria
	[*]Marketing[*]Club NABBA On-Line[/list]
</div>
</body>

CSS

codice:

body,html { height:100%;margin:0 }

div#container{
	position:absolute;
	left:50%;
	z-index:0;
	width:610px;
	margin:0 0 0 -300px;/*metà della larghezza meno 30 d'ombra*/
	clear:right;
	height:450pX;background:#CCFF33;
	background:url(shad.jpg) repeat-y right;
	}
div#left{float:left;background:#0000CC; width:150px;}
div#right{float:right; background:#006633; width: 150px;}
div#nav{
	width:190px;
	height:260px;
	position:absolute;
	top:150px;
	left:50%;
	margin:0 0 0 -369px;
	z-index:1;
	background:#99CC99;
	background:url(nav.jpg) no-repeat left top;
}
.elenco{
	font-family:Tahoma;
	font-size: 12px;
	color:#000000;
	text-align:left;
}
ul div.elenco li{
	list-style-type: none;padding-left:0px;
margin-left:0px;
}

.elenco a:link, .elenco a:visited{
	color:#666666;
	text-decoration: none;
}
.elenco a:hover {
	background:#99FFFF;
	padding-right:15px;
}

PS potrei anche evitare di utilizzare un elenco di div...se esiste un altro modo x realizzare quello k ho detto

**andrea.paiola** · 17-06-2006, 14:19

è errato inserire un div (elemento di blocco) in un li (elemento inline)
togli quindi tutti i div e usa i marcatori rimanenti

**ant_alt** · 17-06-2006, 19:04

Originariamente inviato da andrea.paiola
è errato inserire un div (elemento di blocco) in un li (elemento inline)
togli quindi tutti i div e usa i marcatori rimanenti

ok..ma come faccio a realizzare quello ke voglio?

**Mich_** · 19-06-2006, 09:29

Nei tag <a> contenuti nei vari[*], devi specificare:
display: block;
width: 100%; height: 100%

Fermo restando le altre cose che ti sono state fatte notare.

**ant_alt** · 19-06-2006, 22:24

thanks to Mich,ecco il risultato

**Mich_** · 20-06-2006, 10:11

Io (FF sotto linux con font leggermente ingranditi) vedo grossi problemi di layout in quella pagina, in particoalre in basso a destra, ma forse e` solo che non hai sistemato.
Pero` il menu e` fatto bene.

Ma ci sono altri problemi:
- acapo realizzati tramite una serie di
: non e` semanticamente corretto.
Se devi inserire una cosa tipo una poesia, va usato il taxt-align: pre;
Se invece e` un testo, non vanno usati i
, ma dev'essere il browser ad andare a capo quando non ci sta.

- le barre arancio, andrebbero inserite come sfondo ad un blocco che contiene tutti i pezzetti sulla destra, che andranno spaziati con un position: relative. Inserire delle immagini dispaziatura in blocchi

e` un errore semantico.

Addirittura potresti passare a XHTML Strict: devi pero` togliere tutti gli attributi di formattazione dai tag HTML.

**andrea.paiola** · 20-06-2006, 10:16

Originariamente inviato da Mich_
Se devi inserire una cosa tipo una poesia, va usato il taxt-align: pre;

correggo: devi usare il tag <pre> che sta per preformattato, così da fargli mantenre gli accapo

Addirittura potresti passare a XHTML Strict: devi pero` togliere tutti gli attributi di formattazione dai tag HTML.

questa sarebbe una bella cosa... soprattutto se diventasse pratica comune

**ant_alt** · 20-06-2006, 11:51

Originariamente inviato da Mich_
Io (FF sotto linux con font leggermente ingranditi) vedo grossi problemi di layout in quella pagina, in particoalre in basso a destra, ma forse e` solo che non hai sistemato.
Pero` il menu e` fatto bene.

intendi il div blu in fondo a sinistra?si è da sistemare ancora...

usi linux?mi hanno detto ke il metodo ke ho usato per centrare il div generale non viene visualizzato correttamente con konqueror3?mi dai una conferma?

Ma ci sono altri problemi:
- acapo realizzati tramite una serie di
: non e` semanticamente corretto.
Se devi inserire una cosa tipo una poesia, va usato il taxt-align: pre;
Se invece e` un testo, non vanno usati i
, ma dev'essere il browser ad andare a capo quando non ci sta.

tutti quei
sono temporanei! i contenuti non ci sono ancora

- le barre arancio, andrebbero inserite come sfondo ad un blocco che contiene tutti i pezzetti sulla destra, che andranno spaziati con un position: relative. Inserire delle immagini dispaziatura in blocchi

e` un errore semantico.

questa non so se l'ho capita..devo prendere right-with-sbarre.jpg e metterlo in un div in position:relative? giusto?...avevo trovato questa soluzione del

per evitare i margini applicati al testo..ho sbagliato?

Addirittura potresti passare a XHTML Strict: devi pero` togliere tutti gli attributi di formattazione dai tag HTML.
Strict cosa? :master:

Discussione: elenco di div

Strumenti discussione

Ricerca discussione

Visualizza

elenco di div

Permessi di invio