XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Dynamische Layout Breite und Höhe (http://xhtmlforum.de/showthread.php?t=43849)

altes-kind 12.01.2007 00:27

Dynamische Layout Breite und Höhe
 
Hallo,

ich habe folgendes "Konzept" für ein Layout (am besten in eine leere HTML-Datei kopieren - dann ist mein Problem besser verständlich):

Code:

<html>
 <head>
  <title>Layout</title>
  <style>
  #frame {
        margin-top: 20px;
        text-align: center;
        width: 740px;
  }
  #headerLeft {
        border: 1px #000000 solid;
        float: left;
        width: 348px;
  }
  #headerMiddle {
        border: 1px #000000 solid;
        float: left;
        width: 38px;
  }
  #headerRight {
        border: 1px #000000 solid;
        float: left;
        width: 348px;
        clear: right;
  }
  #contentLeft {
        border: 1px #000000 solid;
        float: left;
        width: 18px;
        height: 300px;
  }
  #contentMiddle {
        border: 1px #000000 solid;
        float: left;
        width: 698px;
        height: 300px;
  }
  #contentRight {
        border: 1px #000000 solid;
        float: left;
        width: 18px;
        height: 300px;
        clear: right;
  }
  #footerLeft {
        border: 1px #000000 solid;
        float: left;
        width: 348px;
  }
  #footerMiddle {
        border: 1px #000000 solid;
        float: left;
        width: 38px;
  }
  #footerRight {
        border: 1px #000000 solid;
        float: left;
        width: 348px;
        clear: right;
  }
  </style>
 </head>

 <body>
  <div id="frame">
  <div id="headerLeft">1</div>
  <div id="headerMiddle">2</div>
  <div id="headerRight">3</div>
  <div id="contentLeft">4</div>
  <div id="contentMiddle">5</div>
  <div id="contentRight">6</div>
  <div id="footerLeft">7</div>
  <div id="footerMiddle">8</div>
  <div id="footerRight">9</div>
  </div>
 </body>
</html>

Soweit sogut - nur möchte ich dem Layout allerdings noch eine dynamische Breite und Höhe geben.

Beispiel:
Bereich 5 (contentMiddle) ist der Bereich in dem später der Inhalt der Seite stehen soll. Grundsätzlich soll das Layout 740 Pixel breit sein - wenn in diesem Bereich Nr. 5 aber nun z.B. ein großes Bild eingefügt wird soll sich das Layout automatisch an dessen Größe anpassen.
- Wenn das Bild breiter ist sollen die Bereiche 2 (headerMiddle), 5 (contentMiddle) und 8 (footerMiddle) breiter werden - alle anderen Bereiche sollen allerdings die gleiche Breite behalten.
- Wenn das Bild höher wird soll sich nur Bereich 4 (contentLeft), 5 (contentMiddle) und 6 (contentRight) anpassen.

Wie muss ich das Layout ändern dass die bestimmten Bereiche dynamisch die Größe verändern können, andere Bereich allerdings _immer_ die selber Größe behalten?

Vielen Dank im voraus,

altes-kind

mazzo 12.01.2007 09:52

Dir fehlt ein korrekter Doctype. Ohne diesen geht der IE in den Quirksmodus und stellt das Boxmodell falsch dar. Siehe FAQ.

wenn Du Container pixelgenau in der Breite definierst musst Du mit diesen Werten leben. Sinnvoller wären für "dynamische" Bereiche andere Werte. Im FAQ-Thread sind links zu skalierbaren 3-Spalten-Layouts, die Dir da als Vorlage weiterhelfen können.

altes-kind 12.01.2007 10:22

Hi!

Den Doctype hätte ich natürlich im fertigen Layout noch definiert - das obige Beispiel war auch nur schnell zum Testen erstellt. ;)

Ich habe wegen folgendem Layout gefragt: http://altes-kind.de/data/xhtmlforum.de/screenshot.png

Das ganze funktioniert mit fester Breite wunderbar - allerdings will ich nun das sich das Layout "dynamisch" an den Inhalt anpasst - wenn also ein großes Bild eingfügt wird soll das Footer Image und Header Image breiter werden.

Wie kann ich das am besten aufteilen um dies zu erreichen?

Vielen, vielen Dank im voraus,

altes-kind

mazzo 12.01.2007 11:16

Zitat:

Zitat von altes-kind (Beitrag 320606)
Hi!

Den Doctype hätte ich natürlich im fertigen Layout noch definiert - das obige Beispiel war auch nur schnell zum Testen erstellt. ;)

wo einem beim testen im IE sofort Boxmodell-Fehler auffallen. Auch testcases sollten stets validiert sein.

Zitat:

Ich habe wegen folgendem Layout gefragt: http://altes-kind.de/data/xhtmlforum.de/screenshot.png

Das ganze funktioniert mit fester Breite wunderbar - allerdings will ich nun das sich das Layout "dynamisch" an den Inhalt anpasst - wenn also ein großes Bild eingfügt wird soll das Footer Image und Header Image breiter werden.
keine Breite vorgeben und stattdessen margin nach links und rechts. Container richten sich ohne Breiten/Höhenangaben an den Inhalt. (Blockelemente sind von Haus aus 100% breit)

altes-kind 12.01.2007 11:29

Zitat:

wo einem beim testen im IE sofort Boxmodell-Fehler auffallen. Auch testcases sollten stets validiert sein.
Ja - Du hast natürlich recht das man gründsätzlich "valid" arbeiten sollte - auch für Test - sorry. Und den Internet Exporer hab' ich hier unter Linux leider nicht :roll:

Zitat:

keine Breite vorgeben und stattdessen margin nach links und rechts. Container richten sich ohne Breiten/Höhenangaben an den Inhalt. (Blockelemente sind von Haus aus 100% breit)
Ok - das verstehe ich grundsätzlich, wie binde ich da allerdings die Hintergrundgrafiken ein, so dass diese immer richtig "ausgerichtet" sind (vor allem der schattierte Rahmen wie im Screenshot: http://altes-kind.de/data/xhtmlforum.de/screenshot.png )?

Nochmals Danke!

altes-kind

mazzo 12.01.2007 11:39

den Schatten nachzubilden wird dann etwas frickelig. Aber wenn Du ein Rahmenelement hast, in dem der Schatten "mitfläuft" (Background-repeat), und das Rahmenelement sich nach dem inneren in der Breite und Höhe richtet, sollte es gehen. ich hab es aber nicht ausporbiert.

altes-kind 12.01.2007 12:05

Ok - und noch eine Frage habe ich - sorry...

Zitat:

keine Breite vorgeben und stattdessen margin nach links und rechts.
Wie kann ich mit diesem Prinzip festlegen, dass das Layout normalerweiße eine feste Breite hat - egal mit welcher Bildschirmauflösung es betrachtet wird.

Beispiel:

Wenn ich margin-left: 300px; und margin-right: 300px; habe ich bei einer 1024-768er Auflösung ja eine Box mit 424 Pixel Breite - bei z.b. 1280-1024er Auflösung ist die Box ja automatisch 680px breit.

Ich will aber dass das Layout grundsätzlich z.B. 680 Pixel breit ist - egal mit welcher Bildschirmauflösung es betrachtet wird. Dann muss ich da ja eine feste Breite definieren, oder?

mazzo 12.01.2007 12:54

wenn Du stets 680px willst, dann musst Du das so tun - und die Konsequenzen ertragen. Die Nachteile von px-definiertem Layout sind Dir aber bekannt, oder?

Check einfach mal eine oder zwei Schriftgrößenveränderungen bei px-layouteten Seiten. Da wird schnell das Layout zerschossen. Und im IE wird px-definierte Schrift gar nicht vergrößert - unschön für Benutzer, denen die Schrift zu gross ist.

Alternativ wäre min-width und max-width eine Lösung. Diese Angaben werden vom IE aber nicht verstanden und brauchen eine workaround (z.B. mit JavaScript).


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:59 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020