Newsgroup: it.comp.www.html
Titolo: Con le liste come vi comportate?

Supponiamo di avere un layout a due colonne. Nel <div> di sx dovete mettere
una lista <UL>. Cosa usate per posizionarla in maniera compatibile con IE e
Firebird?

Cekko wrote:

posizionarla? partiamo da questa:
<div id="sx">
<ul>
   <li>one</li>
   <li>two</li>
   <li>three</li>
</ul>
</div>
...e dimmi cosa non ti e' chiaro.
ciao.

Ciao Deelan.
Vedo i punti elenco sfalsati, non sono allineati uno sotto all'altro come mi
aspettavo ed inoltre vorrei poter spostare tutta la lista all'interno del
<div id="sx"> dove voglio. Magari più a sinistra. Se preferisci pubblico la
pagina e ve la faccio vedere.

Cekko wrote:

ho capito, leggili entrambi:
http://www.alistapart.com/stories/taminglists/
http://devedge.netscape.com/viewsource/2002/list-indent/
capiti questi puoi fare quello che vuoi con le liste.
ciao.

Ok letto tutto. Adesso la sparo grossa: E' possibile che esista una
pseudoclasse li:hover in modo da cambiare dinamicamente le immagini
dell'elenco?


explorer non la supporta, puoi racchiudere il tutto cosě
<a href="#"><li></li></a>
e nel css
a {
	. . .
}

 <a href="#"><li></li></a>
Forse č meglio cosě ;)
<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>
Ciao
    Mavimo

Vero, ma in questo modo per un effetto di roll-over devo avere un'immagine
che non ha nulla a che fare con l'elenco o mi sbaglio? Io cercavo un
qualcosa che cambiasse list-image dinamicamente...

Cekko wrote:

riprendendo:
<ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
     <li><a href="#">Link 4</a></li>
</ul>
intanto seghi via i buller dalla tua list:
ul {
   list-style: none;
}
fai un po di spazio a sx dei link e ci applichi
una img di background:
ul a  {
   padding-left: 30px; /* space for gfx */
   background: transparent url("bullet.gif") center left no-repeat;
}
poi quando ci vai sopra, cambi solo l'immagine,
le altre impostazioni sono OK (il buon
caro vecchio principio del "don't repeat yourself"):
ul a:hover {
   background-image: url("images/bullet_ro.gif");
}
non e' ottimale ...ci sono sistemi per fare il preload, ma
se stiamo qui a parlarne facciamo notte, fa una ricerca
sul NG per i post vecchi).
il discorso e' che :hover e' supportato da IE solo sui
link, non sugli altri elementi quindi niente li:hover
(che pero' funzia su moz e opera).
puoi assegnare immagini diverse ad ogni link (banale, assegna
un id ad ogni link).
ciao.
-- 
email: goldicus1970 AT 
yahoo.it
web: 
http://www.deelan.com

Deelan, sapevi che a:hover { list-style-image....... } su IE funziona? Cerco
un qualcosa che vada bene anche per Fire,...

non e' ottimale ...ci sono sistemi per fare il preload,
Visto che io sn giusto arrivato qui, potresti darmi qlc suggerimento?
Il menù va alla grandissima, peccato per il preload :-(
mi ero illuso che con un semplice
#engflag {
	background:url(eng_on.gif) no-repeat scroll center center;
	/* precarico l'on, nn visibile xchè sopra c'è l'off*/
	background:url(eng_off.gif) no-repeat scroll center center;
}
#engflag:hover {
	background:url(eng_on.gif) no-repeat scroll center center;
	background-color: #CCFFCC;
}
avrei precaricato eng_on.gif: in realtà non funzia... Secondo te cosa
si potrebbe usare per ovviare al problema?
Un esempio della mia pagina [che magari è utile anche a cekko]
http://www.deadhead.altervista.org/demo/demo.html
iauz 
[© Invernomuto]
deadhead
-- 
begin  .signature
This is a .signature virus! Please copy me into your .signature!
See Microsoft KB Article Q265230 for more information.
end
Se vuoi scrivermi, togli "killer."

 un qualcosa che vada bene anche per Fire,...
la soluzione che funziona e' quella che ti ho scritto io. e' proprio 
curioso che funzioni quel selector, in pratica tu selezioni "a:hover"
ed applichi "list-style-image" a cosa? alla <li> che contiene il tag
<a>?
ciao.

Guarda il mio post sull'acqua calda... magari può esserti utile.

 
si fa la cosa piu' furba, si costruisce una immagine con *tutti*
gli stati della tua immagine, la si piazza in background del link e poi 
la si sposta(via background-position) a seconda di  ":hover", tecnica 
molto nota a chi fa computer-game. cosi' risparmi anche un richiesta al 
webserver ed  e' pure piu' comodo in photoshop avere un file al posto di 
due  o tre. :)
la tecnica e' descritta qui:
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
esempio:
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/example.html
con IE alle volte funziona alle volte no, credo dipenda dalla
impostazione della cache.
ciao.

Esatto, ho fatto così ma su Moz Fire non funzia. Penso senz' altro che
adotterò la tua soluzione, ma usare solo lo stile della lista mi
attirava....
Come compatibilità quello che hai suggerito tu va bene?
Saluti.
li a:hover {
   list-style-image: url(leg_lav/link-yellow.gif);
 }
<ul id="menu">
  <li><a href="#">Le parole del lavoro</a></li>
  <li><a href="#">Le regole del lavoro</a></li>
  <li><a href="#">Valore sociale del lavoro</a></li>
  <li><a href="#">Dove sta andando il lavoro</a></li>
  </ul>

Guarda il mio post sull'acqua calda... magari può esserti utile.
Merci a te e a deelan.. ora devo andare in faco,ltà quando torno,
leggerò. Piuttosto, è usito un articolo davvero appetitoso sul nuevo
alistapart proprio sulle list-item... 
grazie ancora
iauz 
[© Invernomuto]
deadhead
-- 
begin  .signature
This is a .signature virus! See Microsoft KB Article Q265230 4 more info.
Capisci che il mondo sta impazzendo quando il miglior rapper è un
bianco, il miglior giocatore di golf è di colore, la Svizzera detiene
l'America's Cup di vela, la Francia accusa gli Stati Uniti di
arroganza e la Germania non vuole entrare in guerra e il miglior
pizzaiolo a Napoli è un giapponese


  }
capisci dove e' il non-sense? sei su di un selector
a:hover ed applichi lo stile ad <li>? non esiste,
come fa il browser a sapere che vuoi applicare
list-style-image a <li> anziche' ad <a>? dopotutto sei sul
selector di a:hover!  considera l'esempio limite:
li a:hover {
    color: red;
}
qui a cosa voglio applicare il color? ad <a> o <li>?
non ci puo' essere ambiguita', altrimenti sai che casino.
ciao.

 il
Wed, 22 Oct 2003 12:48:26 +0200:
Che spettacolo: F U N Z I O N A!
http://www.deadhead.altervista.org/demo/demo.html
denghiù!
