28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problémes de décalages sous firefox

Bonjour a tous...
Depuis le temps que je voulais le faire...Un site 100% css...Hélas mes débuts son bien laborieux.

Voila ce que j'ai fais : http://1lien.biz/aide.php
Si vous étes sur IE (ou mieux maxthon Smiley lol ) vous verrez une trés belle page Smiley cligne ...Par contre si vous étes sous Firefox vous pourrez voir des truks tout décalés..

Je ne comprends vraiment pas...faut dire que je débute vraiment en CSS...

Voici le code de ma page que j'ai simplifié un peu pour faciliter la lecture


<head>
<link href="general.css" rel="stylesheet" type="text/css">
</head>

<body>

<!--pour centrer mon document -->
<div align="center">       						   
<!--pour affichier ma bannière d'en tête -->
<div class="header"></div> 			

<!--le conteneur pour mon menu-->
<div class="menu"> je mettrais un menu ici</div> 

<!--Pour mettre que mes textes soient aligner vers la gauche-->
<div id="conteneur">					

<!--centre de ma page qui va contenir les textes/images et tout ça-->		
<div class="centre">			

<!--Ca c'est pour pas mettre de texte sur les pieds de la sorcière-->
<div class="pieds"></div>							
  <h1>Bienvenu sur CuteDesign</h1>

  <br><br><br><br><br><br><br><br><br><br><br>

</div>

<!--le footter (la barre en bas) -->
<div class="footer">pied de page </div>			

</div>
</div>
</body>


et ca c'est le code de ma feuille de style :


body {
BACKGROUND-color: #efefef;  
margin: 0;
padding: 0;
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: normal; 
}

.header {
background-image: url('design/header.jpg');
background-repeat: no-repeat;
width: 865px;
height: 208px;
}

.menu {
background-image: url('design/menu.jpg');
padding-top:0px;
padding-left:305px;
width: 865px;
height: 34px;
margin:0px;
text-align:left;

border: 0;
}

div#conteneur {
	width:782px;
	position:absolute;
	left:152px;
	
	text-align:left;
	z-index:1;}
	
.pieds {
float:left;
position:relative;
background-image: url('blank.gif');
width: 180px;
height: 50px;
}

.centre {
background-image: url('design/centre.jpg');
background-color: #ffd7c6;
background-repeat: no-repeat;
background-position: top left;
text-align: left;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom:0px;
padding-top:8px;
padding-bottom:6px;
padding-left:6px;
padding-right:6px;
}

.footer {
background: url(design/bottom.jpg);
text-align: center;
padding-top:6px;
height: 32px;

}


Si quelqu'un pouvait m'apporter quelques précisions je lui en serait trés reconnaissant..
Merci a tous Smiley smile
Modifié par shantee (26 May 2006 - 09:38)
salut,

j'ai très vite parcouru
si tous tes backgrounds font la même taille que les <div> qui les contiennent, ajoute leurs les attributs suivants après url(...) no-repeat top left ; et enlève les paddings.
tes images et textes tu les placeras avec des marges.
Modifié par hophop (25 May 2006 - 18:21)
essaie comme ça...



pour le css

body {
      BACKGROUND-color: #efefef;  
      margin: 0;
      padding: 0;     /* inutile */ 
     
      font-family: Geneva, Arial, Helvetica, sans-serif; 
      font-size: 12px; 
      font-weight: normal;  /* inutile */

      text-align: center;     /* comme expliqué sur le tuto, correctif IE */
}

#global {       /* c'est pour centrer tout ton site */
       width: 865px;
       margin-left: auto;
       margin-right:auto;

       text-align: left;       /* comme expliqué sur le tuto, suite correctif IE */

}

.header {
       background-image: url('design/header.jpg') no-repeat;
       width: 865px;
       height: 208px;
}



.menu {

        background-image: url('design/menu.jpg') no-repeat top left;
        width: 865px;
        height: 34px;
        text-align:left;
}



div#conteneur {
	float: right;
	margin-right: 0px;
	width:782px;

	z-index:1;
}

	

.pieds {
        float:left;
        position:relative;
        background-image: url('blank.gif');
        width: 180px;
        height: 50px;

}



.centre {
        background-image:#ffd7c6 url('design/centre.jpg') no-repeat top left;
        text-align: left;

/* partie à revoir pour ton contenu*/
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom:0px;
        padding-top:8px;
        padding-bottom:6px;
        padding-left:6px;
        padding-right:6px;
/*---------------------------------*/
}


.footer {
        background: url(design/bottom.jpg);
        text-align: center;
        padding-top:6px;
        height: 32px;
}


et ton html:


<body>

<!--pour centrer mon document -->
<div id="global">       						   

<!--pour affichier ma bannière d'en tête -->
<div class="header"></div> 			

<!--le conteneur pour mon menu-->
<div class="menu"> je mettrais un menu ici</div> 

<!--Pour mettre que mes textes soient aligner vers la gauche-->
<div id="conteneur">					

<!--centre de ma page qui va contenir les textes/images et tout ça-->
<div class="centre">			

<!--Ca c'est pour pas mettre de texte sur les pieds de la sorcière-->
<div class="pieds"></div>							

  <h1>Bienvenu sur CuteDesign</h1>

  <br><br><br><br><br><br><br><br><br><br><br>
</div>



<!--le footter (la barre en bas) -->
<div class="footer">pied de page </div>			
</div>
</div>

</body>

Modifié par hophop (25 May 2006 - 18:56)
Wow Respect Hophop Smiley smile

Merci beaucoup, j'ai un peu changé comme tu m'as expliqué et ma page s'affiche maintenant correctement...

Bon ben je vais perfectionner un peu mon CSS Smiley ravi
shantee a écrit :
Bon ben je vais perfectionner un peu mon CSS Smiley ravi

Tu peux peut-être aussi perfectionner ton HTML, je pense.
Je dis peut-être une bêtise, mais ton document à l'air de commencer comme ça :
<head>
<link href="general.css" rel="stylesheet" type="text/css">
</head>

Il te manque :
– Une déclaration de type de document (super important pour la compatibilité entre les navigateurs) ;
– la balise ouvrante <html> ;
– un élément title.

Sur le centrage de la page :
Alsacréations – Centrer les éléments ou un site web en CSS
Salut
Non tu ne dis pas de bétise en effet une page qui commence comme ça n'est pas une bonne page Smiley smile

regarde ce que j'avais écri :
a écrit :
Voici le code de ma page que j'ai simplifié un peu pour faciliter la lecture


je me douté que le probléme ne venait pas de la donc j'ai supprimé tout ca...pour éclaircir. Smiley cligne voila
shantee a écrit :
je me douté que le probléme ne venait pas de la donc j'ai supprimé tout ca...pour éclaircir. Smiley cligne

Sauf que ça compte ! Smiley sweatdrop
En l'absence de Doctype bien formée, IE va utiliser l'ancien modèle de boîte d'IE, tandis que Firefox va continuer à utiliser le modèle de boîte standard. Ça peut changer beaucoup de choses !
Tes problèmes de positionnement ne se résument pas à ça, mais mieux vaut ne pas cumuler !
Sujet clos
Aller à