28172 sujets

CSS et mise en forme, CSS3

Bonjour a tous.
J'ai un probleme avec mon site, quand j'ai créé mon css, celui-ci s'affichait comme je voulais sur firefox mais pas sous opera ou IE.
Maintenant que j'ai reinstallé windows, il ne s'affiche plus correctement sous n'importe quel navigateur.
Je voudrais savoir quel code inserer pour le rendre compatible sous ces trois navigateurs ou si il faut créer une feuille pour chacun d'entre eux.
Je suis nouveau en css, ce serait donc sympas si quelqu'un pouvait m'aider.
Mon site est:
http://www.xpastuce.com
et voici mon code css:





Merci par avance pour vos reponses.

html,body {
background-color:honeydew;
width:100%;
height:700px;
margin: auto;
}
p,ul,li,td {
font-size : 90%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : black; 
background-color : white; 
}

h1 {
font-size : 100%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif;
color : navy; 
text-align: left;
padding-left:15px
}

h2 {
font-size : 100%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : red; 
padding-left:15px;
}

a:link {color: black; text-decoration:none;}
a:visited {color: gray; text-decoration:none;}
a:hover {color:green; text-decoration:underline;}


#menu1 {
position:absolute ; 
float:left;
top:20%;
}

#menu2 {
position:absolute ; 
float:left;
top:42%;
}

#menu3 {
position:absolute ; 
float:left;
top:67%;
}

#menu4 {
position:absolute ; 
float:left;
top:100%;
}

#menu5 {
position:absolute ; 
float:left;
top:146%;
}

#partenaires {

top:128%;
float:right;
position:absolute;
right:1%;
}

#partenaires2 {
position:absolute;
float:left;
top:227%;
}

#menu7 {

position:absolute ; 
float:left;
top:179%;
}

#menu8 {

top:26%;
float:right;
position:absolute;
right:1%;
}

#menu9 {

top:110%;
float:right;
position:absolute;
right:1%;
}

#menu10 {

top:69%;
float:right;
position:absolute;
right:1%;
}

#menu11 {

top:89%;
float:right;
position:absolute;
right:1%;
}

#menu12 {

top:51%;
float:right;
position:absolute;
right:1%;
}

#compteur {

position:absolute;
float:right;
top:1%;
right:1%;
}

#news {
margin-left:480px;
position:absolute;
vertical-align:center;
top:38%;
}

#contenu1 {
margin-left:110px;
position:absolute ; 
vertical-align:center;
top:70%;
}

#contenu2 {
margin-left:110px;
position:absolute ; 
top:135%;
right:5%;
}

#contenu3 {
margin-left:110px;
position:absolute ; 
top:25%;
right:30%;
}

#encart {
position:absolute ;
float:top ;
top:1%;
left:30% ;
}

#promob {
position:absolute;
top:110%;
left:37%;
}

#promo {
position:fixed;
float:none;
top:150%;
left:37%;
}

#ci {
position:absolute;
float:right;
right:1%;
top:310%;
}

#copyright {
position:absolute;
top:380%;
margin-left:350px;
}

Modifié par splinurf (11 Jun 2008 - 11:35)
Administrateur
Bonjour et bienvenue splinurf, Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour,

Il ne faut pas faire une feuille de styles par navigateur, mais déjà commencer par maitriser la feuille de styles unique que l'on écrit. Là, ce n'est clairement pas le cas.

La marche à suivre est donc:
1. suivre les standards;
2. travailler en mode Standard et non pas en mode Quirks (comme c'est le cas actuellement avec ton Doctype HTML Transitional sans URL de la DTD);
3. structurer correctement la page HTML;
4. apprendre le positionnement CSS (ici, il y a clairement un abus dans l'utilisation à tout va du positionnement absolu... ça ne donne généralement rien de bon).

Voilà pour un début.

PS: trois pop-up de pub bloquées. Je crois que je ne remettrai pas les pieds sur ce site. Smiley rolleyes
Merci bien pour ta reponse et tes remarques, je vais aller etudier le sujet de pluspres.
Pour ce qui est des popups, je les ai enlevé.