Ergebnis 1 bis 6 von 6

Thema: Tabellenlayout <div> / CSS

  1. #1
    Gast

    Standard Tabellenlayout <div> / CSS

    Ich möchte folgendes erreichen in Es sol ein zweispaltiges Layout erstellt werden, hierbei soll links und rechts ein grafischer Rand mit angezeigt werden. Der Inhalt von leftconent und der Inhalt von rightcontent sollen unabhängig von ihrem Inhalt gleiche Höhe haben.

    So sieht es im Augenblick bei mir aus

    Code:
    body &#123;
       background&#58;          #FFFFFF;
       height&#58;              100%;
       margin&#58;              0px;
       line-height&#58;         120%;
    &#125;
    
    #content &#123;
       position&#58;                  absolute;
       left&#58;                         50%;
       width&#58;                      776px;
       margin-left&#58;             -388px;
       background&#58;            url&#40;left_border.gif&#41; left repeat-y;
    &#125;
    
    .borderright &#123;
       width&#58;                     765px;
       margin-left&#58;             9px;
       background&#58;            url&#40;right_border.gif&#41; right repeat-y;
       background-color&#58;    #FF0000;
    &#125;
    
    #innercontent &#123;
       width&#58;                     756px;
       margin-right&#58;           9px;
       background-color&#58;    #00FF00;
    &#125;
    
    #rightcontent &#123;
       width&#58;                      555px;
       background-color&#58;    #0000FF;
       float&#58;                       right;
    &#125;
    
    #leftcontent &#123;
       background-color&#58;    #F0F0F0;
       margin-right&#58;        555px;
    &#125;
    
    #logoimage &#123;
       width&#58;               555px;
       height&#58;              218px;
    &#125;
    Code:
    <div id="content"><div class="borderright"><div id="innercontent"><div id="rightcontent"> 
       [img]logo.jpg[/img]
    </div>
      <div id="leftcontent">
         Hier steht der linke Text 
      </div></div>
    </div></div>
    </body>
    Im IE wird es korrekt dargestellt. Nur im Firefox wird

    1. der rechte Rand nur ein Teil dargestellt
    2. die Höhe von rightcontent und leftcontent wird nur über die Höhe einer Zeile und nicht über die Höhe des Images dargestellt.

    Was muss ich machen, damit obiges in beiden Browsern (IE und Firefox) gleich dargestellt wird?

    Danke für eure Hilfe
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Es ist normal, dass sich die Containerhöhe an der ihres Inhaltes ausrichtet. Insofern zeigt's eher der IE falsch und der FF richtig.
    Beheben lässt sich das, indem du z.B. dem #innercontent noch eine bestimmte height zuweist, z.B.
    Code:
    height&#58;500px;

  3. #3
    Gast

    Standard

    Wenn ich aber die Höhe nicht weis. z.B. bei dynamischen Inhalten? height:100% habe ich ausprobiert

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Dann musst dir mit dem faux-columns-Trick behelfen, mit dem alle Spalten an den jeweils längsten Inhalt angepasst werden.

  5. #5
    Gast

    Standard

    Ich bin hier echt am verzweifeln. Ich habe mir den Text 3 mal durchgelesen, um Ihn zu verstehen, nur mein Problem wurde hierdurch nicht gelöst. Ich habe dieses faux-columns-Trick nicht verstanden. Wie kann ich dieses auf mein Problem anwenden?

    Schon mal herzlichen Dank für eure Hilfe.

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Du müsstest mit einem Grafikprogramm eine kleine Grafik erstellen (ca. 5-10px Höhe reichen aus).
    Diese Grafik müsste im Querschnitt von links nach rechts so aufgebaut sein, dass sie den Farben und den Breiten deiner jeweiligen Container entspricht.
    Diese Grafik bindest du dann als background-image in deine content-Box ein.
    Ist nicht ganz einfach, aber eben halt auch nur eine Hilfslösung, weil sich mit CSS die Spalten nicht automatisch anpassen.
    Oder du gibst allen Spalten die gleiche Höhe und musst dann eben immer kontrollieren, ob der Inhalt nicht "zu lang" wird.

Ähnliche Themen

  1. Kann mir wer nen Tabellenlayout erstellen???
    Von echo91 im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 26.01.2007, 15:41
  2. Problem Tabellenlayout
    Von eni_84 im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 26.07.2006, 09:00
  3. Tabellenlayout -> Umfließender Text
    Von im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 04.10.2005, 13:16
  4. problem mit tabellenlayout
    Von hermes im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 14.09.2005, 15:42
  5. Tabellenlayout verschiebt sich immer... :-(
    Von CHIEFmaster im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 08.05.2005, 22:12

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •