HTML + CSS Tabellenlayout

Vielleicht gehe ich das alles falsch, aber ich kann nicht scheinen, ein einfaches Layout herauszufinden. Ich möchte grundsätzlich einen Header, der 100% Breite überspannt und eine feste Höhe (sagen wir 120px) hat. Ich brauche dann ein linkes Menü und den Inhalt rechts. Wenn sich das Ansichtsfenster ändert, muss ich Bildlaufleisten anzeigen, wenn der Inhalt größer als das Ansichtsfenster ist (Überlauf: Automatisch). ABER, ich kann es scheinbar nicht richtig funktionieren lassen. Hier ist, was ich bisher:HTML + CSS Tabellenlayout

<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>

Hier ist, wie es aussieht: Incorrect Layout

Hier werden die Themen und was ich brauche, es zu tun: Would Like to Look

Quelle

2010-12-09 Keith

Hier ist ein jsbin Ihnen helfen, loszulegen:

http://jsbin.com/exevi3/edit

Hoffnung, das hilft. Beachten Sie, dass das Beispiel CSS für das Layout anstelle von Tabellen verwendet. Das ist die empfohlene Best Practice in diesen Tagen.

Bob

Hier ist die 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');  
    } 
});

Die '50' drin ist, denn es gibt einige zusätzliche Polsterung ist nicht berücksichtigt werden. Könnte sein, dass ich innerHeight() verwenden sollte. Hier

ist die 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>

Und schließlich der 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; 
    }

Leider diese Links für Sie nicht funktionieren. Nicht sicher warum. Irgendwie sollten Sie in der Lage sein, dies in eine test.html-Seite zu plumpsen und die Lösung zu sehen.

Quelle

2010-12-09 16:30:19 rcravens

Ich kann diesen Link nicht zur Arbeit bringen ... – Keith

Sie können nicht zu Jsbin gelangen, oder der Code, den ich dort eingegeben habe, funktioniert nicht? – rcravens

Ich kann nicht zu der von Ihnen geposteten URL navigieren (http: // jsbin .com/exevi3/edit) Der jsbin-Link funktioniert nicht – Keith

Zu allererst , verwende keine Tabellen für diese Art von Dingen. Verwenden Sie einfach Divs oder HTML5.

Zweitens, versuchen Sie eine Höhe für die Elemente, die eine Bildlaufleiste benötigen. Und fügen Sie diese "Überlauf-y: scroll;"

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

Quelle

2010-12-09 16:18:35 Icid

Überlauf-y: blättern; => setzt nur eine vertikale Bildlaufleiste – Icid

Aber ich weiß nicht, wie hoch die Höhe wäre. Die Seite ist dynamisch und das Ansichtsfenster (Bildschirmauflösung) ist dynamisch. Ich muss mit beiden Situationen umgehen. – Keith

Hmm, Sie könnten die Höhe mit etwas Javascript einstellen. – Icid

Sie müssen die Höhe des Menü-Containers auf einen konkreten Wert setzen (wie in px NOT%), um das Scrollen zu ermöglichen: overflow-y: scroll;

Ansonsten weiß es nicht, wann die Bildlaufleiste hinzugefügt werden soll.

Siehe einfaches Beispiel @ jsFiddle: http://jsfiddle.net/BfWXM/

Quelle

2010-12-09 16:33:09 PeeHaa

Das linke Menü ist nicht 300px hoch. Es wird 100% sein. Wenn Sie die Höhe auf 100% eingestellt haben, hat der Überlauf: auto keine Auswirkungen. – Keith

Das habe ich gesagt, oder? – PeeHaa

HTML + CSS Tabellenlayout

Antwort

Verwandte Themen