Tabellenfreies Design

[Johannes]

Moin!

Irgendwie kriege ich mein Design ohne Tabellen nur ordentlich hin, wenn ich entweder alles pixelgenau positioniere oder divs per CSS wieder zu Tabellen mache. Beides kann doch nicht der Weisheit letzter Schluss sein, gerade beim pixelgenauen Positionieren gibt man doch einen Hauptvorteil von HTML auf, nämlich dessen Flexibilität.

Abgesehen davon kommt das in diesem pixelgenaue Fall nicht in Frage, da ich nicht für jedes Element die Position von links oben kenne, dabei will ich im Grunde nur etwas sehr einfaches machen: In einem Element sollen nebeneinander zwei Elemente stehen, von denen das linke 150 Pixel breit ist und das zweite den Rest einnimmt.

Versuch 1:

http://igel.dyndns.org/beispiel.html

Mittels "float:left; width: 150px" positioniere ich das linke Div richtig und mit "margin-left: 150px" das rechte. Nur leider fließt die linke Box über die rechte hinaus, wenn ich nicht darunter entweder einen <br clear="all" /> packe (was aus Designgründen nicht in Frage kommt), oder der Aussenbox ein "overflow: hidden" verpasse (was mir aber wie ein Bug vorkommt).

Versuch 2:

http://igel.dyndns.org/beispiel2.html

Das linke div wird mittels "width: 150px" auf die richtige Breite zurechtgestutzt, die rechte wird mittels "position: absolute; left: 150px; top: 0px; bottom: 0px; right: 0px" auf die Innenbox angepasst. Funktioniert nur leider gar nicht, da sich die Box trotz korrekter Schachtelung am Body-Element ausrichtet und nicht nach der Aussenbox. Im SELFHTML-Beispiel zu Positionierung funktioniert das zwar korrekt, einen Unterschied zu meiner Lösung habe ich aber nicht finden können.

Versuch 3:

http://igel.dyndns.org/beispiel3.html

Funktioniert korrekt, allerdings wandele ich hier divs wieder in Tabellen um, was ja nicht Sinn der Sache sein kann.

Was mache ich falsch? Danke schon mal für die Antworten,

Johannes

[shev]

Eine Antwort würde ich auch gerne wissen, kann dir leider nit helfen. Ich persönlich benutze nach wie vor Tabellen bei kleinen Menus.
Für die ganze Seite (global) benutze ich dann halt divs.

[shev]

Hmm eventuell kann man mittels height:foo em

oder <br> tags den Elementinhalt vergrössern (zu Beispiel 1)

[nag]

Hallo,

Versuch 1:
http://igel.dyndns.org/beispiel.html
<br clear="all" /> packe (was aus Designgründen nicht in Frage kommt)

das ist die Lösung für ein 2 spaltiges layout basierend auf CSS...
bitte erkläre mir, warum du aus design-gründen kein "nicht sichtbares Element" mit der Eigenschaft "clear" verwenden willst.

mfg NAG

[Cyx243]

Hallo,

<br clear="all" /> packe (was aus Designgründen nicht in Frage kommt)

das ist die Lösung für ein 2 spaltiges layout basierend auf CSS...

vielleicht _eine_ Lösung?

bitte erkläre mir, warum du aus design-gründen kein "nicht sichtbares Element" mit der Eigenschaft "clear" verwenden willst.

Da kann ich zumindest erklären was mich an solchen Klimmzügen stört:
Auch wenn die Idee eine "Semantic Web" erstmal auf lesende Maschinen abzielen dürfte, die Elementen wie zusätzlichen Divs oder auch einem <br> bei entsprechender Einstellung keine Bedeutung beimessen, geht es bei CSS-Layout auch um die Trennung von "Form" und "Inhalt".
Diese Trennung dürfte zwar sowieso nie ganz gelingen, insofern ist schon der Ansatz fragwürdig, aber diese Trennung kann Vorteile haben, z.B. bei der Seitenverwaltung und bei umfassenden Layoutänderungen.
Daraus ergibt sich wenigstens den HTML-Code von Layoutelementen wie Containerdivs und anderen Hilfselementen vollständig freizuhalten, genauso sind Inlinestyles eigentlich unsinnig, denn sonst wäre eine Layouttabelle mit entsprechenden Ergänzungen sowieso die überzeugendere Lösung.

Grüsse

Cyx23

[nag]

Hallo,

die Elementen wie zusätzlichen Divs oder auch einem <br> bei entsprechender Einstellung keine Bedeutung beimessen, geht es bei CSS-Layout auch um die Trennung von "Form" und "Inhalt".

ich hatte von einem element (nicht <br>) mit der eigenschaft clear (nicht attribut) gesprochen.

zeig mir eine seite, bei der es keine form von footer gibt.
und eben diesem footer kannst du ein clear mitgeben.

http://www.stud.uni-giessen.de/~su6690/selfhtml/tablefree.html

mfg NAG

[Cyx23]

Hallo,

ich hatte von einem element (nicht <br>) mit der eigenschaft clear (nicht attribut) gesprochen.

nein, hattest du so nicht, aber anscheinend hattest du es so gemeint...

zeig mir eine seite, bei der es keine form von footer gibt.

Nein, such dir selber welche; aber da wird sich Johannes natürlich freuen, wenn der footer aus Designgründen eher in Frage kommt als ein <br> oder Span.

Grüsse

Cyx23

[Johannes]

Moin!

<br clear="all" /> packe (was aus Designgründen nicht in Frage kommt)

das ist die Lösung für ein 2 spaltiges layout basierend auf CSS...
bitte erkläre mir, warum du aus design-gründen kein "nicht sichtbares Element" mit der Eigenschaft "clear" verwenden willst.

Weil es nicht unsichtbar ist: http://igels.net/beispiel.png

Oder was schlägst du als unsichtbares Element vor?

Johannes

[Ingo Turski]

Hi,

Weil es nicht unsichtbar ist: http://igels.net/beispiel.png

Du meinst den Abstand?

Oder was schlägst du als unsichtbares Element vor?

ein leeres DIV oder dem BR eine gewünscht "unsichtbare" Zeilenhöhe geben.

freundliche Grüße
Ingo

[MudGuard]

Hi,

bitte erkläre mir, warum du aus design-gründen kein "nicht sichtbares Element" mit der Eigenschaft "clear" verwenden willst.
Weil es nicht unsichtbar ist: http://igels.net/beispiel.png

Es läßt sich aber unsichtbar machen (line-height, font-size, height usw. auf 0 setzen).

cu,
Andreas

[Johannes]

Moin!

Es läßt sich aber unsichtbar machen (line-height, font-size, height usw. auf 0 setzen).

Womit wir wieder bei den besten Trickserreien wären, hatte eigendlich gehofft, das mit dem "Standards compliance mode" hinter mir zu lassen.

Naja, werde wohl sowas machen müssen. Danke für alle Antworten!

Johannes

[Cyx23]

Moin Moin,

Oder was schlägst du als unsichtbares Element vor?

was stört dich denn nun an einer Lösung wie:

div.aussen {
border: black thick solid;float:left;clear:left;width:100%
 }

die zumindest mit deiner beispiel.html bereits unter IE6, Opera 7 und Mozilla funktioniert?

Grüsse

Cyx32

[Cxy23]

Hallo,

die Umwandlung "divs wieder in Tabellen " auf der CSS-Ebene wäre kein
semantisches Problem, also möglich und m.E. besser als ein allerdings
eigentlich auch bedeutungsloses <br ...>.

Die Beziehungen von Aussendiv zu den anderen kannst du auch mit float
regeln, z.B.:

div.aussen {width:100%;float:left;  }
div.links {float: left; width: 15%;  }
div.rechts {margin-left: 18%;width: auto;

Unverständlich ist mir allerdings dass du offenbar die IEs nicht berücksichtigst?

Grüsse

Cyx23

[Johannes]

Moin!

Die Beziehungen von Aussendiv zu den anderen kannst du auch mit float
regeln, z.B.:

div.aussen {width:100%;float:left;  }
div.links {float: left; width: 15%;  }
div.rechts {margin-left: 18%;width: auto;

Der Aussenrahmen umfasst die beiden inneren (bzw. soll es tun), daher hat auch ein Test mit deinem Vorschlag keinen Unterschied gebracht. float wirkt sich ja nur auf Dinge ausserhalb der Box aus.

Unverständlich ist mir allerdings dass du offenbar die IEs nicht berücksichtigst?

Dass der IE das gar nicht unterstützt war mir gar nicht bewusst. Mist :(

Ich fürchte, ich muss echte Tabellen nehmen oder eben "overflow: hidden", wobei das habe ich bisher auch nur mit dem Mozilla getestet.

Johannes

[Cyx23]

Moin Moin nochmals,

Ich fürchte, ich muss echte Tabellen nehmen oder eben "overflow: hidden", wobei das habe ich bisher auch nur mit dem Mozilla getestet.

mal den Code (vgl. anderes Posting)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Beispiel</title>
  <style type="text/css">
   div.aussen {
    border: black thick solid;float:left;clear:left;width:100%
   }
   div.links {
    float: left;
    width: 15%;
    border: red thin solid;
   }
   div.rechts {
    margin-left: 18%;
    width: 80%;
    border: green thin solid;
   }
  </style>
 </head>
 <body>
  <p>geht:</p>
  <div class="aussen">
   <div class="links">links</div>
   <div class="rechts">rechts<br />x<br />x<br /></div>
     </div>
  <p>geht nicht: </p>
  <div class="aussen">
   <div class="links">links<br />x<br />x<br /></div>
   <div class="rechts">rechts</div>
   </div>
 </body>
</html>

Ich hab jetzt deinen Einwand " float wirkt sich ja nur auf
Dinge ausserhalb der Box aus." nicht verstanden, das float
der äusseren Box bringt diese auf die Ebene der Inneren,
vielleicht kanns hier noch jemand besser erklären.

Grüsse

Cyx23