Begrenzung der Seitenbreite

Johannes Vogel

Liebe Forumsbesucher,

nachdem ich als HTML- und CSS-Neuling meine Webseite geschrieben habe, möchte ich zuletzt noch eine Begrenzung für die Breite einführen. Die Seite soll nie breiter als 1024 Pixel sein, auch wenn sie auf einem Bildschirm mit höherer Auflösung betrachtet wird. Ist der Bildschirm aber schmaler, soll die Seite sich der Breite anpassen und nicht teilweise verdeckt werden. Diese Anpassung an die Breite funktioniert bei meiner Seite sehr gut - die zentrierten Inhalte sind bei variabler Breite immer mittig, der Text hat immer den passenden Rand usw. Allerdings hatte ich bisher auch keine Breitenbegrenzung. Wenn ich nun bei den einzelnen Elementen width: 1024px; festlege, wird die Seite auch nicht breiter - aber sie passt sich bei kleineren Bildschirmen auch nicht mehr der Breite an. Durch Ausprobieren kam ich schließlich auf max-width. Es erfüllt genau meinen Wunsch, aber nur für Elemente mit position: relative;. Ich habe jedoch je eine Kopf-, Fuß- und Seitenleiste, die unbeweglich und deshalb mit position: fixed; versehen sind. Hier klappt max-width nicht. Ich kann diese fixierten Elemente auch nicht in ein relativ positioniertes Element mit max-width packen. Sie halten sich dann nicht an die Begrenzung des relativen Elements.
Was kann ich tun? Gibt es einen einfachen Befehl oder ein Vorgehen durch Verschachtelung von Elementen, mit denen ich Elemente mit position: fixed; sowohl eine Maximalbreite als auch eine Anpassung an den Bildschirm unterhalb dieser Maximalbreite zuweisen kann?
Vielen Dank im Voraus für alle Antworten.

Johannes

P.S. Zur Erklärung, wenn meine Nachricht zu verwirrend war:
{position: fixed; width: 1024px;} Breite ist erfolgreich begrenzt, wird aber bei kleinem Bildschirm nicht angepasst.
{position: fixed; width: 100%;} Breite wird erfolgreich angepasst, aber bei großem Bildschirm nicht begrenzt.
Max-width vereint beide Eigenschaften, aber:
{position: fixed; max-width: 1024px;} Zusammen mit fixed gilt max-width leider nicht.
Weißt Du eine Lösung??

SinnlosS

Klar geht max-width auch auf Elemente mit position:fixed. Nur das zentrieren mit margin:0 auto; klappt da halt nicht.
Ich gehe aber davon aus, dass links und rechts neben Kopf- und Fußzeile nichts mehr hinkommt. Dann kannst du die über die volle Breite laufen lassen und darein noch ein div mit dem eigentlichen Inhalt setzen welches du zentrierst.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style type="text/css"> 
      #header { 
        position:fixed; 
        top:0; 
        left:0; 
        width:100%; 
      } 
      #content { 
        width:100%; 
        max-width:1024px; 
        min-height:300px; 
        margin:40px auto; 
        background:#ddd; 
      } 
      #footer { 
        position:fixed; 
        bottom:0; 
        left:0; 
        width:100%; 
      } 
      #header > div,#footer > div { 
        width:100%; 
        max-width:1024px; 
        height:40px; 
        margin:0 auto; 
        background:#aaa; 
      } 
    </style> 
  </head> 
  <body> 
    <div id="header"> 
      <div></div> 
    </div> 
    <div id="content"></div> 
    <div id="footer"> 
      <div></div> 
    </div> 
  </body> 
</html>

Alles anzeigen

Johannes Vogel

Vielen Dank, SinnlosS!
Mit deinem Vorschlag, je einem div im header und footer max-width zuzuweisen, konnte ich die gleichzeitige Fixierung, Seitenbegrenzung und zentrierte Ausrichtung realisieren.:-D

SinnlosS

Freut mich wenn ich helfen konnte.

Tags