Problème de décalage vertical entre mes Div

Ptit Boy -
monkey_monk Messages postés 641 Date d'inscription Statut Membre Dernière intervention - 31 juil. 2009 à 13:35

Bonjour tout le monde,

Voilà, j'ai un problème sur mon site.
Étant donné que les images valent mieux qu'un long discours, voilà pour vous :

http://img526.imageshack.us/img526/4874/sitej.jpg
Et
http://img22.imageshack.us/img22/5660/site2p.jpg

Vous remarquerez un certain décalage au niveau de la hauteur de mes Div.
J'ai fait quelques recherches sur GooGoole mais sans vraiment de succès.
Bref, je bloque dessus depuis pas mal de temps et j'ai franchement pas envi de mettre mon site sous forme de tableau ! ;-)

Merci d'avance.
Si vous avez la moindre question, n'hésitez pas.
Cordialement, Ptit Boy

Afficher la suite

A voir également:

Problème de décalage vertical entre mes Div
Powerpoint vertical - Guide
Trait vertical clavier - Forum Clavier
Barre vertical mac ✓ - Forum MacOS
Iptv decalage son image - Forum Box et Streaming vidéo
Trait vertical sur écran tv samsung ✓ - Forum Téléviseurs

8 réponses

Réponse 1 / 8

monkey_monk Messages postés 641 Date d'inscription Statut Membre Dernière intervention 131

Désolé, mais je ne vois pas quoi faire pour t'aider plus... il te faudrait remettre de l'ordre dans ta structure...

Courage courage !

Réponse 2 / 8

monkey_monk Messages postés 641 Date d'inscription Statut Membre Dernière intervention 131

Bonsoir,

il nous faudrait au moins ton code html pour voir la structure de tes balises...

Ensuite, le css en rapport serais bien pratique aussi ! ...on peut essayer sans mais ça risque d'être plus long. :p

Réponse 3 / 8

Ptit Boy

Désolé. J'ai complètement oublié de mettre mon code. :D
Donc, tout d'abord il y a la structure de mon site avec le positionnement des Div et ensuite le CSS.
Si j'ai oublié quelque chose, n'hésitez pas.

--------------------------------------------------------------------------------------------

<div id="global"> <!-- D_global -->
	
		<div id="en_tete"> <!-- D_en_tete -->
		</div> <!-- F_en_tete -->
	
		<div id="menu_horizontal"> <!-- D_menu_horizontal -->
		</div> <!-- F_menu_horizontal -->
	
		<div id="menu_vertical"> <!-- D_menu_vertical -->
			<div id="postit"> <!-- D_postit -->
				<div class="postit_haut"></div>
				<div class="postit_corps">
				<div class="postit_texte"></div>
                                </div>
				<div class="postit_bas"></div>
		                </div> <!-- F_postit -->
		</div> <!-- F_menu_vertical -->

                <div id="corps"> <!-- D_corps -->
			<div id="texte"> <!-- D_texte -->
			</div> <!-- F_texte -->
		</div> <!-- F_corps -->

		<div id="pied"> <!-- D_pied -->	
		</div> <!-- F_pied -->	
			
</div> <!-- F_global -->

--------------------------------------------------------------------------------------------

body{cursor: default ;background-image: url("images/fond.jpg") ;}
h1, h2, h3, p{margin: 0 ;}

p{font-family: Arial ;font-size: 15px ;}

a{text-decoration: none;outline: none;}

img{border : 0px;}

/* ----------global-------------- */
#global{width: 800px ;margin: auto ;}

/* ---------en_tete-------------- */
#en_tete{width: 800px ;height: 100px ;text-align: center ;line-height: 100px ;background-color: #ffccff ;}

#menu_horizontal ul {height: 34px ;margin: 0px ;padding: 0px ;background-color: #ffccff ;}

#menu_horizontal ul li {display: inline ;list-style: none ;}

#menu_horizontal ul li a {height: 34px ;float: left ;display: block ;text-decoration: none ;font-size: 12px ;color: black ;margin-right: 6px ;}

.accueil:hover {background-image: url("images/accueilhover.png") ;background-repeat: no-repeat ;}

.presentation:hover {background-image: url("images/presentationhover.png") ;background-repeat: no-repeat ;}

.infospratiques:hover {background-image: url("images/infospratiqueshover.png") ;background-repeat: no-repeat ;}

.galerie:hover{background-image: url("images/galeriehover.png") ;background-repeat: no-repeat ;}

.reglement:hover{background-image: url("images/reglementhover.png") ;background-repeat: no-repeat ;}

.contacteznous:hover{background-image: url("images/contacteznoushover.png") ;background-repeat: no-repeat ;}

/* ---------corps------------- */
#corps{float: left ;width: 632px ;background-color: #d9ffa4 ;font-family: arial ;font-size: 12px ;}

#texte{margin: 20px ;}

/* ---------menu vertical info------------- */
#menu_vertical{float: right ;width: 168px ;height: auto ;background-color: #ffccff ;}

#postit{position: relative ;left : 40px ;}

.postit_haut{width: 200px ;height: 40px ;background-image: url("images/postit_haut.png") ;}

.postit_corps{width: 200px ;padding-top: 10px ;background-repeat: repeat-y ;background: url("images/postit_corps.png") ;}

.postit_texte{padding-left: 5px ;padding-right: 10px ;}

.postit_bas{width: 200px ;height: 45px ;background-image: url("images/postit_bas.png") ;}

/* ---------galerie------------- */
div#galerie{width: 560px ;background: #eed ;border: 1px solid #dcb ;padding: 15px ;margin: 10px 20px ;text-align: center ;font: 0.9em Georgia, serif ;}

ul#galerie_mini{margin: 0 ;padding: 0 ;list-style-type: none ;}

ul#galerie_mini li{float: left ;}

ul#galerie_mini li a img{margin: 2px 1px ;border: 1px solid #dcb ;}

dl#photo{clear: both ;margin: 0 auto ;}

dl#photo dt{font: italic 25px Georgia, serif ;color: #dcb ;
}

dl#photo dd{margin: 0 ;}

dl#photo img{border: 1px solid #dcb ;}

/* ---------pied------------- */
#pied{clear: both ;width: 800px ;height: 25px ;text-align: center ;line-height: 25px ;background-color: #ffccff ;}

Réponse 4 / 8

monkey_monk Messages postés 641 Date d'inscription Statut Membre Dernière intervention 131

Bonjour,

j'ai un peu modifié ton css... et ça semble marcher pour moi.

Le principal problème semble être la largeur 200px qui devrait passer à 128px car, sinon, la largeur de tes éléments dépasse les 800px de ton global.

Je te colle rapidement le css, tu le mettras en forme toi-même... (désolé)

* { margin:0; padding:0; }
html { width:100%; height:100%; }
body{width:100%; height:100%; background-image:url("images/fond.jpg") ;}
h1, h2, h3, p{margin:0;}

p{font-family:Arial; font-size:15px;}

a{text-decoration:none; outline:none;}

img{border:0;}

/* ----------global-------------- */
#global{
	width:800px; 
	height:100%;
	margin:10px auto 10px; 
	background-color:#ffccff;
}

/* ---------en_tete-------------- */
#en_tete{
	width:800px;
	height:100px;
	text-align:center;
	line-height:100px;
}

#menu_horizontal ul {height:34px; margin:0; padding:0px;}
#menu_horizontal ul li {display:inline; float:left; height:34px; list-style:none;}
#menu_horizontal ul li a {display:block; height:34px; text-decoration:none; font-size:12px; color:black; margin-right:6px;}

.accueil:hover {background:url("images/accueilhover.png") no-repeat ;}
.presentation:hover {background:url("images/presentationhover.png") no-repeat ;}
.infospratiques:hover {background:url("images/infospratiqueshover.png") no-repeat ;}
.galerie:hover{background:url("images/galeriehover.png") no-repeat ;}
.reglement:hover{background:url("images/reglementhover.png") no-repeat ;}
.contacteznous:hover{background:url("images/contacteznoushover.png") no-repeat ;}

/* ---------corps------------- */
#corps{float:left; width:632px; height:100%; background-color:#d9ffa4; font-family:Arial; font-size:12px;}

#texte{margin:20px;}

/* ---------menu vertical info------------- */
#menu_vertical{float: right ;width: 168px ;height: auto ;background-color: #ffccff ;}

#postit{position: relative ; width:128px; left : 40px ;}

.postit_haut{width: 128px ;height: 40px ;background-image: url("images/postit_haut.png") ;}

.postit_corps{width:128px; padding-top:10px; background: url("images/postit_corps.png") repeat-y ;}

.postit_texte{padding-left: 5px ;padding-right: 10px ;}

.postit_bas{width: 128px ;height: 45px ;background-image: url("images/postit_bas.png") ;}

/* ---------galerie------------- */
div#galerie{width: 560px ;background-color: #eed ;border: 1px solid #dcb ;padding: 15px ;margin: 10px 20px ;text-align: center ;font: 0.9em Georgia, serif ;}

ul#galerie_mini{margin: 0 ;padding: 0 ;list-style-type: none ;}

ul#galerie_mini li{float: left ;}

ul#galerie_mini li a img{margin: 2px 1px ;border: 1px solid #dcb ;}

dl#photo{clear: both ;margin: 0 auto ;}

dl#photo dt{font: italic 25px Georgia, serif ;color: #dcb ;
}

dl#photo dd{margin: 0 ;}

dl#photo img{border: 1px solid #dcb ;}

/* ---------pied------------- */
#pied{clear: both ;width: 800px ;height: 25px ;text-align: center ;line-height: 25px ;background-color: #ffccff ;}

Décortique-le pour voir les changement que j'ai fait ! ;)

J'espère que ça t'avancera !

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

Posez votre question

Réponse 5 / 8

Ptit Boy

Je crois que tu n'as pas bien compris mon problème.
Si le post-it dépassait de 72px, c'était normal.

Si tu regardes de nouveau mes screens tu verras que le menu vertical ne descend pas jusqu'à pied (cf screen 1)
Idem pour le corps si je ne mets pas beaucoup de texte dedans (cf screen 2).

Réponse 6 / 8

monkey_monk Messages postés 641 Date d'inscription Statut Membre Dernière intervention 131

Ah ok, je comprends mieux... mais avec mon css les boîtes s'agrandissent normalement... donc check-le quand mm.

Je regarderais plus tard de mon coté. ;)

Bon courage !

Ptit Boy

J'ai rentré ce que tu m'as donné mais ça n'arrange pas mon problème.
J'ai toutefois gardé certaines balises qui simplifient mon code.

Réponse 7 / 8

Ptit Boy

UP !
Personne pour m'aider ? :-/

Réponse 8 / 8

Ptit Boy

Up !
Encore...

Je recherche toujours de l'aide.

Discussions similaires

Barre verticale droite sur clavier

le signe " | " dans excel

Touche du clavier barre verticale

Problème écran tv Samsung bandes verticales

Barre verticale droite sur clavier mac

Votre réponse

Discussions similaires