[css] Realizzazione layout

**daneel** · 08-03-2004, 19:11

Come posso ottenere il layout mostrato nell'immagine allegata utilizzando i css?

codice:

<div id="principale">
<div id="contenuti" />
<div id="riquadro1" />
<div id="riquadro2" />
</div>

principale deve essere ad altezza fissa, mentre la sua larghezza deve adattarsi a quella della finestra del browser. Se possibile, anche riquadro1 e riquadro2 dovrebbero raggiungere con le loro dimensioni rispettivamente il margine sinistro e destro della finestra, con contenuti che rimane al centro con larghezza ed altezza fisse.

**Marcolino's** · 08-03-2004, 19:38

www.constile.org

**daneel** · 08-03-2004, 23:22

In questo modo il foglio di stile funziona, ma devo ancora fare in modo che riquadro1 e riquadro2 occupino tutto lo spazio a disposizione in modo che contenuti si trovi orizzontalmente al centro.
Inoltre principale deve trovarsi centrato verticalmente all'interno della pagina.

codice:

body {
	height: 100%;
	margin: 0px;
}

#principale {
	position: relative;
	border: 1px solid #333333;
}

#contenuti {
	width: 400px;
	height: 400px;
	overflow: auto;
	margin: 0 100px 0 100px;
	background-color: #999999;
}

#riquadro1 {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 400px;
	background-color: #333333;
}

#riquadro2 {
	position: absolute;
	top: 0px;
	right: 0px;
	height: 400px;
	background-color: #333333;
}

**herrel** · 09-03-2004, 00:08

scusa ma il tuo codice non è corretto....principale non contiene gli altri div!!

poi che dimensioni vuoi per i laterali?? height??

**herrel** · 09-03-2004, 00:10

io farei così:

codice:

<html>
<head>
<title>Untitled</title>
<style>
body {
	margin: 0px;
	text-align:center;
}

#principale {
    width: 100%;
	height: 100%;
	border: 1px solid #333333;
}

#contenuti {
    float:left;
    width: 40%;
	height: 100%;
	overflow: auto;
	background-color: #999999;
}

#riquadro1 {
    float:left;
	width:30%;
	height: 100%;
	background-color: #333333;
}

#riquadro2 {
    float:left;
	width:30%;
	height: 100%;
	background-color: #333333;
}

</style>
</head>

<body>

<div id="principale">

<div id="riquadro1" >sx</div>
<div id="contenuti" >1</div>
<div id="riquadro2" >dx</div>

</div>



</body>
</html>

**daneel** · 09-03-2004, 00:24

Originariamente inviato da herrel
scusa ma il tuo codice non è corretto....principale non contiene gli altri div!!

poi che dimensioni vuoi per i laterali?? height??

Il codice è corretto, nell'esempio ho semplicemente chiuso i div senza il tag di chiusura.
contenuti non deve avere una larghezza percentuale, ma il valore fisso di 400 px. I laterali invece devono occupare in larghezza lo spazio rimanente, qualunque esso sia.
L'altezza dei tre div è definita in pixel, e tutti e tre devono essere centrati verticalmente.

**herrel** · 09-03-2004, 10:49

ma il codice che ti ho postato si avvicina a quello che volevi?

**herrel** · 09-03-2004, 10:50

Originariamente inviato da herrel
scusa ma il tuo codice non è corretto....principale non contiene gli altri div!!

insisto :quote:

**daneel** · 09-03-2004, 14:40

Originariamente inviato da herrel
ma il codice che ti ho postato si avvicina a quello che volevi?

Il foglio di stile va bene, anche quello che avevo scritto io faceva più o meno la stessa cosa.
I problemi, come ho detto, sono la larghezza fissa del div centrale e il centramente verticale del tutto.

codice:

<div id="principale">
<div id="contenuti">contenuti</div>
<div id="riquadro1">riquadro1</div>
<div id="riquadro2">riquadro2</div>
</div>

**daneel** · 11-03-2004, 18:40

up

Discussione: [css] Realizzazione layout

Strumenti discussione

Ricerca discussione

Visualizza

[css] Realizzazione layout

Permessi di invio