28173 sujets

CSS et mise en forme, CSS3

[résolu] Problemes d'espace entre mes div

Bonsoir à tous !

Voila, il est tard (tot meme maintenant Smiley bawling ) et apres mainte cyber recherche et essais je renonce...

J'ai 1 div "conteneur" et 4 div respectivement la banniere,le menu, la page de contenu (que j'include en php) et mon bas de page.

Mon souci, c'est que j'ai un bel espace qui se forme entre en haut et en bas de ma page de contenu (sous IE et Firefox), et un autre espace apparait sous IE entre la banniere et le menu (mais plus petit que les autres).

Apres avoir testé bon nombre de "padding", "margin" rien y fait... sauvez moi Smiley sweatdrop

voila mon body


<body>

<div id="interface">

		<div id="banniere">
		<img src="bannieres/Banniere1.jpg" />
		</div>
		
		
		<div id="menuglobal">
		
		<table id="Tableau_01" width="920" height="30" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td><img src="images_menu/Menu_01.gif" width="88" height="30" alt=""></td>
				<td><a href="index.php?page=news" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','images_menu/Menu_02_roll.gif',1)">
					<img src="images_menu/Menu_02.gif" name="Image9" width="96" height="30" border="0"></a></td>
				<td><a href="catalog/index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images_menu/Menu_03_roll.gif',1)">
					<img src="images_menu/Menu_03.gif" name="Image10" width="110" height="30" border="0"></a></td>
				<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','images_menu/Menu_04_roll.gif',1)">
					<img src="images_menu/Menu_04.gif" name="Image11" width="106" height="30" border="0"></a></td>
				<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images_menu/Menu_05_roll.gif',1)">
					<img src="images_menu/Menu_05.gif" name="Image12" width="113" height="30" border="0"></a></td>
				<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images_menu/Menu_06_roll.gif',1)">
					<img src="images_menu/Menu_06.gif" name="Image13" width="109" height="30" border="0"></a></td>
				<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','images_menu/Menu_07_roll.gif',1)">
					<img src="images_menu/Menu_07.gif" name="Image14" width="105" height="30" border="0"></a></td>
				<td><img src="images_menu/Menu_08.gif" width="193" height="30" alt=""></td>
			</tr>
		</table>
		
		</div>
		
		
		
		<div id="pagecourante">
		
		<?php
		switch($page)
		{
		case 'news': include ('news.php');break;

		}
		?> 
		
		</div>
		
		<div id="basdepage">
		
		<img src="catalog/images/footerMoana.jpg" />		

		</div>

</div>

</body>


et ma feuille CSS



body {


  color: #000000;
  margin: 0px;
  background-color:#b80e1d;
}

#interface {

  position: absolute; 
  left: 50%; 
  width: 920px; 
  margin-left: -460px;


}

#pagecourante {

  margin: 0px;
  padding-left: 10px;
  background-image: url("catalog/images/Moana024.jpg");
  background-repeat:no-repeat;
  background-color:#ffffff;


}


upload/6544-espaceFF.jpg

Voila ! si vous avez des éléments de réponse, je suis tout ouïe ! je vous remercie infiniement par avance !
Modifié par Adrenaline_BuZz (11 May 2006 - 15:05)
Erf .. ben ça à réglé le probleme des plus grands espaces commun sous IE et FF. Mais il me reste toujours ce probleme d'espace sous la banniere sous IE.

je repost ma CSS modifié 


/* CSS Document */
* {margin:0; padding:0}

body 
{  
  color: #000000;
  margin: 0px;
  background-color:#b80e1d;
}

#interface 
{
  position: absolute; 
  left: 50%; 
  width: 920px; 
  margin-left: -460px;
}

#banniere
{

}


#pagecourante 
{
  margin: 0px;
  padding-left: 10px;
  background-image: url("catalog/images/Moana024.jpg");
  background-repeat:no-repeat;
  background-color:#ffffff;
}

#basdepage
{

}


Là j'avoue que je n'arrive vraiment pas à voir d'ou ça peut venir...
J'ai trouvé ! En fait, l'espace etait due aux images de la banniere et du pied de page qui sont mal gérés sour IE. J'ai trouvé la réponse dans la FAQ mea culpa...

En tout cas, merci à 6cliks pour le lien Smiley rolleyes

je post ma CSS définitive (pour d'autre dans mon cas sait-on jamais ..



* {margin:0; padding:0}

img
{
display: block;
}


body 
{  
  color: #000000;
  margin: 0px;
  background-color:#b80e1d;
}

#interface 
{
  position: absolute; 
  left: 50%; 
  width: 920px; 
  margin-left: -460px;
}

#banniere
{

}


#pagecourante 
{
  margin: 0px;
  padding-left: 10px;
  background-image: url("catalog/images/Moana024.jpg");
  background-repeat:no-repeat;
  background-color:#ffffff;
}

#basdepage
{

display: block;

}
Sujet clos
Aller à