Problem mit 800*600er Auflösung

[Bernd]

Hallo,

ich bastle gerade an einer neuen Website mit CSS.

Wenn ich meine Musterseite mit einer 800*600er Auflösung im Internet Explorer bei Schriftgrad - sehr groß - betrachte, fliegt der rechte Kasten (Inhalt) immer unter die Navigation, obwohl der Platz eigentlich ausreichen sollte.

Der gleiche Effekt tritt bei mir übrigens auch schon bei einer 1024*768er Auflösung ein. Aber das Ziel ist eine problemlose Darstellung unter 800*600.

URL der Musterseite:
http://startwebsite.de/muster.html

Wäre super, wenn mir jemand helfen könnte.

Vielen Dank im voraus.

Gruß
Bernd

[Der Martin...]

Hallo Bernd,

Wenn ich meine Musterseite mit einer 800*600er Auflösung im Internet Explorer bei Schriftgrad - sehr groß - betrachte, fliegt der rechte Kasten (Inhalt) immer unter die Navigation, obwohl der Platz eigentlich ausreichen sollte.

Das tut er bei mir auch bei 1024x768 und Schriftgradeinstellung "Mittel".
Und überhaupt: Die Bildschirmauflösung hat absolut nichts mit solchen Problemen zu tun. Relevant ist für dich ausschließlich die verfügbare Fläche im Browserfenster. Die _ähnelt_ vielleicht der Bildschirmauflösung, wenn man das Browserfenster im Vollbildmodus fährt. Aber erstens tun das viele nicht, zweitens geht selbst dann Platz "verloren", den die User mit Sidebars, Symbolleisten, etc. nutzen.

Vergiss also bitte den Begriff "Auflösung" im Zusammenhang mit Webdesign, verwende daher eher den Ausdruck "Fenstergröße", im Fachjargon manchmal auch hochtrabend "Viewport" genannt.

Aber das Ziel ist eine problemlose Darstellung unter 800*600.

Das Ziel sollte eine problemlose Darstellung mit _allen_ Fenstergrößen (innerhalb gewisser Grenzen) sein.

http://startwebsite.de/muster.html
Wäre super, wenn mir jemand helfen könnte.

Wenn du die verschiedenen DIVs wenigstens nicht alle mit demselben Füllsel vollgestopft hättest, wäre es schon erheblich leichter, sich in deinem Quellcode zurechtzufinden. So ist es leider nur ein Dschungel von DIVs und TESTs, und es kostet große Überwindung, mehr als nur einen flüchtigen Blick darauf zu werfen.

Dein Code ist insgesamt ziemlich schlecht strukturiert. Zum Beispiel hat die Hauptüberschrift <h1> keinen verwertbaren Inhalt. Außerdem hast du jede Menge Formatierungen in HTML-Tags und Attributen. Nimm die mal weg und ersetze sie durch CSS-Angaben, dann wird's schon viel übersichtlicher.

So long,

Martin

[Bernd]

Hallo Martin,

Und überhaupt: Die Bildschirmauflösung hat absolut nichts mit solchen Problemen zu tun. Relevant ist für dich ausschließlich die verfügbare Fläche im Browserfenster. Die _ähnelt_ vielleicht der Bildschirmauflösung, wenn man das Browserfenster im Vollbildmodus fährt. Aber erstens tun das viele nicht, zweitens geht selbst dann Platz "verloren", den die User mit Sidebars, Symbolleisten, etc. nutzen.

stimmt, daran hatte ich nicht gedacht.

Das Ziel sollte eine problemlose Darstellung mit _allen_ Fenstergrößen (innerhalb gewisser Grenzen) sein.

An sich ist genau das mein Ziel.

Dein Code ist insgesamt ziemlich schlecht strukturiert. Zum Beispiel hat die Hauptüberschrift <h1> keinen verwertbaren Inhalt. Außerdem hast du jede Menge Formatierungen in HTML-Tags und Attributen. Nimm die mal weg und ersetze sie durch CSS-Angaben, dann wird's schon viel übersichtlicher.

Ich habe den Code mal etwas "entmüllt", vielleicht ist es so übersichtlicher.

Gruß
Bernd

[Der Martin...]

Hallo,

[...] geht selbst dann Platz "verloren", den die User mit Sidebars, Symbolleisten, etc. nutzen.
stimmt, daran hatte ich nicht gedacht.

;-)

Das Ziel sollte eine problemlose Darstellung mit _allen_ Fenstergrößen (innerhalb gewisser Grenzen) sein.
An sich ist genau das mein Ziel.

Gut. Dann kommen wir auch weiter.

Ich habe den Code mal etwas "entmüllt", vielleicht ist es so übersichtlicher.

Er ist kürzer und kompakter geworden, ja. Aber es ist immer noch eine bunte Mischung von CSS, Inline-Styles und HTML-Attributen zur Formatierung. Die Angaben, die für die Größe und Positionierung deiner DIVs verantwortlich sind, sind dadurch im ganzen Quelltext verstreut. Das meinte ich unter anderem mit unübersichtlich und schlecht strukturiert. Damit machst du dich selbst verrückt.

Für div#navi hast du z.B. widersprüchliche Breitenangaben: 14% im CSS-Block und 27% im Inline-Style, beim div#inhalt ist es ähnlich. Wenn du die Formatierungen alle in einem <style> Abschnitt oder in einer externen CSS-Datei zusammenfasst, tut man sich erheblich leichter.
Während der Testphase würde ich übrigens einen <style>-Block im Dokument gegenüber einer externen CSS-Datei vorziehen. Dann muss man nicht dauernd zwischen zwei Dateien hin- und herspringen.

Schönen Tag noch,

Martin

[Bernd]

Hallo Martin,

Er ist kürzer und kompakter geworden, ja. Aber es ist immer noch eine bunte Mischung von CSS, Inline-Styles und HTML-Attributen zur Formatierung. Die Angaben, die für die Größe und Positionierung deiner DIVs verantwortlich sind, sind dadurch im ganzen Quelltext verstreut. Das meinte ich unter anderem mit unübersichtlich und schlecht strukturiert. Damit machst du dich selbst verrückt.

Für div#navi hast du z.B. widersprüchliche Breitenangaben: 14% im CSS-Block und 27% im Inline-Style, beim div#inhalt ist es ähnlich. Wenn du die Formatierungen alle in einem <style> Abschnitt oder in einer externen CSS-Datei zusammenfasst, tut man sich erheblich leichter.
Während der Testphase würde ich übrigens einen <style>-Block im Dokument gegenüber einer externen CSS-Datei vorziehen. Dann muss man nicht dauernd zwischen zwei Dateien hin- und herspringen.

3. Versuch ;-)
http://startwebsite.de/muster.html

Ich habe den Code nochmal entmüllt und einige Formatierungen entfernt. Außerdem sind die Breitenangaben jetzt identisch bzw. stehen nur einmal im Code.

Gruß
Bernd

[Der Martin...]

Hi Bernd,

3. Versuch ;-)
   http://startwebsite.de/muster.html

Na bitte - das ist es doch schon beinahe!

Also die beiden Bilder im div#inhalt stehen jetzt ordentlich nebeneinander und neben der Navi-Leiste, solange genügend Platz dafür ist, andernfalls rutschen sie als Ganzes unter die Navigation. Beachte dabei, dass das rechte der beiden Bilder laut style-Angabe einen 4em breiten rechten Rand hat, der mit zum Platzbedarf zählt!

Ich habe den Code nochmal entmüllt und einige Formatierungen entfernt. Außerdem sind die Breitenangaben jetzt identisch bzw. stehen nur einmal im Code.

Ja, und jetzt fallen mir auch nur noch Kleinigkeiten auf. Soll ich...?

* Du solltest im body unbedingt noch eine generische Schriftfamilie angeben: font-face: Verdana, Sans-Serif;
 * Im CSS definierst du zwei Blöcke für #navigation. Da sie keine widersprüchlichen Informationen enthalten, ergänzen sie sich eigentlich nur, aber dann kannst du sie im Code auch gleich zusammenfassen.
 * Wieso gibst du dem #inhalt auch ein float? Halte ich für unnötig; könnte sogar später wieder für Verwirrung sorgen...
 * Die vielen <b> und </b> Tags, die ohnehin nur für die Darstellung relevant sind, solltest du bei einem strict-DOCTYPE weglassen. Die entsprechende Darstellung (fett) regelst du per CSS. Abgesehen davon sind sie in deinem Quelltext nicht einmal alle paarig.
 * Das erste <a>-Element in #navigation enthält keinen Text und wird dadurch ziemlich nutzlos. Platzhalter? Vorläufiger Fülltext?
 * Die border- und align-Attribute in den <img>-Elementen solltest du auch weglassen und stattdessen per CSS definieren.

Und dann das ganze noch dem Validator zeigen - und wenn der auch keine Fehler mehr findet, sieht das doch schon ganz gut aus. :)

Schönen Abend auch,

Martin

[Gunnar Bittersmann]

"Fenstergröße", im Fachjargon manchmal auch hochtrabend "Viewport" genannt.

Martin,
Ich würd das nicht „hochtrabend“ nennen, sondern „genau“. „Fenster“ ist mehrdeutig.

Unter „Fenster“ versteht man ja bei Windows (no pun intended) und GUIs anderer OS das Rechteck, das die Anwendung (hier der Browser) auf dem Desktop einnimmt. Dessen Größe ist auch irrelevant, denn dieses umfasst auch Rahmen, Titelleiste und die von dir erwähnten Sidebars, Symbolleisten, etc. neben dem hier relevanten „Fenster“ in die virtuelle Welt – dem Viewport.

Live long and prosper,
Gunnar

[Der Martin...]

Hallo Gunnar,

"Viewport"
Ich würd das nicht „hochtrabend“ nennen, sondern „genau“. „Fenster“ ist mehrdeutig.

Fenster ist in der Tat mehrdeutig. Trotzdem im Kontext normalerweise hinreichend genau, vor allem, wenn vom "Browserfenster" die Rede ist.

Unter „Fenster“ versteht man ja bei Windows (no pun intended) und GUIs anderer OS das Rechteck, das die Anwendung (hier der Browser) auf dem Desktop einnimmt.

Nein, das ist schon viel zu speziell. Windows versteht unter "Fenster" jeden rechteckigen Bildausschnitt, der als Einheit adressierbar ist. Das geht bis herunter zu einzelnen Icons, Buttons oder Checkboxen, die nach der Terminologie von Windows auch Fenster sind.

Dessen Größe ist auch irrelevant, denn dieses umfasst auch Rahmen, Titelleiste und die von dir erwähnten Sidebars, Symbolleisten, etc.

Eben, deswegen ist im Kontext "Browser und Seitengestaltung" mit Fenster einzig der Ausschnitt gemeint, in dem der Browser das geladene Dokument anzeigt. Ich bin der Meinung, dass das aus dem Kontext heraus klar ist.

Schönen Abend noch,

Martin

[seth]

gudn tach Bernd!

URL der Musterseite:
http://startwebsite.de/muster.html

fuers naechste mal: http://forum.de.selfhtml.org/faq/#Q-19 ;-)

Wäre super, wenn mir jemand helfen könnte.

dazu waere es zunaechst sehr hilfreich, wenn das dokument wirklich das waere, was es vorzugeben scheint. in der ersten zeile steht, es sei "strict". aber der validator (http://validator.w3.org/) sagt, dass das gar nicht stimme.

zudem ist es meist geschickter, soviel wie moeglich an nicht relevantem code rauszuschmeissen. z.b. kann der komplette inhalt von <div id="navigation"> geloescht werden, ohne, dass dein problem sich veraendert. es macht den code aber um einiges uebersichtlicher und damit besser lesbar.
das div mit id=title kann sogar komplett geloescht werden, ohne das sich etwas aendert. im boesen div kann man auch sehr viel (vor allem "test") loeschen, ohne dass das problem verschwindet.
so, jetzt ist der quelltext bei mir nur noch <50 zeilen gross und passt komplett auf eine bildschirmseite.
naja, und so weiter...
irgendwann merkt man dann, dass es eigentlich bloss die beiden letzten bilder sind, die das problem verursachen.

  
<img border="0" align="left" src="foto1.jpg" width="275" height="206" alt="yahoo" />  
<img border="0" align="right" style="margin-right:4em" src="foto2.jpg" width="275" height="281" alt="yahoo" />

also ich denke, der rand kommt von style="margin-right:4em" und das problem von align="...", weil der ie sich dadurch gezwungen fuehlt, beide bilder nebeneinander zusetzen. (bin mir da aber auch nicht so ganz sicher, es passt jedenfalls zur beobachtung, dass das problem bereits ohne das erste align nicht mehr auftritt)

prost
seth

[Bernd]

Hallo seth,

fuers naechste mal: http://forum.de.selfhtml.org/faq/#Q-19 ;-)

ist notiert. :-)

dazu waere es zunaechst sehr hilfreich, wenn das dokument wirklich das waere, was es vorzugeben scheint. in der ersten zeile steht, es sei "strict". aber der validator (http://validator.w3.org/) sagt, dass das gar nicht stimme.

ja, daran arbeite ich auch noch. Wahrscheinlich werde ich das ganze am Ende auf Transitional umstellen, da ich leider einige blank Tags benötige.

zudem ist es meist geschickter, soviel wie moeglich an nicht relevantem code rauszuschmeissen. z.b. kann der komplette inhalt von <div id="navigation"> geloescht werden, ohne, dass dein problem sich veraendert. es macht den code aber um einiges uebersichtlicher und damit besser lesbar.
das div mit id=title kann sogar komplett geloescht werden, ohne das sich etwas aendert. im boesen div kann man auch sehr viel (vor allem "test") loeschen, ohne dass das problem verschwindet.
irgendwann merkt man dann, dass es eigentlich bloss die beiden letzten bilder sind, die das problem verursachen.

<img border="0" align="left" src="foto1.jpg" width="275" height="206" alt="yahoo" />
<img border="0" align="right" style="margin-right:4em" src="foto2.jpg" width="275" height="281" alt="yahoo" />

>   
> also ich denke, der rand kommt von style="margin-right:4em" und das problem von align="...", weil der ie sich dadurch gezwungen fuehlt, beide bilder nebeneinander zusetzen. (bin mir da aber auch nicht so ganz sicher, es passt jedenfalls zur beobachtung, dass das problem bereits ohne das erste align nicht mehr auftritt)  
  
Ich habe den Code mal etwas entmüllt, siehe mein anderes Posting, da es zuerst doch sehr unübersichtlich war.  
  
Die Bilder habe ich testweise mal ganz entfernt. Aber bei einer 800\*600er Auflösung mit Schriftgrad "größer" ist der Fehler leider wieder da.  
  
<http://startwebsite.de/muster.html>  
  
Gruß  
Bernd

[Der Martin...]

Hallo,

Die Bilder habe ich testweise mal ganz entfernt. Aber bei einer 800*600er Auflösung mit Schriftgrad "größer" ist der Fehler leider wieder da.

Welcher Fehler?
Es ist doch vollkommen korrekt, dass das div mit den zwei Bilder unter die Navi rutscht, wenn du es floatest. Das bedeutet doch schließlich: Stelle die Elemente nebeneinander, wenn genug Platz ist, sonst untereinander.

Wenn du das nicht willst, verzichte auf float beim div#inhalt. Dann musst du vielleicht um der Optik willen die Abstände nochmal aufeinander abstimmen.

Ciao,

Martin

[Bernd]

Hallo Martin,

Die Bilder habe ich testweise mal ganz entfernt. Aber bei einer 800*600er Auflösung mit Schriftgrad "größer" ist der Fehler leider wieder da.

Welcher Fehler?
Es ist doch vollkommen korrekt, dass das div mit den zwei Bilder unter die Navi rutscht, wenn du es floatest. Das bedeutet doch schließlich: Stelle die Elemente nebeneinander, wenn genug Platz ist, sonst untereinander.

Wenn du das nicht willst, verzichte auf float beim div#inhalt. Dann musst du vielleicht um der Optik willen die Abstände nochmal aufeinander abstimmen.

die Bilder habe ich ja testweise schon komplett entfernt, aber trotzdem rutscht das inhalt-div unter die Navigation, wenn ich die Seite mit 800*600 + Schriftgrad "sehr groß" betrachte. Das floating habe ich auch mal rausgenommen, leider ohne Erfolg.

Gruß
Bernd