Relative Positionierung

[jlow_69]

Hallo zusammen,


Ich habe mich wiedereinmal daran gemacht eine Webseite aufzusetzen.
Ich habe bis jetzt mit einem div-layout gearbeitet. Hat eigentlich so weit so gut funktioniert, bis ich einmal das Browserfenster verkleinert hab.

All die einzelnen div-boxen sind absolut positioniert.
Das heisst also: Sobald ich die Grösse des Browserfensters verändere, verändert sich die gesamte Seite.

Die Lösung ist, dass ich alles relativ positioniere.
Jedoch habe ich ziemlich schwere Probleme damit ^^


Mein momentaner CSS Code für den Body sieht so aus:

/* BACKGROUND*/
body {
background-color: #000000;
}


#header_background {
position: absolute;
background-color: #000000;
top: 2%;
left: 13%;
z-index: 1;
}


#body_background {
position: absolute;
background-color: #000000;
top: 27%;
left: 13%;
z-index: 1;
}


#Logo {
position: absolute;
background-color: #000000;
top: 6%;
left: 7%;
z-index: 1;
}


#menubar {
position: absolute;
background-color: #000000;
top: 28%;
left: 6%;
z-index: 1;
}
/* BACKGROUND:END */

In den verschiedenen divs befinden sich Bilder.
#header_background und #body_background: Hintergrund für den oberen Teil der Seite, und für den Rest der Seite.
#Logo: Kleines Logo oben links
#menubar: Ja... Menubar. Oder Navigationsleiste.

Hier ein Bild der Seite, da ich noch keinen Webspace habe/brauche da ich sie erst noch am aufsetzen bin.


Meine Fragen sind:

Wie bekomme ich es hin, dass die verschiedenen Elemente relativ positioniert sind, und trotzdem noch an der richtigen Stelle angezeigt werden? Die Position wird ja vom Quelltext aus berechnet, und den kann ich beim liebsten willen nicht nebeneinander schreiben.

Wenn man bedenkt, dass sich alles verschiebt wenn man die Fenstergrösse des Browsers ändert, sollte man jedes einzelne Element relativ positionieren, oder?

Dankeschön :)

 

[agund]

Nein, würde ich hier nicht machen.
Falls du nicht möchtest, dass dich alles verschiebt, wenn du deine Webseite etwas zusammenziehst, dann darfst du keine Prozente nehmen, sondern die Größen und Breiten musst du dann in Pixel angeben.

 

[jlow_69]

Nein, würde ich hier nicht machen.
Falls du nicht möchtest, dass dich alles verschiebt, wenn du deine Webseite etwas zusammenziehst, dann darfst du keine Prozente nehmen, sondern die Größen und Breiten musst du dann in Pixel angeben.

Achso, das liegt also an den Prozentangaben?
Ich hab gedacht das liegt an der relativen positionierung.
Aber es hat ja nicht jeder einen gleich grossen Monitor. Das heisst es könnte sein dass es bei jemandem anders zu eng dargestellt wird? :)

 

[agund]

Ja darum machen die meisten 1024px breit und mittig.
1024px hat heute jeder Monitor und mittig macht man das alles mit margin:0px auto;

 

[devilseye]

Und was ist wenn du mit nem ipad drauf gehst? Oder wenns immer noch leute gibt die einen
600x800 benutzen?
Anhand des Bildes würde ich sagen das geht noch ohne position absolut/relative sondern mit
einfachem css.

 

[jlow_69]

Ja darum machen die meisten 1024px breit und mittig.
1024px hat heute jeder Monitor und mittig macht man das alles mit margin:0px auto;

Okay, aber danke trozdem für die Erkenntnis dass das schonmal an den Prozentangaben liegt ^^

Und was ist wenn du mit nem ipad drauf gehst? Oder wenns immer noch leute gibt die einen
600x800 benutzen?
Anhand des Bildes würde ich sagen das geht noch ohne position absolut/relative sondern mit
einfachem css.

Joa, ich könnte natürlich auch einfach mit margin arbeiten.
Aber da müsst ich ja auch wieder angeben wie gross der Abstand sein soll.

Gibt es eine Möglichkeit mittels PHP auszulesen wie gross der Client-Monitor ist, und dann auf die entsprechende Seite weiterzuleiten?
Das würde natürlich auch beinhalten dass ich verschiedene Seiten in verschiedenen Grössen code, aber das wird schon gehen.

Oder denk ich da schonwieder viel zu weit? ^^

 

[Tronjer]

Gibt es eine Möglichkeit mittels PHP auszulesen wie gross der Client-Monitor ist, und dann auf die entsprechende Seite weiterzuleiten?
Das würde natürlich auch beinhalten dass ich verschiedene Seiten in verschiedenen Grössen code, aber das wird schon gehen.

Oder denk ich da schonwieder viel zu weit? ^^

Du denkst schon halbwegs richtig. Google mal nach media queries.

 

[agund]

Ja mit JavaScript kannst du die Größe auslegen... jedoch müsstest du dann die Boxen alle anpassen mit JS und dann wird der Inhalt ja auch gedrückt.
IPad, iPod und so weiter haben eigentlich eine selbst erkennung automatisch enthalten, das die Internetseite anpasst.

Mein Tipp: einfach eine Größe nehmen, Internet Seite fertig bauen und fertig. Dann schau es dir auf Ipad an oder so und du wirst sehen alles sieht gut aus.
Ich habe selbst ein Tablet und meine Seite sieht auch gut aus. JS ist nich Barrieren frei und kann deaktiviert werden, was machst du dann?
Darum lieber so...

 

[jlow_69]

Ja mit JavaScript kannst du die Größe auslegen... jedoch müsstest du dann die Boxen alle anpassen mit JS und dann wird der Inhalt ja auch gedrückt.
IPad, iPod und so weiter haben eigentlich eine selbst erkennung automatisch enthalten, das die Internetseite anpasst.

Mein Tipp: einfach eine Größe nehmen, Internet Seite fertig bauen und fertig. Dann schau es dir auf Ipad an oder so und du wirst sehen alles sieht gut aus.
Ich habe selbst ein Tablet und meine Seite sieht auch gut aus. JS ist nich Barrieren frei und kann deaktiviert werden, was machst du dann?
Darum lieber so...

Echt, die haben ne selbsterkennung drin?
Nicht schlecht, danke für die Info :)

Ich werds nun mit Media Queries machen.
Soviel ich weiss, wird es dann auf jedem Monitor oder Display komplett richtig dargestellt. Das einzige Problem ist, wenn jemand einen älteren Webbrowser benutzt kann es zu Problemen führen.
Man sagt ja dass eine Internetseite erst wirklich fertig ist, wenn sie auf jede Problemsituation eine Lösung hätte. Aber diese Situation kann ich getrost Links liegen lassen, da ich mir bewusst bin welche Leute sich in meinem Zielpublikum aufhalten. Und ich getraue mich zu spekulieren, dass 9.5/10 Personen einen aktuellen Internetbrowser haben. :)
Trotzdem vielen Dank :)

Du denkst schon halbwegs richtig. Google mal nach media queries.

Da haben wirs.

Tausend Dank! :)