Mise en page HTML + CSS

Peut-être que je vais à ce sujet tout faux mais je n'arrive pas à comprendre une mise en page simple. Je veux essentiellement un en-tête qui couvre 100% de largeur et qui a une hauteur fixe (disons 120px). J'ai ensuite besoin d'un menu de gauche et le contenu sur la droite. Si la fenêtre d'affichage change, j'ai besoin d'afficher les barres de défilement si le contenu est supérieur à la fenêtre d'affichage (débordement: automatique). MAIS, je n'arrive pas à le faire fonctionner correctement. Voici ce que j'ai jusqu'à présent:Mise en page HTML + CSS

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Client Layout Test</title> 
    <style type="text/css" media="screen"> 
     body 
     { 
      margin: 0; 
      padding: 0; 
      height: 100%; 
      width: 100%; 
     } 
     #container 
     { 
      position: fixed; 
      height: 100%; 
      width: 100%; 
      background: #eaeaea; 
     } 
     #header 
     { 
      background: #000000; 
      height: 120px; 
     } 

     .PageTitle{ 
      color: #ffffff; 
      font-size: 1.8em; 
      width: 100%; 
      height: 100px; 
      text-align: center; 
      padding-top: 15px; 
     } 

     .leftMenu{ 
      padding-top: 10px; 
      padding-left: 5px; 
     } 
    </style> 
</head> 
<body> 
    <div id="header"> 
     <div class="PageTitle">CLIENT NAME AND LOGO GO HERE!</div> 
    </div> 
     <div id="container" style="overflow: auto;"> 
     <table width="100%" cellpadding="0" cellspacing="0" style="height: 100%;"> 
      <tr valign="top"> 
      <td style="background: #5a7394; width: 235px;"> 
        <div class="leftMenu"> 
         List of links goes here 
        </div>    
      </td> 
      <td style="background: #ffffff; padding-left: 10px;"> 
       <div style="text-align: justify;"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum egestas nulla nec accumsan. Suspendisse pretium luctus rhoncus. Suspendisse euismod, magna non tempor lobortis, sapien velit ornare est, a venenatis enim erat a lectus. Nunc placerat, lorem ac viverra aliquet, nisl nunc varius sem, nec commodo dui mauris interdum augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vulputate nunc non lorem mattis luctus. Sed sit amet lorem venenatis ipsum blandit commodo. Mauris tempor dolor a nisl tristique volutpat. Aliquam tincidunt rhoncus diam vitae faucibus. Sed consequat diam in eros laoreet placerat.</p> 
        <p>Pellentesque consectetur tincidunt tortor, a laoreet massa interdum vitae. Nam faucibus ante sit amet lacus pulvinar eleifend. Sed iaculis tempor nunc ut tincidunt. Phasellus id metus ac purus fringilla pellentesque pulvinar nec arcu. In augue lacus, imperdiet et egestas vel, laoreet eget lorem. Donec ante tellus, feugiat eu feugiat sed, consequat sed felis. Duis porta est sit amet erat lacinia vehicula. Nullam congue luctus sapien, ut suscipit augue varius a. In consectetur dignissim urna. Donec adipiscing ornare magna eget laoreet. Fusce purus mauris, vestibulum id feugiat ac, pretium at libero. Nam placerat, ante ornare gravida cursus, magna risus eleifend dolor, ut auctor velit purus at ligula. Nullam ultrices, orci fermentum semper euismod, velit metus condimentum lacus, consequat interdum dolor orci ut elit.</p> 
        <p>Aliquam quis nibh ac ipsum dignissim sodales ac id arcu. Ut rutrum dolor at mauris ullamcorper dignissim. Vivamus sagittis iaculis varius. Nullam pharetra enim id lectus placerat venenatis. Ut gravida nisl magna. Praesent pretium viverra convallis. Nullam molestie, est vitae luctus rhoncus, ante mi porttitor dolor, id fermentum sem eros et dui. Quisque imperdiet, justo nec aliquet dictum, lorem felis pulvinar augue, at facilisis magna metus a elit. Fusce molestie nunc nec dui blandit nec cursus neque molestie. Sed tempus metus et neque malesuada ut lacinia tortor suscipit. Sed tristique sagittis elit, tempor tincidunt augue tempus at. Vestibulum convallis volutpat euismod.</p> 
        <p>Integer mattis vulputate viverra. Cras ultrices, lectus vitae mollis pharetra, dui odio porttitor quam, vel iaculis arcu felis vel arcu. Nam posuere viverra erat, nec molestie nunc egestas a. Proin pharetra, velit quis pretium ullamcorper, arcu dui condimentum sem, eget vulputate urna turpis vitae lorem. Suspendisse vitae felis sit amet odio dapibus vulputate. Nam hendrerit tempor neque, ac dapibus turpis ullamcorper eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ipsum justo, venenatis in dignissim sit amet, consectetur gravida elit. Praesent tincidunt, orci vel elementum condimentum, nisl purus auctor orci, in ullamcorper nulla nisl et mi. Suspendisse volutpat urna vel nunc dapibus venenatis consequat nibh blandit. Cras id ipsum orci. Pellentesque eget odio dui. Fusce porta erat quis eros ornare varius. In viverra dui nec est rhoncus sed tincidunt augue imperdiet. Etiam a lectus et dui mollis fringilla.</p> 
        <p>Sed odio sapien, viverra in egestas eu, tempor consequat erat. Vestibulum laoreet felis eu ante dapibus porttitor malesuada quam varius. Morbi egestas quam nec metus ultrices ultricies. Sed lacus libero, mattis ut feugiat at, iaculis a orci. Fusce ullamcorper accumsan dui. Aenean sit amet condimentum velit. Suspendisse turpis magna, ornare in sodales vitae, lacinia id elit. Sed non nulla ac augue egestas lacinia et a arcu. Aenean vel dolor lectus, eu imperdiet sem. Integer vel tellus sed dolor mattis condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus eget massa massa, imperdiet volutpat velit. Duis a massa sit amet ligula scelerisque venenatis semper at ipsum. Aenean varius nisi a diam pretium ac facilisis metus aliquet. Ut tempus ante ac leo cursus in convallis nibh malesuada. Praesent sit amet eros neque, luctus fringilla nisi. Aliquam erat volutpat. Nam est erat, volutpat eget vulputate eget, gravida ut lorem. Nam ultricies nibh nec turpis vulputate lacinia eget vel eros. Nullam nulla tellus, porttitor id tempor non, rhoncus vitae neque.</p> 
       </div> 
      </td> 
      </tr> 
     </table> 
     </div> 
</body>

est ici à quoi il ressemble: Incorrect Layout

est ici les questions et ce que je besoin de le faire: Would Like to Look

Source

2010-12-09 Keith

Voici un jsbin pour vous aider à démarrer:

http://jsbin.com/exevi3/edit

Hope this helps. Notez que l'exemple utilise css pour la mise en page au lieu de tables. C'est la meilleure pratique recommandée de nos jours.

Bob

Voici le jQuery:

$(document).ready(function(){ 
    setHeight(); 
    $(window).resize(function(){ 
    setHeight(); 
    }); 

    function setHeight(){ 
    var headHeight = $("#header").height(); 
    var docHeight = $(window).height(); 
    var h = docHeight - headHeight - 50; 
    $("#menu").css('height', h + 'px'); 
    $("#content").css('height', h + 'px');  
    } 
});

Le '50' il y a parce qu'il ya un rembourrage supplémentaire ne sont pas pris en compte. Peut-être que je devrais utiliser innerHeight().

Voici le code HTML:

<body> 
    <div id="header"> 
    header 
    </div> 
    <div id="body"> 
    <div id="menu"> 
     <ul> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     <li>item</li> 
     </ul> 
    </div> 
    <div id="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum aliquam diam, et facilisis lectus auctor vel. Praesent sit amet ante sem, id commodo leo. Praesent eget nisl leo. Quisque vel lectus metus. Morbi pellentesque scelerisque ipsum, eget fermentum sapien molestie et. Vestibulum quis elementum augue. Donec consectetur elit id ligula imperdiet a euismod mi pharetra. Nulla nec sapien et lectus porta sodales. Aliquam sed egestas justo. Integer adipiscing, felis non vehicula commodo, leo tellus aliquam nulla, et cursus nibh felis ac risus. Duis sit amet tempor lectus.</p> 

     <p>Ut mauris tellus, auctor ut mollis vitae, malesuada at nunc. Aenean condimentum ullamcorper viverra. Etiam elementum erat eget nulla bibendum a faucibus purus feugiat. Nam enim eros, placerat vitae volutpat tincidunt, tristique ac lectus. Proin elit risus, eleifend non varius eget, pretium non lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla blandit lacus blandit nisl porttitor eleifend. Sed adipiscing, leo nec pellentesque tempus, tellus velit pulvinar turpis, euismod pulvinar est odio et elit. Etiam quis turpis a tortor condimentum convallis eu nec velit. Nullam volutpat luctus nisi, in sollicitudin lectus adipiscing vitae. Pellentesque eu neque ut nisl iaculis lacinia nec non odio. Ut id nibh nec leo vulputate malesuada at sit amet risus. Mauris elementum dolor eget ligula pharetra vestibulum. In eu enim eu dui interdum vestibulum.</p> 

     <p>Ut quis libero et neque lobortis tempus. Quisque adipiscing eleifend lacus, iaculis adipiscing nibh porttitor ut. Sed dapibus nisl quis mauris sagittis blandit. Donec a tellus non ipsum mollis pretium. Morbi non lectus ut purus porttitor auctor. Praesent vulputate dictum augue nec elementum. Nulla facilisi. Duis auctor, metus molestie egestas pellentesque, sem nulla fringilla risus, a ultrices nunc sem ut eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id neque volutpat nisl sollicitudin vestibulum auctor quis ligula.</p> 

     <p>Sed eget bibendum nisl. Ut nec odio massa, vitae posuere sem. Pellentesque vel urna sit amet sem gravida dignissim id vitae magna. Mauris aliquam, sapien pharetra malesuada bibendum, nisi metus auctor velit, eu egestas felis metus nec tellus. Morbi elementum pellentesque leo, eget facilisis nunc dictum sit amet. Integer cursus venenatis velit, a laoreet mi aliquet ut. Morbi nisi erat, tristique a porta vitae, hendrerit vel neque. Ut ipsum turpis, lobortis quis congue a, sagittis ut nulla. Donec massa sapien, consectetur facilisis lobortis in, aliquam at justo. Duis feugiat lacus sed sapien condimentum sollicitudin laoreet arcu semper. Phasellus sit amet odio at enim tincidunt congue. Ut ac ante eget eros facilisis faucibus non at mauris.</p> 

     <p>Vivamus ultrices dui eu nisi tempus semper. Suspendisse consectetur orci non lectus vestibulum dictum. Sed sodales diam vel magna scelerisque quis lobortis ipsum condimentum. Etiam sem orci, bibendum eget sagittis et, ullamcorper at nibh. In sed dignissim dolor. Aliquam erat volutpat. Curabitur vel euismod augue. Integer pulvinar ultrices velit, iaculis tincidunt est scelerisque sed. Integer non vehicula est. Cras pretium viverra augue, in accumsan ante dictum vehicula. Nulla facilisi. In imperdiet pretium tortor, eget vehicula tellus porttitor vel. Praesent erat erat, commodo ac euismod non, tempor sed sem. Fusce non elit nec velit consequat cursus. Phasellus placerat luctus erat, vitae porta sem pulvinar a. Mauris hendrerit neque vitae elit commodo convallis. In ac risus elit, non aliquam tellus.</p> 
    </div> 
    </div> 
</body>

Et enfin, le CSS:

#header{ 
    height: 120px; 
    background-color: #000; 
    color: #fff; 
    } 
    #menu{ 
    width: 300px; 
    height: 400px; 
    overflow-y: scroll; 
    float: left; 
    background-color: #ffdddd; 
    } 
    #content{ 
    height: 400px; 
    overflow-y: scroll; 
    }

Désolé ces liens ne fonctionnent pas pour vous. Pas certain pourquoi. De toute façon, vous devriez être en mesure de plop dans une page test.html et voir la solution.

Source

2010-12-09 16:30:19 rcravens

Je ne peux pas obtenir ce lien pour travailler ... – Keith

Vous ne pouvez pas obtenir à jsbin, ou le code que je mets là ne fonctionne pas? – rcravens

Je ne peux pas naviguer à l'URL que vous avez postée (http: // jsbin .com/exevi3/edit) Le lien jsbin ne fonctionne pas – Keith

d'abord , n'utilisez pas de tableaux pour ce genre de choses. Utilisez simplement divs ou HTML5 approprié.

Deuxièmement, essayez de définir une hauteur sur les éléments qui ont besoin d'une barre de défilement. Et d'ajouter ce "trop-plein-y: faites défiler;"

->http://www.w3schools.com/Css/pr_pos_overflow.asp

Source

2010-12-09 16:18:35 Icid

overflow-y: faites défiler; => ne fait que définir une barre de défilement verticale – Icid

Mais je ne sais pas quelle serait la hauteur. La page est dynamique et la fenêtre d'affichage (résolution d'écran) est dynamique. J'ai besoin de gérer ces deux situations. – Keith

Hmm vrai, vous pouvez définir la hauteur avec un peu de javascript .. – Icid

Vous devez définir la hauteur du menu-conteneur à une valeur concrète (comme dans px NOT%) pour lui permettre de faire défiler en utilisant: overflow-y: scroll;

Sinon, il ne sait pas quand ajouter la barre de défilement.

Voir l'exemple simple @ jsFiddle: http://jsfiddle.net/BfWXM/

Source

2010-12-09 16:33:09 PeeHaa

Le menu de gauche ne sera pas 300px haute. Ce sera 100%. Et une fois que vous modifiez la hauteur à 100%, le débordement: auto n'a aucun effet. – Keith

C'est ce que j'ai dit, n'est-ce pas? – PeeHaa

Répondre

Questions connexes