Problem mit DIV Konstruktion bei Auflösung kleiner 1000px

Status
Nicht offen für weitere Antworten.
M

mr_arrogant

Mitglied
Ich habe ein kleines Problem mit einem DIV Layout und komme nicht weiter.
Wie man hier sehen kann: http://moviefreaks.net/tutorials.de schaut das ganze bei einer Auflösung von 1000+Breite ja ganz gut aus und jedes Element behält brav seine Position.

Ändert man hingegen die Breite kleiner 1000, so schiebt sich oben Rechts das DIV Rightfield mit einem großen breiten Abstand nach Links. Anfangs sollte wir auf 1024x768 Optimieren und nun heißt es das auch eine Auflösung von 800x600 so gut es geht unterstütz werden sollte oO.

Mein vorhaben ist nun das Rechts oben das DIV Rightfield seine Position beibehält und nichts bei einer Breite kleiner 1000 sich nach Links schiebt. Leider habe ich bisher noch keine Lösung gefunden, aber vielleicht kennt ihr ja einen Lösungsweg :D

Bin auf jeden Fall für jeden erdenklichen Tipp Dankbar ;-)


mfg
mr-d
 
Keine festen Pixel als DIV-Größe wählen.. prozentuale Angaben der Breite wirken Wunder ;)
 
eine feste Größe ist nicht gut ...
Es gibt nun 2 Möglichkeiten:
Entweder fragst du die Größe der Bildschirmauflösung ab und leitest ggf. auf die entsprechende dafür optimierte Seite um, oder du magst ein Design, dass variabel ist..

CSS Beispiel:

PHP: 
html, body    { color: #fff; font-size: 12px; font-family: Verdana, sans-serif; background-image: url("img/bg-image.gif"); text-align: left; margin-top: 0; margin-left: 0 }
img, div { behavior: url(iepngfix.htc) }
.bild  { background: url("img/under-construction.png") no-repeat fixed; margin-top: 0; margin-right: 0; width: 30%; height: 300px }
 
Hi d2wap

Das haut leider nicht so hin da es im richtigen Layout unter den Bildern noch mehr Content gibt. Ich würde eben eine Lösung bevorzugen die mir einfach nur mein DIV welches oben Rechts Positioniert ist beim kleiner ziehen auch dort bleibt, denn ich kann mir nicht erklären wieso es sich beim kleiner ziehen eben ab einer Breite von 1001 nach Links verschiebt.
Ich habe leider keine Zeit das komplette Layout neu zu gestalten da dies nicht Bezahlt wird oO
Gleiches gilt natürlich auch für die ContentLine die selbiges Phänomen aufweist.

mfg
mr-d
 
Zuletzt bearbeitet:
mr_arrogant hat gesagt.:
..., denn ich kann mir nicht erklären wieso es sich beim kleiner ziehen eben ab einer Breite von 1001 nach Links verschiebt.
Zum Vergrößern anklicken....
Der "Rightfield"-DIV-Block zeigt völlig normales Verhalten. Er ist absolut rechts oben im BODY-Element positioniert, egal wie breit der Viewport gerade ist.
mr_arrogant hat gesagt.:
Ich habe leider keine Zeit das komplette Layout neu zu gestalten ...
Zum Vergrößern anklicken....
Jo, vielleicht hat hier im Forum jemand die Zeit, ... warten wir es ab.
 
hela hat gesagt.:
Der "Rightfield"-DIV-Block zeigt völlig normales Verhalten. Er ist absolut rechts oben im BODY-Element positioniert, egal wie breit der Viewport gerade ist.
Zum Vergrößern anklicken....
Joa soweit ist das klar, naja, wenn alle Stricke reißen wird halt das ganze als Tabellen Layout realisiert was zwar ein echter Tiefschlag wäre, aber wenn der Kunde es so wünscht oO



mfg
mr-d
 
Hi,

wie hela schon darauf hingewiesen hat, verhält sich das DIV #RightField völlig regelkonform.

Wenn du erreichen willst, dass die Box beim Verkleinern des Browserfensters nicht nach links wandert, müsste das komplette Layout in ein übergeordnetes Element mit fixer Breite eingebunden werden, aber dann hättest du ein Problem mit der Optimierung für kleinere Bildschirmauflösungen.
 
Hi Maik,
ja das mit der Regelkonformität habe ich schon verstanden :)

Ich habe bis eben schon zig verschiedene Möglichkeiten Ausprobiert, nur leider fruchtet bisher gar nichts :mad:



mfg
mr-d
 
Nur mal so als Denkanstoss ;)

Code: 
div#wrapper {
position:relative;
width:100%;
min-width:1000px;
}

Code: 
<div id="wrapper">
     <div id="NaviLine">Navigation</div>
     <div id="ContentLine">
          <div id="Content">
               <div id="ImageFirst">ImageFirst</div>
               <div id="ImageSecond">ImageSecond</div>
          </div>
     </div>
     <div id="LeftField">Leftfield</div>
     <div id="RightField">Rightfield</div>
</div>
Anmerkung: Für die älteren IE-Versionen (bis Version 6) wäre ein Workaround erforderlich, da sie die min-width-Eigenschaft nicht unterstützen. Stu Nicholls hat hierfür auch eine Lösung parat -> http://www.cssplay.co.uk/boxes/minwidth.html
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück