28173 sujets

CSS et mise en forme, CSS3

Bonjour

J'ai mis en ligne deux sites avec une largeur fixe (790px) et un margin: auto pour le body afin de centrer le tout. Sous firefox et ie7 aucun problème d'affichage, par contre, sous ie6, j'ai mes deux sites qui sont alignés à gauche et en plus, sur l'un d'entre eux certains conteneurs prennent toutes la largeur de la page sans tenir compte du width de ma balise body. Est-ce normal.
Voici le code CSS du site qui me pose le plus de problèmes:
@charset "iso-8859-1";
BODY             {width: 790px; height: 100%; margin: auto; margin-bottom: 20px;
                  BACKGROUND-IMAGE: url(images/bg5.gif); background-attachment: fixed;
				  font-family: tahoma, verdana, arial}
html             {height: 100%}	
				  
#entete          {width: 790px; height: 169px; margin: auto; margin-bottom: 5px;
                  background-image: url(images/BandeTop.jpg)} 
				  
h2 a             {font-family: georgia; text-decoration: none; color: #000000; border: 2px outset #eedbf3 } 
				
#menu1           {float: left; text-align: center; width: 150px; padding-top: 10px; border: 3px outset #ab0080; background: url(images/menuvertical.gif) repeat-y;
                  font-size: 0.9em; padding-bottom: 10px}
#menu1 a         {font-family: georgia; font-weight: bold; text-decoration: none; color: #ac00ba} 
				  
#titre           {text-align: center; font-size:12px; margin-left: 160px; border: 3px outset #ab0080; height: 150px; 
                  background-image: url(images/Fondtitremodeevasion.jpg) }
h1               {font-size: 24px}

.P1              {background-color: #efeaa4}
#rubriques       {margin-top: 5px; margin-left: 160px; margin-bottom: 20px;
                  font-size: 0.7em; border: 3px outset #ab0080; background-color: #eedbf3}
.r1, .r2, .r3, .r4, .r5 {text-align: center;  border: 1px solid #ab0080; margin: 0px; margin-top: 10px; margin-right: 10px; margin-left: 10px;
                  padding: 0px; padding-left: 4px; padding-right: 4px}
				  
#bonsplans       {margin-top: 5px; margin-left: 160px; margin-bottom: 20px;
                  border: 3px outset #ab0080; background-color: #eedbc4}

				  
.titresbonsplans {text-align: center; font-weight: bold}

#pieddepage      {width: 790px; height: 30px; text-align: center}
h4               {font-size: 0.8em}
#actuislord      {font-size: 0.8em; text-align: left; width: 140px}
#menuhoriz       {width: 790px; height: 30px; font-size: 0.8em; text-align: center; border: 3px outset #ab0080; margin-bottom: 5px}
tr a             {color: #000000; font-weight: bold; text-decoration: none; border: 0px}
.marque          {text-align: center; font-weight: bold; font-size: 1.9em}
.presentation    {text-align: left; font-size: 14px}
#createur        {margin-top: 5px; margin-left: 160px; height: 900px; margin-bottom: 20px;padding: 13px; font-size: 0.7em; border: 3px outset #ab0080; background-color: #eedbf3; text-align: center}
.article         {width: 185px; height: 353px;font-weight: bold; border: 2px solid #ab0080; padding: 5px; margin-bottom: 10px text-align: center; float: left}
.titrecrea       {font-size: 12px;width: 175px; border-bottom: 2px solid #ab0080; padding-bottom: 5px}
.description     {font-size: 10px; width: 175px; border-bottom: 2px solid #ab0080; text-align: left; padding-bottom: 5px}
.prix            {font-size: 10px; width: 175px; border-bottom: 2px solid #ab0080; padding-top: 5px; padding-bottom: 5px; margin-bottom: 5px}
#createur img    {width: 175px; height: 233px}
.achat a         {text-decoration: none; color: #ac00ba; font-size: 12px}


Si quelqu'un auriat une solution car avec les autres navigateurs ça passe nickel.

Pour info les sites en question sont Mode et Evasion et Carnets de route.
Modifié par veust80 (09 Jun 2007 - 22:19)
Salut Smiley cligne ,

j'aurais tendance à dire que c'est ton
<?xml version="1.0" encoding="iso-8859-1"?>
avant ton DOCTYPE qui fait passer IE en mode quirks Smiley smile
Effectivement le soucis venait de la ligne de code. Je m'en étais pas aperçu car sur mon pc, j'ai firefox et ie7 d'ailleurs je constate que j'ai d'autres bugs au niveau de la mise en page sur ie6. Apparemment, ce navigateur n'est pas très coopératif avec le css Smiley biggol
Par contre toujours des problèmes de mise en page avec ie6. Le navigateur aurait-il des soucis avec le positionnement flottant? En effet, sur mes deux sites le menu flottant gauche est mal positionné. exemple1 et exemple 2.
Regardez la mise en page sous ie6. Sur les autres navigateurs et ie7, aucun problème.
Bonjour,

Beaucoup de choses, un peu rapidement :

- Pour commencer, veust80, j'ai supprimé ta signature, qui ne collait pas avec la règle 17 du forum.

- Ensuite, 790px de large c'est trop large pour un écran en 800x600. C'est la barre de défilement assurée. La largeur canonique que l'on donne est 760px de large. Ne pas dépasser les 770 si on veut avoir une chance que ça passe bien sur un écran à ces dimensions.

- Pour tester sous IE6 même quand on a installé IE7 :
http://tredosoft.com/Multiple_IE

- Pour les problèmes de flottans, j'ai au moins relevé un Doubled Float-Margin Bug. Faire une recherche pour les solutions disponibles.

- J'ai croisé une page déclarée en XHTML 1.1. À priori, c'est une erreur. La FAQ explique pourquoi.
Désolé pour la signature, je ne voulais pas abuser, pour ce qui est de la largeur de mon site j'hésite à descendre plus bas en largeur (surtout pour celui de la rando. A voir si ça vaut le coup pour les 8% de visiteurs qui tourne en 800X600.
En tout cas merci pour l'info du display concernant les float ça a déjà résolu un de mes soucis.
Mais le plus gros de mes problèmes demeure sur mon autre site : 2 pages avec le même style affichent un résultat différent :page1 et page2. J'avoue que j'ai du mal à comprendre car les réglages sont les même pour les deux pages, seul le contenu change. Et le problème n'a lieu que sous ie6.
Modifié par veust80 (10 Jun 2007 - 01:32)
Il n'y a pas que sous IE6 qu'il y a des problèmes. Moi j'obtiens ce genre de chose pour le contenu :
upload/2043-modevasion.jpg

Un problème de hauteur fixe en pixels, très probablement.

Pour le reste... eh bien, les pages en question faisant ramer à mort mon navigateur de test et debugging (Firefox, qui je crois a du mal, au moins dans sa version Linux, à gérer les images de fond fixes), je passe la main.