Sujet Précédent Sujet Suivant

Petit soucis avec un div

Résolu/Fermé
killermano66 Messages postés 233 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 25 novembre 2010 - 8 juin 2009 à 14:42
killermano66 Messages postés 233 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 25 novembre 2010 - 11 juin 2009 à 15:25
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: 
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:

5 réponses

Réponse 1 / 5
Utilisateur anonyme
8 juin 2009 à 15:20
en faite c est le padding :10px qui fait ça
1
Giorgiolino Messages postés 253 Date d'inscription vendredi 15 mai 2009 Statut Contributeur Dernière intervention 2 mars 2015 52
8 juin 2009 à 16:08
Comme l'a remarqué jmg78, cet écart est effectivement du au padding.

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.

0
Réponse 2 / 5
Utilisateur anonyme
8 juin 2009 à 15:12
en mettant height:100% sur contenu_droite
0
Réponse 3 / 5
killermano66 Messages postés 233 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 25 novembre 2010 41
8 juin 2009 à 15:59
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 : 

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 ;)
0
Réponse 4 / 5
Optimal-effect Messages postés 14 Date d'inscription mercredi 3 juin 2009 Statut Membre Dernière intervention 12 mars 2010 1
8 juin 2009 à 18:57
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 ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
killermano66 Messages postés 233 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 25 novembre 2010 41
11 juin 2009 à 15:25
Non c'est bon, l problème à était réglé, merci encore ;)
0

Discussions similaires

Dimensions L x l x H : comment lire ces infos ?
Miss-Curieuse -
valou -

8 réponses
[Ecrire Exposant 12] 10² ou 10³ ok mais...
tessai -
rayous -

43 réponses
Comment écrire un chiffre en petit caractè
Essegnon -
transat -

5 réponses
comment faire pour écrir métre cube avec m et petit 3
lili -
Kikouki -

4 réponses
symbole des mètre cubes
Utilisateur anonyme -
ninja -

10 réponses