| Autor |
Nachricht |
Raisis
Threadersteller
Dabei seit: 07.08.2006
Ort: Dresden
Alter: 35
Geschlecht: 
|
Verfasst So 12.07.2009 17:13
Titel Div rutscht in anderen Div |
  |
|
Hallo zusammen,
ich habe ein kleines Problem mit einem Layout, das ich gerade umsetzen möchte und versuche es mal zu erklären, in der Hoffnung, dass jemand einen Rat hat.
Hier eine Skizze des Layouts:
http://www.abload.de/image.php?img=010ovt.jpg
Es gibt einen großen Div-Container, der den ganzen Inhalt umfasst. Darin sind zwei weitere Container (einer für den Inhalt und einer für eine Sidebar). Ganz unten ist dann noch ein Div-Container für den Footer-Bereich.
Die CSS-Definitionen dafür sind:
| Code: |
#inhalt {
width: 960px;
margin: 0 auto;
}
#hauptinhalt {
width: 650px;
margin-right: 58px;
float: left;
}
#sidebar {
width: 250px;
height: 200px;
margin-left: 708px;
}
#footer {
background-color: #1c5779;
width:100%;
height: 200px;
margin-top: 10px;
border-top: 1px solid #000000;
padding: 0px;
}
|
Ein Clear-Div ist nach den beiden Div-Containern ebenfalls noch untergebracht. Wenn nun im eigentlichen Inhaltsbereich (der linke Div-Container, #hauptinhalt) Inhalt hinzukommt und der Container damit größer wird, schiebt er den Footer wie gewollt nach unten. Ist die Sidebar jedoch größer als der linke Inhalt, ragt diese über den Footer-Div.
Das Ganze sieht dann also nicht so aus, sondern so. ich weiß nun leider nicht so ganz, wie ich erreiche, dass auch die Sidebar den Footer-Bereich nach unten schiebt und stehe so leicht auf dem Schlauch. Hat da jemand eine Idee?
[edit Kash: Verschoben von Programmierung -- HTML/CSS sind keine Programmiersprachen]
Zuletzt bearbeitet von Kash am So 12.07.2009 19:56, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
bANDSIGN
Dabei seit: 23.01.2008
Ort: Köln
Alter: 37
Geschlecht:
|
Verfasst So 12.07.2009 17:46
Titel
|
|
|
dein html:
| Code: | <div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div> |
deine css:
| Code: | #container {
width:500px;
background:#FF9;
}
#left {
width:400px;
background:#999;
float:left;
}
#right {
width:100px;
background:#ccc;
float:left;
}
#footer {
clear:both;
background:#eee;
} |
so sollte es klappen. größen etc musst de halt anpassne is logisch 
Zuletzt bearbeitet von bANDSIGN am So 12.07.2009 17:47, insgesamt 1-mal bearbeitet
|
|
| |
 |
|
|
Anzeige
|
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst So 12.07.2009 20:45
Titel
|
|
|
Hi ihr beiden
Kleine Korrekturen noch:
| bANDSIGN hat geschrieben: | | Code: | <div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div> |
deine css:
| Code: | #container {
width:500px;
background:#FF9;
[b]overflow:hidden;[/b]
}
#left {
width:400px;
background:#999;
float:left;
}
#right {
width:100px;
background:#ccc;
float:[b]right[/b];
}
#footer {
clear:both;
background:#eee;
} |
|
Dein Problem war beim Floaten, dass die Browser den gefloateten DIVs die Größe nicht entnehmen können, und damit der Container keine Höhe bekommt. Mit dem Hidden-Befehl ohne angegebene Höhe wird dieser Fehler behoben.
Gruß Daniel
|
|
| |
|
|
Raisis
Threadersteller
Dabei seit: 07.08.2006
Ort: Dresden
Alter: 35
Geschlecht:
|
Verfasst Mo 13.07.2009 10:59
Titel
|
|
|
Hallo,
Danke für eure Antworten, so wirklich hat jetzt leider keine davon funktionieren wollen. Ich habe es mit einer etwas unschöneren Möglichkeit gelöst: Ich habe der Sidebar einen Abstand nach unten in Höhe des Footers gegeben. So kann sie nicht in ihn hineinragen.
Vielen Dank dennoch,
Raisis
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[HTML/CSS] Probleme mit IE6, Text rutscht weg
text innerhalb eines divs rutscht runter
|
|
Willkommen auf dem Portal für Mediengestalter
