Pleine largeur de div avec un fond de couleur
Sur cette page: http://www.tff-bvba.be, j'ai besoin de le gris arrière-plan de l'image à pleine largeur sur toutes les résolutions, et le texte et l'image afin de la centrer sur l'écran. Tout fonctionne bien, sauf le fait que le fond continue vers la droite, hors de l'écran (défilement vers la droite, vous verrez).
J'ai passé 2 heures à chercher une solution mais n'en trouve aucune qui a fonctionné pour moi... C'est mon 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;
}
Merci pour votre aide, très apprécié!
Stefaan
Une solution rapide serait d'ajouter
le dépassement est seulement de cacher le problème, à mon point de vue. Voir ma réponse, c'est une solution sympa et vous pouvez voir un exemple en image 🙂
Merci à vous tous de votre aide!!
overflow:hidden
sur #bdywrapper2
. Ce n'est pas la meilleure solution, mais il fonctionne.le dépassement est seulement de cacher le problème, à mon point de vue. Voir ma réponse, c'est une solution sympa et vous pouvez voir un exemple en image 🙂
Merci à vous tous de votre aide!!
OriginalL'auteur Stefaan | 2013-11-27
Vous devez vous connecter pour publier un commentaire.
J'ai changé votre code html et css à l'aide de firebug en temps réel et il fonctionne look:
Votre problème est le html, votre
.wide
div sont placés sur le mauvais endroit, je l'ai placé correctement, et changé un peu laCSS
, utiliser ces html et css:HTML:
CSS:
Vous avez raison, je n'avais pas vu l' .bizarre div dans le cadre du .large.
Merci beaucoup!
OriginalL'auteur Paulo Roberto
Essayer Ci-Dessous
CSS
.wide
div
ne seront jamais s'adapter à la totalité de l'écran, car il est enveloppé par un autrediv
qui n'est pas100%.
mais .principal est en vertu de la div.bdywrapper2 qui est d'avoir 100% de largeur. c'est pourquoi j'ai changé .principale, d'une largeur de 980px à l'héritage(On peut utiliser 100%). et le réglage .wide width:100% de s'adapter à la fenêtre exactement.
ah, vous avez hérité d'un
100%
largeur. Mieux utiliser100%
ainsi, plus compréhensible.Ya.. je peux le faire aussi bien. Merci pour votre mise à jour.
OriginalL'auteur Kishori
De simples changements pourront faire l'affaire pour vous
supprimer
margin-left:-100%;
margin-right:-100%;
de la classe
.wide
et donnerodd
classe100% width
instaed de900px
Votre CSS à l'heure actuelle est l'étirement de la bg....!!
EDIT :
modifier après le commentaire : utiliser une
wrapper
classe pour envelopper l'ensemble de votre texte et des images, mettreodd
àwidth:100%
, ce sera d'assurer une meilleure compatibilité et la facilité de flux CSSHTML
CSS
modifié le code....mieux utiliser une classe wrapper, il permettra de résoudre tous vos probs!
Merci de votre aide!
OriginalL'auteur NoobEditor