Ergebnis 1 bis 4 von 4

Thema: Begrenzung der Seitenbreite

  1. #1
    HTML Newbie
    Registriert seit
    19.06.2013
    Ort
    München
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage Begrenzung der Seitenbreite

    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??
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: Begrenzung der Seitenbreite

    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-Code:
    <!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>
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    19.06.2013
    Ort
    München
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Begrenzung der Seitenbreite

    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.

  4. #4
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: Begrenzung der Seitenbreite

    Freut mich wenn ich helfen konnte.
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

Ähnliche Themen

  1. seitenbreite beim drucken
    Von Gast im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 07.08.2007, 12:22
  2. CSS Seitenbreite in FF und IE
    Von XyXEL im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 20.07.2007, 10:16
  3. Unterschiedliche Seitenbreite in Browsern
    Von Neoaxizz im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 18.05.2007, 14:10
  4. Seitenbreite beim Vergrößern und Verkleinern
    Von im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 15.11.2005, 22:49
  5. Text begrenzung
    Von Gast im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 08.08.2005, 15:09

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •