Positionsfehler bei verschiedenen Auflösungen

[medienbauer]

Hallo liebe Forum Gemeinde.

Ich bin CSS Anfänger und versuche derzeit einen Shop umzudesignen.

www.rollo360.de

Hier hab ich im Header oben 3 Infotexte sowie einen Infolinetext.

Wenn ich die Seite mit verschiedenen Auflösungen aufrufe, verschieben sich die Boxen immer :(

Ich hab mittlerweile schon alles versucht, bekomme es aber nicht hin.

Anscheinend ist die Position relative besser?

Hat hier jemand einen Hilfeansatz?

 

[Tronjer]

Wenn du die Seite für unterschiedlichen Auflösungen anpassen willst, musst du ein responsives Layout erstellen, vorzugsweise mit entsprechenden Frameworks wie Bootstrap oder Foundation. So etwas wie position: absolute geht da gar nicht, und die HTML-Struktur sollte auch in der Reihenfolge sein, wie die Elemente angezeigt werden.

Als Anfänger wirst du das aber wahrscheinlich nicht hinbekommen. Gib den Auftrag lieber zurück.

 

[dazzle89]

Du hast die gleiche Frage bereits in einem anderen Forum gestellt. Waren die Antworten nicht hilfreich?

Ich hatte dir empfohlen #content_wrapper auf position:relative zu setzen und die left- und top-Werte der einzelnen Boxen anzupassen. Dann verschieben sich die Boxen nicht mehr wenn du die Browserfenstergröße veränderst, sondern wandern immer proportional zum Wrapper mit. Vieles ist nicht sonderlich schön gelöst wurden, auf bei deiner Seite wird das wohl die einfachste Lösung sein.

Die Antwort von Tronjer solltest du ignorieren (nicht böse gemeint), denn in deinem Fall geht es nicht um Responsive Design. Probiere es mal mit meinem Lösungsvorschlag.

Edit: Wenn ich mich richtig erinnere wurde im anderen Forum bemängelt, dass nicht jeder die Seite sehen kann (Stichwort Cookies). Auch beim Neuladen nicht.

 

[medienbauer]

Hallo Dazzle,

nein die Antworten waren leider nicht so hilfreich - hab damit schon mehrere Stunden verbracht - und wenn dann teilweise jeder was anderes schreibt ist das nicht wirklich hilfreich sondern verwirrt mich nur ;(

Ich hatte Deinen Vorschlag mit dem #content_wrapper auch gemacht, aber das hat nicht so funktioniert und andere Elemente des Shops waren dann verschoben. Soll wirklich nur die einfachste Lösung sein.
Wichtig ist halt, dass das mitwandert. Schick mir doch eine PN - würde dafür auch was springen lassen;)

Ja die Info von Tronjer hatte ich schon gelesen, das hatte ich mir schon gedacht, da es mir ja nur um diese Positionierung geht. Ich habe das Template nicht geschrieben, ist von dem Shopanbieter gekauft.

Das mit dem Reload habe ich an den Support schon weitergegeben... mal sehen was der sagt...

Gruß Marcel

 

[Tronjer]

Ich hatte etwas von 'umdesignen' gelesen. Aber schön, wenn es nur um #header geht ...

Erstmal gehört #settings nach, oben, weil es ja auch als erstes angezeigt wird. Darunter stehen vier Spalten nebeneinander: 1.) Logo, 2.) Versand, Rückgaberecht .., 3.) Telefonnummern, 4.) Suchfeld und Warenkorb. Diese vier Spalten werden gefloatet und per margin so verschoben, dass sie die Gesamtbreite von 1070px einnehmen. Ein position: relative/absolute ist dafür ebenso unnötig wie der z-index, und so etwas wie left und top sollte ohne einleitendes margin überhaupt nicht vorkommen. Das hebt die Elemente nämlich aus dem Textfluss