ilch Forum » Allgemein » HTML, PHP, SQL,... » Div Problem

Geschlossen
  1. #1
    User Pic
    ekie Mitglied
    Registriert seit
    25.04.2008
    Beiträge
    528
    Beitragswertungen
    7 Beitragspunkte
    Hallo,
    ich bin gerade bei ein Design umzusetzen.

    Jetzt habe ich dem ganzen einen Wrapper gegeben. Beim content angelangt wird aber der background (weiß) nicht mehr mitübernommen.

    Woran kann dies liegen?

    index:
    <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Premium HTML Theme</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <body>
    <!-- main -->
    <div id="maincontainer" class="shadow">
    <!-- Menü -->
    	<div id="menu">
    	<div class="sitename">Sitename.</div>
    	</div>
    <!-- Slideshow -->
    	<div id="slideschow" class="slideimage">
    		<div class="slidetext">Welcome to Our Website!</div>
    	</div>
    <!-- Content -->
    	<div id="content">
    	<!-- Sidebar-Left --> 
    		<div id="sidebar">
    			<div class="sidebarname">Sidebar</div>
    		</div>
    	<!-- Content-Text -->
    		<div id="contentbox">
    		Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. 
    		Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. 
    		Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. 
    		Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. 
    		Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. 
    		Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. 
    		Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. 
    		Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. 
    		Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. 
    		Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. 		
    		</div>
    	
    
    	</div> 
    </div>
    
    </body>
    </html>



    css:
    body {
    	background: url('images/background5.jpg') fixed no-repeat;
    	color: #000;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	margin: 30px;
    }
    
    #maincontainer {
    	width:960px;
    	height:auto;
    	background: #fff;
    	text-align: left;
    	margin: 0 auto;
    }
    
    .shadow {
    	-moz-box-shadow: 0 0 8px 0px #000;
    	-webkit-box-shadow: 0 0 8px 0px #000;
    	box-shadow: 0 0 8px 0px #000;}
    
    p {
    	color: #000;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	padding-bottom: 16px;
    }
    
    #menu {
    	width: 960px;
    	height: 35px;
    	background: #222;
    }
    
    .sitename {
    	font-family: "PT Sans";
    	font-size: 18px;
    	color: #3399FF;
    	text-align: left;
    	padding-top: 5px;
    	margin-left: 10px;
    	font-weight: bold;
    }
    #slideschow {
    	width: 960px;
    	height:280px;
    }
    
    .slideimage {
    	background: url('images/slideshow/slide3.jpg');
    	background-size: 100% auto;
    	background-position: 70% 75%;
    }
    
    .slidetext {
    	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    	font-size:24px;
    	color: #fff;
    	text-align: center;
    	padding: 40px;
    	font-weight: bold;
    }
    
    #content {
    	background: #fff;
    	width: 940px;
    	height: auto;
    	margin: 10px;
    	padding-bottom: 10px;
    	line-height: 20px;
    }
    
    #sidebar {
    	width: 200px;
    	height: auto;
    	float: left;
    }
    
    .sidebarname {
    	width: 200px;
    	height: 30px;	
    	background: #0066CC;
    	font-size: 14px;
    	font-weight: bold;
    	color: #fff;
    }
    
    #contentbox {
    	width: 720px;
    	height: auto;
    	float: left;
    	margin-left: 20px;
    }

    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Blaubaer Mitglied
    Registriert seit
    24.10.2009
    Beiträge
    331
    Beitragswertungen
    33 Beitragspunkte
    füge mal in deiner index.htm

    in zeile 40
     <div style="clear:both;"></div>

    ein dann sollte es funktionieren zunge
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Ahrtas Moderator
    Registriert seit
    17.12.2007
    Beiträge
    2.368
    Beitragswertungen
    210 Beitragspunkte
    Du kannst deinem Content auch
    display: inline-block;
    zuordnen.
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.425
    Beitragswertungen
    18 Beitragspunkte
    Es liegt daran, das die Eigenschaft der Hintergrundfarbe nicht bis zum content vererbt wird
    Nichts ist so sicher, wie die Änderung.
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    ekie Mitglied
    Registriert seit
    25.04.2008
    Beiträge
    528
    Beitragswertungen
    7 Beitragspunkte
    Woran liegt die Vererbung. Ich dachte, wenn ich den maincontainer habe liegt der unter denen folgenden Div's und so wird das dann übernommen da height: auto ist

    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    Das hat rein gar nichts mit Vererbung zu tun.

    stackoverflow.com/questions/11471247/why-is-background-color-of-wrapper-not-showing-up-behind-the-left-and-content-c?answertab=votes#tab-top

    Da ist ne sinnvollere Lösung als der Spaghetticodeansatz von weiter oben, tut aber letztlich das Gleiche. zunge
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    ekie Mitglied
    Registriert seit
    25.04.2008
    Beiträge
    528
    Beitragswertungen
    7 Beitragspunkte
    Ok werde es mir mal anschauen.

    Wieso Spaghetticode? Wie kann ich meine CSS denn besser zusammenfassen? HTML Code ist doch so ok oder?

    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    Mit Spaghetticode meinte ich folgendes:

    <div style="clear:both;"></div>


    Daher hab ich die alternative gepostet.
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    ekie Mitglied
    Registriert seit
    25.04.2008
    Beiträge
    528
    Beitragswertungen
    7 Beitragspunkte
    Und wann muss man jetzt genau "clearen" ?

    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    Ist doch alles in meinem Link erklärt?

    jsfiddle.net/nzdum/
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten