Layout a 3 colonne senza table dove sbaglio?

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

Allora no così non fa.
Mi serve che le 3 colonne abbiano larghezza ed altezza dipendente dal contenuto e che rientrino tutte dentro il container. Uff forse non è possibile?

Questo è l'html:

codice:

<div class="container">		
			<div class="topsection1"><? include "menu.php"; ?></div>
			<div class="topsection2"><? include "topbar.php"; ?></div>
			<div class="centercolumn"><? include "pippo.php"; ?></div>
			<div class="leftcolumn"><? include "highlights.php"; ?></div>										
			<div class="rightcolumn"><? include "banners/banner_home_300x250_1.php" ?></div>
		</div>

e questo non si tocca va bene a quanto ho capito.

Ora il css come lo metto?
SIno ai due header ci siamo così:

codice:

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

.topsection1{
  margin:0 0 5px 0; 
}

.topsection2{
 margin:0 0 10px 0; 
}

Ed è perfetto, poi?
Il comando float fa si che le colonne non rientrino nel container.

**Noodle** · 06-05-2009, 22:47

Flottare il container?
C'è da impazzirci con i nomi di quelle classi... ma sempre meglio di cicciopasticcio...

**jubstuff** · 06-05-2009, 23:39

Allora Alejandro procediamo con ordine:
a te serve un layout che abbia come larghezza massima 980px, ma vuoi che le tre colonne si possano allargare e restringere a piacimento. Purtoppo messa così mi sa che non è possibile. Devi per forza di cose stabilire almeno la percentuale di spazio che ogni colonna deve occupare. Questo perchè quando fai il float estrai gli elementi dal flusso normale, cioè gli altri div non li vedono proprio, ecco perchè il contenitore non contiene più questi elementi. Dicevo, se fai il float di un div e non gli fissi una larghezza, il suo contenuto si allargherà sopra quello delle colonne di fianco, rompendo tutto il layout. Quindi quello che dovresti fare è questo:

Codice PHP:


<div id="contenitore">

  <div id="header">

  </div>

  <div id="sidebar_A">

  </div>

  <div id="sidebar_B">

  </div>

  <div id="contenuto">

  </div>

  <div id="footer">

  </div>

</div>

ed aggiungere questo al foglio di stile che ti ho postato in precedenza:

Codice PHP:


#contenitore{

   width:980px;

   margin:0 auto;

}

e poi aggiustarti i dettagli con calma. Se vuoi, puoi dare un'occhiata a Layout Gala e prendere quello che più si adatta al tuo caso.

**Alejandro** · 07-05-2009, 09:47

Grazie Jub non è proprio così purtroppo. Guarda l'immagine iniziale non ci sono solo tre colonne ma anche un blocco in basso che occupa la larghezza di due colonne e poi il footer.

Ad ogni modo le misure sono fisse ma sono stabilite nel contenuto, nei file .php che includo. Ciò che posso fare è sicuramente dare una misure fissa alla colonna di dx che è sempre in tutte le pagine di 300px.

Mentre nelle altre pagine la colonna di sx e quella centrale varia.

Dici che non c'è soluzione? Devo tornare alle table, tr e td?
Intanto dò uno sguardo al link che mi hai dato.

Comunque io ho fissato la larghezza anche nel div ma con il parametro float rimangono sempre fuori dal contenitore.

codice:

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

.centercolumn{
margin-left:370px;
margin-right:310px; 
width:300px;  
} 

.rightcolumn{
float:right;
margin:0 0 10px 0;
width:300px;
}

**Alejandro** · 07-05-2009, 11:03

Non capisco anche dando questa forma al css:

codice:

.leftcolumn{width:360px; margin:0 0 0 0;}
.centercolumn{width:300px; margin:0 0 0 370px;}
.rightcolumn{width:300px;margin:0 0 0 680px;}

si allineano tutte ma non si affiancano. Ossia rimangono una sopra l'altra anche se orizzontalmente sono messe bene.

Dovrei però in effetti spiegarmi meglio.

Allora io nel sito ho questi 3 tipi di pagine con questi tipi di colonne:

pag.1
360px-300px-300px

pag.2
160px-500px-300px

pag.3
670px-300px

pag.4
160px-670px

Vorrei creare meno righe possibile di css per queste 2-3 colonne. I due header, il container ed il footer rimangono sempre uguali su tutte le pagine.

Forse così sono stato chiaro.

**Gufo** · 08-05-2009, 23:36

In effetti mi ero sbagliato a postare il codice, questo dovrebbe essere 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">
.div-1 {
	border: none;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 980px;
}

.div-1-1 {
	background-color: #ff0000;
	border: none;
	clear: both;
	display: inline;
	float: left;
	line-height: 19px;
	margin-left: 5px;
	margin-top: 5px;
	padding: 5px;
	width: 960px;
}

.div-1-3 {
	background-color: #ff0000;
	border: none;
	clear: both;
	display: inline;
	float: left;
	line-height: 19px;
	margin-left: 5px;
	margin-top: 5px;
	padding: 5px;
	width: 310px;
}

.div-1-4 {
	background-color: #ff0000;
	border: none;
	float: left;
	line-height: 19px;
	margin-left: 5px;
	margin-top: 5px;
	padding: 5px;
	width: 310px;
}

.div-1-9 {
	background-color: #ff0000;
	border: none;
	clear: both;
	display: inline;
	float: left;
	line-height: 19px;
	margin-left: 5px;
	margin-top: 5px;
	padding: 5px;
	width: 635px;
}

.div-1-10 {
	border: none;
	float: left;
	line-height: 19px;
	margin-left: 5px;
	margin-top: 5px;
	padding: 5px;
	width: 310px;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div class="div-1-1"></div>
			<div class="div-1-1"></div>
			<div class="div-1-3"></div>
			<div class="div-1-4"></div>
			<div class="div-1-4"></div>
			<div class="div-1-3"></div>
			<div class="div-1-4"></div>
			<div class="div-1-4"></div>
			<div class="div-1-9"></div>
			<div class="div-1-10"></div>
			<div class="div-1-1"></div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>

**Alejandro** · 09-05-2009, 12:33

Grazie mille!

Per ora ho risolto così l'html:

codice:

<div class="container">		
	<div class="topsection1">menu...</div>
	<div class="topsection2">top bar...</div>
	<div class="leftcolumn">colonna sx...</div>
	<div class="centercolumn">colonna centro...</div>
	<div class="rightcolumn">colonna dx...</div>
<div class="clr-both"></div>
</div>

ed il css:

codice:

.container {
    width: 1000px;
	height:auto;
	margin: 0 auto;
	background:transparent url(../img/bg_transparency_ffffff.png) repeat scroll 0 0;
}

.topsection1{
width: 1000px;
height:auto;
margin:0 0 5px 0; 
}

.topsection2{
 width: 980px;
 height:auto;
 margin:0px 10px 10px 10px;
 border: 1px solid #cccccc; 
}

.leftcolumn{
	float:left;
	clear: left;
	margin:0 0 0 10px;
	width:360px;
	height:auto;
}

.centercolumn{
	float:left;
	display:inline;
	margin:0 0 0 10px;
	width:300px;
	height:auto;
}


.rightcolumn{
	float:right;
	margin:0 10px 0 10px;
	width:300px;
	height:auto;
}

.clr-both {
clear: both;
}

ora procedo con il resto sotto

Discussione: Layout a 3 colonne senza table dove sbaglio?

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio