Problema div con float [era: CSS Layout: un gran casino!!]

**cpn-esteban** · 30-03-2007, 15:38

Ciao!

Ecco il mio semplice codice:

<div style="background-color:#009933;border:1px solid black;">

<div style="margin-right:10px;float:left;>
[img]sorgente.jpg[/img]</a>
</div>

<div style="float:left;">
<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">TIPO</span>

<span style="font-weight:bold; font-size:10pt;">dato1</span>
</div>
<div style="float:left;margin-left:10px;">
<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">VERSIONE</span>

<span style="font-weight:bold; font-size:10pt;">dato2</span>
</div>
<div style="float:left; margin-left:10px;">
<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">MECCANICA</span>

<span style="font-weight:bold; font-size:10pt;">dato3</span>
</div>

</div>

<div id="footer">footer finale</div>

Vorrei avere l'immagine a sinistra, i tre dati affiancati subito dopo l'immagine. Infine il footer. Non c'è nulla da fare, appena inserirsco il float left sull'immagine il primo div contenitore..... non contiene più nulla!! Di conseguenza anche il footer sale affiancato all'immagine!!

Dove sbaglio?

Grazie per l'aiuto!! =STE=

**serialkiller** · 30-03-2007, 16:09

La prossima volta scrivi il codice dentro l'apposito tag, perchè così com'è, oltre a volerci la lente di ingrandimento, non si capisce.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test 1</title>
</head>

<body>

<div style="background-color:#009933;border:1px solid black;">


<div style="margin-right:10px;float:left;">
[img]sorgente.jpg[/img]</a>
</div>

<div style="float:left;">
<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">TIPO</span>

<span style="font-weight:bold; font-size:10pt;">dato1</span>
</div>
<div style="float:left;margin-left:10px;">
<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">VERSIONE</span>

<span style="font-weight:bold; font-size:10pt;">dato2</span>
</div>
<div style="float:left; margin-left:10px;">
<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">MECCANICA</span>

<span style="font-weight:bold; font-size:10pt;">dato3</span>
</div>
<div style="clear:both"></div>
</div>

<div id="footer" style="clear:both;">footer finale</div> 

</body>
</html>

Le parti in grassetto sono le aggiunte/modifiche, tieni presente che il div vuoto che ho messo non ha molto senso, quindi vedi tu come gestirlo, altrimenti, ti basta spostare il footer al suo posto così:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test 2</title>
</head>

<body>

<div style="background-color:#009933;border:1px solid black;">


<div style="margin-right:10px;float:left;">
[img]sorgente.jpg[/img]</a>
</div>

<div style="float:left;">
<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">TIPO</span>

<span style="font-weight:bold; font-size:10pt;">dato1</span>
</div>
<div style="float:left;margin-left:10px;">
<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">VERSIONE</span>

<span style="font-weight:bold; font-size:10pt;">dato2</span>
</div>
<div style="float:left; margin-left:10px;">
<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">MECCANICA</span>

<span style="font-weight:bold; font-size:10pt;">dato3</span>
</div>

<div id="footer" style="clear:both;background:#fff;">footer finale</div> 

</div>

</body>
</html>

Dopo di che meti il codice css esterno e non direttamente nella pagina.

**cpn-esteban** · 30-03-2007, 16:34

Grazie. E' la prima volta che utilizzo il forum. Ora ho trovato l'apposito pulsante per il codice.

Ho una domanda: se lascio i comandi CSS direttamente sulla pagina ci possono essere differenze di risultato nella visualizzazione della pagina? Normalmente quando disegno una pagina inizio a tenere tutti i css incorporati. A risultato completo, sposto tutto su file .css.

Inserisco il codice completo in quanto mi capita una visualizzazione che non riesco proprio a spiegarmi:

codice:

<div style="background-color:#009933;border:1px solid black;float:left;width:100%">
									
  
  <div style="margin-right:10px;float:left;clear:both;width:250px;">
  	[img]public/26/images/26_631_img1.jpg[/img]
  	[img]/images/bottone_contatto.jpg[/img]
  </div>
									
	
	<div style="margin-top:10px; margin-left:5px;background-color:#00FF33;">

			<div style="float:left;">
				<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">TIPO</span>

				<span style="font-weight:bold; font-size:10pt;">USATO</span>
			</div>
		
			<div style="float:left;margin-left:10px;">
				<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">VERSIONE</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>

			</div>
		
			<div style="float:left; margin-left:10px;">
				<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">MECCANICA</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>
			</div>
		
			<div style="float:left; margin-left:10px;">
				<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">ALIMENTAZIONE</span>

				<span style="font-weight:bold; font-size:10pt;">DATO</span>
			</div>
		
	</div>
	
	
	<div style="margin-top:10px; margin-left:5px;">
		
			<div>
				<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">PREZZO</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>

			</div>
		
	</div>
	
	
	<div style="margin-top:10px; margin-left:5px; background-color:#333333; clear:right;">
		
			<div style="float:left;">
				<span style="font-size:8pt;color:#0000cc;font-weight:bold; ">P.OMOL.</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>
			</div>

		
			<div style="float:left; margin-left:10px;">
				<span style="font-size:8pt;color:#0000cc;font-weight:bold; ">P.LETTO</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>
			</div>
		
			<div style="float:left; margin-left:10px;">
				<span style="font-size:8pt;color:#0000cc;font-weight:bold; ">ANNO</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>

			</div>
		
			<div style="float:left; margin-left:10px;">
				<span style="font-size:8pt;color:#0000cc;font-weight:bold; ">KM</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>
			</div>
		
	</div>

</div>


<div id="footer" align="center">footer</div>

Non riesco a mettere il div prezzo a capo, come un DIV autonomo. Mi spiego meglio: se la prima riga è breve, il div prezzo sale sulla prima riga!! Ma come mai!! E' tutto il giorno che impazzisco dietro questi CSS. Non sono molto semplici da usare...... mi puoi aiutare per favore? Grazie.

**serialkiller** · 30-03-2007, 16:49

Dunque...

align="center" non si usa, si usano le proprietà css text-align:center;

Prima ho postato del codice, con 2 soluzioni, perchè sull'ultimo postato non c'è ne più traccia ?

Vero che bisogna preferire i div allle tabelle per la presentazione grafica, in questo caso però mi sembrano dati tabellari, quindi avrebbe anche senso usarle per il loro scopo.

comunque:

codice:

<div style="background-color:#009933;border:1px solid black;float:left;width:100%">
									
  
  <div style="float:left;margin-right:10px;width:250px;">
  	[img]public/26/images/26_631_img1.jpg[/img]
  	[img]/images/bottone_contatto.jpg[/img]
  </div>
									
	
	<div style="margin-top:10px; margin-left:5px;background-color:#00FF33;">

			<div style="float:left;">
				<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">TIPO</span>

				<span style="font-weight:bold; font-size:10pt;">USATO</span>
			</div>
		
			<div style="float:left;margin-left:10px;">
				<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">VERSIONE</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>

			</div>
		
			<div style="float:left; margin-left:10px;">
				<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">MECCANICA</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>
			</div>
		
			<div style="float:left; margin-left:10px;">
				<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">ALIMENTAZIONE</span>

				<span style="font-weight:bold; font-size:10pt;">DATO</span>
			</div>
		<div style="clear:both;"></div>
	</div>
	
	
	<div style="margin-top:10px; margin-left:5px;border:1px solid red;">
		
			<div>
				<span style="font-size:8pt;color:#0000CC;font-weight:bold; ">PREZZO</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>

			</div>
		
	</div>
	
	
	<div style="margin-top:10px; margin-left:5px; background-color:#333333;">
		
			<div style="float:left;">
				<span style="font-size:8pt;color:#0000cc;font-weight:bold; ">P.OMOL.</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>
			</div>

		
			<div style="float:left; margin-left:10px;">
				<span style="font-size:8pt;color:#0000cc;font-weight:bold; ">P.LETTO</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>
			</div>
		
			<div style="float:left; margin-left:10px;">
				<span style="font-size:8pt;color:#0000cc;font-weight:bold; ">ANNO</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>

			</div>
		
			<div style="float:left; margin-left:10px;">
				<span style="font-size:8pt;color:#0000cc;font-weight:bold; ">KM</span>

				<span style="font-weight:bold; font-size:10pt;">dato</span>
			</div>
		<div style="clear:both;"></div>
	</div>

</div>


<div id="footer" style="clear:both;">footer</div>

Ci sono sempre i famigerati div vuoti, che dovrai cercare di ottimizzare durante il lavoro

**cpn-esteban** · 30-03-2007, 16:59

Ciao, grazie per la risposta.

Non ho usato la tabella in quanto la forma di rappresentazione non è del tutto tabellare. Le larghezze delle "colonne" sono diverse da riga in riga. Volevo provare una soluzione con i CSS piuttosto che realizzare diverse tabelle. Ma vedo che la soluzione è difficile!!

La tua soluzione purtroppo non funziona. Avevo già provato in uno dei miei innumerevoli tentativi!! Se inserisco il "div vuoto" prima della riga prezzo...... sposta il prezzo sotto l'immagine!! Come mai?!?

Non riesco proprio a capire. Una domanda: quando mi dici di ottimizzare.... cosa intendi?

Grazie, =STE=

**serialkiller** · 30-03-2007, 17:02

Aspetta...

spiega per bene cosa vuoi ottenere, e vediamo cosa si puo' fare, ma spiega bene

**cpn-esteban** · 30-03-2007, 17:34

Ciao, ci provo.......

PRIMO BLOCCO
A sinistra un immagine, a destra 3 o più blocchi che contengono informazioni descrittive (sono calcolate automaticamente con ASP). Ogni blocco contiene le informazioni suddivise su due righe (etichetta sulla prima, valore sulla seconda).

SECONDO BLOCCO
Subito sotto il primo blocco un nuovo blocco, chiamiamolo footer.

Mi sembra abbastanza chiaro. Hai capito cosa intendo? Grazie.

=STE=

**serialkiller** · 30-03-2007, 17:50

Originariamente inviato da cpn-esteban
Ciao, ci provo.......

PRIMO BLOCCO
A sinistra un immagine, a destra 3 o più blocchi che contengono informazioni descrittive (sono calcolate automaticamente con ASP). Ogni blocco contiene le informazioni suddivise su due righe (etichetta sulla prima, valore sulla seconda).

SECONDO BLOCCO
Subito sotto il primo blocco un nuovo blocco, chiamiamolo footer.

Mi sembra abbastanza chiaro. Hai capito cosa intendo? Grazie.

=STE=

scusa, ma ero al tel con un cliente

Vediamo se ho capito:

- Immagine a sx (dimensioni ?)

- Affiancato all'immagine una serie di div sequanziali (quanti? 3?)

- Nel file di prima hai messo un secondo blocco sotto il primo, dov'è finito ?

- ok per il footer

Attendo chiarimenti

**cpn-esteban** · 30-03-2007, 18:08

- Immagine a sx (dimensioni ?)

Altezza variabile. Larghezza fissa 250px.

- Affiancato all'immagine una serie di div sequanziali (quanti? 3?)

Per ORA sono 3 DIV, chiamiamoli "DIV1". Ogni DIV1 contiene più

codice:

div

(sono quindi incapsulati in DIV1), chiamiamoli "DIV2". Ogni DIV2 contiene due

codice:

span

separati con

codice:

che servono per formare la coppia etichetta valore.
Esempio:
Veicolo *etichetta*
Automobile *valore*

Poi abbiamo il footer.....

Ti allego screenshot della soluzione. Ci sono riuscito..... ma con l'ausilio di 3 tabelle!!

**serialkiller** · 30-03-2007, 18:37

Che font vuoi usare ?

codice rgb del verde e del blu delle scritte ?

Discussione: Problema div con float [era: CSS Layout: un gran casino!!]

Strumenti discussione

Ricerca discussione

Visualizza

CSS Layout: un gran casino!!

Ancora problemi!

Nulla da fare!!

Permessi di invio