mise en page CSS avec la taille complète gauche et barre de navigation en-tête

Je voudrais avoir la mise en page suivantemise en page CSS avec la taille complète gauche et barre de navigation en-tête

+++++++++++++++++++++++ 
+Header    + 
+++++++++++++++++++++++ 
+Nav+     + 
+ +     + 
+ +     + 
+ +  Content + 
+ +     + 
+++++++++++++++++++++++

donc en gros une mise en page à deux colonnes avec un en-tête. J'ai vérifié de nombreux générateurs de mise en page CSS sur le net, mais ils m'ont juste produit un résultat où la barre de navigation gauche est aussi grande que le contenu. Je peux le mettre à l'échelle avec "height: 500px" ou autre chose, mais je veux qu'il soit tout le temps (de haut en bas de la fenêtre du navigateur) tout le temps. Changer la valeur avec "height: 100%" ne fonctionne pas. Si vous voulez l'essayer vous-même: http://guidefordesign.com/css_generator.php puis sélectionnez la pleine page, disposition de deux colonnes, avec en-tête pour voir ce que je veux dire. Si vous voulez, vous pouvez me dire que la propriété que je dois régler dans le fichier css généré pour le faire fonctionner

Source

2010-08-11 Dave

Vous pouvez jeter un oeil à et obtenir l'idée de:

Super Simple Two Column Layout

See the demo here.

Source

2010-08-11 07:37:09 Sarfraz

Une petite réponse générale: Regardez dans les cadres de CSS, comme http://www.blueprintcss.org/ - ceux-ci vous permettent de définir des grilles.

Voici une page d'exemple: http://www.blueprintcss.org/tests/parts/sample.html

En ce qui concerne le problème hauteur, essayez ce (devrait vous donner 100% de la hauteur de la fenêtre du navigateur pour votre div tout le temps):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <title>Test Page</title> 
    <style type="text/css"> 
    body { 
     padding: 0px; 
    } 
    .Container { 
     height: 100%; 
     width: 100%; 
     margin: 0px; 
     padding: 0px; 
     background-color: #123456; 
     color: black; 
    } 
    </style> 
</head> 
<body> 
    <div class="Container"> 
    </div> 
</body> 
</html>

Source

2010-08-11 07:39:36 miku

A solution que vous pouvez essayer, est de donner à la zone de contenu une image de fond qui est répétée verticalement (1px hauteur et largeur de votre page). Le côté gauche de cette image aurait la couleur d'arrière-plan de nav, et le reste serait la couleur de la couleur de fond de contenu ...

Source

2010-08-11 07:53:28 Naruto

Vous pouvez essayer ceci. Cela fonctionne sur les navigateurs que j'ai testés (Firefox, IE7 + 8, Opera, Safari, Chrome). Juste jouer avec les unités de pourcentage pour l'en-tête et les colonnes.

<!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>for stackoverflow</title> 
    <style> 
    body, html { 
     padding : 0px; 
     margin : 0px; 
     height : 100%; 
    } 

    #wrapper { 
     width:900px; 
     height:100%; 
     margin: 0px; 
     padding: 0px; 
    } 

    #header { 
     height:10%; 
     background-color:#930; 
     width:900px; 
    } 

    #nav { 
     background-color:#999; 
     width:200px; 
     height:90%; 
     float:left; 
    } 

    #content { 
     height:90%; 
     background-color:#363; 
     width:700px; 
     float:left; 
    } 
    </style> 
</head> 

<body> 
<div id="wrapper"> 
    <div id="header"></div> 
    <div id="nav"></div> 
    <div id="content"></div> 
</div> 
</body>

Source

2010-08-11 09:23:21 Sotiris

Bonne réponse, mais vous n'avez pas le contrôle de la propriété 'height'. Il suffit de définir 'width' et' float: left' pour faire l'affaire. – beautifulcoder

mise en page CSS avec la taille complète gauche et barre de navigation en-tête

Répondre

Questions connexes