28172 sujets

CSS et mise en forme, CSS3

Problème de marge irreductible !

Chers amis Alsanautes,

Je lutte depuis ce début d'après midi avec un problème de margin introuvable et irréductible.

Cette fois ci je suis vraiment coincé Smiley sweatdrop et énervé Smiley fache , donc je m'en remets à vous ...

Je souhaiterais que le bloc central soit coller à l'en tête et au pied de page.

Voici le lien de la page bogguée en question : http://acdperformances.fr/v1.2/

Et voici mon code CSS :
/* Général */

body {
	color: black;
	background:#a6c927;
	margin: 0;
	font-family: arial, serif;
	text-align:justify;
	font-size:0.9em;
}

a img
{
border:none;
}

h1
{
font-size : 17px;
color:#372211;
background-image:url('images/h1_img.png');
background-repeat:no-repeat;
background-position:0px 0px; 
padding-left:26px;
line-height: 23px;
margin-left: -5px;
width:97%;
border-bottom:1px dotted #717171;
}

h2
{
font-size : 15px;
color:#372211;
}

h2 a
{
font-size : 15px;
color:#372211;
}

h2 a:visited, h2 a:hover
{
color:#372211;

}

h3
{
font-size : 13px;
color:#372211;
}

h3 a
{
font-size : 13px;
color:#372211;
}

h3 a:visited, h3 a:hover
{
color:#372211;

}

a
{
color :#372211;
}

a:visited, a:hover
{
color:#f29430;
}

p, a, li
{
font-size : 13px;
}

p
{
text-align:justify;
}

/* classes */


/* --- POSITIONNEMENT --- */

#pub
{
position:absolute;
top:30px;
margin-left:29%;
z-index: 200;
}

/* En-tête */
#global_h
{
width: 100%;
height:150px;
margin: 0 auto;
background:url('images/bg_h2.jpg') repeat-x;
}

#entete
{
width: 1100px;
margin: 0 auto;
}

#logo
{

}

/* Menu de navigation */
.navigation { 
      margin: 0; 
      padding: 0; 
      list-style: none; 
      width: 250px; 
	  font-weight:bold;
      } 
   .navigation a, .navigation span { 
      display: block; 
      padding: 4px 10px; 
      text-decoration: none; 
	   font-weight:bold;
      font: 1.25em;
	  color:#a25501;
      } 
   .navigation .toggleSubMenu a, .navigation .toggleSubMenu span { 
      background-image: url(''); 
      } 
   .navigation .open a, .navigation .open span { 
      background-image: url(''); 
      } 
   .navigation a:hover, .navigation a:focus, .navigation a:active { 
      text-decoration: underline; 
	  color:#a6c927;
      } 
   .navigation .subMenu { 
      font-size: .8em; 
      background: #ccc; 
      font-size: .9em; 
      margin: 0; 
      padding: 0; 
	  	border-top : 1px groove grey;
border-bottom : 1px groove grey;
      } 
   .navigation ul.subMenu a { 
      background: none; 
      padding: 3px 20px; 
      }
	  
	.navigation li a
	{
border-top : 1px dotted grey;
	}

	.navigation { list-style-type:none;}
	
/* Bloc central */

#global
{
width:1100px;
margin:0 auto;
background:url('images/global_bg.png') repeat-y;
}

#secondaire
{
float:left;
position:relative;
width: 246px;
padding-left:10px;

}

#principal
 {
 width:730px;
 margin-left:278px;
 padding-left:30px;
 }

#footer
{
width: 100%;
height: 210px;
z-index: 20;
background: #160600 url('images/bg_f.jpg') repeat-x;
padding-top : 3px;
clear:both;
}

#onfoot
{
width: 990px;
margin:auto;
}

#onfoot p
{
display : inline;
}
#onfoot a
{
margin : 0 15px 0px 0px;
color:white;
}

#copyright
{
width:990px;
text-align:center;
margin:auto;
color: #d3d3d3;
}

#copyright p
{
font-size: 10 px;
}

#copyright a
{
color:white;
font-size: 10 px;
}

#referencement
{
width:980px;
margin:auto;
margin-top:60px;
}
#referencement a
{
font-size:10px;
color: #d3d3d3;
}

/* Design particulier */

#board
{
position:relative;
z-index: 99;
width: 690px;
height:162px;
background:url('images/board.png') no-repeat;
background-position:top left;
}

#board ul
{
float:left;
}

#board li
{
position:relative;
right : 25px;
bottom:17px;
width: 225px;
height:77px;
list-style-type:none;
font-weight:bold;
}

#board li a
{
background:url('images/bouton_board.png') no-repeat;
display:block;
width: 232px;
height:85px;
font-size: 16px;
margin:auto;
color:white;
line-height:85px;
text-align:center;
text-decoration:none;
}

#board li a:hover, #board li a:active
{
background-position: 0px -84px;
color:#451600;
}


D'avance un grand merci pour l'aide que vous pourrez m'apporter !

Aurélien.
Modifié par Ore (20 Aug 2010 - 17:21)
bonjour,
à vue de nez je suppose que ça vient d'un problème de fusion des marges.
Faire une recherche sur "fusion des marges" sur Alsa, tu trouveras le tuto correspondant Smiley cligne
Modérateur
Bonjour,

D'après ton code CSS, tu ne sembles pas définir les marges de plusieurs éléments. Il est important de savoir que par défaut, le navigateur donne des marges aux éléments. Dans ton cas, je soupçonne le h1 pour le haut (ou un élément tout près), et ton dernier ul du contenu pour le bas.
Modifié par Tony Monast (20 Aug 2010 - 19:19)
Tu rencontres effectivement un problème lié à la fusion des marges, pour exemple : les marges du premier h1 fusionnent avec son parent, le div d'id "principal".

L'article de Florent V. explique parfaitement la situation, bonne lecture. Smiley cligne
Modifié par Nigel (21 Aug 2010 - 15:38)
Sujet clos
Aller à