estendere li di una lista in layout 2 colonne

**gabar-el** · 18-12-2007, 15:09

ciao, a questa pagina ci sono una lista in un div a sx e due foto in un div a dx, dovrei fare si che l'ultimo li si estenda in orrizzontale fino sotto le foto, ma non riesco a capire come fare mantenendo la compatibilità dei browser (ho dato un width al li, ma ie6 me lo canna non rispettando il float e facendomi andare il div di dx sotto).
grazie

**gra-fichetto** · 18-12-2007, 15:41

Potresti fare in questo modo.

La tua pagina:

codice:

le modifiche al tuo CSS:

codice:

div#containLeft {
	/*width: 55%;*/
	width: 100%;
	float: left;
	display: inline;
}

div#containLeft ul, div#contain ul {
	/*width: 375px;*/
	margin: 0 0 15px 35px;
	padding: 0;
	font: 1em Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
}

.float-right{
	float: right;
	clear: right
}

In pratica elimini il div di destra, estendi in larghezza quello di sinistra al 100%, applichi un "float: right" alle immagini che posizionerai prima delle liste.

**gabar-el** · 18-12-2007, 15:43

ciao, scusa se ti rispondo subito, ma elimineresti subito i contenuti della pagina per evitare che vengano indicizzati?!
grazie

**gra-fichetto** · 18-12-2007, 15:48

Originariamente inviato da gabar-el
ciao, scusa se ti rispondo subito, ma elimineresti subito i contenuti della pagina per evitare che vengano indicizzati?!
grazie

Scusa. Non ho capito.

**gabar-el** · 18-12-2007, 15:51

dovresti tolgiere modificando il post i contenuti della mia pagina, non ho messo un link a caso per nulla. cancella i contenuti della pagina che hai postato. hai copiato la pagina e la hai postata! eliminala per favore se no mi viene indicizzata e invece che saltare fuori la pagina del sito mi salta fuori il forum di html....
elimina la prima parte del tuo post dove ci sono i contenuti della pagina!!!
grazie

**gra-fichetto** · 18-12-2007, 15:54

Originariamente inviato da gabar-el
dovresti tolgiere modificando il post i contenuti della mia pagina, non ho messo un link a caso per nulla. cancella i contenuti della pagina che hai postato. hai copiato la pagina e la hai postata! eliminala per favore se no mi viene indicizzata e invece che saltare fuori la pagina del sito mi salta fuori il forum di html....
elimina la prima parte del tuo post dove ci sono i contenuti della pagina!!!
grazie

Ora sei stato più chiaro.

**gra-fichetto** · 18-12-2007, 16:06

Originariamente inviato da gabar-el
dovresti tolgiere modificando il post i contenuti della mia pagina, non ho messo un link a caso per nulla. cancella i contenuti della pagina che hai postato. hai copiato la pagina e la hai postata! eliminala per favore se no mi viene indicizzata e invece che saltare fuori la pagina del sito mi salta fuori il forum di html....
elimina la prima parte del tuo post dove ci sono i contenuti della pagina!!!
grazie

Ti riposto la pagina "pulita" per avere il tempo di leggere le modifiche.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Titolo</title>
<link href="css/pagine.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
	<div id="header">
		<h1>Titolo</h1>
	</div>
	
	<div id="nav">
	<ul>
	[*]link&bull;
	[*]link&bull;
	[*]link&bull;
	[*]link&bull;
	[/list]			
	</div>
	

	<div id="contain">
		<div id="containLeft">
		<h2 class="chiSono">Nome Cognome</h2>
		<h3 class="chiSono">Dati personali</h3>[img]image/foto.jpg[/img]
		[img]image/foto2.jpg[/img]
		<ul>
		[*]<span class="grassetto">Nazionalità:</span> testo
		[*]<span class="grassetto">Data di nascita:</span> testo
		[*]<span class="grassetto">Luogo di nascita:</span> testo
		[*]<span class="grassetto">Residenza:</span> testo
		[*]<span class="grassetto">Città:</span> testo
		[*]<span class="grassetto">Domicilio:</span> testo
		[*]<span class="grassetto">Telefono:</span> testo
		[/list]
		
		<h3 class="chiSono">Istruzione</h3>
		<ul>
		[*]testo 
		[*]testo
		[/list]
		
		<h3 class="chiSono">Corsi formativi e specializzazioni</h3>
		<ul>
			[*]testo
			[*]testo
			[*]testo
			[*]testo
			[*]testo
			<li class="noLst"><ul>
					[*]testo ""
					[*]testo ""
					[*]testo ""
					[*]testo ""[/list]
			[*]testo
			[/list]
		 
		</div>
	</div>
	<div id="footer">
		

testo chisura</p>
	</div>
</div>
</body>
</html>

**gabar-el** · 18-12-2007, 16:12

ok, scusa la fretta e l'incompresione, ma era tutto per evitarmi di dover scrivere una richiesta agli amministratori del forum per fare togliere la cosa, avendola scritta tu sarebbe stato complicato.
Grazie, facendo come hai detto ho risolto, ma in ie6 mi uno strano effetto di spaziatura in una sotto lista che prima non avevo.... :master:
ciao

**gra-fichetto** · 18-12-2007, 16:25

Originariamente inviato da gabar-el
ok, scusa la fretta e l'incompresione, ma era tutto per evitarmi di dover scrivere una richiesta agli amministratori del forum per fare togliere la cosa, avendola scritta tu sarebbe stato complicato.

Nessun problema, ci mancherebbe.

Originariamente inviato da gabar-el
Grazie, facendo come hai detto ho risolto, ma in ie6 mi uno strano effetto di spaziatura in una sotto lista che prima non avevo.... :master:
ciao

Si. in questo caso, la "sottolista" si estende in larghezza al 100% (IE6).
Per risolvere velocemente la cosa potresti ad esempio dichiarare, solo per IE:

codice:

div#containLeft ul li.noLst ul{
	width: 50%
}

Vedo se c'è una soluzione più elegante e funzionale.

**gra-fichetto** · 18-12-2007, 16:45

Originariamente inviato da gra-fichetto
Nessun problema, ci mancherebbe.

Si. in questo caso, la "sottolista" si estende in larghezza al 100% (IE6).
Per risolvere velocemente la cosa potresti ad esempio dichiarare, solo per IE:

codice:

div#containLeft ul li.noLst ul{
	width: 50%
}

Vedo se c'è una soluzione più elegante e funzionale.

Usa i margini negativi (solo nel foglio di stile dedicato ad IE6, su IE7 non ho possibilità di testarlo al momento). Non c'è più bisogno di specificare la larghezza.

codice:

div#containLeft ul li.noLst ul{
	margin: -1.4em 0 0 0
}

Discussione: estendere li di una lista in layout 2 colonne

Strumenti discussione

Ricerca discussione

Visualizza

estendere li di una lista in layout 2 colonne

Permessi di invio