05.04.2005, 17:17
|
|||
|
|||
Container mit 2 Container darin -> Hintergrund anzeigen
Ich habe folgendes Problem:
ich habe 2 Container (Navigation & Seiteninhalt) in einem Container gepackt, da ich eine zentrierte Hintergrundgrafik benötige (bevor wieder jemand fragt *G*). Nun das Problem: wenn ich bei der Navigation den Float rechts einstelle ist zwar der Seiteninhalt auf gleicher Höhe, aber dafür wird der große Container mit dem Hintergrundbild nicht mehr aufgefüllt. Wie kann man diesen dazu bringen, trotz keinem Inhalt außer der beiden Container die Hintergrundgrafik an zu zeigen? Habe das nun erst mal mit festen Größen realisiert, ist aber nicht so wie ich das gerne hätte. Code:
div#Flash {
height: 251px;
width: 756px;
margin: 0 auto;
}
div#Mitte {
text-align: left;
height: auto;
width: 756px;
margin: 0 auto;
background: url(images/back.jpg) repeat-y;
}
div#Footer {
clear: left;
height: 66px;
width: 756px;
margin: 0 auto;
background-image: url(images/end.jpg);
background-position: center;
}
div#Navigation {
float: left;
height: auto;
width: 200px;
margin: 0 0 0 30px;
}
div#Content {
height: auto;
width: 500px;
}
|
| Sponsored Links |
|
05.04.2005, 17:58
|
|||
|
|||
|
Re: Container mit 2 Container darin -> Hintergrund anzeig
Zeig mal auch deinen (X)-HTML-Teil - am besten in Form eines vollständigen Quelltextes mit eingebundenem Stylesheet, so dass man den Code komplett kopieren und testen kann.
Grüße fricca
|
| Sponsored Links |
|
05.04.2005, 18:56
|
|||
|
|||
|
So, ich habe jetzt eine Besipielseite ohne Bilder und extremen Farben gemacht. Im äußeren Container (um den es hier geht) habe ich ein eingefügt, um zu verdeutlichen das er sonst nicht auftauchen würde.
Vielen Dank im Vorraus an jeden, der sich das anschaut! Code:
<!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-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html {
padding: 0;
}
body {
margin: 0; padding: 0;
text-align: center; /* zentrieren im IE */
font-family: verdana, lucida, arial, helvetica, sans-serif;
font-size: 11px;
}
div#Flash {
height: 251px;
width: 756px;
margin: 0 auto;
background-color: #CCCCCC;
}
div#Mitte {
text-align: left;
height: auto;
width: 756px;
margin: 0 auto;
/* background: url(images/back.jpg) repeat-y; */
background-color: #F6BA5A;
}
div#Footer {
clear: left;
height: 66px;
width: 756px;
margin: 0 auto;
/* background-image: url(images/end.jpg); */
background-position: center;
background-color: #000000;
}
.footer {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #979797;
}
div#Navigation {
float: left;
height: auto;
width: 200px;
margin: 0 0 0 30px;
background-color: #FF0000;
}
div#Content {
float: left;
height: auto;
width: 500px;
background-color: #990000;
}
-->
</style>
</head>
<body>
<div id="Flash"></div>
<div id="Mitte">
<div id="Navigation">
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
NAVIGATION NAVIGATION
</div>
<div id="Content">
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT BLINDTEXT
</div>
</div>
<div id="Footer" class="footer">
Copyright
</div>
</body>
</html>
|
|
05.04.2005, 19:01
|
|||
|
|||
|
Zitat:
Zu deinem Problem: Wenn du den Footer als clearendes Element einsetzen willst, dann muss er sich noch innerhalb des Elementes befinden, das die floatenden umschließt. Bei dir also ein </div> höher. BTW: wozu gibt es eine Klasse und eine ID footer? Grüße fricca
|
|
05.04.2005, 19:18
|
|||
|
|||
|
ok, vielen Dank!
Das es so einfach war, hätte ich jetzt nicht gedacht. Hatte zwar schon so einige Variationen ausprobiert, aber natürlich nicht diese *grrr* BTW: Die Klasse war nur zum testen.
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Anfängerfrage: Zentrierung in Galerie und Border-Problem | goldbeere | CSS | 3 | 04.11.2013 20:07 |
| Bei :hover irgendeinen Container anzeigen lassen | schrepfer | CSS | 1 | 09.05.2009 19:05 |
| Div Orientierung | Leonidus | CSS | 22 | 30.05.2007 18:05 |
| Probleme mit Container - Hintergrund | monti | CSS | 2 | 05.11.2005 13:40 |
| Container nimmt nicht die Höhe seines Inhalts an | Lestat | CSS | 10 | 04.08.2005 14:47 |
Linear-Darstellung
