Brauche Hilfe bei Umstieg von <table> zu <div>

[Justin]

Hallo,
Ich möchte von <table> zu <div> elementen umsteigen,
da das weniger Quellcode geben soll. Allerdings
habe ich folgende Probleme:
zu sehen auf der Seite
http://home.arcor.de/kenibu1987/temp/index.html

1. Ich habe 3 divs in einem zusammengfasst und will
dass die hintergrundfarbe des einhüllenden divs auch hinter
den inneren 3 divs sind, aber die bleiben durchsichtig und
zeigen den normalen body-background.

2. Die 3 divs haben Text in sich, aber ich möchte ein padding dafür machen,
weil die drei Texte sonst nicht optisch getrennt sind. wenn ich da
jetzt aber ein padding einstelle vergrößert sich das div
von 250 auf 250+padding, das will ich aber nicht.

3. Wie man auf der Seite sieht sind beim "Partner"-text
so links wie  Startseite | Leistungen | Kunden | Produkte[...]
die sollten aber unter den 3 divs sein, quer rüber. Wie?

[Ulrich]

Hallo,

http://home.arcor.de/kenibu1987/temp/index.html

2. Die 3 divs haben Text in sich, aber ich möchte ein padding dafür machen,
   weil die drei Texte sonst nicht optisch getrennt sind. wenn ich da
   jetzt aber ein padding einstelle vergrößert sich das div
   von 250 auf 250+padding, das will ich aber nicht.

Bei IE hast Du recht. Standardkonforme Browser rechnen den padding aber nach innen, da bleibt 250 stabil.
Suche mal nach boxmodel, da wirst Du einiges an Erklärungen finden.

3. Wie man auf der Seite sieht sind beim "Partner"-text
   so links wie  Startseite | Leistungen | Kunden | Produkte[...]
   die sollten aber unter den 3 divs sein, quer rüber. Wie?

Also bei mir ist noch ein anderes Probelem (IE6 Win98)
01.gif 02.gif sind in einer Reihe
03.gif dann eine Runde tiefer, direkt unter 01.gif
So wie das aussieht, war das wohl nicht gewollt, nehme ich an.

Ich weiß nicht wie Du das angeordnet hat, aber man könnte die Bereiche mit float nebeneinander setzen. Es gibt hier eine Menge Beispiele unter layoutvorlagen bei selfhtml. Zieh Dir mal einige Artikel 'rein, ich bin mir sicher das wird Dich weiterbringen.

mfG
Ulrich

[Der Martin]

Hallo Ulrich,

weil die drei Texte sonst nicht optisch getrennt sind. wenn ich da
jetzt aber ein padding einstelle vergrößert sich das div
von 250 auf 250+padding, das will ich aber nicht.

Bei IE hast Du recht. Standardkonforme Browser rechnen den padding aber nach innen, da bleibt 250 stabil.

Nein, genau umgekehrt. Standardkonforme Browser vergrößern das Element um das angegebene Padding, weil sie die angegebene Breite auf den _Inhalt_ des Elements beziehen, auch wenn's widersinnig ist. Nur der IE im Quirks Mode hält die _Außenmaße_ fest.

Suche mal nach boxmodel, da wirst Du einiges an Erklärungen finden.

Selber!  ;-)

Schönen Abend noch,
 Martin

[Ulrich]

Hallo Ulrich,

*traumichkaumwaszusagen*

Nein, genau umgekehrt. Standardkonforme Browser vergrößern das Element um das angegebene Padding, weil sie die angegebene Breite auf den _Inhalt_ des Elements beziehen, auch wenn's widersinnig ist. Nur der IE im Quirks Mode hält die _Außenmaße_ fest.

Suche mal nach boxmodel, da wirst Du einiges an Erklärungen finden.

Selber!  ;-)

Autsch ja, recht hast Du ;) Letzlich denke ich aber, daß bei der Lösung des Problems zwei Wege gegangen werden müssen, eine für den IE, der ja (verquirkst) daß _Außenmaß_ festhält und für die standardkonformen Browser, die das padding nach außen aufaddieren ein anderer?
(Hab ich's so richtig? Vergeß' ich glaub ich nimmer mehr :D )

Was manchmal helfen kann ist eine Angabe im CSS wie
* {border:1px solid red;}
Anhand der Rahmen kann man dann ganz gut sehen wo die Elemente plaziert sind.

mfG
Ulrich

[Justin]

Was manchmal helfen kann ist eine Angabe im CSS wie
* {border:1px solid red;}
Anhand der Rahmen kann man dann ganz gut sehen wo die Elemente plaziert sind.

Ja, aber das bringt mir im Moment nicht Viel.
Ich habe die seite mal neu hochgeladen (etwas verändert),
aber wie löse ich das nun.
http://home.arcor.de/kenibu1987/temp/index.html
Wie würdet ihr 3 Textelemente
ohne tabelle nebeneinander setzen? Codebeispiel?

[Ulrich]

Ich weiß nicht, aber es hat Dir schon was gebracht. Bei mir sieht's jetzt schon um einiges aufgeräumter aus.
oben.gif
logo.gif|thema.gif
menu.gif
1|2|3 ->alles gif
unter allen 3
die Bereiche
Preise der Leistungen|Geschäftsbedinungen|Partner
dann ein schwarzer Balken
dann 'ne Menge links.

So macht das erstmal den Eindruck als wäre das so gewollt. Zumindest bei IE 6.0 und Win 98 (siehe oben)

Ok, wo _genau_ ist denn nun Dein Problem?

mfG
Ulrich

[Justin]

So macht das erstmal den Eindruck als wäre das so gewollt. Zumindest bei IE 6.0 und Win 98 (siehe oben)

Bei meinem IE 6 machts einen Fehler hin,
bei dem dritten Textfenster, da ist bei dem "weiter" link
noch drunter ein "er", irgendwie fehlerhaft halt.
Bei dir nicht?

Ok, wo _genau_ ist denn nun Dein Problem?

Im Firefox zeigt es die Seite immernoch nicht richtig an,
erst wenn ich auf zwei Textfenster pro Zeile mach,
aber ich will ja die drei wie sie jetzt sind, aber
ohne Fehler...

[Ulrich]

So macht das erstmal den Eindruck als wäre das so gewollt. Zumindest bei IE 6.0 und Win 98 (siehe oben)
Bei meinem IE 6 machts einen Fehler hin,
bei dem dritten Textfenster, da ist bei dem "weiter" link
noch drunter ein "er", irgendwie fehlerhaft halt.
Bei dir nicht?

Doch auch, aber das erschien mir im Hinblick auf Dein Problem weniger relevant. Das "er" ist m. E. das geringste Deiner Probleme.

Im Firefox zeigt es die Seite immernoch nicht richtig an,
erst wenn ich auf zwei Textfenster pro Zeile mach,
aber ich will ja die drei wie sie jetzt sind, aber
ohne Fehler...

Verständlich. Wenn Du den Postingfluß verfolgst, wirst Du sehen daß es Unterschiede in der Interpretation des boxmodels gibt. (Ich gebe zu genau andersrum als ich es anfangs dargestellt hatte aber trotzdem)
Das heißt für Dich, wenn Du im Gecko und im IE eine entsprechende Darstellung erreichen willst, dann wirst Du für beide Browsertypen eine gesonderte Lösung finden müssen.
Vielleicht gibt es auch eine weiter Lösung, die (doctype) strict Variante?
Stichworte für Deine Nachforschung könnten  ansonsten sein: Browserweiche, conditional comments, star hack und ähnliches.

  
<!--[if lt IE 7]>  
    <link rel="stylesheet" media="screen" type="text/css" href="IE.css">  
<![endif]-->  

wäre z.B. _eine_ Möglichkeit ein IE-only style einzubinden.

Dagegen erkennt IE Anweisungen nicht, die so angesprochen werden:

  
#element > #eingeschlossenes_element {border:none;}  

Vielleicht drücke ich mich etwas kompliziert aus, dann entschuldige, aber ich denke mit diesem Ansatz kannst Du weiter kommen.

Vielleicht wäre es auch keine schlechte Idee das ganze erstmal im Gecko (standardkonform) zum Laufen zu bringen und _danach_ Anpassungen für den IE zu implementieren.

Viel Erfolg
Ulrich

[wahsaga]

hi,

Bei meinem IE 6 machts einen Fehler hin,
bei dem dritten Textfenster, da ist bei dem "weiter" link
noch drunter ein "er", irgendwie fehlerhaft halt.

Explorer 6 Duplicate Characters Bug

gruß,
wahsaga

[Justin]

Bei IE hast Du recht. Standardkonforme Browser rechnen den padding aber nach innen, da bleibt 250 stabil.
Suche mal nach boxmodel, da wirst Du einiges an Erklärungen finden.

Das Boxmodel hab ich schon gesehen, aber in Firefox
vergrösern sich bei mir auch die divs mit padding.
Was bringt mir das, wenn ich das Boxmodel sehe,
das ändert ja nichts an der Tatsache, dass die divs
vergrösert werden. Ich brauche eine Lösung zu meinem
Problem um zu wissen wie es funktioniert.

01.gif 02.gif sind in einer Reihe
03.gif dann eine Runde tiefer, direkt unter 01.gif

Ja, also die 01 02 03 gifs sollten in einer Reihe sein,
in Firefox zeigts das bei mir aber richtig an.
Ich weis ja nicht was an dem Code falsch ist,
das muss ich ja nur wissen.

[...]mit float nebeneinander setzen. Es gibt hier eine Menge Beispiele unter layoutvorlagen bei selfhtml.

Bei den 10 layouts von selfhtml gibts ja keines mit 3 spalten,
wie bei mir, aber mit float hab ich doch gearbeitet,
siehe quellcode.

[Detlef G.]

Hallo Justin

Ich möchte von <table> zu <div> elementen umsteigen,
da das weniger Quellcode geben soll.

Das ist Unsinn!
Wenn du unbedingt ein Tabellenlayout haben willst, dann bleibe bei deinen
Tabellen, statt zu versuchen, diese eins zu eins mit Divs nachzubauen!

Weniger Quellcode erhältst du dadurch, dass du statt der Attribute in den
HTML-Elementen CSS verwendest, aber nicht als Inlinestyles, sondern in einer
separaten CSS-Datei.

Der Sinn eines CSS-Layouts besteht nicht darin Tabellen durch Divs zu
ersetzen, sondern darin die HTML-Elemente entsprechend ihrer logischen
strukturellen Bedeutung zu verwenden, ohne das Design im HTML zu verankern.
In deinem Beispiel finde ich keine Überschriften, keine Absätze, keine Listen,
nur Bilder, Links, Divs und Spans.

Lies dazu mal meine Herangehensweise und nochmal meine Herangehensweise.

Viele Hinweise findest du auch in SELFHTML CSS-basierte Layouts.

Allerdings habe ich folgende Probleme:
...

Schau dir mal die Seite an, die ich mir gemacht habe, um float zu verstehen:
http://d-graff.de/selfhtml/dreidivs.html

2. Die 3 divs haben Text in sich, aber ich möchte ein padding dafür machen,
   weil die drei Texte sonst nicht optisch getrennt sind. wenn ich da
   jetzt aber ein padding einstelle vergrößert sich das div
   von 250 auf 250+padding, das will ich aber nicht.

Warum gibst du nicht einfach den in den Divs enthaltenen Elementen padding.

3. Wie man auf der Seite sieht sind beim "Partner"-text
   so links wie  Startseite | Leistungen | Kunden | Produkte[...]
   die sollten aber unter den 3 divs sein, quer rüber. Wie?

Wenn dort wo diese stehen ausreichend Platz ist, warum sollten sie dann
darunter stehen, wenn das vorhergehende float nicht aufgehoben ist.

Auf Wiederlesen
Detlef