nicht angemeldet
Zwei div-container in "Übercontainer" bringen
Hallo zusammen!
Um euch nicht mit langweiligen Einführungen zu langweilen, gleich das Problem...
Folgende Situtation: Ich habe ein Container namens wrapper, der in der mitte der Seite zentriert ist. Nun möchte ich in diesen zwei weitere Container einfügen, einer für den Inhalt, der andere für die Navigation.
+-----------------------------+
| |
| +-------------+ +------+ |
| | | | | |
| | Inhalt | | Navi | |
| | | | | |
Nun, die div's sind erstellt, es tritt jetzt aber das Problem auf, dass wenn ich z.B. die Navi nicht in den ersten Container rein bringe. Wenn ich beide innern container float, verschwindet der äusserste Container.
Wenn ich nur die Navi mit right floate (float: right), ist zwar der Inhalt im äussersten Container drinn, die Navi bleibt aussen rechts. Zur illustration: http://www.mypage.bluewin.ch/Hermes/div.htm
Meine Frage: Wie bring ich den Inhalt und die Navigation in den äussersten Container hinein? Der 'Übercontainer' soll zentriert sein und die gleiche länge haben wie der längste container in seinem inneren (Inhalt oder Navi). Der Inhalt soll links, die Navi rechts sein.
Die Ausgangsversion, wie oben schon gesagt, habe ich temorär hochgeladen: http://www.mypage.bluewin.ch/Hermes/div.htm
Herzlichen Dank für eure Hilfe!
Code fürs Forumsarchiv:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>div...</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex,nofollow" />
<style type="text/css" media="screen" /><!--
body {
background-color: #555;
color: #aaa;
font: 11px Verdana, Arial, sans-serif;
}
#wrapper {
background: #555;
color: inherit;
margin: 25px auto 11px auto;
width: 760px;
border: 1px solid #777;
}
#content, #sidebar {
background-color: #666;
color: inherit;
border: 1px solid #777;
padding: 11px;
margin: 25px;
text-align: justify;
}
#content {
width: 30%;
margin: 0;
padding: 0;
}
#sidebar {
width: 30%;
float: right;
}
--></style>
</head>
<body>
<div id="wrapper">
<div id="content">
<p>ich möchte, dass die Sidebar auch im div-container <i>wrapper</i> drinn ist und zwar rechts vom container <i>content</i> (dieser container).</p>
</div>
<div id="sidebar">Sidebar</div>
</div>
</body>
</html>
-
Hallo Zenstar.
Folgende Situtation: Ich habe ein Container namens wrapper, der in der mitte der Seite zentriert ist. Nun möchte ich in diesen zwei weitere Container einfügen, einer für den Inhalt, der andere für die Navigation.
+-----------------------------+
| |
| +-------------+ +------+ |
| | | | | |
| | Inhalt | | Navi | |
| | | | | |Nun, die div's sind erstellt, es tritt jetzt aber das Problem auf, dass wenn ich z.B. die Navi nicht in den ersten Container rein bringe. Wenn ich beide innern container float, verschwindet der äusserste Container.
Natürlich, da sich in ihm ja keine zu berücksichtigenden Elemente mehr befinden. Du möchtest die „Wunderwaffe overflow“ nutzen.
Einen schönen Sonntag noch.
Gruß, Mathias
--
ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
debian/rules -
Hallo,
Wenn ich beide innern container float, verschwindet der äusserste Container.
Logisch, denn mit 'float' nimmst du die Elemente aus dem Textfluß, d.h. sie werden von anderen Elementen nicht mehr erkannt, und somit beim Seitenaufbau auch nicht mehr berücksichtigt.
Du brauchst also ein
<div style="clear:both"></div> als letzte Element in dem umschließenden Container.Grüße
gaby-
Ich habe noch etwas vergessen.
Folgende Situtation: Ich habe ein Container namens wrapper, der in der mitte der Seite zentriert ist. Nun möchte ich in diesen zwei weitere Container einfügen, einer für den Inhalt, der andere für die Navigation.
Nun, die div's sind erstellt, es tritt jetzt aber das Problem auf, dass ich z.B. die Navi nicht in den ersten Container rein bringe.
Deine erste Box innerhalb des 'wrapper' ist die contentbox, die, - wie jedes Block-Element, - einen Zeilenumbruch verursacht.
Deine sidebar fängt also auf jeden Fall _unterhalb_ der contentbox an, wird aber vom wrapper nicht erkannt, und demnach auch nicht umschlossen, da sie, wie schon gesagt, aus dem Textfluß genommen ist.Vertausche im HTML-Quellcode die Positionen von contentbox und sidebar.
(das clear am Ende aber trotzdem nicht vergessen) ;-)
Grüße
gaby-
Hallo.
Deine erste Box innerhalb des 'wrapper' ist die contentbox, die, - wie jedes Block-Element, - einen Zeilenumbruch verursacht.
Deine sidebar fängt also auf jeden Fall _unterhalb_ der contentbox an, wird aber vom wrapper nicht erkannt, und demnach auch nicht umschlossen, da sie, wie schon gesagt, aus dem Textfluß genommen ist.Vertausche im HTML-Quellcode die Positionen von contentbox und sidebar.
Kann mir jmd. erklären, warum nach dem Tausch von #sidebar und #content das Problem behoben wird? Ich meine: Wieso ist der negative Effekt ( nicht erkannt zu werden, weil nicht mehr im Textfluss) nicht mehr vorhanden? Müsste jetzt nicht sidebar einen Zeilenumbruch verursachen?
(das clear am Ende aber trotzdem nicht vergessen) ;-)
Danke.
MfG.
-
-
-
Echt super! Herzlichen Dank!