Full-width-div mit Hintergrundfarbe

Auf diese Seite: http://www.tff-bvba.be, brauche ich den grauen hintergrund hinter das Bild in voller Breite auf allen Auflösungen, und der text und das Bild zentriert auf dem Bildschirm angezeigt. Alles funktioniert ok, außer der Tatsache, dass der hintergrund weiter nach rechts aus dem Bildschirm (scrollen Sie nach rechts, sehen Sie).

Ich verbrachte 2 Stunden auf der Suche nach einer Lösung, fand aber keine, die für mich gearbeitet... Das ist mein code:

HTML:

<div class="wide">
<div class="odd">
<div class="homeimage"><img src="http://www.tff-bvba.be/wp-content/uploads/2013/11/hugo-  home.png" alt="hugo-home" class="alignright size-full wp-image-1283" /></div>
<div class="hometext"><h1>Slaag in je materiaalinnovatie</h1>
Plan je een complexe innovatie waarbij de <b>combinatie en vorm van materialen</b> essentieel is? Missen je medewerkers <i>knowhow</i> of heb je tijdelijk versterking nodig?<br /><br />TFF maximaliseert de slaagkans van je project door:
<ul>
    <li><b>35 jaar ervaring</b> in slimme materiaalcombinaties</li>
    <li>maximaal <b>draagvlak </b>bij je medewerkers</li>
    <li>bewezen expertise in<b> technieken en processen</b></li>
</ul>
<a class="bttn" title="Slimme materiaalinnovatie" href="http://www.tff-bvba.be/materiaalinnovatie/">Ontdek ons aanbod</a>
</div>
</div>
</div>

CSS:

.wide { 
    text-align:left;
    font-weight:bold;
    background:#ebebeb;
    margin-left:-100%;
    margin-right:-100%;
    margin-bottom: 60px;
    height: 465px;
    }

.odd {
    background-color:#ebebeb;
    clear:both;
    width:900px;
    padding:40px 0 27px 0;
    margin: 0 auto;
    }

.hometext {
    float: left;
    width: 500px;
}

.homeimage {
        margin-top: 0px;
    float: right;
}

Danke für deine Hilfe, sehr dankbar!
Stefaan

Eine schnelle Lösung wäre hinzuzufügen overflow:hidden auf #bdywrapper2. Dies ist nicht die beste Lösung, aber es funktioniert.
überlauf ist nur versteckt das problem in meiner Sicht. Siehe meine Antwort, es ist eine schöne Lösung, und Sie können sehen, ein Beispiel in Bild zu arbeiten 🙂
Vielen Dank an alle für die Unterstützung!!

InformationsquelleAutor Stefaan | 2013-11-27

background css

, Ich habe mich verändert Ihr html und css mit firebug in Echtzeit-und es funktioniert Aussehen:

Full-width-div mit Hintergrundfarbe

Dein problem ist der html-Code, die .wide div platziert werden, an der falschen Stelle, ich habe es richtig ist, und verändert ein wenig die CSS verwenden Sie diese html-und css:

HTML:

<div id="bdywrapper2">
<div class="wide">
<div class="odd">
<div class="homeimage"><img src="http://www.tff-bvba.be/wp-content/uploads/2013/11/hugo-home.png" alt="hugo-home" class="alignright size-full wp-image-1283"></div>
<div class="hometext">
<h1>Slaag in je materiaalinnovatie</h1>
<p>Plan je een complexe innovatie waarbij de <b>combinatie en vorm van materialen</b> essentieel is? Missen je medewerkers <i>knowhow</i> of heb je tijdelijk versterking nodig?</p>
<p>TFF maximaliseert de slaagkans van je project door:</p>
<ul>
<li><b>35 jaar ervaring</b> in slimme materiaalcombinaties</li>
<li>maximaal <b>draagvlak </b>bij je medewerkers</li>
<li>bewezen expertise in<b> technieken en processen</b></li>
</ul>
<p><a class="bttn" title="Slimme materiaalinnovatie" href="http://www.tff-bvba.be/materiaalinnovatie/">Ontdek ons aanbod</a>
</p></div>
</div>
</div>

<!-- Start of main -->
<div class="main">









<div class="clear"></div>

<!-- Start of dynamic loop -->
<div class="dynoloop">

<!-- ******************************************************************** This is the start of blog loop ********************************************************************-->





<!-- Start of one half first -->
<div class="blog_one_half_first">

<!-- Start of slider wrapper -->
<section class="slider_wrapper">

<!-- Start of slider -->
<section style="overflow: hidden;" class="slider">

<ul style="width: 800%; margin-left: -412px;" class="slides"><li style="width: 412px; float: left; display: block;" class="clone">
        <h3><a href="http://www.tff-bvba.be/testartikel-2/">Een tevreden klant vertelt…</a></h3>
        <br>
        <p>“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.”  &ndash; Manfred Jordan, CEO Mayser/M.Pore</p>
<p>Meer klanten</p>
        </li>


            <li style="width: 412px; float: left; display: block;">
        <h3><a href="http://www.tff-bvba.be/testartikel-1/">Daarom werk je met ons</a></h3>
        <br>
        <h2><a href="http://www.tff-bvba.be/waarom-wij/">Daarom werk je met ons</a></h2>
<p>1. Unieke ervaring: <b>materiaalinnovatie + bedrijfsvoering</b></p>
<p>
2. <b>Snelle terugverdientijd</b> door interim dividenden</p>
<p>3. Mensgerichte aanpak: <b>draagvlak bij stakeholders</b><br>
<a href="http://www.tff-bvba.be/waarom-wij/" title="Waarom wij?" class="bttn-left">Overtuig jezelf</a></p>
        </li>

                <li style="width: 412px; float: left; display: block;">
        <h3><a href="http://www.tff-bvba.be/testartikel-2/">Een tevreden klant vertelt…</a></h3>
        <br>
        <p>“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.”  &ndash; Manfred Jordan, CEO Mayser/M.Pore</p>
<p>Meer klanten</p>
        </li>


    <li style="width: 412px; float: left; display: block;" class="clone">
        <h3><a href="http://www.tff-bvba.be/testartikel-1/">Daarom werk je met ons</a></h3>
        <br>
        <h2><a href="http://www.tff-bvba.be/waarom-wij/">Daarom werk je met ons</a></h2>
<p>1. Unieke ervaring: <b>materiaalinnovatie + bedrijfsvoering</b></p>
<p>
2. <b>Snelle terugverdientijd</b> door interim dividenden</p>
<p>3. Mensgerichte aanpak: <b>draagvlak bij stakeholders</b><br>
<a href="http://www.tff-bvba.be/waarom-wij/" title="Waarom wij?" class="bttn-left">Overtuig jezelf</a></p>
        </li></ul>


<ol class="flex-control-nav"><li><a class="active">1</a></li><li><a>2</a></li></ol><ul class="flex-direction-nav"><li><a class="prev" href="#">Prev</a></li><li><a class="next" href="#">Next</a></li></ul></section><!-- End of slider -->

<!-- Start of clear fix --><div class="clear"></div>

</section><!-- End of slider wrapper -->

</div><!-- End of one half first -->

<!-- Start of one half -->
<div class="blog_one_half">

<!-- Start of slider wrapper -->
<section class="slider_wrapper">

<!-- Start of slider -->
<section class="slider">

<ul class="slides">


            <li style="display: list-item;">
        <h3><a href="http://www.tff-bvba.be/testartikel-3/">Een tevreden klant vertelt…</a></h3>
        <br>
        <h2><a href="http://www.tff-bvba.be/onze-referenties/">Een tevreden klant vertelt…</a></h2>
<p>
“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.”  &ndash; Manfred Jordan, CEO Mayser/M.Pore<br>
<a href="http://www.tff-bvba.be/onze-referenties/" title="Onze referenties" class="bttn-right">Meer klanten</a></p>
        </li>


    </ul>


</section><!-- End of slider -->

<!-- Start of clear fix --><div class="clear"></div>

</section><!-- End of slider wrapper -->

</div><!-- End of one half -->

<!-- ******************************************************************** This is the emd of blog loop ********************************************************************-->

<div class="clear"></div>

</div><!-- End of dynamic loop -->

</div><!-- End of main -->

<!-- Start of accent bottom -->
<div class="accentbottom">

<!-- Start of accent top -->
<div class="accenttop">

</div><!-- End of accent top -->

</div><!-- End of accent bottom -->

</div>

CSS:

.wide { 
    text-align:left;
    font-weight:bold;
    background:#ebebeb;
    margin-bottom: 60px;
    width: 100%;
    height: 465px;
}

es nicht, ich habe verändert die Seite in real-time und ich sehe es perfekt in die Veränderungen, die habe ich unten. siehe edit
Sie haben Recht, ich hatte nicht gesehen, die .seltsam div unter dem .Breite ein.
Ich danke Ihnen sehr!

InformationsquelleAutor Paulo Roberto

3

Versuchen Unter CSS
```
.main {
    margin: 0 auto;
    padding-bottom: 60px;
    width: 100%;
}
.wide {
    background-color: #EBEBEB;
    font-weight: bold;
    height: 465px;
    text-align: left;
}
```
dies wirklich nicht funktioniert, weil die .wide div wird nie passen den ganzen Bildschirm, denn es ist umhüllt von einem anderen div dass nicht 100%.
aber .main ist unter div.bdywrapper2, die mit 100% Breite. das ist, warum ich mich geändert habe .main Breite von 980px zu Erben(Wir verwenden 100%). und Einstellung .Breite width:100% passen die Fenster genau an.
ah, Sie erbte ein 100% Breite. Bessere Nutzung 100% als auch leichter verständlich.
Ya.. kann ich das auch tun. Vielen Dank für Ihre update.

InformationsquelleAutor Kishori
1

Einfache änderungen wird der trick für Sie

entfernen
margin-left:-100%; margin-right:-100%;
aus der Klasse .wide und geben odd Klasse 100% width nur 900px

Ihre CSS-derzeit ist die Dehnung der bg....!!

EDIT :

Bearbeiten nach mit der Bemerkung : verwenden Sie eine wrapper Klasse zu wickeln Sie Ihren gesamten text und Bilder, setzen odd zu width:100% diese soll eine bessere Kompatibilität und einfache CSS-flow

HTML
```
<div class="odd">
 <div class="wrapper">
   <div class="homeimage">
      <img src="" class="alignright size-full wp-image-1283" />
  </div>
  <div class="hometext">
  </div>
 </div> 
</div>
```
CSS
```
.wrapper{width:90%;margin:0 auto} //this will center the div and not take whole width at the same time
```
das problem hier ist, dass die .odd content wird sich in der Breite Beispiel: Bild, wird der Mann stick nach rechts auf dem Bildschirm.
bearbeitet den code....besser verwenden Sie eine wrapper-Klasse, es löst alle deine probs!!!
Danke für die Unterstützung!

InformationsquelleAutor NoobEditor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.