nicht angemeldet
2 Spalten mit Div's
Hallo,
das Tabellenlayout habe ich mittlerweile über Bord geschmissen und mache jetzt alles per CSS. Bis jetzt hat alles geklappt, da es einfache Layouts waren (farbige einspaltige Textboxen, was mit CSS wunderbar geht)
Auf einer Startseite brauche ich nun 2 Spalten - die linke enthält einige Bilder untereinander, die rechte etwas Text und eine farbige Box mit Links. Bis jetzt ist es noch eine blinde Tabelle; aber ich wollte auch das mit Div's machen.
Die linke Spalte mit den Bildern habe ich einfach als Div mit fester Breite gemacht, welches dann mit float:left rechts umflossen werden soll. Das reicht ja schon.
Alles ist auch korrekt, bis auf die eine Div-Box rechts. Diese beginnt nicht wie der Text, neben dem linken Div, sondern schon ganz links - beide Div Boxen überlappen sich. Nur der Text in dieser Div Box beginnt erst brav rechts neben der linken Box. Betrachtet hab ich das mit Netscape 7, im IE 5.5 überlappt es sich komischerweise nicht.
Welche Möglichkeiten gibt es, dieses Überlappen vermeiden?
Die rechte Div-Box sollte erst neben der linken beginnen, und diese nicht überlappen.
Hier der etwas vereinfachte Quelltext dazu:
div.haupt { width:95%; background-color:#ccccd0; padding:6px; margin-left:auto; margin-right:auto; text-align:left;}
<div class="haupt">
<div style="width:180px; float:left">
<img src="bild1.jpg"><br>
<img src="bild2.jpg"><br>
<img src="bild2.jpg"><br>
</div>
<p>Text...</p>
<div style="background-color:#aabbdd; text-align:left; padding:6px">
<a href="link1.htm">Link 1</a>
<a href="link2.htm">Link 2</a>
</div>
<p>Text...</p>
<br style="clear:both">
</div>
Schöne Grüsse
-
Hallo!
An deiner Stelle würde ich das 2. div-Element absolute positionieren.
z.B.:
<div style="background-color:#aabbdd; text-align:left; padding:6px; position:absolute; left:180px; top:0px;">
<a href="link1.htm">Link 1</a>
<a href="link2.htm">Link 2</a>
</div>Markus
-
Hallo,
<div style="background-color:#aabbdd; text-align:left; padding:6px; position:absolute; left:180px; top:0px;">
<a href="link1.htm">Link 1</a>
<a href="link2.htm">Link 2</a>
</div>Daran hab ich auch schon gedacht!
Die Position left:180px ist ja problemlos, aber das top:0px macht mir dabei Probleme.
Die Box erscheint somit immer ganz oben und verdeckt dann mein Logo! Über der Haupt-Box ist noch eine Überschrift und darüber das Logo; hab ich nur weggelassen weils sonst zu viel Quelltext wird und mit dem Problem ja nicht unbedingt mehr etwas zu tun hat....
Die Sache ist die, das sich diese Box eben im Textfluss liegen muß; da die Schrift ja immer unterschiedlich groß sein kann, kann ich leider keine absolute Position in der Höhe angeben.
Gibt es noch eine andere Möglichkeit?
Ansonsten muß ich die Box notfalls weglassen und die Links dann ohne Hintergrund machen.
Schöne Grüsse
-
Man muss ja nicht unbedingt top:0px machen, man könnte ja auch einen anderen Wert nehmen. Aber solange das 2. div-Element im Hauptelement drin ist, dürfte es eigentlich nicht darüber hinaus gehen und somit das Logo nicht überdecken oder ist das Logo im Haupt-div . Ich würde das 2. div sowieso nicht in das Haupt-div reintun, aber das macht ja eigentlich kaum einen Unterschied.
Die Sache ist die, das sich diese Box eben im Textfluss liegen muß; da die Schrift ja immer unterschiedlich groß sein kann, kann ich leider keine absolute Position in der Höhe angeben.
Das habe ich nicht verstanden.
-
Hallo,
Ich habe es ausprobiert - Netscape schiebt bei top:0px die Div Box ganz nach oben, also oberhalb der Haupt-Box! Warum weiß ich nicht.....
Mit den absoluten positionieren meinte ich, das sich diese Div Box dem Textfluss anpassen soll, etwa so:
Text.....
Text...------------------
* Div-Box *
------------------Weiterer Text.....
Da die Schriftgrößen in jedem Browser ja immer unterschiedlich eingestellt sind, kann man schlecht einen absoluten Wert für diese Box angeben; sie sollte im Textfluss liegen.
Schöne Grüsse
-
-
-
-
Hi Mario,
Betrachtet hab ich das mit Netscape 7, im IE 5.5 überlappt es sich komischerweise nicht.
denk dran, dass der IE5.x ein anderes Boxmodel verwendet (width => margin + border + padding + width)
http://www.w3.org/TR/1998/PR-CSS2-19980324/box.htmlGruß von Tom
-
Hallo Tom,
ja weiß ich!
Richtig ärgerlich wird das fehlerhafte Boxmodell des IE erst bei festen Breiten; dann sind die Boxen nämlich beim IE zu klein, oder wenn man sie für den IE richtig macht, beim Netscape zu breit!
Daher habe ich auch eine prozentuale Breite genommen, und den padding bei allen Textboxen gleich groß.
Allerdings beim Beispiel 2 des folgenden Links überlappt es sich auch:
http://css.fractatulum.net/sample/layout1format.htm
Das ist aber auch gewollt, so wie es da steht.
Schöne Grüsse
-
-
hi,
Die linke Spalte mit den Bildern habe ich einfach als Div mit fester Breite gemacht, welches dann mit float:left rechts umflossen werden soll. Das reicht ja schon.
Alles ist auch korrekt, bis auf die eine Div-Box rechts. Diese beginnt nicht wie der Text, neben dem linken Div, sondern schon ganz links - beide Div Boxen überlappen sich.
dann versuche diesem div mal mit margin-left einen abstand zu geben, der in etwa der breite der linken box entspricht.
gruss,
wahsaga-
Hallo,
dann versuche diesem div mal mit margin-left einen
abstand zu geben, der in etwa der breite der linken
box entspricht.Ich habe mir mal einige andere 2 und 3spaltige Div-Layouts im Netz angesehen - es gibt ja einige Webseiten darüber.
Entweder haben sich die Boxen dort auch überlappt (war gewollt), oder es war wie Du sagtest ein margin-left in der Breite der linken Box definiert.
Ich hab das jetzt auch mal gemacht und nun ist die Überlappung verschwunden! Ich glaube das ist dann der richtige Weg; aber was passiert eigentlich bei margin-left beim Netscape 4? Kommt der damit überhaupt klar?
Ich hab ihn leider vor einiger Zeit deinstalliert aus Platzgründen. Andersherum optimiere ich auch nichts mehr für diesen alten Schrottbrowser. Wenn er halt Müll anzeigt dann ist das eben so; es steht ja jedem frei sich eine neue Version zu instllieren die es überall kostenlos gibt! Nur die Rahmenbefehle per CSS habe ich in Media all gesteckt, die ignoriert der NS 4, weil er bei Rahmen per CSS auch nur Müll angezeigt hat.
Schöne Grüsse
-
Hallo,
[...] aber was passiert eigentlich bei margin-left beim Netscape 4? Kommt der damit überhaupt klar?
Margin ist IMHO sehr gefaehrlich fuer Netscape 4.
Ich wuerde das ganze CSS vor ihm verstecken.
Ein paar Methoden dafuer stehen auf meiner Seite:
http://www.tiptom.ch/homepage/faq.html?q=nn4keincssGruesse,
Thomas
-
Hallo,
[...] aber was passiert eigentlich bei margin-left beim Netscape 4? Kommt der damit überhaupt klar?
Margin ist IMHO sehr gefaehrlich fuer Netscape 4.
Ich wuerde das ganze CSS vor ihm verstecken.es geht auch anders, ein paar Methoden dafuer: http://www.lipfert-malik.de/webdesign/tutorial/css.html
Es sind womöglich noch rund 6% Netscape 4 Benutzer unterwegs, und es ist häufig unverhätnismäßig 6% der Besucher schlecht oder lückenhaft zu bedienen.
Dazu ist es oft recht einfach denn Netscape 4 kann auch bei CSS einiges, allerdings muss natürlich auch dieser Browser getestet werden, und ein Restrisiko ob eine verbugtere Version (wie m.E. die 4.70) online mal Probleme macht bleibt natürlich.
Grüsse
Cyx23
-
-
Hallo Mario,
dann versuche diesem div mal mit margin-left einen
abstand zu geben, der in etwa der breite der linken
box entspricht.Ich habe mir mal einige andere 2 und 3spaltige Div-Layouts im Netz angesehen - es gibt ja einige Webseiten darüber.
Entweder haben sich die Boxen dort auch überlappt (war gewollt), oder es war wie Du sagtest ein margin-left in der Breite der linken Box definiert.
Ich hab das jetzt auch mal gemacht und nun ist die Überlappung verschwunden! Ich glaube das ist dann der richtige Weg; aber was passiert eigentlich bei margin-left beim Netscape 4? Kommt der damit überhaupt klar?
Ich hab ihn leider vor einiger Zeit deinstalliert aus Platzgründen. Andersherum optimiere ich auch nichts mehr für diesen alten Schrottbrowser. Wenn er halt Müll anzeigt dann ist das eben so; es steht ja jedem frei sich eine neue Version zu instllieren die es überall kostenlos gibt! Nur die Rahmenbefehle per CSS habe ich in Media all gesteckt, die ignoriert der NS 4, weil er bei Rahmen per CSS auch nur Müll angezeigt hat.
wenn du mal eine URI oder ein brauchbares Beispiel postest sind auch konkrete Lösungen möglich.
Abhängig vom doctype musst du vielleicht sowieso mit CSS-Weichen ran, und ggf. benötigt NC4 das margin nicht.
Z.B.per *, also * #inhalt{margin-left:200px} ist margin-left vor netcape 4 versteckt.Geeignete mehrspaltige layouts sind z.B. hier zu finden: http://www.lipfert-malik.de/webdesign/tutorial/css.html
Grüsse
Cyx23
-
-