allineamento div

**vcarpini** · 14-01-2008, 18:34

salve...come al solito ho un problema con l'allineamentio dei div. Qualcuno sa aiutarmi ad allineare sotto il box1 i box 3 e 4?! Dovrei incastrarli sotto ma non ci stanno.thanks!!!!!!!

ecco il codice:
----------------------------------------------------
<style type="text/css">
body
{
}
#container
{
margin : 0 auto;
text-align : left;
width: 970px;
height: 600px;
background-color: #BADCDC;
}

#box1
{
background-repeat: no-repeat;
height: 100px;
width: 770px;
background-color: #CCCCCC;
}
#box2
{
width: 200px;
height: 250px;
background-repeat: no-repeat;
text-align: center;
background-color: #FFCC33;
}
#box3
{
background-repeat: no-repeat;
background-color: #006666;
height: 470px;
width: 190px;
top: 0px;
}
#box4
{
background-repeat: no-repeat;
background-color: #996666;
top: 0px;
height: 150px;
width: 580px;
}
#box5
{
background-repeat: no-repeat;
background-color: #999966;
height: 320px;
width: 780px;
top: 0px;
}
#box6
{
background-repeat: no-repeat;
background-color: #CC99CC;
height: 30px;
width: 970px;
top: 0px;
}
.box
{
float: left;
}
</style>
</head>

**fcaldera** · 14-01-2008, 23:20

se non posti anche la struttura (x)html che hai usato e non specifichi come vadano posizionati anche gli altri blocchi è difficile suggerirti come correggere il css.

Per come l'hai scritto ora, sembra che tutti i blocchi si dispongano uno sotto l'altro

**vcarpini** · 15-01-2008, 01:50

hai ragione ..

..ecco il resto del codice:

--------------------------------------
<body>
<div id="container">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
<div id="box5" class="box"></div>
<div id="box6" class="box"></div>
<div style="clear: both"></div>
</div>
</body>
</html>
---------------------------------------

**fcaldera** · 15-01-2008, 10:18

Originariamente inviato da fcaldera
se non posti anche la struttura (x)html che hai usato e non specifichi come vadano posizionati anche gli altri blocchi è difficile suggerirti come correggere il css.

come li devi posizionare questi blocchi?

12
34
56 ?

123
456 ?

1
23
456 ?

**pr0v4** · 15-01-2008, 10:24

E' vero, in effetti non possiamo darti una mano se non ci indichi, anche con un immagine, come vorresti che questi box vadano posizionati, specificando soltanto l'html e il css ci mostri che adesso si dispongono uno sotto l'altro...

Ma come li vuoi?

**vcarpini** · 15-01-2008, 10:45

si, hai ragione...lo vorrei come l'immagine e, se si può, centrato in orizzontale e verticale nella pagina...

**pr0v4** · 15-01-2008, 10:54

Eheheheheh, scusami la risatina, ma nn riesco a capire ancora una cosa, che div rappresentano i tuoi rettangoli???

Potevi scriverci il loro nome all'interno del rettangolo che li rappresenta.
Oppure intendevi che vossero letti riga per riga?

nel senso, vediamo il box 1 e il box2, controllo la riga sotto e trovo il box3 ecc...

**vcarpini** · 15-01-2008, 11:01

scusa ancora....mi vergogno!!!

**pr0v4** · 15-01-2008, 11:41

Bene mi sono messo un pochetto a lavoro e l'immagine ne mostra il comportamento:

Per il codice utilizzato trovi invece qua sotto l'HTML:

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>
	<title>Base</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
	<div id="box1">

Contenuto box 1</p></div>
	<div id="box2">

Contenuto box 2</p></div>
	<div id="box3">

Contenuto box 3</p></div>
	<div id="box4">

Contenuto box 4</p></div>
	<div id="box5">

Contenuto box 5</p></div>
	<div id="box6">

Contenuto box 6</p></div>
</div>
</body>
</html>

Mentre qua il CSS usato:

codice:

div#content {
	margin: 0px auto;
	width: 970px;
	height: 600px;
	background-color: #BADCDC;
}
div#content p{
	text-align: center;
	font-size: 24px;
	font-weight: bold;
}
div#box1{
	float: left;
	background-color: #CCCCCC;
	width: 770px;
	height: 100px;
}
div#box2 {
	float: right;
	background-color: #FFCC33;
	width: 200px;
	height: 250px;
}
div#box3 {
	float: left;
	width: 190px;
	height: 470px;
	background-color: #006666;
}
div#box4 {
	margin-left: 190px;
	padding-top: 100px;
	width: 580px;
	height: 150px;
	background-color: #996666;
}
div#box5 {
	float: right;
	width: 780px;
	height: 320px;
	background-color: #999966;
}
div#box6 {
	clear: right;
	width: 970px;
	height: 30px;
	background-color: #CC99CC;
}

Nel mezzo trovi anche una regola per mostrare i paragrafi piu' grandi, anche se era meglio utilizzare un h1... La furia che scherzi fa!

Cmq la realizzazione di questo layout te l'assicuro su Firefox, su altri browser nn ho avuto il tempo per testarla... Anche se come piccola critica ti suggerirei di iniziare ad utilizzare quest'ultimo vista la sua grande attenzione agli standard...

Se pero' riscontri problemi con gli altri browser sono sempre qua per darti una mano!

**vcarpini** · 15-01-2008, 11:53

Grazie davvero, sei stato un tesoro. Adesso sono a lavoro e non posso sperimentarlo ma dopo lo testerò e se avrò ancora domande mi rifarò viva volentieri...

ciao ciaoooooo!

Discussione: allineamento div

Strumenti discussione

Ricerca discussione

Visualizza

allineamento div

scusa ancora....

Permessi di invio