28173 sujets

CSS et mise en forme, CSS3

Voila, j'ai fais une simple mise en page à partir de ce tutorial. Sous Firefox, il n'y aucun problème, tout marche très bien. Avec IE6, il y a un espace très moche apparaissant entre chaque colonne.

J'ai chercher des solutions sur le forum mais je n'ai trouver que des post bien compliqué. Donc si vous pouviez m'aider.

Voici mon code :

Css
.gauche {
  float: left;
  width: 233;
  height: 61;
  background-image: url(img/bordgauche.gif);
}

.droite {
  float: right;
  width: 196;
  height: 61;
  background-image: url(img/borddroite.gif);
 }
 
.fond{
  margin-left: 233;
  margin-right: 196;
  height: 61;
  background-image: url(img/fond.gif);
}


Html
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>

<div class="gauche"></div>
<div class="droite"></div>
<div class="fond"></div>

</body>
</html>


Merci.
Modérateur
Bonjour ? Smiley sweatdrop

Dans le tutoriel, la page est valide ; ce n'est pas le cas du code que tu donnes en exemple. Pour garantir un rendu minimal, c'est indispensable. Smiley cligne

Il te faut donc reprendre la structure html pour qu'elle ressemble à celle du tuto.

Et dans ton css, les valeurs de tes propriétés width, height et margin sont du type 233, 61, etc...

233 quoi ? patates ? kiwis ? moutons ? Smiley confuse

Il existe plusieurs unités en CSS et si tu ne l'indiques pas, alors tu ne peux garantir que le navigateur dont se sert l'utilisateur interprétera la chose correctement.
Je ne savais pas qu'il était indispensable de préciser l'unité. Vu que ca marchait sans, j'avais fais sans ajouter les "px". J'ai réessayé en précisant mais le problème est toujours là.

Sinon, que veux tu dire par "la page est valide" ?
Oui, les navigateurs rajoutent le px en mode Quirks, ce n'est donc pas ça qui posait un problème.

Tu dis que tu fais une mise en page simple à partir du tutoriel mais pas vraiment en fait. Tu combines contexte de formatage IE et marges latérales au bloc central, ce qui est explicitement déconseillé dans le tutoriel...
Modifié par JyuniX (26 Aug 2007 - 10:26)