Tabelle zerschießt <div>-Layout

**franks** · 26.10.2005 00:46

Hallo,

Folgendes Problem konnte ich bisher noch nicht lösen (Ich sehe wohl grad den Wald vor lauter Bäumen nicht):

Der Code zeigt eine Stelle im Template, in der im linken <div> eine 2-spaltige Tabelle steckt, deren linken Zelle eine feste Breite haben soll, und die rechte Zelle, die maximal größte Breite einnehmen soll.

Darunter soll eine Trennlinie gezogen werden, die 98% der gesamten Tabellenbreite einnehmen soll.

An dieses <div> soll rechts ein weiteres <div> stehen, welches allerdings nur angezeigt werden soll, sofern dafür Blöcke vorgesehen sind.

Daraus sollte folgen, dass wenn das rechte <div> mangels Blöcke dafür nicht angezeigt wird, dass das linke <div> respektive die Tabelle darin bis an den rechten Rand reichen soll, also auch die Trennlinie in der zweiten Tabellenzeile.

Jedoch ist es momentan so, dass die 100% der zweiten Tabellenzelle das rechte <div> aus der Bahn, in die nächste Zeile, schießt.

Hat jemand einen Lösungsvorschlag bei dem das linke <div> die entsprechende Größe einhält?

a) index.php (Ausschnitt)

Code:

<div>
  <div id="content-main">
    <table cellpadding="0" cellspacing="0" border="0">
      <tr id="content">
        <td width="105">
          <div>
            <img ... width="105" height="31" ... />
	  </div>
  	</td>
        <td width="100%">
      	  <div id="pathway">
            Sie befinden sich hier:<br />
            <div id="pathway-bold">
              <?php mosPathWay(); ?>
            </div>
            <div class="clr"></div>
            <div> ... </div>
          </div>
	</td>
      </tr>
      <tr>
        <td colspan="2"><hr /></td>
      </tr>
    </table>
  </div>
  <?php if ( mosCountModules ('right') ) { ?>
    <div id="right-side">
      <div>
        <img ... width="220" height="305" ... />
      </div>
      <div class="clr"></div>
      <div>
        <?php mosLoadModules ( 'right', -2 ); ?>
      </div>
    </div>
  <?php } ?>
</div>

b) template_css.css (Ausschnitt)

Code:

#content-main { float: left; width: auto; }
#content { vertical-align: top; }
#right-side { float: right; width: 220px; }

**MadeMyDay** · 26.10.2005 10:15

Aaaalso. Erstmal wäre ein Screenshot hilfreich

Allgemein: Warum diese Mischung aus Tables und DIVs? Entweder oder und Du hast weniger Probleme.

Weitere Comments im Text:

<div> <-unnötig da keine weitere Funktion
<div id="content-main">
<table cellpadding="0" cellspacing="0" border="0">
<tr id="content">
<td width="105">
<div> <-unnötig da keine weitere Funktion
<img ... width="105" height="31" ... /> <-schön, wird oft vergessen! (Breitenangabe + selbstschließender Tag)
</div> <-unnötig da keine weitere Funktion
</td>
<td width="100%"> <-105px+100% = mehr als 100%, kann so nicht funktionieren. Entweder nur Prozent oder nur Px. Alles andere gibt meist nen Genickbruch, spätestens in anderen Browsern.
<div id="pathway">
Sie befinden sich hier:<br />
<div id="pathway-bold">
<?php mosPathWay(); ?>
</div>
<div class="clr"></div> <-was genau willst Du hier clearen?
<div> ... </div>
</div>
</td>
</tr>
<tr>
<td colspan="2"><hr /></td> <-die extra Zelle ist eigentlich unnötig. Lieber Tabelle zu, hr drunter und per CSS definieren (Kosmetik)
</tr>
</table>
</div>
<?php if ( mosCountModules ('right') ) { ?>
<div id="right-side">
<div> <-unnötig da keine weitere Funktion
<img ... width="220" height="305" ... />
</div> <-unnötig da keine weitere Funktion
<div class="clr"></div> <-Ein (möglicher) Hauptfehler. Du clearst, bevor überhaupt der Content rechts geladen wird.
<div> <-unnötig da keine weitere Funktion
<?php mosLoadModules ( 'right', -2 ); ?>
</div> <-unnötig da keine weitere Funktion
</div>
<?php } ?>
</div>

css:
#content-main { float: left; width: auto; } <-width: auto checkt der IE gar nicht, da müsstest Du mit einer Kombi aus width: auto !important + width: ..% experimentieren, das letztere gilt für den IE.

Insgesamt sind zu viele Stolpersteine da drin (Tabellen+DIVs, Px+Prozent etc.)

Ich denke diese linke Spalte soll ja nur ein Bild beinhalten. Also warum nicht ein DIV für beides mit Hintergrundbild und padding-left: 105px; ?

Ansonsten probier mal ob folgendes klappt (wie gesagt, floatende DIVs mit Breitenangaben in Prozent sind höchst kritisch)

#content-main { float: left; width: auto !important; width: 100% }

Voraussetzung allerdings, dass Du diese linke Spalte rausnimmst, die so keinen Sinn macht bzw. anders besser gelöst werden kann (s.o.)

Gruß Marc

**franks** · 26.10.2005 10:48

Hallo Marc,

Vielen Dank, dass Du meinen Code so ausführlich, und vor allen Dingen schnell, analysiert hast.

Das bestätigt den sehr guten Eindruck von diesem Forum, den andere auch bereits bestätigt haben. Top!

In der Tat fühlte ich mich selbst bei der Mischung von <table> und <div> von Anfang an nicht wohl. Die Verwendung von px- und %-Angaben war genau das, was ich gestern Abend wohl nicht mehr so recht als unmöglich wahr genommen hab.

Ich werde jetzt das ganze ohne <table>s neu aufsetzen und mal sehen was dann daraus wird.

Viele Grüße
Frank

**Lookover.at** · 20.05.2010 01:59

Hallo,
Ich habe ein sehr ähnliches Problem.

Ich habe nun eine recht aufwendige Websiete von Tablelayout auf Divs umgestellt.
Wenn ich nun in einen vordefinierte Divbereich (mit dynamischer Höhe) Inhalt eintragen möchte, dann erscheint der Inhalt IRGENDWO also genauer gesagt rechts neben dem Div unter einem weiteren Div.

Könnt ihrt mich ungefeähr verstehen.

Und zur Mischung von Tabellen und divs....bin ich im Grunde ganz anderer Meinung.
weil, was soll man machen, wenn man Content hat, der einfach nur Tabellarisch darzustellen ist.
Oder was macht man, wenn man ein Redaktionssystem hat, wo Leute Daten eintragen, und HTML erlaubt ist.
Dabei hat man keinen Einfluss darauf wie die das Eintragen.

Selbstverständlich muss Tabelle in Div möglich sein.
Klarerweise sollte zum Aufbau und positionierung des Layouts nur eine Variante gewählt werden.

lg aus Wien,...
www.lookover.at

**Lookover.at** · 20.05.2010 02:07

Hallo
Also ich hab gerade was gefunden.
So geht.
Auf diesen Weg kann man scheinbar innerhalb eines divs halbwegs anständig Tabellen darstellen. Aber was ich mit bestehenden Daten, bzw Wie kann ich den Benutzer Tabellen erstellen lassen, welche ich in einem Div darstelle ??

weiß da jemand was dazu ?

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>display</title>
<style type="text/css">
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin solid red; padding:5px; }
</style>
</head><body>

<div class="table">
 <div class="tr">
  <div class="td">ich</div>
  <div class="td">bin</div>
  <div class="td">eine</div>
  <div class="td">Tabelle</div>
 </div>
</div>

</body></html>

lg aus Wien
www.lookover.at

Thema: Tabelle zerschießt <div>-Layout

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Tabelle zerschießt <div>-Layout

Erhielt Danksagungen von:

Ähnliches Problem

Selbst beantwortet

Ähnliche Themen

Tabelle zerschießt nur im IE Design, Hilfe!

Hot or Not zerschießt Layout

Simpleboard Forum - Most Active Threads in eignener Tabelle???

Module und tabelle

Simpleboard zerschießt Layout

Lesezeichen

Lesezeichen

Berechtigungen