18043 sujets

Questions générales et questions de débutants

[Résolu] Problème d'espace vertical entre 2 div

Bonjour tout le monde !

Alors voilà, je suis actuellement en train de coder un site, et après m'être galéré pour le menu du haut, voilà que je rencontre un autre problème. Mon menu est imbriqué dans un seul div 'menubackground', lui-même dans un div 'conteneur'. Sous ce div 'menubackground', il y a un div nommé 'contentbackground'. Et malheureusement, entre les deux, il y a un espace. Et c'est là que ça devient étrange. Sous FF, il apparait partout, sous Opera 9, seulement au milieu, et sous IE7, pas du tout !

Voici le lien en ligne : http://muffinzpl0x.com/futuresite/home.html

Et le code bien sûr : Html :
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>JustPT Official Website :: Home</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="layout/style.css" />
		<link rel="shortcut icon" href="favicon.ico" />
		<link rel="icon" href="favicon.png" type="image/gif" />
	</head>
<!--  Made by SiDi -->		
	<body>

	<div id="conteneur">
<!--  This is the Server Status + Users online window -->	
		<div id="online">
			<div id="onlinetop"><img src="layout/online/serv_on.png" alt="Server Status : Online" /></div>
			<div id="onlinebot">
				<img src="layout/online/users_on.png" alt="Users online : " />
				<img src="layout/online/users_17.png" alt="17" />
			</div>
		</div>
<!--  This is the horizontal main menu -->	
		<div id="menubackground">
			<div id="menumidline">
				<div id="menuleftside"><img alt="" src="layout/spacer.gif" width="101" /></div>			
				<div id="menurightside"><img alt="" src="layout/spacer.gif" width="101" /></div>
				<div id="menucontent">
						<div id="menulist">
							<ul id="menu">
								<li id="home"><a href="home.html" title="Home">Home</a></li>
								<li class="separateur"><img alt="&nbsp;" src="layout/spacer.gif" /></li>
								<li id="join"><a href="join.html" title="Join us !">Join us !</a></li>
								<li class="separateur"><img alt="&nbsp;" src="layout/spacer.gif" /></li>
								<li id="server"><a href="server.html" title="Server Info">Server Info</a></li>
								<li class="separateur"><img alt="&nbsp;" src="layout/spacer.gif" /></li>
								<li id="clancp"><a href="clancp.html" title="Clan CP">Clan CP</a></li>
								<li class="separateur"><img alt="&nbsp;" src="layout/spacer.gif" /></li>
								<li id="donate"><a href="donate.html" title="Donate">Donate</a></li>
								<li class="separateur"><img alt="&nbsp;" src="layout/spacer.gif" /></li>
								<li id="forum"><a href="smf/index.php" title="Forum">Forum</a></li>
								<li class="separateur"><img alt="&nbsp;" src="layout/spacer.gif" /></li>
								<li id="online"><a href="online.html" title="Who&acute;s online?">Online</a></li>
							</ul>
						</div>
				</div>
			</div>
		</div>
<!--  This is the window with the left menu and the content -->
		<div id="contentbackground">
			<div id="contentmidline">
				<div id="contentleftside"><img alt="" src="layout/spacer.gif" width="101" /></div>			
				<div id="contentrightside"><img alt="" src="layout/spacer.gif" width="101" /></div>
				<div id="contentcontent">
						<div id="menulist">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis semper magna eget lorem. 
							In hac habitasse platea dictumst. Mauris in nulla. Curabitur imperdiet rutrum erat. Sed augue velit,
							vehicula in, euismod nec, lobortis dictum, ligula. Phasellus porttitor luctus neque.</p>
						</div>
				</div>
			</div>
		</div>	
		
	</div>
	</body>
</html>


CSS :
body
{
	margin: 0 ;
	padding: 0 ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #000 ;
	color: #fff ;
	overflow-x: hidden ;
}
ul
{
	list-style-type: none ;
	padding: 0 ;
	line-height: 1.8em ;
}
div#online
{
	height: 138px ;
	width: 187px ;
	position : relative ;
	margin : 0 0 8px 10% ;
	background: url(online/online.png) no-repeat ;
	text-align : center ;
}
div#onlinetop
{
	margin: 0 auto;
	padding : 54px 0 0 0 ;
	line-height: 1px ;
}
div#onlinebot
{
	margin: 0 auto;
	padding : 16px 0 0 0 ;
	line-height: 1px ;
}
div#menubackground
{
	margin: 0 7% 0 7% ;
	padding: 0 ;
	width: 86% ;
	height: 58px ;
	min-width: 864px ;
	overflow: hidden ;
}
div#menuleftside
{
	margin : 0 ;
	padding : 0 ;
	width : 101px ;
	height: 58px ;
	background: url(menu/leftside.png) ;
	float: left ;
}
div#menurightside
{
	margin : 0 ;
	padding : 0 ;
	width : 101px ;
	height: 58px ;
	background: url(menu/rightside.png) ;
	float: right ;
}
div#menucontent
{
	margin: 0 101px ;
	padding: 0 ;
	height: 58px ;
	background: url(menu/midside.png) ;
}
div#menulist
{
	width: 662px ;
	height: 58px ;
	margin: 0 auto ;
	padding: 0 ;
}
div#menumidline
{
	margin : 0 ;
	padding : 0 ;
	height: 58px ;
	background:	url(menu/midline.png) no-repeat bottom left ;
}
ul#menu
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
	width: 100% ;
}
ul#menu li
{
	float: left ;
	text-align: center ;
}
ul#menu li a
{
	height: 33px ;
	display: block ;
	text-decoration: none ;
	text-indent: -9999px ;
}
li#home a
{
	width: 97px ;
	background: url(menu/home.png) no-repeat ;
}
li#home a:hover
{
	background: url(menu/home.png) repeat-x 0 -33px ;
}
.separateur
{
	width: 8px ;
}
li#join a
{
	width: 84px ;
	background: url(menu/join.png) no-repeat ;
}
li#join a:hover
{
	background: url(menu/join.png) repeat-x 0 -33px ;
}
li#server a
{
	width: 84px ;
	background: url(menu/server.png) no-repeat ;
}
li#server a:hover
{
	background: url(menu/server.png) repeat-x 0 -33px ;
}
li#clancp a
{
	width: 84px ;
	background: url(menu/clancp.png) no-repeat ;
}
li#clancp a:hover
{
	background: url(menu/clancp.png) repeat-x 0 -33px ;
}
li#donate a
{
	width: 84px ;
	background: url(menu/donate.png) no-repeat ;
}
li#donate a:hover
{
	background: url(menu/donate.png) repeat-x 0 -33px ;
}
li#forum a
{
	width: 84px ;
	background: url(menu/forum.png) no-repeat ;
}
li#forum a:hover
{
	background: url(menu/forum.png) repeat-x 0 -33px ;
}
li#online a
{
	width: 97px ;
	background: url(menu/online.png) no-repeat ;
}
li#online a:hover
{
	background: url(menu/online.png) repeat-x 0 -33px ;
}
div#conteneur
{
	width: 100% ;
	margin: 0 ;
	padding: 0 ;
	background: url(background1.jpg) no-repeat top center ;
}




div#contentbackground
{
	margin: 0 7% 0 7% ;
	padding: 0 ;
	width: 86% ;
	min-width: 864px ;
}
div#contentleftside
{
	margin : 0 ;
	padding : 0 ;
	width : 24px ;
	height: 600px ;
	background: url(content/leftside.png) ;
	float: left ;
}
div#contentrightside
{
	margin : 0 ;
	padding : 0 ;
	width : 23px ;
	height: 600px ;
	background: url(content/rightside.png) ;
	float: right ;
}
div#contentcontent
{
	margin: 0 23px 0 24px ;
	height: 600px ;
	padding : 0 ;
	background: url(content/bg.png) ;
}
div#contentlist
{
	width: 662px ;
	margin: 0 auto ;
	padding: 10px ;
}
div#contentmidline
{
	margin : 0 ;
	padding : 0 ;
	height: 600px ;
	background:	url(content/midline.png) repeat-y left ;
}


Un autre souci, j'ai du déclarer un overflow-x: hidden; sur le body car j'avais un scroll horizontal uniquement sous FF, sans raison apparente...


Merci d'avance pour les coups de main Smiley smile
Modifié par SiDi (29 Jul 2007 - 17:06)
Bonjour,

Ce doit être un problème de margin ( a tester avec *{margin: 0; padding: 0;} ), peut être en ajoutant 

div#contentcontent p
{
	margin: 0 ;
}
Merci beaucoup, c'est exactement ça Smiley smile

J'ai cherché au niveau des margin et je ne trouvais pas où je n'en avais pas mis... J'avais oublié les propriétés de la balise <p>.

Merci du coup de main et bonne continuation !
Sujet clos
Aller à