[CSS] aree affiancate

**SGr33n** · 06-09-2004, 11:44

Ciao a tutti,

sto studiando un pò il metodo tableless per lo sviluppo delle pagine e sto studiando meglio i css.

Ora però mi trovo a dover rappresentare una struttura che non mi riesce... si tratta di 3 aree che ho pensato di disegnare qui di seguito

Il blu è lo sfondo, mentre l'azzurro sono le 3 aree.

Se ho capito bene, per realizzare questa struttura, dovrei creare uno stile per un tag li e ul personalizzato, solo che non ci sono riuscito... qualcuno mi aiuterebbe ?

Grazie 1000

**Jerry Masslo** · 06-09-2004, 13:24

li e ul? :master:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
* {margin:0;padding:0}
body {text-align:center;
background:silver;
}
#contenitore {width:502px;
margin:auto;
background:blue;
padding-top:50px;
padding-bottom:50px;
text-align:left;
}

.flottanti {height:155px;
width:159px;
background:white;
float:left
}

.centrale {height:155px;
width:160px;
background:white;
float:left;
margin-left:12px;
margin-right:12px;
}

.clear {clear:both}
</style>
</head>
<body>
<div id="contenitore">
<div class="flottanti"></div>
<div class="centrale"></div>
<div class="flottanti"></div>
<br class="clear">
</div>
</body>
</html>

**SGr33n** · 06-09-2004, 13:26

Grazie 1000

mi spiegheresti a cosa serve il clear ?

**Jerry Masslo** · 06-09-2004, 13:45

Originariamente inviato da SGr33n
Grazie 1000

mi spiegheresti a cosa serve il clear ?

lo vuole mozilla altrimenti non allunga il div che contiene i float

**SGr33n** · 06-09-2004, 13:50

Ah perfetto

grazie 1000

**SGr33n** · 06-09-2004, 17:41

Scusa, ho fatto delle modifiche per adattarvici del testo dentro, aggiungendo i giusti margini, ma sebbene con IE i margini vadano bene ora, con mozilla non vengono calcolati. Il file modificato è:

codice:

<html> 
<head> 
<title>Untitled</title> 
<style type="text/css"> 
* {margin:0;padding:0} 
body {text-align:center; 
background:silver; 
} 
#contenitore {width:502px; 
margin:auto; 
background:blue; 
padding-top:50px; 
padding-bottom:50px; 
text-align:center;
} 

.flottanti {height:155px; 
width:159px; 
background:white; 
float:left 
} 

.centrale {height:155px; 
width:160px; 
background:white; 
float:left; 
margin-left:12px; 
margin-right:12px; 
} 

.smallBox {
	position: relative;
	margin-top: 44px;	
	width: 100px;
	padding: 0px;
	text-align: left;
}

.clear {clear:both} 
</style> 
</head> 
<body> 
<div id="contenitore"> 
<div class="flottanti">
<div class="smallBox">
1

dsadsadsadsa

dasdsa

</div>
</div> 
<div class="centrale">
<div class="smallBox">
2
</div>
</div> 
<div class="flottanti">
<div class="smallBox">
3
</div>
</div> 
<br class="clear"> 
</div> 
</body> 
</html>

Mi daresti un'altra mano ?

Grazie :P

**Jerry Masslo** · 06-09-2004, 17:56

se ho capito quello che vuoi devi aggiungere a smallBox

margin:auto

prima del margin-top

tu hai dato il text-align:center a contenitore e ie sbagliando centra orizzontalmente quel box perché quel comando serve per allineare il testo, per centrare orizzontalmente con gli altri browser devi dare il margin:auto, è lo stesso motivo per cui in body c'è il text-align:center e in contenitore il margin:auto

**SGr33n** · 06-09-2004, 17:59

Grazie 1000

è perfetto e completo ora

Discussione: [CSS] aree affiancate

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] aree affiancate

Permessi di invio