CSS Selbstgeschriebenes HTML-Dokument verschiebt Div.Box nach aktualisieren im Browser

thisismario1893 · 10. Dezember 2014

Ich bin gerade dabei ein Layout für eine Webseite, also mit HTML zu schreiben.
Bin mit dem Ergebnis soweit auch sehr zufrieden - Solange ich sie in Firefox öffne. Aber selbst da werden nach ein paar mal aktualisieren die Angaben in CSS für die Breiten des "box"- Div-Elementes quasi missachtet und "einfach so" dargestellt. Nach ein paar mal aktualisieren wird die Seite dann wieder "normal" dargestellt.
Im IE und Chrome wird die Seite gar nicht "normal" angezeigt.

Kann es vielleicht daran liegen, dass ich Prozent-Werte eingegeben habe, oder an was kann es liegen?

Um die Dateien zu öffnen müsst ihr das Format in ".html" bzw. in ".css" ändern
Anhang anzeigen home.txt
Anhang anzeigen style.txt

Vielen Dank im Voraus

Kausalat · 10. Dezember 2014

Bei diversen Attributen hast du die notwendigen Einheiten weggelassen. Nur bei Nullwerten darf die Einheit weggelassen werden.

Beispiel:

Code:

#box{
margin: 10 400;
[...]
}

Derartige Fehler hätte dir ein Validator sofort angestrichen.

An der Layoutskalierung solltest du übrigens noch arbeiten: Schon bei kleineren Größenänderungen des Browserfensters wird das Layout zerschossen und die Texte schwer leserlich.

P. S.: Du tust allen Helfern einen Gefallen, indem du dein Werk auf Seiten wie JSFiddle veröffentlichst.
Ich hab dies unter Ergänzung der Einheiten für dich gemacht: *Klique*.

Znrl · 10. Dezember 2014

Genau mach dir Lesezeichen für die Validatoren.

Bspw. -> "Myriad Pro" sollte man in Anführungszeichen setzen, wenn es ein Leerzeichen hat.
die 400px (?) sind außerdem sehr viel, mach weniger oder mach das ohne fixe Werte sondern bspw. mit %.
Änder mal die Fenstergröße und schaus dir an.

Hilfreich ist auch für kleinere Ungenauigkeiten zwischen Browsern eine
"line-height" zu setzen. Auch wenn man manchmal Einheiten etc. weglassen kann, wenn es default Werte gibt oder Browser Ungenauigkeiten verzeihen. Schreib am Anfang alles ausführlich, dann kannst du es besser nachvollziehen.

Bei Fragen hilft auch manchmal ein Screenshot, mit Markierungen. Dann sieht jeder direkt ob es bei ihm auch so aussieht und was genau du meinst.

Daaron · 10. Dezember 2014

Man arbeitet GAR NICHT mit festen Werten für die Außenabstände links/rechts. Man arbeitet mit einer Mindestbreite für den Contentbereich und, um zu zentrieren, gibt man selbigen margin-left:auto;margin-right:auto; (bzw, in diesem Fall: margin: 10px auto

Bei dem hier präsentierten Werk ist aber noch so manches schon beim HTML im Argen, da braucht man noch gar nicht ins CSS gucken.
- dem <html>-Tag fehlt der sehr nützliche Hinweise auf die Sprache des Inhalts
- im <body> herrscht einfach eine Div-Suppe sonder gleichen. Wozu überhaupt einen HTML5-DOCTYPE vergeben, wenn man dann doch Steinzeit-Methoden anwenden? HTML5 bietet so viele wunderbare semantische Elemente an, koch also keine Div-Suppe
- Die Navigation als eine unzusammenhängende Girlande aus Links ist semantischer Unsinn.

Danach kommen dann die schlichtweg mangelnder Ausbildung & Erfahrung geschuldeten elementaren Fehler bei der Gestaltung.

Suche

CSS Selbstgeschriebenes HTML-Dokument verschiebt Div.Box nach aktualisieren im Browser

thisismario1893

Cadet 1st Year

Kausalat

Gast

Znrl

Lieutenant

Daaron

Fleet Admiral