Probleme beim Abstand zwischen Navi und Content

[Friedhelm]

Moin…

schon wieder ein „kleines Problem…“

Ich teste meine „Weebly-Homepage“ auf mit Firefox und Internet-Explorer auf verschiedenen PC.

Dass IE nicht immer mit dem übereinstimmt, was Firefox u.a. zeigen, ist klar aber:

Auf meinem Laptop und meinem PC wird der Abstand zwischen Navi und dem Content im grossen und ganzen gleich angezeigt. IE und Firefox sind da in etwa gleich.

Nun habe ich die Page auf dem PC in der Kreisvolkshochschule getestet und stellte fest, dass dort sowohl bei IE als auch bei Firefox der Abstand zwischen Navi und Content viel,viel grösser als auf meinem Laptop und meinem PC.
Okay, mein Laptop hat einen kleineren Bildschirm, aber mein Bildschirm für den PC ist sogar etwas grösser als der in der KHS.

Trotzdem wird der Abstand dort viel geringer angezeigt als auf KVHS-Bildschirm…

Liegt das vielleicht an den IE- und Firefox-Versionen

[Grihn]

Das Thema gehört eigentlich eher in den Programmierungsbereich.

Allerdings bewerten Browser die Innenabstände (padding) und die Außenabstände (margin) anders. Dadurch kann es, gerade bei unsauberer Benutzung, zu unterschiedlichen Darstellungen in unterschiedlichen Browsern kommen.

[Efchen]

Moin,

Das Thema gehört eigentlich eher in den
Programmierungsbereich.

Auch wenn es mit Programmierung nichts zu tun hat…aber das interessiert die *EXPERTEN*, die dieses Forum verwalten ja nicht…

Allerdings bewerten Browser die Innenabstände (padding) und
die Außenabstände (margin) anders.

Inwiefern? Links?

Grüße,
-Efchen

[Efchen]

Moin,

Dass IE nicht immer mit dem übereinstimmt, was Firefox u.a.
zeigen, ist klar aber:

Aber nur in den wenigsten Fällen ist das wirklich kritisch.
Wenn man eine Seite nicht im Quirks Mode darstellen lässt und somit beim IE das falsche Box Model zum Tragen kommt, sind die Unterschiede doch meist eher klein und einige spezielle Fehler lassen sich oft durch diverse Hacks korrigieren.

Nun habe ich die Page auf dem PC in der Kreisvolkshochschule
getestet und stellte fest, dass dort sowohl bei IE als auch
bei Firefox der Abstand zwischen Navi und Content viel,viel
grösser als auf meinem Laptop und meinem PC.

Na sowas.

Liegt das vielleicht an den IE- und Firefox-Versionen

Das kann auch an Sonnenflecken oder magnetischer Elektronenstrahlung liegen.

Sorry

Soll heißen, zeigt erst mal nen Link zur Seite, vielleicht hast Du ja entscheidende Fehler gemacht (wie z.B. unterschiedliche Box Models in den beiden Browsern zu verwenden).

Wenn Du schreibst „viel, viel größer“ - wieviel größer? Kann man das in Zahlen bekommen? Ist das etwas, das sich bei verschieden großen Bildschirmen äußert? Sind die Abstände in „em“ angegeben und ist bei den verschiedenen Browsern eine unterschiedliche Default-Schriftgröße eingestellt oder wurde die Schriftgröße für diese eine Seite verändert?
Wenn man das nicht beschreiben oder nachvollziehen kann, hast Du wenigstens Screenshots?

Meeeehr Input!

Grüße,
-Efchen

[Friedhelm]

Moin, Moin…

hiereinmal ein Link zur Weebly-Homepage. Habe die Seite für mich „angepasst“. Vielleicht ist mir da ja ein Fehler unterlaufen:

http://alucarda.weebly.com/

[Efchen]

Moin,

hiereinmal ein Link zur Weebly-Homepage. Habe die Seite für
mich „angepasst“. Vielleicht ist mir da ja ein Fehler
unterlaufen:

Fehler sind da welche drin, ja. Und Du deklarierst Deinen Code als HTML5, benutzt aber eigentlich keine der Features von HTML5, Dein Code sieht eher nach HTML 4.01 aus, als würdest Du den Doctype nur aus Faulheit verwenden. Ist syntaktisch nicht falsch, semantisch vermutlich so in der Form kein Beinbruch, das kann sich aber bei mehr Inhalten ändern, weil die Semantik in HTML5 ein bisschen anders funktioniert als in HTML 4. Deine Inhalte könnten eine andere Bedeutung bekommen.

Ich empfehle, den HTML5-Doctype nur zu verwenden, wenn man auch wirklich in HTML5 auszeichnet.

Aber zu Deinem eigentlichen Problem: Du hast Deinem Content ein „float:right“ gegeben. Dadurch klebt der Content immer am rechten Raqnd des Viewports. Dadurch, dass der Content auch eine feste Breite hat, vergrößert sich mit zunehmender Browserfenstergröße natürlich auch der Abstand zwischen Navigation und Content.

Für diese Art von Layout brauchst Du bei Deinem Content kein float, sondern höchstens ein margin-left in der Breite der Navigation.

Liebe Grüße,
-Efchen

P.S.: Checke Deinen Code mit dem http://validator.w3.org/ und gucke auch mal auf Deine Semantik: Du packst ein einzelnes Element (z.B. die Navigationsliste) nochmal in ein div. Das macht keinen Sinn. div dient zum Auszeichnen einer Gruppe - ein einzelnes Element ist aber noch keine Gruppe. Die CSS-Eigenschaften, die Du dem div zuweist, kannst du genauso der ul zuweisen.

[Friedhelm]

Danke Für Deine Antwort. Werde mich da mal ranmachen. Eigentlich habe am Weebly-Code - meiner Meinung nach - gar nichts „Gerüst“ verändert. Ich habe nur jeweils meine eigenen Angaben für Farbe und das Aussehen des Contents und des Navis eingeben. Evtl lag da der Fehler bei der Programmierung wohl auch schon bei Weebly.
Den Doc-Type habe ich allerdings auch so übernommen

Mal sehen…auf alle Fälle Danke für die kompetente Hilfe…schönes Wochenende…

… mehr auf http://w-w-w.ms/a485vl

[Efchen]

Moin,

Eigentlich habe am Weebly-Code - meiner Meinung nach - gar
nichts „Gerüst“ verändert.
Evtl lag da der Fehler bei der Programmierung wohl
auch schon bei Weebly.
Den Doc-Type habe ich allerdings auch so übernommen

Naja, man kann sich darüber streiten, wie dramatisch das nun ist. Wenn ich eine anständige Website haben will, dann wäre mir das in jedem Fall nicht gut genug und egal ob Weebly diesen Code verzapft hat oder ich, zurückfallen, wenn etwas nicht geht, wird es auf mich, nicht auf Weebly.
Aber mit Programmierung hat das nichts zu tun

Mal sehen…auf alle Fälle Danke für die kompetente
Hilfe…schönes Wochenende…

Gerne, danke Dir auch!
-Efchen