• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Div-Hintergrundfarbe nicht einstellbar...

S

soigroeg

Neues Mitglied
Hallo Mitleidende,

ich hoffe jemand kann mir einen Tipp geben, da die Sachen mal wieder nicht so funktionieren, wie sie eigentlich sollten.

Ich erstelle gerade diese Homepage:
Geladaris Immobilien

Das Problem:
Ich habe um den Body-Raum herum ein Div-Tag namens #wrapper erstellt, welches um den Footer herum bis an das Ende der Seite geht. Der Hintergrund soll #FFFFFF sein.
Allerdings will der Hintergrund des Div-Tags nicht wie es soll.

Es bleibt im Browser einfach ohne Backgroundcolor des Div-Tags.
Ich hoffe jemand kann mir einen Tipp geben, wo der Fehler leigen könnte.

Hier der Quellcode und die CSS-File:
HTML: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Geladaris Immobilien</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
<style type="text/css">
<!--
body {
    background-image: url(images/bg-Geladaris.jpg);
    background-repeat: repeat;
}
-->
</style>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>

<body onload="MM_preloadImages('images/buttons/Impressum 2.jpg','images/buttons/AGB 2.jpg','images/buttons/Copyright 2.jpg','images/buttons/3.1-Mieten-2.jpg','images/buttons/3.1-Kaufen-2.jpg','images/buttons/3.1-Vermieten-2.jpg','images/buttons/3.1-Verkaufen-2.jpg','images/buttons/1.2-Ueber-uns-2.jpg','images/buttons/1.1-Philosophie-2.jpg','images/buttons/0. Startseite 2.jpg','images/buttons/1. Geladaris-Immobilien-2.jpg','images/buttons/3. Immobilien-2.jpg','images/buttons/2. Project South-Europe 2.jpg','images/buttons/4. Hausverwaltungen-2.jpg','images/buttons/6. Versicherungen-2.jpg','images/buttons/5. Kapitalanlagen-2.jpg','images/buttons/7. Kontakt-2.jpg')">
<div id="wrapper">
    <div id="logo"><img src="images/GeladarisNeu2.png" width="322" height="146" /></div>
    <div id="body">
      <div id="left">
</div>
        <div id="image"></div>
        <div id="text"></div>
        <div id="angebote"></div>
      </div>
    </div><!-- div id="body" -->
    <div id="footer">Raum für den Inhalt des neuen Div-Tags</div>
    
</div> 
<!-- div id="wrapper" -->
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
//-->
</script>
</body>
Code: 
* {
    margin: 0px;
    padding: 0px;
}
a {
    margin: 0px;
    padding: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
#wrapper {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
}
#wrapper #logo {
    background-color: #FFFFFF;

}
#wrapper #body #left {
    height: 300px;
    width: 170px;
    float: left;
}
#wrapper #body #right #image {
    width: 830px;
    height: 137px;
    float: right;
    background-image: url(../images/images.jpg);
}
#wrapper #body #right #navigationUP {
    height: 30px;
    width: 830px;
    float: right;
    background-image: url(../images/buttons/button-bg.jpg);
    background-repeat: repeat-x;
}

#wrapper #body #right #text {
    background-color: #F00;
    float: left;
    height: 100px;
    width: 660px;
}
#wrapper #body #right #angebote {
    background-color: #FF0;
    height: 200px;
    width: 170px;
    float: right;
}
#wrapper #footer {
    float: right;
    height: 30px;
    width: 1000px;
    background-image: url(../images/buttons/button-bg.jpg);
    background-repeat: repeat-x;
}
 
Danke für den Tipp.

Es wäre jedoch schön, die Seite flexibel zu gestalten (dass sich der wrapper an den Inhalten richtet, quasi so wie es jetzt ist), da ich daraus ein Template bauen möchte.
 
Wer floatet muss auch clearen. Heißt: ergänze nach den floatenden Elementen auch ein Element, welches "clear: both;" enthält. Dadurch erhält das umgebende #wrapper wieder eine Höhe und die Farbe ist zu sehen.
 
Edit: Danke für die Tipps... der Einfall mit dem "clearen" ist mir komischerweise zur gleichen Zeit gekommen... Trotzdem vielen vielen Dank!!

LÖSUNG:
Hab den Fehler doch noch selbst gefunden:
Das CSS beim Footer-Div-Tag muss so aussehen:
#wrapper #body #footer {
clear: both;
height: 30px;
width: 1000px;
background-image: url(../images/buttons/button-bg.jpg);
background-repeat: repeat-x;

Hatte vergessen "clear: both;" einzutragen...
Trotzdem danke für's helfen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben