Layout Complesso CSS

**Dr Mal** · 27-11-2010, 13:56

Ciao ragazzi,

Ho bisogno di un piccolo aiuto per tirare fuori dal cilindro un layout di questo tipo:

Deve essere tutto fisso, non fluid.
Non so se sia fattibile ... io non ci riesco ...

Mi date una mano please?

Un Grazie anticipato,

**Mich_** · 29-11-2010, 09:52

E` un sempice layout a due colonne con header e footer, tutto racchiuso in un "wrapper" centrato.

Se cerchi tra i layout pronti (alcuni riferimenti tra i "link utili") trovi sicuro qualcosa di gia` pronto.
L'unica cosa e` che devi inserire il layout dentro il contenitore:

codice:

HTML:
<body>
  <div id="wrapper">
    ... qui il layout a due colonne con heade e footer - dovrai anche usare il trucco delle "false colonne" ...
  </div> 
</body>

CSS:
html, body {
  width: 100%;
}
#wrapper {
  width: 600px;    /* definire secondo le tue esigenze */
  margin; 0 auto;
  background: url(falsecolonne.png) repeat-y;
}
#header {
  width: 100%;
  background: ...;
}
#sin {
  float: left;
  width: 400px;  /* da regolare */
}
#des {
  float: left;    /* o anche right, come preferisci */
  width: 200px;    /* da regolare */
}
#footer {
  clear: both;
  widht: 100%;
}

**Dr Mal** · 29-11-2010, 11:49

Ciao Mich_

intanto grazie per la risposta,

Tanto per capire ... ma l' unico modo per avere le due colonne laterali è quello di utilizzare il trucco delle false colonne?

**Mich_** · 29-11-2010, 12:18

Originariamente inviato da Dr Mal
Tanto per capire ... ma l' unico modo per avere le due colonne laterali è quello di utilizzare il trucco delle false colonne?

Non per le colonne laterali, io lo consigliavo per le due colonne interne.
Non l'unico, ma il modo piu` semplice e il piu` usato.
Tieni presente che non e` necessario che i due sfondi siano colorati: lo stesso trucco serve anche per avere una riga verticale che divide i due blocchi (sempre che sia necessaria: ci sono situazioni in cui non e` necessario).

Per le colonne laterali (sempre che tu voglia "colorarle" e di colori diversi) puoi usare le false colonne nel body, ma se vuoi farle scomparire (cioe` farle diventare il meno appariscenti possibile), la cosa migliore e` lasciarle bianche.
Pero` qullo che conta e` l'aspetto complessivo della pagina; io non sono esperto in questo (in grafica sono molto migliori).

Io in questo momento guardo solo all'aspetto del codice, e posso dare alcuni consigli in base all'esperienza (non solo diretta, ma anche acquisita in anni di frequentazione del forum).

**Dr Mal** · 29-11-2010, 12:39

In pratica, le colonne laterali mi servono solo per dare un effetto ombra laterale a tutta la pagina, compresi header e footer.

Nel modo in cui mi hai indicato tu, l' effetto ombreggiatura lo otterrei solo per le 2 colonne sin e des,

Come fare allora?

**Mich_** · 29-11-2010, 12:53

Puoi usare le false colonne anche per le bande laterali.
E` stato un errore mio di interpretazione (nel tuo schema iniziale non se ne parlava).

E, ribadisco, non sono un esperto di grafica, ne` di "apetti estetici".

Dal punto di vista semantico, le "sfumature varie" non contano.
E, per come la vedo io, occorre prima partire dal contenuto (che deve essere corretto sia sulla sintassi che sulla semantica) e poi si possono inserire gli "abbellimenti".
Se la progettazione e` stata fatta correttamente, inserire abbellimenti grafici quando la pagina e` pronta non e` difficile.

**Dr Mal** · 29-11-2010, 13:07

Credo di poter risolvere in altro modo il discorso dell' ombreggiatura,

Mi spieghi però come fare per avere una height al 100% per le colonne laterali?
Il codice che mi hai indicato mi da questo risultato (guarda le colonne colorate in rosso):

**Mich_** · 29-11-2010, 13:15

Io veramente ti avevo dato tutto un altro layout ...

Comunque posta il tuo codice HTML+CSS, oppure (meglio) posta un link (anche provvisorio).

Riposto la parte HTML del mio coidce che avevo postato in modo molto succinto, dato che facevo riferimento ad altre fonti.

codice:

<body>
  <div id="wrapper">
    <div id="header"> ... </div>
    <div id="contenuto">
      <div id="sin"> ... </div>
      <div id="des"> ... </div>
    </div> 
    <div id="footer> ... </div>
  </div> 
</body>

**Dr Mal** · 29-11-2010, 13:21

Il layout è quello che mi hai dato tu,

Ho solo modificato le dimensioni in px delle colonne e del contenitore ed ho inserito il colore di sfondo:

CSS

codice:

html, body {
  width: 100%;
}
#contenitore {
 width:968px;
 margin:0 auto;
 padding:0;
 }
#testata {
 width:968px;
 height:80px;
 margin:0;
 padding:0;
 background-color: #ccc;
 } 
.falsa_colonna1 {
 width:50px;
 margin:0;
 padding:0;
 float:left;
 background-color: #f00;
 }
.falsa_colonna2 {
 width:50px;
 margin:0;
 padding:0;
 float:right;
 background-color: #f00;
 }
.falsa_colonna3 {
 width:270px;
 margin:0;
 padding:0;
 float:right;
 background-color: #ddd;
 }
.falsa_colonna4 {
 width:598px;
 margin:0;
 padding:0;
 float:right;
 background-color: #eee;
 }
.contenuto_colonne {
 padding:15px;
 }
#pie_pagina {
 width:968px;
 height:80px;
 margin:0;
 padding:0;
 clear:both;
 background-color: #ccc;
 }

HTML

codice:

<div id="contenitore">
	<div id="testata">Header</div>
	<div class="falsa_colonna1">
		

Lat1</p>
	</div>
	<div class="falsa_colonna2">
		

Lat2</p>
	</div>
	<div class="falsa_colonna3">
		<div class="contenuto_colonne">
			

Menu</p>
		</div>
	</div>
	<div class="falsa_colonna4">
		<div class="contenuto_colonne">
		

Corpo</p>
		</div>
		</div>
	<div id="pie_pagina">Footer</div>
</div>

**Mich_** · 29-11-2010, 15:52

Questo non e` lo schema proposto nel primo messaggio.
Questo che hai fatto e` uno schema a 4 colonne con header e footer.

E comunque le colonne laterali (quelle esterne) non vanno dimensionate in larghezza, altrimenti non riesci piu` a centrare il blocco con i contenuti.

Discussione: Layout Complesso CSS

Strumenti discussione

Ricerca discussione

Visualizza

Layout Complesso CSS

Re: Layout Complesso CSS

Permessi di invio