[erna]

Hallo ihr,

Ich arbeite mit Linux, ubuntu 12.04 (precise pangolin) und dem firefox for ubuntu 12.0

Ich kann Folgendes einfach nicht verstehen:

Zwei Seiten von einer Website, die auf meinem Rechner gut aussehen und beim Check mit dem validator.w3.org als korrekt bewertet werden, sind im Internet "zerfetzt", wenn ich sie mit dem gleichen Browser anschaue.

Die Site hat den URL: MATHILDE - Das nicht komerzielle Frauenmagazin aus Darmstadt
Die Seiten heißen: "Über MATHILDE" und "Hefte-Archiv"
Alle anderen Seiten werden korrekt dargestellt.
Wenn ich unterschiedliche Browser benutzen würde, könnte ich das verstehen, so aber nicht.

Ich habe 2 screenshots hergestellt, weiß aber nicht, wie ich diese hier einfügen kann. Ich würde euch das Dilemma gerne zeigen, denn bei den meisten anderen (wahrscheinlich auch bei euch) sehen die Seiten korrekt aus.

Wer hat 'ne Idee, woran das liegen könnte?

fragt erna

[threadi]

Meinst Du mit "zerfetzt", dass das Menü nach rechts raus sagt? Dafür hätte ich folgenden Optimierungsvorschlag: aus #head ul das padding entfernen und die Breite auf 1000px setzen. Danach mit ##head ul li:first-child den Abstand des ersten li nach links erhöhen bis es passt.

Wenn Du was anderes meinst, dann zeig mal einen Screenshot wie es aussehen sollte.

[erna]

Hallo threadi,

das mit dem Menü, das manchmal rechts rausragt und manchmal zu kurz ist, je nachdem wie groß ich das Browserfenster mache, ist auch ein Problem. Ich werde es mit deinem Rezept versuchen. Doch das ist nachrangig.

Ich würde den Screenshot gerne schicken, doch ich weiß nicht wie ich das machen kann. Wenn ich auf "Grafik einfügen" klicke, soll ich den Url zu meiner Grafik anzeigen, ich kann aber nur ein Verzeichnis anzeigen, die Grafik ist ja auf meinem PC.
Vielleicht kannst du mir das erklären.

Ich habe mit "float: left" 3 Spalten erzeugt (die boxen, Über Mathilde und die Redaktionsfrauen) und zum Schluss clear: left und vorsichtshalber clear: both geschrieben. Trotzdem rutscht bei diesen beiden genannten Seiten die Grundlinie nach oben noch über die Boxen, so dass alles auf dem grauen body-Hintergrund liegt. - Wie gesagt, ich würde es gerne anschaulich machen mit meinen screeshot, doch siehe oben, ich weiß nicht wie ich den einfügen oder anhängen kann.
Das Komischste ist ja, dass es auf meinem PC in Ordnung ist, wenn ich es aber hochgeladen habe, sieht es mit dem gleichen Browser vom gleichen PC aus, wie beschrieben.

Grüße von erna

[K.Roland]

Du hast falsch gecleart.

Anhang 4617

Hier so clearen:
}
div#grundstreifen { clear: both; }

__________
Gruß,
Roland

[erna]

Hallo K. Roland,

so habe ich es doch gemacht!

clear: left
und
clear: right
habe ich erst hinterher noch zugefügt, weil der IE "clear: both" offensichtlich nicht versteht. Im IE ist es jetzt ja richtig.

Stehe ich auf der Leitung?
fragt
erna

[threadi]

Da Du innerhalb von div#zweispalten floatest, würde ich folgendes ergänzen:

div#zweispalten:after {
 clear: both;
 content: ".";
 display: block;
 height: 1px;
 font-size: 1px;
 visibility: hidden;
}

Geht so auch im IE>=8. Für ältere Modelle müsstest Du im "einfachsten" Fall ein zusätzliches Element einfügen, welches clear enthält.

[K.Roland]

Zitat von erna

Hallo K. Roland,

so habe ich es doch gemacht!

clear: left
und
clear: right
habe ich erst hinterher noch zugefügt, weil der IE "clear: both" offensichtlich nicht versteht. Im IE ist es jetzt ja richtig.

Hallo erna,

Du mußt schon richtig clearen!

Wie schon gesagt cleare mit "clear both" an richtiger stelle.

Bitte noch mal genauer anschauen.:

}
#spalte1 {
    float: left;
    padding-right: 5px;
    width: 200px;
    background: #ccc;
}
#spalte2 {
    float: left;
    padding-right: 5px;
    width: 200px;
    background: #ccc;
}
#zweispalten #spalte1 {
    float: left;
    padding-right: 1px;
    width: 370px;
}
#zweispalten #spalte2 {
    margin-bottom: 0;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0;
    padding-right: 1px;
    width: 370px;
}
div#grundstreifen {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: transparent;
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: -moz-use-text-color;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: none;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 0;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: -moz-use-text-color;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: none;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 0;
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: 0;
    bottom: 0;
    clear: right;
    height: 40px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

__________
Gruß,
Roland

[siluan.tahir]

Eine weitere Methode anstatt clear:both, wäre overflow: hidden.
Allerdings muss gesagt werden, das clear: both die "saubere" Lösung ist.

Dazu kannst du einfach folgendes machen:

div#zweispalten {
overflow: hidden;
margin-left: 200px;
padding-right: 5px;
}

Guck dir das hier in Ruhe an:
http://www.webtoolkit.info/css-clearfix.html

[erna]

Hallo ihr inzwischen drei,

danke für eure Bemühungen!

Ich habe den Vorschlag von threadi einfach übernommen und - siehe da - es geht.
Mich stört es allerdings sehr, etwas abzuschreiben, was ich nicht verstehe, doch da muss ich dann eben noch ein bisschen nachsitzen bei mir.

Den Vorschlag von siluan.tahir habe ich erst jetzt gesehen. Darüber werde ich auch noch etwas nachdenken, und vielleicht irgenwann gebrauchen können.

Mit dem Vorschlag von Roland kann ich nichts anfangen (ist ja auch nicht mehr nötig), trotzdem danke ich für deine Mühe.

So'n Forum ist wirklich Golde wert !!!!!!!!!!!!!
meint erna und schickt euch Grüße

[K.Roland]

Hallo erna

Sorry. Für diese falsche Antwort von mir.

Zitat von K.Roland

Hier so clearen:

div#grundstreifen { clear: both; }

Da hatte ich auf die schnelle div#zweispalten noch übersehen, und wie dein ganzer Aufbau aufgebaut ist.

___________
Gruß,
Roland