Layout mit Auflösungsanpassung

[T.W.]

Hallo ihr lieben,

ich bastel an einer Internetseite und verzweifle bei einem bestimmten Punkt. Lange habe ich auch hier gesucht, nur finde ich keine Antwort auf dies spezielle Problem:

-Die Seite ist für 1024*768 optimiert.
-Sie soll auch optisch für größere Auflösungen passen.
-Aufbau: links oben Logo, rechts daneben Willkommensbanner, rechts daneben dynamischer Bereich, --- unter dem Logo die Navigation, darunter dynamischer Bereich
-Es sollen KEINE Scrollbalken außer im Content-Bereich auftauchen.

Der dynamische Bereich gestaltet sich je nach größe der Auflösung. Die Elemente Logo, Banner, Navigation und Content kann ich normal anordnen. Nur habe ich echt ein Problem mit dem variablen Bereich, denn dieser wird nicht von einer Farbe, sondern einer Grafik gefüllt.
Viel habe ich über repeat-x und repeat-y gelesen, nur wird der Effekt schlicht nicht angezeigt. Egal ob ich die Position absolut setze oder gar nicht dimensioniere, nix geht. Auch eine height oder width von 100%, um nach unten oder rechts anzupassen, funzt nicht. Da bekomme ich super lange Balken und Scrollbars...

#rechtsoben {
background:url(grafik/layout/...jpg);
position:absolute;
left:980px;
top:0px;
height:130px;
width:100%;
}

Dies soll rechts oben den Bereich "auffüllen". Effekt: langer Balken mit Scrollbars. Auch
  width:5px;
  background-repeat:repeat-x;
machts nicht besser: Die Minigrafik wird EINfach angehängt und nicht wiederholt.

Ich hab schon ein paar vollkommen reibungslos funktionierende Seiten in verschiedenen Styles gebaut. Nur hier wurmts mich völlig. Vllt. bin ich auch nur blind und hab zusätzlich nen Brett vor dem Kopf. =/

Ich wäre sehr für Hilfe dankbar und beschreibe das Problem gern weiter, falls mein Problem nicht ersichtlich sein sollte.

Vielen Dank im Voraus,

Thomas

[rob]

Hi!

Lange habe ich auch hier gesucht, nur finde ich keine Antwort auf dies spezielle Problem:

Wo hast du denn gesucht? Die gleiche Frage hatten wir gerade erst.
Ist vielleicht noch hier auf der Forumsseite zu finden. Andernfalls sonst schon im Archiv.

-Die Seite ist für 1024*768 optimiert.

Argh! Wenn ich das Wort "optimiert" in diesem Zusammenhang schon höre...
Du solltest so arbeiten, daß die Auflösung nicht wichtig ist.

-Sie soll auch optisch für größere Auflösungen passen.

Und was ist mit den kleineren?
Schon mal dran gedacht, daß immer mehr User mit Handy, PDA oder anderen kleinen (meist mobilen) Geräten ins Netz gehen?

-Es sollen KEINE Scrollbalken außer im Content-Bereich auftauchen.

Das kannst du gar nicht beeinflussen. Du kennst die Viewportgröße des Users nicht. Also unterdrücke in keinem Fall eventuell auftauchende Scrollbars.

Die eingestellte Auflösung spielt außerdem nur eine untergeordnete Rolle.
Wichtiger ist die Viewportgröße.
Du kannst nicht davon ausgehen, daß jeder User mit maximiertem Browserfenster surft.
Bei einer Auflösung von 1024x768 habe ich mein Fenster sicherlich meist maximiert. Bei höheren Auflösungen ziehe ich mein Browserfenster aber nie ganz auf.
Außerdem arbeite ich eigentlich nur unter Windows mit maximierten Fenstern. Unter Linux wie auch unter OS X habe ich meine Fenster eigentlich niemals maximiert.

Viel habe ich über repeat-x und repeat-y gelesen, nur wird der Effekt schlicht nicht angezeigt.

Dann kopiere doch mal den entsprechenden Teil aus deinem Code und poste ihn hier.
BTW: Hast du deinen Code eigentlich mal durch einen Validator gejagt?
Vielleicht findet der ja deinen Fehler.

HTML-Validator des w3c
CSS-Validator des w3c

Schöner Gruß,
rob

[Djumanji]

Gibts vllt. noch eine kompetente Antwort? Ein Link zu dem anderen Thema hätte vllt. auch schon gereicht... Mich würde das auch interessieren.

[Detlef G.]

Hallo T.W.,

deine Beschreibung und das CSS-Schnipselchen reichen nicht aus, um dein Problem wirklich nachvollziehen zu können.
Poste einen Link auf die Problemseite, dann wirst du auch konkretere Hilfe erhalten können.

Auf Wiederlesen
Detlef

[T.W.]

Huhu,

gern hier die Adresse:
http://www.eigen-art.info/selfhtml/index.html
http://www.eigen-art.info/selfhtml/formattest.css der Einfachheit halber. =)

Ich habs jetzt einfach mal so nach dem letzen Bearbeitungsschritt so gelassen... Hacks hab ich erstmal außen vor gelassen...

LG,

Thomas

[rob]

Hi!

http://www.eigen-art.info/selfhtml/index.html

Abgesehen davon, daß du deine Link-Elemente nicht als inhaltsleer gekennzeichnet hast, sind dort keine Fehler drin.

http://www.eigen-art.info/selfhtml/formattest.css

hmm, ja.
Wenn ich das in meinem Firefox betrachte, sieht das eigentlich genau so aus, wie es deiner CSS nach sein sollte...
Du hast den Firefox zur Verfügung? Dann installiere dir mal das Addon "Webdeveloper Toolbar".
Dann schaltest du dort "Display Id & Class Details" ein und "Display Element Information".
Jetzt kannst du mit der Maus jedes einzelne Element anklicken und dir die Infos dazu anzeigen lassen.
Schätze mal, daß dir das weiterhelfen wird.

Dann kannst du die Option "Edit CSS" anwählen".
Dir wird darauf hin dein Stylesheet gezeigt und du kannst dort direkt Änderungen vornehmen, die dann auch sofort angezeigt werden.

Die Webdeveloper Toolbar bietet dir aber auch noch eine ganze Menge mehr.
Egal, ob du CSS entwickelst oder sonstwas.
Dieses Addon bietet so unglaublich viele Möglichkeiten, daß es ein für mich völlig unverzichtbares Werkzeug geworden ist.
Es ist recht einfach, damit irgendwelche Fehler aufzuspüren, weil man so viele Möglichkeiten hat, sich alles mögliche direkt auf der Seite anzeigen zu lassen und Änderungen vorzunehmen.

Schöner Gruß,
rob

[T.W.]

Hey Rob,
vielen Dank erstmal für die Tipps, die sich sehr wahrscheinlich sehr auszahlen werden. Muss ich mal testen.

Dass der Inhalt so angezeigt wird, wie er programmiert ist, ist klar. Das ist ja das Problem, denn eigentlich soll oben rechts zB. der grüne Strich und unten links der gelbe weitergehen. Du siehst ja links mit ein wenig Abstand (zur Verdeutlichung hatte ich ihn so eingestellt) diese dünne Linie. Und genau diese Linie soll bis unten zum Browserfenster, und oben ebenfalls, heranreichen. Mit dem Repeat-y oder repeat-x gehts nit. Bei einer anderen Internetseite machte dies kein Problem, da ich dort eine Farbe hab "kacheln" lassen. Nur dies wiederholen der Grafik funzt, warum auch immer, nicht. Nur umgehen möchte ich das Problem einfach nicht, sondern mich stellen und das endlich in die Rübe kriegen. -.- Muss ich wohl weitergucken, was ich machen kann.

Lieben Dank nochmal für den Tipp für den Foxi. =)

Muss nun grillen. :D

LG,
Thomas

[T.W.]

Ich seh gerade, dass es mit dem Firefox und Opera normal angezeigt wird. Schau dir die Seite mal mit dem IE an, dann kannst du sehen, was ich meine.