Layout 3 col: contenuto davanti

**Leilond** · 16-02-2007, 15:47

Prima chiarisco come lavoro ora, poi faccio la domanda

Sono solito sviluppare siti con layout a 3 colonne usando questo metodo

Codice PHP:


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

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1250">

<style>

#header

{

text-align: center;

}

#extra

{

float: right;

width: 180px;

}

#navigation

{

float: left;

width: 180px;

}

#content

{

margin-left: 181px;

margin-right: 181px;

}

#footer

{

clear: both;

}

</style>

  <title></title>

  </head>

  <body>



<div id="container">

  <div id="header">

    header

  </div>

  <div id="extra">

    extra

  </div>

  <div id="navigation">

    navigation

  </div>

  <div id="content">

    content

  </div>

  <div id="footer">

    footer

  </div>

</div>



  </body>

</html>

(ho tolto tutto ciò che non è strettamente inerente al posizionamento)
Funziona sempre alla grande... due colonne a larghezza fissa (180px... ma può essere fatto anche in em) e colonna centrale che si allarga e si stringe in base alla risoluzione

Difetto
I contenuti devono stare dopo la colonna extra (colonna di destra) e la colonna navigation (colonna sinistra)... la qual cosa è brutta sia ne confronti dei browser per non vedenti (che si trovano i contenuti alla fine e devono scorrere tutto il menù e i link extra della sezione di destra), che nei confronti dei motori di ricerca (che si ritrovano sempre le stesse parole nella parte "alta" della pagina dando quindi meno importanza ai contenuti

Ho cercato un po' in giro ma non sono venuto a capo di questa domanda
C'è un modo per avere il layout di cui ho bisogno (3 colonne, destra e sinistra a larghezza fissa in pixel, colonna centrale variabile) mettendo i contenuti più "in alto" nell'html?

**Leilond** · 16-02-2007, 18:05

E proviamo ad uppare

UP!

**Leilond** · 17-02-2007, 10:40

up un ultima volta

**lukeonweb** · 17-02-2007, 11:13

Se non sbaglio proprio su HTML.it c'è un articolo che spiega come risolvere il problema... cerca un po!

**Homer_J.S.** · 17-02-2007, 11:28

Confermo quanto diceva lukeonweb.

Se dai un occhio

QUI

hai l'imbarazzo della scelta (vedi dal cap. 23 in poi)

**Leilond** · 17-02-2007, 11:35

sarò rimbambito io, ma nessuno di qui layout risponde alle caratteristiche che ho chiesto... ho spulciato tutta la sezione css e non ho trovato nulla che fa al caso mio

**Homer_J.S.** · 17-02-2007, 11:50

esempio

codice:

<div id="contenitore" style="background-color:#cccccc;">

	<div id="sx" style="background-color:#cc00cc; float: left; width:150px">
		livello sx
	</div>

	<div id="centro" style="background-color:#cccc00; float: left">
		livello centrale
	</div>

	<div id="dx" style="background-color:#00cccc; float: left; width:250px">
		livello dx
	</div>

</div>

intendi una roba del genere?

**Leilond** · 17-02-2007, 11:56

No... ho chiesto
1) Centro come primo div definito nel markup
2) Colonne laterali a larghezza fissa, centro "elastico"

**Leilond** · 17-02-2007, 21:32

Il layout che mi hai presentato ha un difetto (oltre a non avere il centro come primo div delle 3 colonne)
Il centro NON OCCUPA tutto lo spazio disponibile, ma il minimo indispensabile per il proprio contenuto. Un contenuto non molto largo quindi genererebbe un "restringimento" della colonna centrale e non mi verrebbe occupata tutta la pagina, oltre a non rispettare quella che molti considerano una regola importante: un blocco float DEVE avere il parametro width valorizzato

La cosa più "simile" che sono riuscito a trovare è

Codice PHP:


<html>

  <head>

<style>

#main

{

float: left;

width: 75%

}

#content

{

float: right;

width: 66%;

}

#navigation

{

float: left;

width: 33%;

}

#extra

{

float: right;

width: 24%;

}

#footer

{

clear: both;

}

</style>

  <title></title>

  </head>

  <body>

<div id="container">

  <div id="header">

    Header

  </div>

  <div id="main">

    <div id="content">

      Content

    </div>

    <div id="navigation">

      Navigation

    </div>

  </div>

  <div id="extra">

    Extra

  </div>

  <div id="footer">

    Footer

  </div>

</div>

  </body>

</html>

Il contenuto è il primo blocco della parte centrale e occupa il massimo dello spazio disponibile lasciato dalle altre due colonne, ma queste (le colonne laterali) non sono a larghezza "fissa" ma "percentuale"

Comincio a credere di non poterci riuscire... ripeto ciò che vorrei
1) Colonna sinistra e destra a larghezza fissa in pixel
2) Colonna centrale larga tutto lo spazio disponibile lasciato dalle altre 2 colonne
3) Colonna centrale come primo blocco del markup dopo l'header (per i browser testuali, lettori di schermo per non vedenti e motori di ricerca)

Se non trovo una soluzione dovrò arrangiarmi con la larghezza in percentuale

**Leilond** · 19-02-2007, 15:57

Faccio una delle cose che da quando programmo/sviluppo ho sempre odiato fare
Dichiaro la resa

Discussione: Layout 3 col: contenuto davanti

Strumenti discussione

Ricerca discussione

Visualizza

Layout 3 col: contenuto davanti

Permessi di invio