28173 sujets

CSS et mise en forme, CSS3

[Résolu] Déclage sous Firefox : liste <ul> et header

Bonjour à tous,
j'ai beau chercher et modifier sans cesse mes margin padding, mais rien n'y fais j'ai un déclage de mon header par rapport au début de ma page.
mon xhtml et css sont valides mais tjs ce problème sous Firefox. Je suis débutante et j'ai peut etre oublié une chose essentielle.

Saurriez vous m'aider ??
Site : Adaptation design sur le CMS Pluxml http://www.artgraph-evo2.info/pluxml/

Sous IE :
http://img69.imageshack.us/img69/8182/capture011fi.th.jpg

Sous Firefox :
http://img74.imageshack.us/img74/8332/capture024gi.th.jpg

NB : j'ai réussi à corriger le déclage de l'édito en augmentant le height, mais rien à faire au niveau du header....

Code CSS : 


/* CSS du thème graphique Skyplu(m)xml par Laddy */

html {
	font-family : Tahoma, Helvetica, Arial, sans-serif;
	text-align: justify;
	color : #000;
	background : url(img/bk.gif) center ;}
	

body {
	font-family : Tahoma, Helvetica, Arial, sans-serif;
	width : 780px;
	font-size: 0.8em;
	border: 1px solid #000;
	background:  url(img/fond_bas.jpg) repeat-y top;
	font-family: "Tahoma";
	margin : auto;
	padding : 0;}
	

	#global {padding : 30px 0 0px 0;}
/* Styles g?n?raux */
h1 {font-size : 1.6em; color:#B32842;}
h2 {font-size : 1.2em;}
h3 { 
	letter-spacing: 1px; 
	margin-bottom: 0px; 
	color: #000;
	margin-left: 2px;
	padding-top:5px;
	}
	


p {margin : 10px; padding : 3px 10px 3px 0px;}
a {color : #B32842;}
a:hover {color : #000;}
hr {clear : both; visibility : hidden; margin : 0; padding : 0;}

/* Entete du site */
#top {
	background: url(img/header02.jpg) no-repeat left top;
	/*border: 1px solid #f00;*/  /* rouge */
	height: 250px;
	
}

/*Menu de l'entete */
ul#menu
{
	font-family: "Tahoma"; 
	margin-top: 40px;
	margin-left: 36px ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menu li
{
	margin: 0 0 5px 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on d?finit une marge basse de 5px pour a?rer le tout */
}

ul#menu li a
{
	display: block ; /* On passe les liens en ?l?ments de type block pour leur donner des propri?t?s de taille */
	width: 177px ;
	line-height: 26px ;
	color: #000 ;
	text-indent: 40px ; /* On d?cale le texte de 40px du bord gauche */
	text-decoration: none ;
	background: url(img/bg_menu.png) no-repeat 0 0 ; /* On met une image de background, que l'on positionne ? 0px du bord gauche et 0px du bord haut */
	
}

ul#menu li a:hover
{
	background: url(img/bg_menu.png) no-repeat 0 -26px ; /* Et ici on d?cale l'image du background de 26px vers le haut pour laisser appara?tre la 2eme partie de l'image */
	}

	
/*Editorial */
#edito {
background:  url(img/fond2.jpg) repeat-y;
width: 780px;
font-size: 0.9em;
text-align:justify;
margin-top: 2px;
color: #000;
border-bottom: #D38191 solid 3px;
}
.p_edito { 
	margin-left: 70px; 
	margin-right: 330px;
	text-align: justify;
	color: #000;
	padding:0px;
	font-size: 0.9em;
	}
	
/* Zone de contenu de gauche*/
#content { 
	float : left;
	width : 460px;
	margin-left: 10px;
	}
	
	

/* Conteneur de l'article */		
.post { 
background-color: transparent;
padding : 0 0 35px 0px;
	width: 550px;}
	
	
/* Titre de l'article */	
.articletitle { 
	color : #000;
	font-size : 1.5em;
	font-weight : bold;
	margin : 0; padding : 3px 0 0 15px;}

/* Lien sur le titre de l'article */	
.articletitle a{ 
	color : #000;
	text-decoration : none;}
.articletitle a:hover{
	color : #000;
	text-decoration:none;
	border-bottom: 1px #FFF dotted;
	}
	
/* Informations de l'article (auteur, date etc...) */	
.post-info { 
	color : #B32842;
	margin : 2px 5px 15px 15px; padding : 0;}
.post-info a{color : #000;
	text-decoration:none;}
.post-info a:hover {color : #000;
	text-decoration:none;
	border-bottom: 1px #000 dotted;}
	
/* Conteneur des liens 'page suivante' et 'page pr?c?dente' */	
#pagination { 
	margin-top : 10px;
	text-align : center;}
	
/* Menu de droite */
#sidebar {
	float : right;
	width : 180px;
	}
	
#sidebar div {	margin : 5px 10px ;}

/* Titre des menus de la sidebar */
#sidebar h2 { 
	font-size : 1.1em;
	margin : 10px 0 0 0 ; 
	padding : 3px 0 3px 10px;
	line-height: 25px;
	font-weight : normal;
	
	}
	
/* bloc de liste */	
#sidebar ul { 
	margin : 5px; padding : 3px 0;
	font-family: "Tahoma";}
	
/* ?l?ment de liste */
#sidebar li { 
	list-style: none;
	padding: 2px 0 2px 30px;}
	
/* Liens dans les listes */	
#sidebar li a { 
	color : #000;
	text-decoration : none;}
#sidebar li a:hover {color : #000;
	text-decoration:none;
	border-bottom: 1px #000 dotted;}

/* Pied de page (#footer) */
#basdepage {
	text-align : center;
	width : 780px;
	padding: 0;
	background-color: White;
	font-size : 1em;
}

#basdepage p{
	margin: 0;
}


Aidez moi. Merci d'avances aux membres qui me réponderont.
Lady
Modifié par ladykat (04 Jul 2006 - 08:01)
Bonjour Laydkat et bienvenue ici Smiley smile

Il s'agit d'un cas normal de fusion des marges. Tu peux voir ICI une illustration avec quelques solutions.

Dans ce cas tu peux par exemple ajouter overflow:hidden à #top 
#top {
	background: url(img/header02.jpg) no-repeat left top;
	height: 250px;
	overflow: hidden;
}

Modifié par Alan (03 Jul 2006 - 10:18)
Merci Beaucoup Alan pour ton accueil et ta réponse.
Je ne connaissais pas cette fonction. Je vais l'etudier d'un peu plus pres.

Mon déclage est résolu, i'm happy. Smiley ravi
Bonne journée
Ladykat
Modifié par Alan (03 Jul 2006 - 11:38)
a écrit :
Mon déclage est résolu, i'm happy. Smiley ravi


Smiley smile N'oublie pas alors d'ajouter un tag [Résolu] au titre du sujet. (cf. la règle 5 de l'aide si tu ne sais pas comment faire)

A bientôt
Sujet clos
Aller à