Verschachtelte transparente divs mit inhalt, BG-image dennoch nicht sichtbar ?

bastien · #1 (**permalink**) 22.05.2007, 23:39

Hallo,

<div id="wrapper">
<div id="leftdiv"></div>
<div id="rightdiv"></div>
</div>

#wrapper {background-image:url(../images/borders.jpg);
background-repeat:repeat-y;}

die id "leftdiv" + "rightdiv" bzw. dessen div container enthalten jede menge text und bilder die die höhe der beiden divs nach oben schraubt. Beide Divs haben background-color:transparent; dennoch ist das hintergrundbild des wrappers nicht zu sehen? Erst wenn ich dem wrapper div height:1000px z.B. zuweise ist das hintergrundbild sichtbar?

Ich war immer der Ansicht der Inhalt eines divs macht die height aus in dem Fall geben die beiden Divs die Höhe des divs wrapper vor. Scheint aber dennoch nicht so zu sein, sonst wäre ja das BG-image sichtbar wenn ich keine explizite height-angabe machen ??!!

Link kann ich keinen geben da die site hinter .htaccess entwickelt wird sorry. Aber Beispiel lässt sich auch so nachvollziehen...

heiko_rs · #2 (**permalink**) 22.05.2007, 23:40

FAQ Punkt 2

bastien · #3 (**permalink**) 23.05.2007, 08:58

Zitat:

Zitat von heiko_rs

FAQ Punkt 2

Zitat:

Container ragen aus anderen heraus - Clearing floats/Easy Clearing/Clearen ohne Markup

obiges ist aber nicht mein Problem, denn bei mir ragen keine divs heraus!

andip · #4 (**permalink**) 23.05.2007, 10:37

Zitat:

Zitat von bastien

denn bei mir ragen keine divs heraus!

sicher? left- und right-div sind doch sicherlich gefloatet. wenn du nach den floatenden elementen auf keine weise clearst werden die elemente nicht vom wrapper umschlossen und somit ragen die beiden divs innerhalb aus wrapper hinaus.

dottore:skin · #5 (**permalink**) 23.05.2007, 11:25

floate auch mal deinen wrapper....
damit der sich um deine beiden divs legen kann...und die divs sollten auch was drinne haben, damit du auch nen bg-image sehen kanns.t..

bastien · #6 (**permalink**) 23.05.2007, 11:31

Zitat:

Zitat von maccaroni

sicher? left- und right-div sind doch sicherlich gefloatet. wenn du nach den floatenden elementen auf keine weise clearst werden die elemente nicht vom wrapper umschlossen und somit ragen die beiden divs innerhalb aus wrapper hinaus.

richtig sind beide gefloatet und gecleared!

der div footer unterhalb des wrapper divs hat diesen code:

Zitat:

#footer {text-align:center;
background-image:url(../images/footer.jpg);
background-repeat:no-repeat;
padding-top:20px;
height:42px;
width:900px;
clear:both;
}

Zitat:

Zitat von dottore:skin

floate auch mal deinen wrapper....
damit der sich um deine beiden divs legen kann...und die divs sollten auch was drinne haben, damit du auch nen bg-image sehen kanns.t..

die beiden divs haben wie oben geschrieben jede menge text und bilder etc...

warum den wrapper floaten? macht doch keinen Sinn da er weder left noch right ist sondern mittig sprich links und rechts alles ausfüllt mit Platz, warum floaten?

oder sollte ich im wrapper clearen und nicht im footer ?

fricca · #7 (**permalink**) 23.05.2007, 11:43

bastien, du postest hier nicht zum ersten Mal.
Warum ignorierst du bewusst die Forenhinweise?

bastien · #8 (**permalink**) 23.05.2007, 12:02

Zitat:

Zitat von fricca

bastien, du postest hier nicht zum ersten Mal.
Warum ignorierst du bewusst die Forenhinweise?

wieso bewußt ? Ich habe doch code gepostet? nur das Wort "kompletten..." habe ich übersehen...

index.php:

Code:

<?php 
ob_start();
    //error_reporting(E_ALL);
	//ini_set('display_errors', 'On'); 
    include "php/config.php"; // die Konfigurationsdateien lesen.
#	include "kontakt/index.php";
?>
<!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">

<head>
    <title>blubb</title>
	<!--<link rel="shortcut icon" href="gif/w3c-xhtml.gif" type="image/x-icon" />-->    
<link rel="stylesheet" href="css/index.css"    type="text/css" media="screen" />  
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
	
</head>
<body>
<div id="main">

<div id="logo"></div>
<div id="menu">horizontal menu bar</div>
<div id="navigation">navigation links</div>
<div id="wrapper">
<div id="left">
<div id="productscontent">

<ul id="products">
<li><a href="http://www.meinsite.net/contact">Contact us</a></li>
<li><a href="http://www.meinsite.net/imprint">Imprint</a></li>
<li><a href="http://www.meinsite.net/terms">Terms & Conditions</a></li>
<li><a href="http://www.meinsite.net/links">Links</a></li>

</ul>
</div>
<div id="lang">Language: <img src="images/gb.gif" alt="" />  <img src="images/de.gif" alt="" /></div>
<a href="http://www.meinsite.net/projectsvisualisations">Visuals</a>
<a href="http://www.meinsite.net/addthesea">ADS</a>
<a href="http://www.meinsite.net/splinepack">SP</a>
<a href="http://www.meinsite.net/patchit">PI</a>
<a href="http://www.meinsite.net/3dcam">3DC</a>
</div>

<div id="content"><?php include "php/content.php"; ?></div>	
</div>

<div id="footer">
<span id="copyright">Copyrights 2007  / Alle Rechte vorbehalten / <a href="http://www.meinsite.net" >meinesite.Net</a></span>
<a href="http://validator.w3.org/check?uri=referer" >XHTML</a>	   		
<a href="http://jigsaw.w3.org/css-validator/">CSS</a>
<a href="http://www.meinsite.net/order">Order</a>
</div>
</div>

</body>  
</html>

Code:

index.css:

/*----------------------------------------- Layout Start -------------------------------------------*/
* {
margin: 0;
padding: 0;
font-size:12px;
color:#0099ff;
font-family:Arial, Helvetica, sans-serif;}

* a {font-weight:bold;	
	outline-style:none;}

* #content a:visited, #content a:link, #footer a:visited, #footer a:link {text-decoration:underline;}
* #content a:hover, #content a:active, #footer a:hover, #footer a:active {text-decoration:none;}

* img{/*vertical-align:bottom;*/
      border:none;}

/*------------------------------------------ Interface Start ------------------------------------------------*/

body {margin:15px;
background-image:url(../images/linie.jpg);
background-repeat: repeat-x;
/*background-attachment: fixed;*/}

p#copyright {color:#0099ff;
text-align:center;}

#main {
	width:900px;		
	background-color:#fff;	
	margin:auto;}

#logo {
	height:200px;
	width:900px;
	background-color:#404040;
	background-image:url(../images/logo1.jpg);
	background-repeat: no-repeat;
}

/*
#menufooter {height:66px;clear: left;}  clear da unter dem menu ist wo gefloatet wurde...*/

#menu {height:20px;
width:900px;
background-color:#0099CC;
color:#FFFFFF;}

#navigation {height:20px;
width:900px;
background-color:#00CCFF;
color:#fff;}

#wrapper {background-image:url(../images/borders.jpg);
	background-repeat:repeat-y;	}

#left {width:200px;
height:500px;
/*border-left:1px solid #00ccff;*/
float:left;
/*background-image:url(../images/notepaper.jpg);
background-repeat: no-repeat;
background-position:20px 0px;*/
background-color:transparent;}

#content {float:right;
width:700px;
/*background-image:url(../images/blauelinie.jpg);
background-repeat:repeat-x;*/
background-color:transparent;}	

#footer {text-align:center;
background-image:url(../images/footer.jpg);
background-repeat:no-repeat;
padding-top:20px;
	height:42px;
	width:900px;
	clear:both;	
}

#footer a {
margin-right: 10px;
margin-left:10px;}
/*--------------------------------------- Interface End --------------------------------------------*/

/*--------------------------------------- Left Start -----------------------------------------------*/
#products li{margin-left:50px;
margin-top:20px;}

#products{margin-top:100px;}

#productscontent{margin-top:30px;
height:300px;}

#lang {margin-left:40px;
margin-top:10px;}

/*--------------------------------------- Left Ende ------------------------------------------------*/
/*--------------------------------------- Layout End -----------------------------------------------*/
/*-------------------------------------- Div Home start --------------------------------------------*/
#home {margin-left:50px;
margin-top:25px;;
margin-right:50px;}

#home p {margin-bottom:20px;	}
/*-------------------------------------- Div Home end ----------------------------------------------*/  

/*-------------------------------------- Menue Bar Start -------------------------------------------*/
/*-------------------------------------- Menue Bar Ende --------------------------------------------*/


/*------------------------------------- Formular start ---------------------------------------------*/
#contactbox {width:425px;
margin-left:55px;}

#contactbox form {padding-right:25px;}
		
#contactbox form p{font-size:14px;
margin-bottom:40px;}

.header {
	position:relative;
	font-weight:bold;
	border:1px solid #ccc;
	top:8px;
	left:20px;
	padding:5px;
	background-color:#FFFF99;
} 

#contactbox .submit input {background-color:#ffdd00;
border:1px solid #ccc;
padding:5px;
width:80px;
height:30px;
font-weight:bold;}  

#contactbox input {width:240px;
border:1px solid #ccc;
background-color:#ffdd00;
margin: 5px 20px 5px 0px;}

#contactbox label {width:110px;
float:left;
margin: 5px 10px 5px 10px}

#contactbox .captchainput {width:80px;
background-color:#ffff99;}

#contactbox #captchalabel {width:270px;
float:left;}

#contactbox textarea {width:345px;
margin-bottom:10px;
margin-left:10px;
margin-right:0px;
border:1px solid #ffff99;
height:80px;
overflow:hidden;
padding:10px;
background-color:#ffdd00;}

#contactbox #form div br {clear: left;}

#contactbox form div {border:1px solid #0099ff;
background-color:#fff;
margin-bottom:25px;
padding-top:30px;}

#clearformular {clear:both;}
/*
#errormsghide */
.error {border:1px solid #FF9900;
margin-top:40px;
text-decoration:blink;
font-weight:bold;
padding:10px; }

/*-------------------------------------- Div Contactbox end ----------------------------------------*/
/*-------------------------------------- Impressum Start -------------------------------------------*/

#impressum {padding: 25px 25px 25px 25px;}

#impressum td{color:#0099ff;}

/*-------------------------------------- Impressum Ende --------------------------------------------*/

/*---------------------------------------- AGB Start -----------------------------------------------*/
#agb p {font-size:14px;
margin-top:5px;
margin-bottom:5px;
font-weight:bold;} 

#agb span {color:#0099dd;
margin-top:30px;}
/*----------------------------------------- Div Container Innenabstand -----------------------------------------------*/

/*------------------------------------------------------ AGB Ende-----------------------------------------------------*/

/*---------------------------------------------------- Order Start ---------------------------------------------------*/
#order {color:#0099dd;}

#order table {border:1px solid }

/*---------------------------------------------------------- Order Ende ----------------------------------------------*/
h2 {border-bottom:1px dotted #0033ff;
color:#0033FF;
margin-bottom:20px;
margin-top:20px;} 

.extracontent {margin-right:10px;
background-color:#FFFF99;
padding:8px;
border:1px solid #0099ff;}

#paypalbutton {display: table-cell;
margin-left:20px;
vertical-align:middle;}

.legal {color:#FF9900;}

p {margin-bottom:10px;
margin-top:10px;}

#products li a {margin-left:0px;}

.firstcolumn {font-weight:bold;width:40%;}

li {margin-left:15px;}

li a {margin-left:20px;}

h1 {font-size:18px;
font-weight:bold;
margin-bottom:30px;
color:#0033ff;
text-align:center;}

#dreidcam span img {display:block;}

#dreidcam p {margin-top:15px;
margin-bottom:15px;}

#p1 {font-weight:bold;
display:block;}

/*----------------------------------------- addtheseavideotutorials Start ----------------------------------------*/

#addtheseavideotutorials th {background-color:#FFFFdd;padding:5px;}
#addtheseavideotutorials tr {background-color:#FFFFee;}
#addtheseavideotutorials tr img{display:block;}

fricca · #9 (**permalink**) 23.05.2007, 12:13

Zitat:

Zitat von bastien

wieso bewußt ? Ich habe doch code gepostet? nur das Wort "kompletten..." habe ich übersehen...

Warum bewusst? Wegen deiner Aussage mit dem Smily. Nein, Codeschnipsel genügen nicht zum nachvollziehen.
Jetzt hast du sicher auch nur überlesen, dass du deinen Code auf das reduzieren solltest, was zum Nachvollziehen des Problems nötig ist. Ungeparstes PHP gehört ganz sicher nicht dazu, ebensowenig der größte Teil des Stylesheets, das du hier abwirfst. Du hast ein Problem mit einem Hintergrundbild - wer kann deine Hintergrundbilder sehen?

Was in den Artikeln unter FAQ 2 steht hast du auch noch immer nicht gelesen und angewendet. dottore:skin hat dir sogar eine der möglichen Lösungen auf dem Silbertablett serviert, die du lieber hinterfragst als sie auszuprobieren.

heiko_rs · #10 (**permalink**) 23.05.2007, 12:46

Zitat:

Zitat von bastien

richtig sind beide gefloatet und gecleared!

der div footer unterhalb des wrapper divs hat diesen code:

Zu spät, der Footer muß in den Wrapper.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS-Layout der Browsergröße anpassen	Jen	CSS	3	14.11.2008 08:39
Problem mit position:relative;	McCoRmIcK	CSS	0	08.04.2007 16:23
dreispaltiges layout, footer soll immer mitwandern	sirrpa	CSS	14	24.11.2005 18:57
div box bekomme ich nett zentriert???	Hard@Bowl	CSS	1	23.05.2005 11:22
height: 100% beim IE	[M.o.C]Co	CSS	3	12.05.2005 12:58