zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dynamische Layout Breite und Höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.01.2007, 00:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2006
Beiträge: 15
altes-kind befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.01.2007, 09:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.01.2007, 10:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2006
Beiträge: 15
altes-kind befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 12.01.2007, 11:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

Zitat:
Zitat von altes-kind Beitrag anzeigen
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)
Mit Zitat antworten
  #5 (permalink)  
Alt 12.01.2007, 11:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2006
Beiträge: 15
altes-kind befindet sich auf einem aufstrebenden Ast
Standard

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

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
Mit Zitat antworten
  #6 (permalink)  
Alt 12.01.2007, 11:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 12.01.2007, 12:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2006
Beiträge: 15
altes-kind befindet sich auf einem aufstrebenden Ast
Standard

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?

Geändert von altes-kind (12.01.2007 um 12:09 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 12.01.2007, 12:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

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).
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Probleme mit der Breite und Höhe nach Padding BoFiaZ CSS 1 12.03.2009 11:21
3 Spalten Layout mit Divs - mitte fest, Seiten dynamische Breite devnull CSS 3 02.02.2009 11:03
3 spaltiges Layout, Außen feste Breite, innen dynamisch NicolaibassDH CSS 3 13.06.2007 12:09
Dynamische Höhe im Content und DIV immer unten keaton CSS 8 13.12.2006 19:19
dynamische höhe bei box layout roakin CSS 16 12.02.2005 23:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:32 Uhr.