Tabelle in Div zu 100%

[Krain]

Hallo zusammen,

Ich versuche gerade eine Seite mit CSS zu gestalten.

Das Design sieht wie folgt aus:

DESIGN

Wie kann ich im <div id="content"> eine Tabelle einfügen, welche die Breite des Umschließenden divs einnimmt?

Gruss

markus

[kills]

<div id="content=>

<table style="width: 100%; height: 100%">

 <tr>

   <td>

    abc

   </td>

 </tr>

</table>

</div>

das ganze machst du natürlich per klasse

[Krain]

<div id="content=>

<table style="width: 100%; height: 100%">

 <tr>

   <td>

    abc

   </td>

 </tr>

</table>

</div>

das ganze machst du natürlich per klasse

div#content table {

      width:100%;

      border:1px solid black;

      background-color:#C0C0C0;

      }

Das funktioniert aber nicht!

So zieht der Browser (zumindest IE) die Tabelle bis zum rechten Rand komplett durch, anstatt am rechten Rahmen zu stoppen!

Wie kann ich das verhindern!?

DESIGN - Das kommt dabei raus!

Firefox macht es allerdings richtig!

Nur der IE-versteht das nicht!

[*I C Q*]

Firefox macht es allerdings richtig!

Nur der IE-versteht das nicht!

Du musst den IE aufgrund seines verhunzten Box-Modells austricksen.

Ich mache das immer über sog. Conditional Comments

<style type="text/css">

div#content table {

      border:1px solid black;

      background-color:#C0C0C0;

      }

</style>

<!--[if IE]>

<style type="text/css">

  div#content table

  {

	width:expression(document.getElementById("content").offsetWidth);    

  }

</style>

<![endif]-->


<![if !IE]>

<style type="text/css">

  div#content table

  {

    width:100%;

  }

</style>

<![endif]>

[/PHP]

So funktioniert's bei mir im IE 6.0 und im Firefox gescheit.

HTH,

ICQ

[tobias-digital]

@ICQ: Das ist interessant. Ich mache das immer mit Tanteks Box Model Hack. Funktioniert Deine Methode auch in einer extra Stylesheet Datei, die per <link> eingebunden wird? Ist die Methode zuverlässig? Validiert das ordentlich?

Gruß Tobias

[*I C Q*]

Ich mache das immer mit Tanteks Box Model Hack.

Ich sträube mich eigentlich dagegen, irgendwelche Hacks einzusetzen, weil die dann eventuell bei der nächsten Browserversion nicht mehr gescheit funktionieren, wobei der von Tantek weitestgehend "zukunftssicher" zu sein scheint.

Ist die Methode zuverlässig? Validiert das ordentlich?

Also ich habe ab dem IE5 keine Probleme damit festgestellt, für alle anderen Browser ist's halt ein Comment. Allerdings validiert nur der erste Teil, also der der nur für den IE ist, vernünftig. Beim zweiten, dem sogenannten "downlevel-revealed conditional comment" meckert der Validator das "<![iF !IE]>" an, da IF kein Schlüsselwort ist. Ich bin aber bis jetzt auch nicht in die Verlegenheit gekommen, das so zu benutzen, weil meistens (aber eben leider nicht in diesem besonderen Fall) die "nur IE"-Definition reicht. Eine weitere Möglichkeit wäre das Arbeiten mit verschachtelten CSS-Elementen, die von noch keinem IE unterstützt werden, allerdings besteht auch hier die Gefahr, dass die nächste IE-Generation zwar diese Variante unterstützt aber immer noch mit dem falschen Box-Modell arbeitet.

<style type="text/css">

div#content table {

      border:1px solid black;

      background-color:#C0C0C0;

      }

div#content > table

{

  width:100%;

}

</style>

<!--[if IE]>

<style type="text/css">

  div#content table

  {

    width:expression(document.getElementById("content").offsetWidth);    

  }

</style>

<![endif]-->

[/PHP]

[EDIT]

Weil mir gerade noch was eingefallen ist:

Bei externen Stylesheets musst Du dann 2 .css-Dateien erstellen:

Eine für alle Browser und eine "IE-spezifische". Die Erste bindest Du wie bisher ein, die zweite setzt Du in den Conditional Comment

[php]
<link rel="stylesheet" type="text/css" href="style.css">
<!--[IF IE]>
<link rel="stylesheet" type="text/css" href="styleforie.css">
<![endif]-->

Ausserdem empfiehlt es sich, den IE ab Version 6 in den "standards-compliant mode" zu versetzen. Dies geschieht mittels des DOCTYPE-Switches:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 

    "http://www.w3.org/TR/html4/loose.dtd">[/php]

Damit interpretiert der IE6 auch das width:100%; vernünftig! Für alle anderen sollte man aber den CC-Block drinlassen.

[/EDIT]

ICQ

[FMG]

Zwecks Validität:

Machs einfach so:

<!--[if IE]><style type="text/css">@import url(ie.css);</style><![endif]-->

... dann kannst du auch valides XHTML schreiben.

@Tabelle:

Du solltest erstmal deine div-Suppe entschlacken - mindestens 4 von den 9 div's, die zurzeit auf der Seite sind, sind überflüssig! - Dann dürfte sich das Problem von alleine lösen bzw. garnicht erst auftreten.

[FMG]

Vorheriges mit der div-Suppe betraf allgemein deinen Code.

Dass der IE die Tabelle bis zum Rand durchzieht, ist auch kein Wunder - das hast du schließlich so angegeben....

div#content table {

      width:100%;

      border:1px solid black;

      background-color:#C0C0C0;

      }

Wenn du einen Platz dazwischen haben willst, musst ein du margin-left bzw. margin-right definieren.

[Krain]

Auf welches div's kann ich denn verzichten?

[FMG]

Hm... main, container, container2, navigation, banner.

arbeite mal mit float anstatt z. B. den Inhalt absolut zu positionieren. Ein dreispaltiges Design bekommst du mit float folgendermaßen hin:

<!-- links -->

<div style="float: left; clear: none;">Text<br>Text></div>

<!-- ende links -->

<!-- rechts -->

<div style="float: right; clear: none;">Text<br>Text></div>

<!-- ende rechts -->

<!-- mitte -->

<div>Text<br>Text</div>

<!-- ende mitte -->

[FMG]

Ich sehe gerade, dass ich etwas wichtiges vergessen habe. *rotwerd*

Jedes floatende div braucht eine feste bzw. relative Breite, d.h. so ists z. B. richtig:

<div style="float: left; clear: none; width: 25%;">Text<br>Text</div>

Text<br>Text

[Krain]

Und wie gehe ich bei der Lösung sicher, dass alle DIV's gleich hoch sind?

Denn wenn im mittleren mal mehr Text steht fließt es zum beispiel um die anderen beiden rum!

Kann cih in links und rechts height:100% angeben?

[FMG]

Height wird, wenn du Glück hast,nur im IE funktionieren, allerdings auch nur, wenn du es über body,html { height: 100%} definierst.

Ein floatendes div ist normalerweise so lang, wie der Text dadrin, es sei denn, du gibst an, dass der folgende Text nicht clearen, sprich den Text im div nicht umfließen soll.

Sichergehen kannst du nur, wenn du die Höhe absolut angibst, alos z. B. height: 600px;.

[Krain]

Ich habe jetzt in jedem, also left und right height:100% angegeben und es funktioniert eigentlich sowohl im firefox als auch im ie!

Aber im firefox habe ich oben eine leerzeile und im ie unten eine leerzeile.

ich habe schon im body padding und margin auf 0 gesetzt.

Woran kann es sonst noch liegen?

[FMG]

Hm, das wäre auch mein Tipp gewesen, kannst du mal die jetzige Version online stellen bzw. deinen jetzigen Code posten!? Helfen könnte auch noch div { margin: 0; }.

[Krain]

Hab die antwort zwar gefunden, aber ich poste meine Lösung trotzdem mal!

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>

<head>

<title>LINDEN Design 1</title>


<style type="text/css">

<!--

body     {

          margin:0;

          padding:0;

          }


div#banner h1{

    margin:0;

    padding:0;

    background-color:red;

    }


div#left {

    margin:0;

    padding:0;

    background-image:url(linden_base.jpg);

    background-repeat:repeat-y;

    float:left;

    clear:none;

    width:200px;

    height:100%

    }


div#left ul {

      list-style-type:none;

      padding:1em 1em 1em;

      margin:0;

    }


div#left ul li{

      margin:0.2em;

      }


div#left ul li a {

      display:block;

      width:120px;

      color:#DFD;

      background-color: #060;

      text-decoration:none;

      padding:0.1em 0.3em;

      font-weight:bold;

      font-size:10pt;

      border-bottom:1px solid black;

      border-right:1px solid black;

      border-top:1px solid #0D0;

      border-left:1px solid #0D0;

      }


div#left ul li a:hover,div#left ul li a#active,

div#left ul li a:active {

      color:#0D0;

      border-top:1px solid black;

      border-left:1px solid black;

      border-right:1px solid #0D0;

      border-bottom:1px solid #0D0;

      }


div#right {

    margin:0;

    padding:0;

    background-image:url(linden_base2.jpg);

    background-repeat:repeat-y;

    background-position:right;

    float:left;

    clear:none;

    width:200px;

    height:100%;

    }


div#right h3 {

      padding:0;

      margin:20px 20px 0 0;

      width:150px;

      float:right;

      clear:right;

      background-image:url(linden_nav.gif);

      background-position:right;

      background-repeat:repeat-y;

      width:150px;

      color:#DFD;

      font-size:12pt;

      border-top:2px solid #060;

      border-left:2px solid #060;

      border-right:2px solid #0D0;

      border-bottom:1px solid black;

      }


div#right p {

      padding:0;

      margin:0 20px 0 0;

      width:150px;

      float:right;

      clear:right;

      background-color:#060;

      color:#DFD;

      border-left:2px solid black;

      border-right:2px solid #0D0;

      border-bottom:2px solid #0D0;

      }



div#content {

border:1px solid black;

    float:left;

    clear:none;

    width:60%;

    margin:0;

    padding:0;

    }


div#content h2 {

                margin:0;

                padding:1em;

                }

div#content p {

                margin:0;

                padding:1em;

                }

-->

</style>


</head>

<body>

 <div id="left">

          <ul>

               <li><a id="active" href="#">Link 1</a></li>

               <li><a href="#">Link 2</a></li>

               <li><a href="#">Link 3</a></li>

               <li><a href="#">Link 4</a></li>

          </ul>

          <ul>

               <li><a href="#">Link 5</a></li>

               <li><a href="#">Link 6</a></li>

               <li><a href="#">Link 7</a></li>

          </ul>

 </div>

 <div id="content">

          <h2>Willkommen bei (Firma)</h2>

          <p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

            nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

            volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation

            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo

            consequat.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in

            vulputate velit esse molestie consequat, vel illum dolore eu

            feugiat nulla facilisis at vero eros et accumsan et iusto odio

            dignissim qui blandit praesent luptatum zzril delenit augue duis

            dolore te feugait nulla facilisi.</p>


         </p>

 </div>

 <div id="right">

          <h3>Weitere Informationen</h3>

          <p>

          Hier können weitere Informationen zur verwendung der Seite gegeben

          werden.<br />

          Es ist auch möglich hier <a href="#">weitere Links</a> einzubauen.</b>

          </p>

 </div>

<!-- <div id="footer">

© Copyright 2000-2004 Firmenname. Alle Rechte vorbehalten. <a href="#">Impressum</a><br />

Ausgewiesene Marken gehören ihren jeweiligen Eigentümern.<br />

Mit der Benutzung dieser Website erkennen Sie die <a href="#">(Firma)-AGB</a> und die <a href="#">Datenschutzerklärung</a> an.<br />

(Firma) übernimmt keine Haftung für den Inhalt verlinkter externer Internetseiten.<br />

</div>-->



</body>

</html>

[/PHP]

Mir geht es ja auch darum, links und rechts die grünen Balken zu haben!

Das Problem, das ich jetzt für später sehe ist, dass ich wahrscheinlich eine feste breite von 1024 haben muss (wegen eines Bildes) - und dann ist es nämlich aus mit float:right (denke ich - noch nicht getestet)

Aber ansonsten finde ich deine Idee echt besser als meine vorherige!