Zentrieren der Seite, Browserproblem

[Karsten]

Hallo!

Mein Problem seht Ihr, wenn Ihr die Seiten <www.society-circus.de/home.htm> und <www.society-circus.de/styleubersicht_4.htm> in einer kleinen Auflösung unter 800 Pixeln im Vergleich anseht => Die Navigation links ist weg.

Vorgabe: Der Kunde möchte, dass die Seite 830 Pixel breit ist (fest) und mittig zentriert.

Ich habe schon sehr viel probiert, aber nichts klappt: Entweder ich mache es linksbündig oder die Navigation taucht ab.

Kann mir jemand helfen?

Karsten

[Cheatah]

Hi,

Mein Problem seht Ihr, wenn Ihr die Seiten <www.society-circus.de/home.htm> und <www.society-circus.de/styleubersicht_4.htm>

danke für die <>s; aber URLs beginnen mit dem Protokoll ...

in einer kleinen Auflösung unter 800 Pixeln im Vergleich anseht => Die Navigation links ist weg.

Ich habe sie mir in einer Auflösung von 1280x968 Pixeln angesehen, und die Navigation ist auch weg; auf einem anderen System mit 640x480 Pixeln ist sie jedoch da. Grund: Die Auflösung hat keine (in Worten: *keine*) Bedeutung. Wirklich gar keine.

Vorgabe: Der Kunde möchte, dass die Seite 830 Pixel breit ist (fest) und mittig zentriert.

Es ist Dein Job, den Kunden von dieser Vorgabe abzubringen. _Du_ bist der Experte, der den Unsinn dieser Anforderung erkennen kann. Mache das Deinem Kunden klar.

Ich habe schon sehr viel probiert,

Naja, aber ein negatives margin-left ist gegenüber den allenthalben zu findenden Standard-Lösungen nicht unbedingt die beste Wahl, das musst Du zugeben.

Cheatah

[karsten]

Ich habe sie mir in einer Auflösung von 1280x968 Pixeln angesehen, und die Navigation ist auch weg; auf einem anderen System mit 640x480 Pixeln ist sie jedoch da. Grund: Die Auflösung hat keine (in Worten: *keine*) Bedeutung. Wirklich gar keine.

Welcher Browser, welches System? Ich glaube nicht, dass DU Dir ie Seite tatsächlich angesehen hast, aber belehre mich gern eines besseren...

Wenn Du was gegen negative margins hast: Was wäre denn da eine Alternative? Würde mich wundern, wenn ich es nicht schon probiert hätte (left: 50%, etc.). Ausserdem: Wenn Du einen sehr bildlastigen Inhalt hast, dann halte ich eine vorgegebene Größe für in Ordnung.

[Cheatah]

Hi,

Welcher Browser, welches System?

das hat mit dem Browser nichts zu tun. Dass die Auflösung des oder der Bildschirme bar jeder Relevanz ist, wurde in diesem Forum schon hinreichend oft erklärt.

Ich glaube nicht, dass DU Dir ie Seite tatsächlich angesehen hast, aber belehre mich gern eines besseren...

Gerne: Woher weiß ich, wie Du die Zentrierung vorgenommen hast?

Wenn Du was gegen negative margins hast: Was wäre denn da eine Alternative?

Das, was das W3C empfiehlt (und was sich aus http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins eigentlich ergibt). Für veraltete Browser wie den IE muss man tatsächlich text-align manipulieren.

Würde mich wundern, wenn ich es nicht schon probiert hätte (left: 50%, etc.).

Du scheinst in der Tat einiges an Kreativität zu besitzen; was Dir fehlt, ist das - nicht ganz leicht verdauliche - Wissen unter o.g. URL.

Ausserdem: Wenn Du einen sehr bildlastigen Inhalt hast, dann halte ich eine vorgegebene Größe für in Ordnung.

Tja, ich nicht, zumal wenn es sich um viele kleine Bilder handelt. Bedenke auch, dass Deine Besucher ihren Browser in genau der Größe geöffnet haben, die sie gefüllt haben möchten.

Cheatah

[at]

Hallo.

Würde mich wundern, wenn ich es nicht schon probiert hätte (left: 50%, etc.).

Du scheinst in der Tat einiges an Kreativität zu besitzen;

Oder er hat lediglich das getan, was wir von ihm erwarten, nämlich das Forum nach einer Lösung zu durchsuchen (https://forum.selfhtml.org/?t=89526&m=535311).
MfG, at

[karsten]

Hi,

Welcher Browser, welches System?

das hat mit dem Browser nichts zu tun.

O.K., da habe ich den falschen Begriff benutzt: ich meinte eigentlich das Browserfenster. Das die Bildschirmauflösung "bar jeder Relevanz ist", das gilt m.E. für flüssiges Design, aber auch da lasse ich mich gern eines besseren belehren; Ich bekomme jedenfalls auf einer 640er Auflösung mein Browserfenster nicht auf 1.024 Pixel breite geöffnet.

Klar, wenn Du Dein Fenster auf einem großen Bildschirm minimierst, dann siehst Du natürlich nix mehr von der Navigation. Aber wie Du es geschafft hast, bei einer 640er Auflösung die Navgation zu sehen, das würde mich schon interessieren, klappt bei mir nämlich nicht.

Was Du gegen negative margins hast, verstehe ich nicht - das braucht man halt bei festem Design, aber ehrlch gesagt habe ich jetzt keine Lust auf Grundsatzdiskussionen, die langweilen mich mittlerweile, ich denke, dazu ist alles gesagt, und ich kann Deine Position auch gut verstehen und akzeptieren. Ich hoffe, Dir gehts genauso, denn sonst bekommt man irgendwann Magengeschwüre... ;)

Karsten

[MudGuard]

Hi,

O.K., da habe ich den falschen Begriff benutzt: ich meinte eigentlich das Browserfenster. Das die Bildschirmauflösung "bar jeder Relevanz ist", das gilt m.E. für flüssiges Design, aber auch da lasse ich mich gern eines besseren belehren; Ich bekomme jedenfalls auf einer 640er Auflösung mein Browserfenster nicht auf 1.024 Pixel breite geöffnet.

Schreib mal javascript:window.resizeTo(1024,768) in die Adreßzeile des Browsers (und schick es ab - Voraussetzung ist natürlich, daß dem Browser das Vergrößern des Fensters per Javascript nicht verboten wurde).

cu,
Andreas

[karsten]

Hallo!

Kann man das auch irgendwo in den HTML-Code schreiben? Mit Javascript kenne ich mich nicht so aus, aber in dem Fall ist es wirklich ne feine Sache!

Danke!

Karsten

[Fritz]

Hallo,

»Das die Bildschirmauflösung "bar jeder Relevanz ist", das gilt m.E. für flüssiges Design
diesen Zusammenhang lese ich zu ersten mal.
Gruß Fritz

[Jeena Paradies]

Hallo,

Vorgabe: Der Kunde möchte, dass die Seite 830 Pixel breit ist (fest) und mittig zentriert.

Also 830px ist ne sehr blöde Breite. Die mit der Auflösung 800px bekommen auf jeden Fall Scrollbalken, und die mit einer höheren haben viel platz verschenkt. Ich persönlich finde da 750px bzw 950px schöner, ist aber meine persönliche Meinung, die auf meinem eigenen Rechner schön aussieht.

Ich habe schon sehr viel probiert, aber nichts klappt: Entweder ich mache es linksbündig oder die Navigation taucht ab.

warum machst du nicht alles in einen container div, dem gibst du dann margin: auto; und eine feste Breite. Für den IE gibt es den würgaround dass man dem übergeordneten Element - in dem Fall dem body - text-align: center; und dem container div text-align: left; um die Inhalte wieder innerhalb dessen linksbündig zu bekommen, verpasst.

Hast du das schon mal ausprobiert?

Grüße
Jeena Paradies

[karsten]

Hallo Jeena!

ja, ich hatte die Seite schon auf 950 Pixel, weil ich der gleichen Meinung bin - der Kunde ist aber der Meinung, dass die meisten Personen Ihren Favoritenordner auf der linken Seite aufhaben(im IE) - und daher sollte es nicht 950 Pixel breit sein. Der Scrollbalken ist zwar doof bei 800 Pixel, de facto sieht man jedoch alle Inhalte.

Ich habe ja alles schon in einem Container-Div und habe das ausprobiert http://www.society-circus.de/styleubersicht_6.htm; Ich hatte bisher die Inhalte immer absolute positioniert. Da bleibt es linksbündig.

Daher habe ich hier die eingebundenen divs relativ positionierthttp://www.society-circus.de/styleubersicht_7.htm; Design ist hier zwar etwas zerschossen, aber da das Problem bleibt muss ich die Inhalte hier ja nicht alle "designgemäß" einordnen, oder?

Vielen Dank schon mal für Deine Hilfe!

Karsten

[Jeena Paradies]

<html>
<head>
 <title>test</title>
 <style type="text/css">
  body {
   text-align: center;
  }
  #container {
   text-align: left;
   margin: auto;
   width: 750px;
  }
 </style>
</head>
<body>
 <div id="container>
  <p>Hier ist der linksbündige Zentrierte Inhalt. hier kannst du ganz normal relativ
     positionieren. Absolute Positionierung geht auch, aber dann musst du dem #container
     noch position: relative; geben damit diese absolut positionierten Inhalte relativ zum
     #container sind, und nicht irgendwo auf der Seite.</p>
  <p>Probiere das mal aus und kopiere diesen Quellcode, du wirst sehen dass es
     funktioniert.</p>
 </div>
</body>
</html>

Grüße
Jeena Paradies

[Jeena Paradies]

Hallo,

<div id="container>

sollte natürlich <div id="container"> heißen.

Grüße
Jeena Paradies

[karsten]

Hallo Jeena!

Habe ich jetzt ausprobiert http://www.society-circus.de/styleubersicht_7.htm: Funktioniert! Dankeschön!

Das Problem ist wohl, dass ich die eingebetteten Divs auch absolute positioniert hatte; die muss ich wohl alle relative positionieren, gell?

Sag mal, im NN funktioniert das übrigens nicht bei mir, wie sieht es bei Dir aus?

Liebe Grüße!

Karsten

[Jeena Paradies]

Hallo,

Habe ich jetzt ausprobiert http://www.society-circus.de/styleubersicht_7.htm
Funktioniert! Dankeschön!
Das Problem ist wohl, dass ich die eingebetteten Divs auch absolute positioniert
hatte; die muss ich wohl alle relative positionieren, gell?

Oder wie ich oben beschrieben habe dem #container ein position: relative; geben.

Sag mal, im NN funktioniert das übrigens nicht bei mir, wie sieht es bei Dir aus?

Opera, Mozilla und Konqueror unter Linux zeigen es zentriert an. Oder meintest du den NS 4.x? Nein da funktioniert das natürlich nicht, der Browser ist ja aber auch schon sehr alt, und keiner wird dir da übel nehmen dass die Seite linksbündig ist.

Grüße
Jeena Paradies

[karsten]

Sag mal, im NN funktioniert das übrigens nicht bei mir, wie sieht es bei Dir aus?

Nein, ich meine den NN 7.1.! In den anderen Browsern läuft es bei mir auch. Ist das vielleicht ein relativ unbekannter Bug? Auch hier bleibt das Problem, wie es am Anfang aufgrund meiner falschen Codierung bestand: Die Seite "verschwindet" aus dem Browserfenster, wenn ich es auf unter 830 Pixel verkleinere.

Vielen Dank, daran habe ich schon den halben Tag gesessen, Du hast heute jemanden glücklch gemacht :)

Karsten

P.S: Wenn ich den container relativ einstelle, dann muss ich - ausgehend von meiner bisherigen Programmierung - trotzdem noch die ganzen einzelnen divs positioneren!? Ich habe es probiert, wie Du oben angegeben hast, aber die einzelnen Blockelemente stehen ja normalerweise hintereinander und so wie mein jetziger Coe eben aussieht muss ich das halt noch machen, oder hast Du da noch einen Tipp?

[Jeena Paradies]

Hallo,

Nein, ich meine den NN 7.1.! In den anderen Browsern läuft es bei mir auch. Ist das vielleicht ein relativ unbekannter Bug? Auch hier bleibt das Problem, wie es am Anfang aufgrund meiner falschen Codierung bestand: Die Seite "verschwindet" aus dem Browserfenster, wenn ich es auf unter 830 Pixel verkleinere.

Kann ich mangels NN 7.x nicht nachvollziehen.

Vielen Dank, daran habe ich schon den halben Tag gesessen, Du hast heute jemanden glücklch gemacht :)

Freut mich :)

P.S: Wenn ich den container relativ einstelle, dann muss ich - ausgehend von meiner bisherigen Programmierung - trotzdem noch die ganzen einzelnen divs positioneren!?

Programmierung? Ich verstehe nicht so richtig was du mit Programmierung meinst. CSS ist keine Programmiersprache.

Ich habe es probiert, wie Du oben angegeben hast, aber die einzelnen Blockelemente stehen ja normalerweise hintereinander und so wie mein jetziger Coe eben aussieht muss ich das halt noch machen, oder hast Du da noch einen Tipp?

Um Blockelemente nebeneinander zu bekommen benutzt man float. Aber deffiniere was einzelne Blockelemente bei dir bedeuten, und ob du hintereinander im Code oder auf dem Bildschirm nebeneinander hintereinander meinst.

Übrigens schau mal hier: http://www.google.de/search?q=css+Seite+Zentrieren das erste Ergebniss führt dich auf eine Seite die genau das Zeigt was ich dir geschrieben habe.

Grüße
Jeena Paradies

[karsten]

Hallo Jeena!

So, ich bin jetzt fertig für heute und jetzt laufen die Seiten auch endlich, habe alles überprüft, den Validator rüberlaufen lassen, scheint alles in Ordnung.

Mir bleibt nur noch, mich noch einml bei Dir zu bedanken (die restlichen Punkte habe ich jetzt selbst geklärt bekommen)

Liebe Grüße!

Karsten

P.S: Deine Seite gefällt mir sehr gut. Glückwunsch!