28220 sujets

CSS et mise en forme, CSS3

Affichage décalé...

Bonjour,

Le problème est que mon site marche bien sur Internet Explorer mais pas sur Mozilla. En faite, j'ai des bugs dans les 2 cas (surtout dans Mozilla).

Je vous donne l'adresse :
http://ixzed.free.fr/MicroLaBe/

Avec Mozilla, l'affichage est tout simplement complètement déformé.
Sous Internet Explorer, j'ai un petit problème de marge dans le bas, avant mon footer... si vous regardez sous Mozilla, le footer est collé au menu, tandis que sur IE il y a une marge...

Enfin bref, vous pouvez vérifier la source et les nombreuses feuilles de styles (y'en a 5, mais print.css et color.css n'ont pas rapport avec les problèmes qui nous concernent).

Alors, si vous pouvez m'éclairer pour que je puisse terminer mon projet, ça serait très gentil. Merci d'avance.
Bonjour,

Tu voudrais pas plutôt repartir d'un modèle qui marche ? Comment as tu construit ton site, comme cela ou tu t'es lancé seul.

Quelques rêgles :

1. Toujours vérifier au fur et à mesure sour moz et ie
2. finir la structure avant d'attaquer l'intérieur.

Bon courage à celui qui aura le courage d'aller plonger dans les 3 css.

Je pense que le plus rapide serait de tout remettre à plat.

Bon dimanche soir
le header s'affiche correctement
le problème vient de mon float

j'ai 2 conteneurs, un qui s'affiche à gauche (float : left) et l'autre à droite (float : right)... sous IE, tout fonctionne, sous Mozilla, les 2 se chevauchent.
pfiouuu 4 feuilles de style pour le media screen... Tu ne pourrais pas les regroupé? Car c'est pénible de ne pas tout avoir au même endroit.
bah, pour me démêler j'en ai une avec les classes et une avec les id...
sinon j'peux vous mettre le code réuni ici


*
{
 padding : 0px;
 margin : 0px;
 text-align : justify;
 font-family : Arial, sans-serif;
 font-size : 12px;
}

h1
{
 font-size : 24px;
 font-weight : bold;
}

h2
{
 font-size : 18px;
 font-weight : bold;
}

h3
{
 font-size : 14px;
 font-weight : bold;
}

h4
{
 font-size : 12px;
 font-weight : bold;
}

body
{
 margin-top : 15px;
 margin-right : 10px;
 margin-left : 10px;
 text-align : center;
}

div, input, textarea, select, ul, p, h1, h2, h3, h4
{
 border-width : 1px;
 border-style : solid;
}

ul
{
 list-style-type : circle;
}

table
{
 width : 100%;
 border-width : 0px;
 border-collapse : collapse;
}

img
{
 border-width : 0px;
}

p
{
 margin-top : 2px;
 margin-bottom : 15px;
 width : 100%;
 text-indent : 0px;
 text-align : justify;
}
hr.spacer
{
 clear : both;
 visibility : hidden;
}

hr.hidden, hr.print
{
 position : absolute;
 visibility : hidden;
}

div.hidden
{
 position : absolute;
 visibility : hidden;
}

h1, h2, h3, h4
{
 font-weight : bold;
 padding : 5px;
 margin-bottom : 2px;
}

div#menus h4
{
 width : 200px; 
}

h1, h2, h3, h4
{
 width : 100%; 
}

ul.menu
{
 margin : 0px;
 width : 200px;
}

ul.menu li
{
 margin-top : 0px;
 margin-bottom : 0px;
 margin-left : 22px;
 margin-right : 15px;
}

p, h1, h2, h3, h4, ul.menu
{
 padding : 5px;
}
div#page
{
 background-color : transparent;
 border-width : 0px;
 width : 100%;
 text-align : left;
}

div#header
{
 width : 100%;
 height : 90px;
}

div#menus, div#contenus
{
 border-width : 0px;
 background-color : transparent;
}

div#menus
{
 width : 200px;
 float : left;
 margin-bottom : 0px;
}

div#contenus
{

}

div#menus h4, div#menus ul
{
 margin-right : 10px;
}

ul.menu#img
{
 padding-top : 15px;
 list-style-type : none;
 list-style-image : none;
}

ul.menu#img li
{
 text-align : center;
 margin-left : 0px;
 margin-bottom : 10px;
}

div#footer, div#link
{
 padding-top : 5px;
 padding-bottom : 5px;
 text-align : center;
}

div#link
{
 width : 100%;
 margin-top : 15px;
}
Je pense qu'il te serait quand même plus simple pour te retrouver de regrouper toute tes feuilles CSS pour screen. Avec des commentaires tu peux facilement séparer les id des class etc...
Et puis ça fait moins de requête vers le serveur au chargement de la page...

Ensuite ton code XHTML n'est pas valide.

Et à ce que j'ai pu comprendre ce qui est mal placé c'est la division contenus. Tu devrais peut être mettre un float:right; et un margin-left. Parce que là tu as rien indiqué pour son positonnement.
la division contenus était en float : right ... sauf que sous mozilla elle apparaissait à droite en dehors de la page, je lai donc enlevé et maintenant elle est superposée au menu sous mozilla (toujours correct sous IE !)
et je n'ai pas passé la validation, c'est vrai que je devrais commencer par cela..
Modifié par azix58 (06 Mar 2005 - 20:27)
Sujet clos
Aller à