Darstellungsproblem bei kleiner Auflösung

Computer: Software & Programmierung HTML & CSS
#1

Hallo,
ich habe eine Seite erstellt, die mit relativen Breiten ausgestattet ist. Das ganze soll strikt nach Layout und Inhalt getrennt werden. Daher habe ich es mit CSS realisiert. Nun habe ich allerdings mind. 1 Seite, auf der im sog. Hauptbereich ein Bild vorkommt. Hat der Betrachter 640*480 als Auflösung eingestellt, springt der Hauptbereich unter die Navigation. Leider ist dies aber Teil der Anforderung, also das es möglich sein soll, mit allen Auflösungen ein annehmbares Ergebnis zu erzielen (es wird hier sehr hoher Wert auf Barrierefreiheit gelegt).

Ich habe das ganze mal - als Seite ohne Inhalt - unter http://www.treichlers.de/test/ueberuns.html

abgelegt. Wäre toll, wenn ihr mal drüberschauen könntet. Ich hab schon einiges versucht( z.B. mit overflow etc) - leider ohne Erfolg.

Außerdem wäre es toll, wenn der Navigationsbereich bis zum Ende der Seite mit dem blau gefüllt würde - krieg ich auch nicht hin.

Freue mich über jeden Hinweis.

Schon mal Danke
Frank

#2

Moin

Daher habe ich es mit CSS realisiert. Nun
habe ich allerdings mind. 1 Seite, auf der im sog.
Hauptbereich ein Bild vorkommt. Hat der Betrachter 640*480 als
Auflösung eingestellt, springt der Hauptbereich unter die
Navigation.

Nicht nur bei 640x480, test mal mit mozilla.

Opera macht’s „richtig“, auch bei 640x480. Mozilla setzt den Hauptbereich immer unter die navi-Bar

Außerdem wäre es toll, wenn der Navigationsbereich bis zum
Ende der Seite mit dem blau gefüllt würde - krieg ich auch
nicht hin.

Wie wärs mit einer blinden 2-Spalten Tabellen ?

cu

#3

hi,

mozilla - problem kenn ich bereits - ist aber nicht ganz so schlimm (lt. auftrag).

tabellen darf ich keine verwenden, war auch meine erste variante.

mal schauen, ob ich noch ne andere lösung finde …

lieben dank
frank

#4

Moin

mal schauen, ob ich noch ne andere lösung finde …

Setz mal im:
#hauptbereich

width von 77 runter auf 70%.

Dann zeigt es mozilla korrekt an (und springt auch nicht bei

#5

Hallo,

Hi,

ich habe eine Seite erstellt, die mit relativen Breiten
ausgestattet ist.

Relativ schoen und gut, aber manchmal sollte man auch absolute Groessen nehmen, um sicherzustellen, das unbedingt notwendige Dinge auch wirklich zugaenglich sind.

Hat der Betrachter 640*480 als Auflösung eingestellt, springt
der Hauptbereich unter die Navigation.

Soll das ganze so aussehen? http://www.der-frank.org/tmp/uhdbo/ueberuns.html

diff -u neu.css neu.css.ori
--- neu.css.orig 2004-10-30 09:21:07.000000000 +0200
+++ neu.css 2004-10-30 11:45:12.000000000 +0200
@@ -15,12 +15,11 @@
 }

 #hauptbereich {
- float: left;
 width: 77%;
 height: 100%;
 padding: 12px;
 background-color:#EAEFFE;
- margin-left:10px;
+ margin-left:20%;
 margin-top: 120px
 position: absolute;
 }
@@ -390,4 +389,4 @@
 color: #FFFFFF;
 background-color: #336699;
 text-decoration: none;
- }
\ No newline at end of file
+ }

float weg, und den margin-left auf die Breite der Navigation setzen. Genau an der Stelle waere ich uebrigens nicht so streng mit den relativen Groessen: setze fuer die Navigation eine absolute Breite, proportional zur gesetzten Schriftgroesse und lass setzt fuer den #hauptbereich width:auto;, dann berechnet der UA die selbst (bis zum Fensterrand). 15em sieht ganz okay aus. Damit ist gesichert, dass auch bei schmalen Fenstern die Navigation immer vollstaendig sichtbar ist, ggf. wird fuer den Inhalt eine scroll-Leiste eingeblendet.

(es wird hier sehr hoher Wert auf Barrierefreiheit gelegt).

Das ist ja auch gut.

Außerdem wäre es toll, wenn der Navigationsbereich bis zum
Ende der Seite mit dem blau gefüllt würde - krieg ich auch
nicht hin.

Mit welchem blau jetzt, dem dunklen oder hellen? Ich wuerde einfach die Hintergrundfarbe des gesamten

#6

hallo frank,

danke für deine tipps und sorry, das ich mich erst jetzt melde.

ich habs nun doch anders hinbekommen. und zwar habe ich über die DIV für die Navi und den Hauptbereich noch ein anderes div „drübergestülpt“ - nun siehts so aus, wie ichs gerne hätte.

mit der hintergrundfarbe (es soll die dunkle sein #123466) hab ich aber noch probleme. wenn ich den gesamten body damit einfärbe, wird natürlich auch der nicht benötigte fensterrand (rechts) so gefärbt und dann sieht das ganze doch recht düster aus. außerdem habe ich im kopfbereich nun noch zwei grafiken (nebeneinander)untergebracht. zwischen diesen grafiken hab ich aber nun einen kleinen zwischenraum (habs mir margin:0 und float:left versucht, krieg in aber nicht weg). dieser zwischenraum muss - wenn er nun nicht wegzubekommen ist - weiss bleiben.

vielleicht versuchs ichs mal mit ner hintergrundgrafik.

vielen dank für alles

frank