Correction 3 Colonne Site

Question

Je sais que cela a déjà été demandé mais je suis curieux de voir si les choses ont changé.

Je suis à la recherche d'une mise en page 3 colonnes html/css fixe avec la zone de contenu principal (milieu) situé en premier (des 3 colonnes) dans le DOM - pour le référencement.

Des idées?

Answer 1

Il faut un peu de balisage supplémentaire, mais pour obtenir le contenu d'être d'abord, vous pouvez essayer quelque chose comme ceci:

<div id="wrapper"> 
    <div id="content-wrapper"> 
     <div id="content">I'm first</div> 
     <div id="side_a">I'm second</div> 
    </div> 
    <div id="side_b">I'm third</div> 
</div> 

Et en CSS:

#wrapper { 
    width: 800px; /* Total width of all columns */ 
    margin: 0 auto; 
} 

#content-wrapper { 
    float: left; 
} 

#content { 
    width: 400px; 
    float: right; 
} 

#side_a { 
    width: 200px; 
    float: left; 
} 

#side_b { 
    float: left; 
    width: 200px; 
} 

#wrapper contstraints les colonnes la largeur de 800px et rend la page centrée. Les colonnes #content et #side_a sont disposées à l'intérieur #content_wrapper dans l'ordre inverse en utilisant différents flotteurs. #side_b est ensuite flotté aux côtés de #content_wrapper.

Un exemple de travail se trouve ici:

http://www.ulmanen.fi/stuff/columns.php

Answer 2

C'est la même approche utilisée Tatu, mais avec:

• un en-tête
• un pied de page
• une largeur de fluide au lieu de s fixe Izes
• colonnes qui ont des couleurs d'arrière-plan pleine hauteur
• divs supplémentaires pour rembourrer le contenu dans les colonnes

Vous pouvez le tester sur jsFiddle: http://jsfiddle.net/BzaSL/

HTML:

<div id="header">First: Header</div> 
<div id="wrapper"> 
    <div id="content-wrapper"> 
     <div id="content"> 
      <div id="contentpad"> 
       <h2>Second: Content</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus turpis dui, porta consectetur dictum id, rhoncus non turpis. Praesent vitae fermentum enim. Donec consequat accumsan nibh et tempor. Duis sem enim, interdum eget vestibulum vitae, semper ac arcu. Maecenas convallis imperdiet libero, bibendum vulputate nulla tempus in. Duis eu purus eget lectus tincidunt fermentum. Vestibulum sit amet nunc et metus auctor ullamcorper. Vestibulum ut dui purus, nec hendrerit orci. Aliquam erat volutpat. Praesent a nibh vitae enim fringilla aliquam.</p> 
      </div> 
     </div> 
     <div id="leftcol"> 
      <div id="leftcolpad"> 
       Third: Left column 
      </div> 
     </div> 
    </div> 
    <div id="rightcol"> 
      <div id="rightcolpad"> 
       Fourth: Right column 
      </div> 
    </div> 
</div> 
<div id="footer">Fifth: Footer</div> 

CSS:

/* wrapper has all three columns, it is 100% of page width. 
* background applies to the right column.*/ 
#wrapper { width: 100%; margin: 0 auto; background-color:#CCFFFF; } 
/* clear floating elements before footer */ 
#wrapper:after { display: block; content: ""; clear: both; } 
/* content-wrapper is left two columns; 80% of wrapper width. 
* background applies to left column */ 
#content-wrapper { float: left; width:80%; background-color:#FFFFCC; } 
/* content is 75% of the content-wrapper width */ 
#content { width: 75%; float: right; background-color:#FFCCFF; } 
/* leftcol is the other 25% of the content-wrapper width */ 
#leftcol { width: 25%; float: left; } 
/* rightcol is 20% of thet wrapper width */ 
#rightcol { float: left; width: 20%; } 
/* Adding padding or margin directly to the columns messes up the layout */ 
#contentpad, #leftcolpad, #rightcolpad, #footer, #header{ padding:1em; } 
#footer{ background-color:#CCCCFF; } 
#header{ background-color:#FFCCCC; }