Layout a 3 colonne senza table dove sbaglio?

**Alejandro** · 06-05-2009, 17:00

Salve a tutti,
sto dando un restyling al sito ed eliminando i tag table, tr e td in favore dei div.

La mia homepage ha questa struttura:

Io ho pensato ti mettere questo css:

codice:

body {
	background: url(../img/bg_page.jpg);
	background-color: white;
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: black;
	
}


.container {
    width: 980px;
	height:100%;
	margin: 0 auto;
    background:transparent url(../img/bg_transparency_ffffff.png) repeat scroll 0 0;
    border: 1px solid black;   
}

.topsection1{
background: #EAEAEA;
height: 109px; /*Height of top section*/
}

.topsection2{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

.centercolumn{
width: 300px; /*Width of left column in pixel*/
margin-left: 380px; /*Set margin to that of -(MainContainerWidth)*/
background: white;
vertical-align:top;
}

.leftcolumn{
width: 370px; /*Width of left column in pixel*/
margin-left: -980px; /*Set margin to that of -(MainContainerWidth)*/
background: green;
vertical-align:top;
}

.rightcolumn{

width: 300px; /*Width of right column*/
margin-left: -300px; /*Set left margin to -(RightColumnWidth)*/
background: red;
vertical-align:top;
}

.footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

ed un codice html simile a questo:

codice:

<body>	
		<div class="container">		
			<div class="topsection1"><? include "menu.php"; ?></div>
				<div class="topsection2"><? include "topbar.php"; ?></div>
				<div class="centercolumn"><? include "content.php"; ?></div>
<div class="leftcolumn">left</div>										
				<div class="rightcolumn">rigth</div>
				</div>
	</body>

ma non funziona, dove sbaglio? Poi non ho ancora aggiunto il footer e sopratutto quel blocco che come vedete dall'immagine sta sotto le prime due colonne e prende lo spazio di entrambe.

**Gufo** · 06-05-2009, 17:30

Qui di seguito ti propongo un esempio di codice
c'è solo una perplessità, mi sembra poco un layout largo solo 400px

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Documento senza titolo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.div-1 {
	border: none;
	height: 571px;
	position: relative;
	text-align: left;
	width: 400px;
}

.div-1-1 {
	background-color: #ff0000;
	border: none;
	height: 80px;
	left: 5px;
	line-height: 80px;
	padding: 5px;
	position: absolute;
	top: 5px;
	width: 380px;
}

.div-1-2 {
	background-color: #ff0000;
	border: none;
	height: 80px;
	left: 5px;
	line-height: 80px;
	padding: 5px;
	position: absolute;
	top: 100px;
	width: 380px;
}

.div-1-3 {
	background-color: #ff0000;
	border: none;
	height: 79px;
	left: 5px;
	line-height: 79px;
	padding: 5px;
	position: absolute;
	top: 195px;
	width: 117px;
}

.div-1-4 {
	background-color: #ff0000;
	border: none;
	height: 173px;
	left: 137px;
	line-height: 173px;
	padding: 5px;
	position: absolute;
	top: 195px;
	width: 117px;
}

.div-1-5 {
	background-color: #ff0000;
	border: none;
	height: 79px;
	left: 269px;
	line-height: 79px;
	padding: 5px;
	position: absolute;
	top: 195px;
	width: 116px;
}

.div-1-6 {
	background-color: #ff0000;
	border: none;
	height: 79px;
	left: 5px;
	line-height: 79px;
	padding: 5px;
	position: absolute;
	top: 289px;
	width: 117px;
}

.div-1-7 {
	background-color: #ff0000;
	border: none;
	height: 79px;
	left: 269px;
	line-height: 79px;
	padding: 5px;
	position: absolute;
	top: 289px;
	width: 116px;
}

.div-1-8 {
	background-color: #ff0000;
	border: none;
	height: 79px;
	left: 5px;
	line-height: 79px;
	padding: 5px;
	position: absolute;
	top: 383px;
	width: 249px;
}

.div-1-9 {
	border: none;
	height: 79px;
	left: 269px;
	line-height: 79px;
	padding: 5px;
	position: absolute;
	top: 383px;
	width: 116px;
}

.div-1-10 {
	background-color: #ff0000;
	border: none;
	height: 79px;
	left: 5px;
	line-height: 79px;
	padding: 5px;
	position: absolute;
	top: 477px;
	width: 380px;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div class="div-1-1"></div>
			<div class="div-1-2"></div>
			<div class="div-1-3"></div>
			<div class="div-1-4"></div>
			<div class="div-1-5"></div>
			<div class="div-1-6"></div>
			<div class="div-1-7"></div>
			<div class="div-1-8"></div>
			<div class="div-1-9"></div>
			<div class="div-1-10"></div>
		</div>
	</body>
</html>

**Alejandro** · 06-05-2009, 17:36

Ora lo provo tnx! no ho fatto un resize dell'immagine il mio layout è di 980

**Alejandro** · 06-05-2009, 17:53

HO già riscontrato un problema.

IL div-1 che sarebbe il mio container mi servirebbe senza un altezza prestabilita. Ossia a seconda del contenuto rimane fluido. Ho provato a mettere 100% al posto dell'altezza ma non ha funzionato come mai?

Questo vale per tutte le altezze, perchè io metto moduli php all'interno di queste celle div, quindi a seconda di quanto contenuto richiamo l'altezza aumenta o diminuisce. Spero di essermi spiegato

**jubstuff** · 06-05-2009, 18:50

In effetti l'altezza è meglio non fissarla.
Potresti provare con una cosa del genere, anche se migliorabile:

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>Liquid tre colonne</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="stile.css" type="text/css" media="screen" />

  </head>

  <body>

    <div id="header">

      <h1>Header</h1>

    </div>

    <div id="sidebar_a">

      <h2>Sidebar A</h2>

      

...contenuto sidebar A</p>

    </div>

    <div id="sidebar_b">

      <h2>Sidebar B</h2>

      

...contenuto sidebar A</p>

    </div>

    <div id="content">

       

...contenuto...</p>

    </div>



    <div id="footer">

      <h3>Footer</h3>

    </div>

  </body>

</html>

mentre il CSS potrebbe essere:

Codice PHP:


/*

* =HEADER

--------------------------------------*/

#header{

  background:#DDD;

  border:2px solid #777;

  padding:10px;

  margin:0 0 10px 0;

}



/*

* =CONTENT

--------------------------------------*/

#content{

  padding:10px;

  border:1px solid #777;

  margin:0 30% 10px 30%;

}



/*

* =SIDEBAR A

--------------------------------------*/

#sidebar_a{

  float:left;

  padding:10px;

  border:1px solid #777;

  width:25%;

  margin:0 0 10px 0;

}



/*

* =SIDEBAR B

--------------------------------------*/

#sidebar_b{

  float:right;

  padding:10px;

  border:1px solid #777;

  width:25%;

  margin:0 0 10px 0;

}



/*

* =FOOTER

--------------------------------------*/

#footer{

  clear:both;

  background:#DDD;

  border:2px solid #777;

  padding:10px;

  margin:0 0 10px 0;

}

In pratica si fa il float a destra e a sinistra delle due barre laterali, e si assegnano dei margini destro e sinistro alla colonna centrale appena un po più larghi delle barre. Ho un esempio qui.
Poi all'interno di ogni colonna puoi organizzare il contenuto in vari div o liste

**Gufo** · 06-05-2009, 18:55

Prova così, questo è elastico:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Documento senza titolo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.ts-1 {
	border: none;
	height: 209px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-align: left;
	width: 980px;
}

.ts-1-1 {
	background-color: #ff0000;
	border: none;
	height: 19px;
	left: 5px;
	line-height: 19px;
	padding: 5px;
	position: absolute;
	top: 5px;
	width: 960px;
}

.ts-1-2 {
	background-color: #ff0000;
	border: none;
	height: 19px;
	left: 5px;
	line-height: 19px;
	padding: 5px;
	position: absolute;
	top: 39px;
	width: 960px;
}

.ts-1-3 {
	background-color: #ff0000;
	border: none;
	height: 19px;
	left: 5px;
	line-height: 19px;
	padding: 5px;
	position: absolute;
	top: 73px;
	width: 310px;
}

.ts-1-4 {
	background-color: #ff0000;
	border: none;
	height: 53px;
	left: 330px;
	line-height: 53px;
	padding: 5px;
	position: absolute;
	top: 73px;
	width: 310px;
}

.ts-1-5 {
	background-color: #ff0000;
	border: none;
	height: 19px;
	left: 655px;
	line-height: 19px;
	padding: 5px;
	position: absolute;
	top: 73px;
	width: 310px;
}

.ts-1-6 {
	background-color: #ff0000;
	border: none;
	height: 19px;
	left: 5px;
	line-height: 19px;
	padding: 5px;
	position: absolute;
	top: 107px;
	width: 310px;
}

.ts-1-7 {
	background-color: #ff0000;
	border: none;
	height: 19px;
	left: 655px;
	line-height: 19px;
	padding: 5px;
	position: absolute;
	top: 107px;
	width: 310px;
}

.ts-1-8 {
	background-color: #ff0000;
	border: none;
	height: 19px;
	left: 5px;
	line-height: 19px;
	padding: 5px;
	position: absolute;
	top: 141px;
	width: 635px;
}

.ts-1-9 {
	border: none;
	height: 19px;
	left: 655px;
	line-height: 19px;
	padding: 5px;
	position: absolute;
	top: 141px;
	width: 310px;
}

.ts-1-10 {
	background-color: #ff0000;
	border: none;
	height: 19px;
	left: 5px;
	line-height: 19px;
	padding: 5px;
	position: absolute;
	top: 175px;
	width: 960px;
}
</style>
	</head>
	<body>
		<div class="ts-1">
			<div class="ts-1-1"></div>
			<div class="ts-1-2"></div>
			<div class="ts-1-3"></div>
			<div class="ts-1-4"></div>
			<div class="ts-1-5"></div>
			<div class="ts-1-6"></div>
			<div class="ts-1-7"></div>
			<div class="ts-1-8"></div>
			<div class="ts-1-9"></div>
			<div class="ts-1-10"></div>
		</div>
	</body>
</html>

**Alejandro** · 06-05-2009, 19:07

Scusa come fa ad essere elastico se ha ancora l'height?

Forse non riesco a spiegarmi bene io. Allora vorrei che altezza e larghezza dei vari div fosse data dal loro contenuto. Ovviamente il container totale fissa la larghezza massima a 980.
Vorrei inoltre che i vari elementi tra loro avessero uno spazio fisso uguale su tutti i lati (diciamo non so 10px). Quindi non posso dare una posizione specifica dal partendo dal top. vorrei che la prendessero da soli in base ad esempio a 10px dopo la fine del bottom dell'elemento sopra e così ai lati. Facendo questo tipo di struttura potrei applicarla a tutte le pagine che sono per i due header ed il bottom tutte uguali ma per le 3 colonne all'interno con larghezze e lunghezze diverse.

Spero di essere stato chiaro.

**Alejandro** · 06-05-2009, 19:32

Guardate partiamo dal semplice. L'header ora è ok GRAZIE.

CI sono problemi con le 3 colonne centrali.
Ecco il css:

codice:

.leftcolumn{
float:left;
margin:0 0 10px 0;
}

.centercolumn{
????

}

.rightcolumn{
float:right;
background: red;
}

non so come mettere la colonna centrale perchè sia semplicemente al centro tra le altre due.

**Alejandro** · 06-05-2009, 19:44

Aggiorno:
Questo comando float:left; e right fa si che le colonne non sia più "dentro" il container. Dove invece sono i due header.

**jubstuff** · 06-05-2009, 19:46

A te serve che le barre laterali abbiano una larghezza variabile? Se no puoi fissare una larghezze per quest'ultime e poi dare solo i margini alla colonna centrale. L'unico fatto negativo è che l'html l'ordine deve essere:
1)Barra flottata a sinistra
2)Barra flottata a destra
3)Colonna centrale
Ad esempio potresti fare cosi:

Codice PHP:


.leftcolumn{

float:left;

width:150px;

margin:0 0 10px 0;

}



.centercolumn{

margin-left:160px;

margin-right:210px;

}



.rightcolumn{

float:right;

background: red;

width:200px;

}

Discussione: Layout a 3 colonne senza table dove sbaglio?

Strumenti discussione

Ricerca discussione

Visualizza

Layout a 3 colonne senza table dove sbaglio?

Permessi di invio