CSS-Problem mit 3 Divs

Handycommander · Beiträge: 1054 Windows XP Pro, Vista Visual Studio 2008

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:

markieren

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:

markieren

Quelltext

1:
2:
3:
4:
5:
6:

<div id="container">
    <div class="wrapper">
  <div class="content_wrapper">
  </div>
    </div>
</div>

Danke und Gruß,
Tobi

Einloggen, um Attachments anzusehen!

jaenicke · Verfasst: 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:

markieren

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:
HtmlDivExample

Einloggen, um Attachments anzusehen!

Boldar · Verfasst: Do 19.01.12 01:28

Ich bin zwar kein Profi, aber ich glaube du musst noch position entsprechend setzen.

mandras · Verfasst: Do 19.01.12 12:22

Versuch es mal wie folgt:

CSS:

markieren

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 · Verfasst: Do 19.01.12 13:02

Aber das will er doch gar nicht

Lösung 1: nimm ne Tabelle ( user profile icon

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.

_________________
"The phoenix's price isn't inevitable. It's not part of some deep balance built into the universe. It's just the parts of the game where you haven't figured out yet how to cheat."

mandras · Verfasst: 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.

Einloggen, um Attachments anzusehen!

jaenicke · Verfasst: 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:

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme