Meilleure façon de mettre en œuvre un site Web à 3 colonnes en utilisant < DIV > Mots clés? [fermé]

StackOverflow https://stackoverflow.com/questions/83279

  •  01-07-2019
  •  | 
  •  

Question

Je développe un site Web à 3 colonnes en utilisant une présentation comme celle-ci: 

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

Mais, si l'on considère la propriété CSS par défaut 'position' de < DIV > 's , elle est' statique ', mon < DIV >' s a été affiché ci-dessous l'autre, comme prévu.

J'ai donc défini la propriété CSS 'position' sur 'relative' et modifié la propriété 'top' du 'milieu' et 'droite' < DIV > 's en - (moins ) la hauteur du < DIV > précédent. Cela a bien fonctionné, mais cette approche m'a apporté deux problèmes:

1) Bien qu'Internet Explorer 7 affiche correctement trois colonnes, il conserve néanmoins la barre de défilement verticale comme si le < DIV était placé l'un en dessous de l'autre, et il y a beaucoup espace blanc après la fin du contenu. Je n’aimerais pas avoir ça.

2) La hauteur de ces éléments est variable, je ne sais donc pas vraiment quelle valeur définir pour chaque propriété < DIV > 'top'; et je ne voudrais pas le coder en dur.

Ma question est donc la suivante: quel serait le meilleur moyen (simple + élégant) d’implémenter cette présentation? Je voudrais éviter le positionnement absolu et garder mon design sans tableau.

Était-ce utile?

La solution

Si vous n'avez pas encore vérifié Une liste à part , vous devriez le faire, car elle contient d'excellents tutoriels et directives pour la conception de sites Web.

Cet article en particulier devrait vous aider.

Autres conseils

Essayez BluePrint CSS . Il est très simple de démarrer avec, mais suffisamment puissant pour la plupart des applications.

Didacticiels et exemples faciles à comprendre. Possède une bibliothèque de typographie qui produit des résultats décents tout de suite.

De loin, le moyen le plus simple que j'ai trouvé de créer 3 colonnes (ou tout autre nombre de colonnes réparties de manière étrange sur l'espace disponible) est Grilles YUI . Il existe un YUI Grids Builder pour vous donner la présentation de base. Ce qui suit vous donnera une disposition de base à 3 colonnes large de 750px (divisée en 1/3 1/3 1/3) avec une barre latérale gauche de 160px. Le changer pour utiliser d’autres largeurs, configurations de barre latérale et fractionnement de colonnes est vraiment facile. 

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"> 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html>

Il existe un certain nombre d'exemples et de bibliothèques sur lesquels vous pouvez effectuer une recherche - un couple déjà répertorié (A List Apart est une lecture incontournable).

J'ai utilisé la bibliothèque d'interface utilisateur Yahoo (YUI) sur mes derniers sites. et l'aime vraiment. Yahoo le supporte complètement et il est facile à comprendre et à utiliser. Voici le CSS pour les grilles , qui vous permet de formater votre page en autant de colonnes et sections que vous voulez.

YUI est bien, car vous n'avez pas à réinventer la roue pour la fondation de votre site, et ils font tout le travail pour s'assurer que leurs fondations fonctionnent sur tous les navigateurs. Et le meilleur de tous, c'est gratuit.

J'aime le système de grille 960 . C'est un css léger et facile à utiliser qui divise l'écran en 12 (ou 16) colonnes. Vous pouvez l'utiliser pour une conception à 3 colonnes et aligner le reste de votre contenu en conséquence.

Essayez de faire flotter les div à gauche, cela les gardera tous sur la même ligne - en supposant que l’espacement soit suffisant.

Pour les colonnes fixes, il suffit de définir height: xxxpx les rendra égales.

Utilisez ce générateur de disposition à 3 colonnes pour essayer.

Ce code fonctionne sur mon ordinateur avec IE 8, Chrome, Firefox. 

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
        <a href="http://abv.bg"> Column1 </a> </div>
        <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
        <font color="#FFFFFF">Column 2 </font> </div>
        <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
        <a href="http://abv.bg"> Column 3 </a> </div>
    </body>
</html>

Tout d’abord, le positionnement relatif fait ce que vous avez décrit: il réserve de l’espace à l’emplacement initial mais affiche le décalage DIV d’un certain montant.

Si vous faites flotter les DIV, elles s'empileront de gauche à droite, mais cela peut poser problème.

Une mise en page à trois colonnes utilisant CSS est assez difficile. Consultez le site [ http://www.glish.com/css/7.asp].

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top