  |
| Autor |
Nachricht |
7thSon
Neuer [User]
Anmeldung: 25.10.06
Beiträge: 6
|
 Verfasst am: 25.10.2006, 13:28 Titel: Probleme mit DIV-Aufbau |
 |
|
Hallo zusammen. Ich versuche gerade verzweifelt, folgenden Aufbau mit DIVs hinzubekommen:
Leider bin ich bisher daran gescheitert.
Die Seite soll um die 800px breit werden, jedoch mittig zentriert sein. Ausserdem soll Sie sich auch vertikal dem Browser anpassen und sich abhängig vom Text weiter oder weniger weit nach unten strecken.
Hat vielleicht jemand ein Beispiel mit ähnlichem Aufbau?
|
|
| Nach oben |
|
 |
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 480
|
| Verfasst am: 25.10.2006, 14:37 Titel: |
|
|
Ich kann's momentan nur im IE 5.5 testen, aber so ähnlich müsste es auch im FF hinhauen. Die Einzelwerte kannst du ja noch anpassen.
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Layout</title>
<style type "text/css">
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 100.01%;
}
#allcenter
{
margin: 0 auto;
width:800px;
}
#logo {
height: 80px;
background-color: #ff0000;
}
#navi
{
height:60px;
background-color: #228B22;
}
#bilder
{
width:120px;
float:right;
margin-top:-60px;
margin-right:20px;
}
#content
{
background-color: #ffffff;
}
#bildblau
{
background-color: #000099;
width: 120px;
height: 200px;
}
#bildgelb
{
background-color: #FFD700;
width: 120px;
height: 200px;
}
</style>
</head>
<body>
<div id="allcenter">
<div id="logo">Logo</div>
<div id="navi">navi
</div>
<div id="content">Content
<div id="bilder">
<div id="bildblau">bildblau</div>
<div id="bildgelb">bildgelb</div>
</div>
</div>
</div>
</body>
</html> |
Viel Erfolg!
|
|
| Nach oben |
|
|
7thSon
Neuer [User]
Anmeldung: 25.10.06
Beiträge: 6
|
| Verfasst am: 25.10.2006, 15:10 Titel: |
|
|
Erstmal danke vielmals für die Hilfe! 
Ganz klappen tut das aber noch nicht, siehe  http://www.7thson.ch/test/test.htm
Folgende Probleme bestehen noch:
- Der Abstand vom roten und gelben Bereich #bilder ist abhängig vom Inhalt von Content. Je mehr Text also in Content steht desto grösser der Abstand. Dieser Abstand sollte aber fix sein. Das Rote Bild sollte über dem Grünen liegen, wie in meinem Bild zu sehen.
- Der Content (schwarz dargestellt) sollte sich bis zum Bildschirmende strecken. Selbiges Gilt für das gelbe Bild.
Konnte diese beiden Fehler auf die Schnelle nicht beheben, schaus mir jetzt aber noch genauer an. Für Tipps wäre ich aber natürlich sehr sehr dankbar 
|
|
| Nach oben |
|
|
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 480
|
| Verfasst am: 25.10.2006, 17:32 Titel: |
|
|
Zweiter Versuch:
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Layout</title>
<style type "text/css">
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 100.01%;
background-color:#222222;
padding:0px;
margin:0px;
}
#allcenter
{
margin:0 auto;
color:#fff;
width:800px;
background-color:#000000;
}
#logo {
height: 114px;
background-color:blue;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-top:1px solid #fff;
}
#navi
{
height:29px;
background-color:green;
border:1px solid #fff;
}
#bilder
{
width:170px;
height:597px;
margin-left:550px;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
position:absolute;
z-index:1;
}
#content
{
background-color: #000;
float:left;
width:550px;
height:568px;
border-left:1px solid #fff;
border-bottom:1px solid #fff;
}
#contentrechts
{
background-color: #000;
float:right;
width:90px;
height:568px;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
#bildblau
{
background-color: #000099;
width: 170px;
height: 397px;
background-color:red;
border-bottom:1px solid #fff;
}
#bildgelb
{
background-color: #FFD700;
width: 170px;
height: 200px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="allcenter">
<div id="logo"></div>
<div id="navi">
<div id="bilder">
<div id="bildblau"></div>
<div id="bildgelb"></div>
</div>
navi
</div>
<div id="content">Content<p>test text test text test text testtext test text test text test ffftexttext test text test text test test text test text test text test text test text
</p><p> </p><p> </p><p> </p>
</div>
<div id="contentrechts"></div>
</div>
</body>
</html>
|
|
|
| Nach oben |
|
|
7thSon
Neuer [User]
Anmeldung: 25.10.06
Beiträge: 6
|
| Verfasst am: 26.10.2006, 09:02 Titel: |
|
|
Das kommt der Sache schon sehr nahe, danke!
Besteht nur noch das Problem, dass sich der schwarze Content-Bereich nicht dem Text anpasst, siehe http://www.7thson.ch/test/test.htm
Und auch der gelbe Bereich sollte sich jeweils bis ganz an den unteren Bildschirmrand strecken...
|
|
| Nach oben |
|
|
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 480
|
| Verfasst am: 26.10.2006, 09:50 Titel: |
|
|
Jetzt wird's etwas problematisch:
In CSS passen sich zwei verschiedene Container grundsätzlich nicht der Länge des jeweils größeren an.
Wenn du in den rechten Bereich Bilder reinsetzt (vermute ich mal aufgrund der Bezeichnung) ist dessen Höhe durch die Grafiken fixiert. Dann sollte sich der Content dieser Spalte anpassen bzw. genauso hoch sein.
Momentan verlängert sich der content mit zunehmendem Text.
Alternative A:
Du orientierst dich an der fixen Höhe des Bildcontainers und weist dem #content noch ein oder zu.
siehe http://de.selfhtml.org/css/eigenschaften/anzeige/overflow.htm
Alternative 2:
Du lässt dem #content in seiner Höhe abhängig vom Inhalt "freien Lauf".
Hättest du im Balken eine einheitliche Farbe (nur gelb oder nur rot) ließe sich eine Verlängerung und Anpassung des Balkens per background-img mit dem Faux-Columns-Trick lösen.
Das geht m.W. aber nur bei unterschiedlichen Farbblöcken nebeneinander und nicht übereinander.
|
|
| Nach oben |
|
|
7thSon
Neuer [User]
Anmeldung: 25.10.06
Beiträge: 6
|
| Verfasst am: 26.10.2006, 10:11 Titel: |
|
|
Im unternen, gelben Bereich muss kein Bild drin sein, das war in meinem Beispiel etwas falsch. Ich probier das jetzt mal...
|
|
| Nach oben |
|
|
7thSon
Neuer [User]
Anmeldung: 25.10.06
Beiträge: 6
|
| Verfasst am: 31.10.2006, 09:58 Titel: |
|
|
| sejuma hat folgendes geschrieben: | | Momentan verlängert sich der content mit zunehmendem Text. |
Hmmm eben genau das macht der Content leider irgendwie nicht. Siehe http://www.7thson.ch/test/test.htm
|
|
| Nach oben |
|
|
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 480
|
| Verfasst am: 31.10.2006, 10:31 Titel: |
|
|
Dann probier's doch mal mit overflow:hidden;
"Einen Tod musst du sterben"  Du kannst nicht verlangen, dass die Höhe fix bleibt und du dann "unendlich viel" Text reinpacken kannst.
Siehe auch
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#height: Reicht die Höhe nicht aus und ist kein von overflow:visible abweichender Wert gesetzt, verlängert sich die Höhe automatisch (zumindest im IE).
|
|
| Nach oben |
|
|
7thSon
Neuer [User]
Anmeldung: 25.10.06
Beiträge: 6
|
| Verfasst am: 31.10.2006, 11:11 Titel: |
|
|
Ich glaube wir verstehen uns teilweise falsch, aber trotzdem nochmals herzlichen Dank für deine Hilfe!
Hier nun der aktuelle Stand: http://www.7thson.ch/test/test.htm
Das gelbe Bild habe ich entfernt, es wird nicht zwingend benötigt. Was halt wirklich noch schön wäre wäre, wenn sich der nun weisse Bereich #bilder ebenfalls bis an den unteren Bildschirmrand strecken würde. Gibts da wirklich keine Möglichkeit?
|
|
| Nach oben |
|
|
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 480
|
| Verfasst am: 31.10.2006, 11:23 Titel: |
|
|
Da fällt mir wie bereits gesagt nur noch das mit den "faux-columns" ein. Für den content müsstest du eine kleine, sich wiederholende Hintergrundgrafik bestehend aus einem schwarzen und weißen Block in der jeweiligen Breite einfügen.
Alternativ: Die Höhe von #bilder jedesmal der Höhe des contents manuell anpassen. Diese Möglichkeit kann aber auch zu Problemen führen, wenn du z.B. relative Schriftgrößen verwendest und der Benutzer die Standardgröße im Browser ändert.
|
|
| Nach oben |
|
|
|
|
