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

Wrapper ignoriert background-color

webfan

Neues Mitglied
hallo zusammen ich habe forgendes Problem:

der Wrapper in dem der ganze Pageinhalt ist, ignoriert Background angaben.

hier mal das html:
HTML:
<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Musterfirma - Ihr Partner für Musterbeschriftungen</title>
    <meta name="revisit-after" content="after 7 days" />
    <meta name="language" content="de" />
    <meta name="description" content="Musterfirma ist eine Dienstleistungsfirma im Breich     Musterbeschriftungen. Wir drucken für Sie Posters, Blachen, Schaufensterfolien und     Autofolien" />
    <meta name="keywords" content="Musterfirma, Dienstleistung, Musterbeschriftungen" />
    <meta name="robots" content="index,follow,noodp" />
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="wrapper">
      <div id="header">
        <img id="logo" src="musterlogo.jpg" alt="Musterfirma" />
      </div>
      <div id="content">
        <h2>Herzlich willkommen auf der Internetseite von Musterfirma</h2>
        <img id="bild1" src="musterfirma-logo.jpg" alt="Musterfirma schriftzug mit 
        kleinen Blauen Leuten untendrunter" />
        <p id="anfang">Musterfirma ist eine Dienstleistungsfirma im Bereich 
        Musterbeschriftungen.</p>
        <p>Hier finden Sie alle unsere Angebote und Preise.</p>
        <h2 id="neuer-abschnitt">Unsere beliebtesten Angebote:</h2>
        <img id="angebot1" src="angebot1.jpg" alt="Angebot nr. 1" />
        <h3 id="angebottext1">Posterdruck A2</h3>
        <p> Wir bedrucken Ihre Poster im Format A2. Dies ist die gängige Grösse der 
        Kundenstopper sowie den meisten Anzeigetafeln. Wir bieten diese Dienstleistung 
        bereits ab einem Stück an.</p>
        <img id="angebot2" src="angebot2.jpg" alt="Angebot nr. 2" />
        <h3 id="angebottext2">Flyderdruck A5</h3>
        <p> Wir bedrucken Ihre Flyer nach Ihren wünschen und vorstellungen im Format A5,
        im Digital- oder im Offsetdruck. Wir bieten diese Dienstleistung beireits ab 100 
        Stück an.</p>
         <img id="angebot3" src="angebot3.jpg" alt="Angebot nr. 3" />
         <h3 id="angebottext3">Visitenkarten</h3>
        <p> Wir bedrucken Ihre Visitenkarten nach Ihren wünschen und vorstellungen, oder 
        nach einer unseren verschiedenen Vorlagen. Wir bieten diese Dienstleistung 
        bereits ab 50 Stück an.</p>
        <p id="angebotende">Für weitere Druckgrössen sowie andere Drucksachen kontaktieren Sie uns bitte oder lassen Sie sich von uns zurückrufen.</p>
      </div>
      <div id="info">
       <h2>Aktuelles</h2>
       <p class="datum">21.10.2010</p>
       <ul class="ulnews">
         <li>Unsere neue Homepage ist online, wir haben grossen Wert auf bessere und 
         leichtere Bedienbarkeit gelegt.</li>
       </ul>
       <p class="datum">19.10.2010</p>
       <ul class="ulnews">
         <li>Ation im Bereich Musterbeschriftungen 9 x 9 Meter nur 49.- Fr. 
         statt 89.- Fr.</li>
       </ul>
       <p id="allenews">Alle News anzeigen</p>
       <p id="weiterefragen">Haben Sie weitere Fragen zu Ihrem Anliegen? Nehmen Sie mit uns Kontakt auf, 
       oder lassen Sie sich von uns zurückrufen, wir beraten Sie gerne.</p>
       
       <div id="formular">
            <?php include ($_SERVER['DOCUMENT_ROOT']."/kformular.php"); ?>
          </div>
      </div>
    </div>
  </body>
</html>

und hier das CSS:
Code:
@charset "iso-8859-1";
/* CSS Document */
* { padding:0; margin:0; }

body {
 background-image:url(background.jpg);
 font-size:0.875em;
 font-family:Arial, Helvetica, sans-serif;
 line-height:1.3em;
}
#wrapper {
 margin:0 auto;
 width:68.58em;
 background-color:white;
}
#header {
 margin-top:20px;
 width:68.4em;
 height:100px;
 background:#3366ff;
}
#content {
 padding: 0 1em 0 0;
 margin-top:5px;
 border-right:26em solid #C90;
 width:41.4em;
 float:left;
}

h2 {
 font-size:1.4em;
 margin:0.5em 0 0 1.8em;
}
#content #bild1 {
 float:left;
 margin:15px 15px 15px 5px;
}
#anfang{
 padding-top:15px;
}
 
#content #neuer-abschnitt{
 clear:both;
 margin:10em 0 0 8em;
}
 
#content #angebot1 {
 float:left;
 margin:25px 15px 15px 5px;
}
#angebottext1{
 padding-top:4em;
}
#content #angebot2 {
 clear:both;
 float:left;
 margin:0 15px 15px 5px;
}
#angebottext2{
 padding-top:5.4em;
}
#content #angebot3 {
 clear:both;
 float:left;
 margin:0 15px 15px 5px;
}
#angebottext3{
 padding-top:6em;
}
#angebotende{
 clear:both;
 padding:0 15px;
}
#info {
 float:right;
 margin-left:-26em;
 width:24.1em;
 padding:1em
}
#info h2 {
 margin-bottom:20px;
 font-size:1.4em;
 margin:0 0 15px 0;
}
.ulnews {
 margin-left:1.6em;
}
#allenews {
 margin-top:20px;
}
#weiterefragen {
 margin-top:40px;
}

Ich hoffe das mir da wer helfen kann, ich probier schon seit Stunden dran drum.
 
Ich glaube Du hast das <div> vom wrapper unten nicht wieder geschlossen. Ein Blick in den HTML-Validator sollte dir Hilfe bieten.
 
Ich glaube Du hast das <div> vom wrapper unten nicht wieder geschlossen. Ein Blick in den HTML-Validator sollte dir Hilfe bieten.

nein html und css ist korrekt habe schon validiert. alle anweisungen an wrapper funktionieren, auch color funktioniert nur komischerweise funktioniert background color und image nicht.
 
Hallo,

solche gewagten Angaben wie

margin-left:-26em;
ohne einen Sinn dahinter erkennen zu können, macht mich stutzig. Sowas sollte vermieden werden.

Deaktiviere mal beim #content das float: left; oder bei #info das float: right;.

Dann wirst du sehen, das die Hintergrundfarbe sehr wohl wie im css angewiesen erstellt wird, aber anschließend von den anderen Divs überlagert bzw. zusammengestaucht wird. Irgendwie hast du dich beim Floaten verlaufen bzw. bist dir über die Auswirkungen nicht so ganz klar.

Ich denke das ähnliches für die Hintergrundgrafiken gilt, aber das kann ich nicht testen.

Um den Wrapper überhaupt konkret ausmachen zu können, solltest du ihm testweise mal als Hintergrundfarbe red und ein padding von 2em mit auf den Weg geben. Dann kannst du gut sehen, das er sich zwar nicht wie von dir erwartet verhält, aber das css natürlich trotzdem umsetzt.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
die -26em dienen dazu, weil ich dem content ein border right von 26em gegeben habe, damit die rechte spalte wo die info rein kommt gleich lang ist wie der content, dann habe ich den content links geflotet, und die navi rechts, damit die info dann in den border rechts von content kommt, habe ich die info mit -26em hineingezogen.


Um den Wrapper überhaupt konkret ausmachen zu können, solltest du ihm testweise mal als Hintergrundfarbe red und ein padding von 2em mit auf den Weg geben. Dann kannst du gut sehen, das er sich zwar nicht wie von dir erwartet verhält, aber das css natürlich trotzdem umsetzt.

dass werde ich nun mal machen. danke und gruss
 
Zuletzt bearbeitet:
ach ich habs rausgefunden, ich habe das float vom div info, im div info selbst gecleart, anstatt in einem zusätzlichen container. da ich den footer nochnicht gemacht habe ist mir das ganze garnicht aufgefallen. vielen dank für eure Hilfe
 
versuch mal

HTML:
#wrapper {
 margin:0 auto;
 width:68.58em;
 background-color:white !important;
}

*edit:
Ah habe deinen letzen Beitrag überlesen ;)
 
Zurück
Oben