Petit soucis avec un div
Résolu
killermano66
Messages postés
233
Date d'inscription
Statut
Membre
Dernière intervention
-
killermano66 Messages postés 233 Date d'inscription Statut Membre Dernière intervention -
killermano66 Messages postés 233 Date d'inscription Statut Membre Dernière intervention -
Salut,
J'ai un petit soucis avec un div sur une partie d'un design. Celui-ci ne prend pas la taille que je souhaiterais. Disons que ma partie contenue est divisée en deux partie : le contenu général et le contenu de droite (une sorte de menu on va dire) le tout positionné dans un div conteneur pour centrer et pouvoir afficher un background sur tout le reste de la largeur de la page. Une image valant mieux qu'un long discours je vous met un lien vers une qui je penses vous permettra de mieux cibler mon soucis.
http://www.rpg-z.com/div.jpg
Voilà donc comme dis sur l'image, le soucis et cet écart bizarre de longueur qui m'emmerde pas mal. Je vous met le code de la partie css et html en dessous :
CSS:
HTML:
Voilà, merci bien à ce qui prendront le temps, moi je sèche.
A+
J'ai un petit soucis avec un div sur une partie d'un design. Celui-ci ne prend pas la taille que je souhaiterais. Disons que ma partie contenue est divisée en deux partie : le contenu général et le contenu de droite (une sorte de menu on va dire) le tout positionné dans un div conteneur pour centrer et pouvoir afficher un background sur tout le reste de la largeur de la page. Une image valant mieux qu'un long discours je vous met un lien vers une qui je penses vous permettra de mieux cibler mon soucis.
http://www.rpg-z.com/div.jpg
Voilà donc comme dis sur l'image, le soucis et cet écart bizarre de longueur qui m'emmerde pas mal. Je vous met le code de la partie css et html en dessous :
CSS:
div.conteneur_contenu { /* Centre la partie contenu */
width: 900px;
margin: auto;
}
div.contenu { /* Affichage du texte / images dans la partie contenue */
background-color: #ffffff;
width: 550px; /* 900 - 10 de padding de chaque côtés donc 880 */
height: 100%;
padding: 10px;
float: left;
}
div.contenu_droite {
background-color: #ece6e2;
width: 330px;;
float: left;
}
div.conteneur_bottom_contenu { /* Centre le bas de page de la partie contenue */
width: 900px;
margin: auto;
}
div.background_bottom_contenu { /* Définie la couleur de fond de la partie contenue */
background-color: #10243c;
height: 28px;
clear: both;
}
div.bottom_contenu { /* Définie l'image du bas de page de la partie contenue */
background-image:url(../design/bleue/bottom_contenu.jpg);
background-repeat:no-repeat;
width: 900px;
height: 28px;
float: left;
}
HTML:
<!-- Contenu de la page -->
<div class="conteneur_contenu">
<div class="contenu">Div contenu</div>
<div class="contenu_droite">div contenu_droite</div>
</div>
<!-- Bas de la partie contenue (arrondie) -->
<div class="background_bottom_contenu">
<div class="conteneur_bottom_contenu">
<div class="bottom_contenu"></div>
</div>
</div>
Voilà, merci bien à ce qui prendront le temps, moi je sèche.
A+
A voir également:
- Petit soucis avec un div
- Trier du plus petit au plus grand excel - Guide
- Petit 3 ✓ - Forum Word
- Petit 2 ✓ - Forum Windows
- Petit 9 - Forum Mail
- Comment imprimer une photo en petit ✓ - Forum Photo numérique
5 réponses
Oui effectivement c'est le pading 10px qui posait problème je l'ai réglé avec padding 0, 10px; et ça fonctionne ..
En revanche lorsque le div de droit est plus grand que le div de gauche j'ai un vide. J'ai donc mis en arrière plan un div de 900px avec la même couleur de fond que celle de mon div à droite. Alors le résultat obtenue est celui désiré sous IE mais rien ne s'afficher sous ff :
Merci encore ;)
En revanche lorsque le div de droit est plus grand que le div de gauche j'ai un vide. J'ai donc mis en arrière plan un div de 900px avec la même couleur de fond que celle de mon div à droite. Alors le résultat obtenue est celui désiré sous IE mais rien ne s'afficher sous ff :
div.back_contenu {
background-color: #ece6e2;
width: 900px;
}
<!-- Contenu de la page -->
<div class="conteneur_contenu">
<div class="back_contenu">
<div class="contenu">Div contenu<br /><br /><br /><br /></div>
<div class="contenu_droite">div contenu_droite</div>
</div>
</div>
Merci encore ;)
Tiens je connais ce code !?
Je t'ai donné la soluce sur le site du zero non ?
ça ne te convient pas, t'as encore des soucis ?
Je t'ai donné la soluce sur le site du zero non ?
ça ne te convient pas, t'as encore des soucis ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Tu l'avais anticipé sur les côtés gauche et droite (/* 900 - 10 de padding de chaque côtés donc 880 */)
mais pas ceux du haut et du bas qui créent donc un décalage de 20px.
Tu peux annuler cet effet de plusieurs manières :
- en ajoutant un padding: 10px 0px à "contenu_droite", soit 10 px en haut ET en bas et rien sur les cotés.
- avec un padding : 10px, soit 10 px sur tous les côtés. Mais alors il faudra diminuer la largeur de l'un des
blocs de 20 px.
- Soit en rajoutant/enlevant une balise <br> selon le bloc qu'on veut agrandir ou diminuer (personnellement
je trouve cette solution très peu professionnelle d'autant plus qu a priori on ne connait pas la longueur du texte
qui sera inclus dans le bloc, car c'est elle qui va tout déterminer au final).
Bon codage.