Entwickler-Ecke
Off Topic - CSS-Problem mit 3 Divs
Handycommander - So 15.01.12 19:34
Titel: CSS-Problem mit 3 Divs
Hallo,
ich sitz grad an nem CSS-Problem, an dem ich nicht weiterkomme. :(
Anbei ein Bild, wie es aussehen sollte... links der Wunschzustand und rechts, so wie es mit dem Quellcodestücken im Moment aussieht...
Ich möchte eigentlich nur, dass der Bereichs rechts sich vergrößern kann, jenachdem, wieviel Inhalt enthalten ist und dass Links die Navigation von der Höhe her mitwandert...
Hat jemand ne Idee? :?
CSS:
Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
| #container {
width: 1002px;
height: 100%;
margin: -17px auto 10px;
padding: 0px;
border: 1px #e1e2e4 solid;
background-color: #FFFFFF;
overflow: auto;
}
#container .navi {
width: 235px;
height: 100%;
margin-top: -1px;
margin-left: -1px;
border: 1px #e1e2e4 solid;
background-color: #f1f6f9;
}
#container .wrapper {
width: 720px;
height: 100%;
float: right;
padding: 20px;
} |
HTML:
Quelltext
1:
2:
3:
4:
5:
6:
| <div id="container">
<div class="wrapper">
<div class="content_wrapper">
</div>
</div>
</div> |
Danke und Gruß,
Tobi
jaenicke - So 15.01.12 21:14
Ich hatte jetzt keine große Lust nachzuschauen was deine ganzen Einstellungen bewirken sollen, deshalb hier mal ein kurzes Beispiel:
XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ohne_Titel_1</title>
<style type="text/css">
html, body {
padding: 0px;
margin: 0px;
height: 100%;
}
.neueFormatvorlage1 {
height: 100%;
background-color: #33CCFF;
position: relative;
}
.neueFormatvorlage2 {
height: 100%;
width: 30%;
float: left;
background-color: #FF0066;
}
.neueFormatvorlage3 {
height: 100%;
width: 70%;
float: left;
background-color: #66FF99;
}
</style>
</head>
<body>
<div class="neueFormatvorlage1">
<div class="neueFormatvorlage2">
Navi
</div>
<div class="neueFormatvorlage3">
Inhalt
</div>
</div>
</body>
</html> |
// EDIT:
Vorschau:
Boldar - Do 19.01.12 01:28
Ich bin zwar kein Profi, aber ich glaube du musst noch position entsprechend setzen.
mandras - Do 19.01.12 12:22
Versuch es mal wie folgt:
CSS:
Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
| <style type="text/css">
html, body {
height: 100%;
}
#container {
width: 1002px;
height:100%;
padding: 0px;
border: 1px #a1a2e4 solid;
background-color: #FFFFFF;
overflow: auto;
}
#container .navi {
width: 235px;
height: 97%;
float: left;
border: 1px #ff0000 solid;
background-color: #f1f6f9;
}
#container .wrapper {
width: 720px;
height: 97%;
padding: 0px;
border: 1px #a1a2e4 solid;
}
</style>
</head>
<body>
<div id="container">
<div class="navi">container navi
</div>
<div class="wrapper">
container wrapper
</div>
</div>
</body>
</html> |
Wichtig ist daß html und body zuerst eine Höhe zugewiesen bekommen da sonst die prozentualen Angaben der Höhe bei den Folgeelementen nicht funktioniert.
Die Rände und Höhenangaben mußt Du noch anpassen.
Martok - Do 19.01.12 13:02
Aber das will er doch gar nicht ;)
Lösung 1: nimm ne Tabelle (
Regan wird mich schlagen :lol: , deswegen: gerne auch divs mit display:table/-cell/-row )
Lösung 2: verwende einen passenden Hintergrund, so dass es aussieht als würde die Sidebar über die ganze Höhe gehen. Das funktioniert sinnvoll nur, wenn du weißt dass eine Spalte garantiert immer die längere ist: das Element drüber bekommt den Hintergrund den die Sidebar haben soll und der eigentlich Seitenhintergrund wird dann im Content-Bereich gesetzt.
Lösung 3: ignoriere das ganze und mach die Farbgestaltung so, dass man es nicht sieht (das tun fast alle).
Eine ordentliche Lösung für das eigentliche Problem hab ich bisher auch noch nicht gefunden - und kein einziges mehrspaltiges Layout was dir so im Web begegnet hat eine. Da wird, wenn überhaupt, immer auf die ein oder andere Art mit festen Pixelwerten gearbeitet.
mandras - Do 19.01.12 13:48
Martok hat folgendes geschrieben  : |
| Aber das will er doch gar nicht ;) |
Entschuldigung, Du hast recht, ich habe das mit der Größe im OP überlesen.
Solange die Menübreite in px angegeben wird dürfte mein beigefügtes Beispiel glaube ich funktionieren.
jaenicke - Do 19.01.12 21:26
So wie ich es gemacht habe funktionirt es doch. Wenn ich den äußeren Contaner kleiner mache, werden beide Seiten genauso kleiner. Wenn die Höhe des äußeren Containers von der rechten Seite abhängt, passt sich die linke an. Also doch genau was gefragt war, oder? :gruebel:
Dass der äußere Container genau so groß ist wie der Browserinhalt hoch, war doch nur ein Beispiel. :nixweiss:
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2025 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!