Umstieg von Tabelle zu div

[Dennis D.]

Hallo Forum,

ich bin ein Tabellenliebhaber... In meiner "tollsten" Webseite habe ich insgesamt 26 Tabellen ineinander verschachtelt.

Das soll sich nun ändern, aber es scheitert schon bei kleinigkeiten, die bei der Tabelle ein kinderspiel waren.

Der code vorher war so:
<table style="width: 100%">
 <tr>
  <td>
  <table style="width: 300px">
   <tr>
    <td style="text-align:left">Text</td>
    <td style="text-align:right">Text</td>
   </tr>
  </table>
  </td>
 </tr>
</table>

Mein Versuch das ganze nun ducrh div zu entschärfen versagte kläglich.

<div style="width: 804px; border: 1px #7791B0 solid; vertical-align: middle; margin: 0px;">
  <div style="width: 500px; text-align: left; float: left; padding: 0px; margin: 0px;">Text</div>
  <div style="width: 300px; text-align: right; float: right; padding: 0px; margin: 0px;">Text</div>
 </div>

die beiden inneren divs sollen einfach nur nebeneinander. mit float geht das, aber er fügt immer eine leerzeile ein, wenn zwischen den beiden div's kein platz ist. 500 und 300px geht nicht.. aber 500 und 200 geht.. da fügt er keine leerzeile ein.
Ist das wirklich alles so schwer?

Gibt schon viele themen in diesem forum darüber, hab aber keine direkte lösung gefunden.

es sollte auf jedenfall für alle browsertypen geeignet sein.
display inline ignoriert den text-align eintrag.. und die texte begegnen sich in der mitte.

Ich möchste, das die zwei innen div's genau so groß sind wie das außending und das am besten ohne leerzeile.

Vilen Dank für eure Hilfe

[ChrisB]

Hi,

ich bin ein Tabellenliebhaber... In meiner "tollsten" Webseite habe ich insgesamt 26 Tabellen ineinander verschachtelt.

Das ist keine Liebhaberei mehr, sondern Perversion ;-)

<div style="width: 804px; border: 1px #7791B0 solid; vertical-align: middle; margin: 0px;">
  <div style="width: 500px; text-align: left; float: left; padding: 0px; margin: 0px;">Text</div>
  <div style="width: 300px; text-align: right; float: right; padding: 0px; margin: 0px;">Text</div>
</div>

Der Umstieg "von Tabellen auf Divs" ist weiterhin Nonsense.

Nutze jeweils die Elemente, die zur Auszeichnung der Inhalte am besten geeignet sind - als bspw. hX fuer Ueberschriften, p fuer Text, Listen von Links fuer eine Navigation, etc.

die beiden inneren divs sollen einfach nur nebeneinander. mit float geht das, aber er fügt immer eine leerzeile ein, wenn zwischen den beiden div's kein platz ist. 500 und 300px geht nicht.. aber 500 und 200 geht.. da fügt er keine leerzeile ein.

Warum gibst du ueberhaupt beiden Divs eine Breite?
Gebe einem eine Breite, floate ihn - und lasse den anderen einfach daneben stehen, ohne float, ohne Breite.

MfG ChrisB

[Steel]

Hi!

Leerzeile? Was meinst Du mit Leerzeile? Da sind zwei Elemente nebeneinander. Wo soll denn eine Leerzeile sichtbar sein, wenn es darueber und darunter nichts gibt?

<div id='wrapper'>
 <div id='content'></div>
 <div id='navi'></div>
</div>

#wrapper {
 width: 804px; /*was spricht denn hier gegen 100%, bzw allgemein gegen %?*/
 border: 1px solid #7791B0;
 /*vertical-align: middle; ??? was soll das denn wohl bewirken? */
 margin: 0px;
}

#content {
 width: 500px;
 text-align: left;
 float: left;
 padding: 0px;
 margin: 0px;
}

#navi {
 width: 300px;
 text-align: right;
 float: left; /*warum nun ploetzlich rechts? Soll was dazwischen?*/
 padding: 0px;
 margin: 0px;
}

Das sollte erstmal funktionieren. Probiert hab ichs nicht. Bei ein paar deiner Einstellungen frag ich mch, was die sollen und befuerchte, du musst dich erstmal naeher mit CSS auseinadersetzen. vor allem vielleicht mit float. Denn so, wie es jetzt ist hat dein umgebender Container keine Hoehe. Was links und rechts floaten bedeutet, solltest du dir vielleicht auch mal ansehen.

Und mal wieder als kleiner Tipp:
http://www.intensivstation.ch/templates/

Was zum schauen und lernen.