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

Problem mit Hintergrundfarbe / CSS

M

macingosh

Neues Mitglied
Hallo, nachdem ich jahrelang völlig obsolet und oldschool meine Tabellen gebastelt habe, bin ich inzwischen auf div-container und CSS umgestiegen. Hat beim ersten Projekt auch bis jetzt ganz gut geklappt, nur mit dem Hintergrund habe ich Schwierigkeiten, so banal es auch klingt und wahrscheinlich auch ist.

Die Seite habe ich testhalber hier hochgeladen.

Ich hätte gern einfach einen weißen, zentrierten Hintergrund für den Content-Bereich. Wenn ich versuche, die wrapper mit background-color oder einfach background einzufärben passiert meistens nichts. Beim top-wrapper läufts einwandfrei, beim footer-wrapper erscheint der Hintergrund dann hinter der Menüleiste. In den anderen Bereichen tut sich gar nichts.
Inzwischen habe ich alle mir bekannten Möglichkeiten durchprobiert und komme trotzdem nicht weiter.

Woran kanns liegen?

html:

<!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>TESTFELD Consulting</title>
<meta name="author" content="author">
<meta name="revisit-after" content="1 days" />
<meta name="robots" content="ALL" />
<meta name="robots" content="index, follow" />

<!-- Facebook information -->
<meta property="og:title" content="title" />
<meta property="og:description" content="property" />

<!-- Stylesheet -->
<link type="text/css" rel="stylesheet" href="formate.css">
</head>
<body>

<div class="topwrapper">
<div id="logo">
</div>
<div align="right" class="fliesstext" id="ueberschrift">
Research + Developement Consulting
</div>
<div id="linie1">
</div>
<div id="banner_home">
</div>
<div id="linie2">
</div>
</div>

<div class="navigation">
<div id="menu"><!-- öffnet die Navigationsleiste -->
<ul>
<li><a class="direkt" href="index.html">HOME</a></li>
</ul>
<ul><!-- öffnet den Themenblock BERATUNG -->
<li><!-- öffnet die Listeneinträge von Beratung -->
<h3>BERATUNG</h3>
<ul><!-- öffnet die Klappnavi von BERATUNG -->
<li><a href="beratung_innovationsmanagement.html">Innovationsmanagement</a></li>
<li><a href="beratung_produktdefinition.html">Produktdefinition</a></li>
<li><a href="beratung_produktentwicklung.html">Produktentwicklung</a></li>
<li><a href="beratung_entwicklungsorganisation.html">Entwicklungsorganisation</a></li>
</ul><!-- schließt die Klappnavi von BERATUNG -->
</li><!-- schließt die Listeneinträge von BERATUNG -->
</ul><!--schließt den Themenblock BERATUNG -->
<ul>
<li><a class="direkt" href="branchen.html">BRANCHEN</a></li>
</ul>
<ul>
<li><a class="direkt" href="ergebnisse.html">ERGEBNISSE</a></li>
</ul>
<ul>
<li><a class="direkt" href="kontakt.html">KONTAKT</a></li>
</ul>
</div><!-- schließt die Menüleiste #menu -->

<div style="clear: both;"> </div> <!-- klärt die Menüleiste -->
</div><!-- schließt die Navigationsleiste -->

<div class="contentwrapper">

<div id="linie3"> </div>

<div class="fliesstext" id="content_links">
TEXTTEXTTEXT
<ul>
<li>
Listenpunkt 1
</li>
<li>
Listenpunkt 2
</li>
<li>
Listenpunkt 3
</li>
<li>
Listenpunkt 4
</li>
</ul>
TEXTTEXTTEXT

</div>
<div class="fliesstext" id="content_rechts">
TEXTTEXTTEXT

</div>
</div>

<div class="footerwrapper">

<div id="linie4">
</div>
<div id="footer">
<div><a href="mailto:[email protected]" class="fliesstext">[email protected]</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="fliesstext">Mobil: 0151 xx xx xx xx</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="fliesstext">Fax: 03212 xxx xx xx</span></div>
</div>
<div id="linie5">
</div>

<div id="impressum" align="right"><a href="impressum.html" class="fliesstext">IMPRESSUM</a></div>

</div>

</body>
</html>



Und hier CSS:

@charset "UTF-8";
/* CSS Document */

body {
background-image: url(Bilder/hintergrund.png);
background-repeat: repeat-x;
padding: 0;
margin: 0;
}

.fliesstext {
font: normal 13px Verdana, Geneva, sans-serif;
color: #666666;
}

a.fliesstext:link {
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
color: #999999;
text-decoration: none;
}

a.fliesstext:hover {
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
color: #666666;
}

/*--Setzt alle Abstände auf "Null"--*/
* {
margin: 0;
padding: 0;
}

/*--formatiert die Menüleiste--*/
#menu {
width: 950px;
padding: 0 20px;
background: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
line-height: 1.5;
float: left;
}

/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
width: 190px;
list-style-type: none;
}

/*--definiert die Blocküberschriften--*/
#menu h3 {
font-size: 14px;
text-align: center;
color: #999999;
border: 0px solid #999999; /*--erforderlich für IE 7--*/
background: #ffffff;
font-weight: normal;
}

/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: list-item;
border: 0px solid #999999;
text-align: left;
background: #ffffff;
color: #999999;
font-size: 13px;
padding-left: 5px
}

/*-- definiert die "Drop-Down-Links" im Hoverzustand --*/
#menu a:hover {
color: #666666;
background: #ffffff;
padding-left: 5px;
}

/*-- definiert einen Einzellink ohne Drop-Down im Normalzustand --*/
#menu a.direkt:link {
font-size: 14px;
font-weight: normal;
text-align: center;
color: #999999;
border: 0px solid #cccccc;
background: #ffffff;
}

/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:hover {
color: #666666;
background: #ffffff;
border: 0px solid #666666;
}

/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/

#menu li {
position: relative;
}

/*-- versteckt die "Drop-Down-Links", solange nicht gehovert wird --*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}

/*-- lässt die Dropdown-Links beim Hovern erscheinen --*/
#menu ul li:hover ul {
display: block;
}

/*-- nur für IE-Versionen kleiner gleich 6 --*/
* html #menu ul li {
float: center;
width: 960px;
}

/*-- nur für IE 7 --*/
*+ html #menu ul li {
float: center;
width: 960px;
}

/*-- bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente --*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 960px;
}

*html #menu ul li a {
height: 1%;
}

.topwrapper {
height: 159px;
width: 960px;
margin: auto;
background: #FFF;
}

#logo {
background-image:url(Bilder/logo.png);
width:220px;
height:60px;
margin: 45px 0 20px 10px;
float:left;
}

#ueberschrift {
width: 400px;
height: 18px;
float: right;
margin-top: 88px;
margin-right: 10px;
}

#linie1 {
background-image:url(Bilder/linie.png);
width: 960px;
height: 1px;
float: left;
margin: 10px 0 10px 0;
}

#linie2 {
background-image:url(Bilder/linie.png);
width: 960px;
height: 1px;
float: left;
margin: 20px 0 1px 0;
}

#linie3 {
background-image:url(Bilder/linie.png);
width: 960px;
height: 1px;
float: left;
margin: 1px 0 10px 0;
}

#linie4 {
background-image:url(Bilder/linie.png);
width: 960px;
height: 1px;
float: left;
margin: 20px 0 5px 0;
}

#linie5 {
background-image:url(Bilder/linie.png);
width: 960px;
height: 1px;
float: left;
margin: 5px 0 5px 0;
}

#banner_home {
background-image:url(Bilder/banner_home.png);
width: 960px;
height: 167px;
float: left;
}

#banner_beratung {
background-image:url(Bilder/banner_beratung.png);
width: 960px;
height: 167px;
float: left;
}

#banner_branchen {
background-image:url(Bilder/banner_branchen.png);
width: 960px;
height: 167px;
float: left;
}

#banner_ergebnisse {
background-image:url(Bilder/banner_ergebnisse.png);
width: 960px;
height: 167px;
float: left;
}

#banner_kontakt {
background-image:url(Bilder/banner_kontakt.png);
width: 960px;
height: 167px;
float: left;
}

#banner_impressum {
background-image:url(Bilder/banner_impressum.png);
width: 960px;
height: 167px;
float: left;
}

.navigation {
height: 159px;
width: 960px;
margin: auto;
}

.contentwrapper {
margin: auto;
width: 960px;
background-color: #FFF;
}

#content_links {
width: 450px;
margin: 10px 10px 10px 20px;
float: left;
}

#content_rechts {
width: 450px;
margin: 10px 20px 10px 10px;
float: right;
}

.footerwrapper {
margin: auto;
width: 960px;
height: 88px;
background-color: #FFF;
}

#footer {
width: 960px;
padding: 0 20px;
font-family: Verdana, Geneva, sans-serif;
float: left;
}

#impressum {
width: 960px;
height: 20px;
padding: 0 20px;
font-family: Verdana, Geneva, sans-serif;
float: right;
}

Besten Dank im Voraus.
 
Gibt der Klasse "contentwrapper" noch die Eigenschaft

Code: 
overflow: hidden;

Dadurch erhält der Bereich, dem Du ja bereits eine Hintergrundfarbe gegeben hast, eine Höhe die er vorher nicht hatte da Du die beiden darin liegenden Inhalte floatest.

Hinweis: Du solltest dringend noch den Zeichensatz deiner Seite kontrollieren.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben