28220 sujets

CSS et mise en forme, CSS3

[Résolu] Affichage décalé

Bonjour,

J'avais enfin réussi à créer des cadres qui tiennent la route (20 heures de boulo pour une seule page..., je sais, je ne suis pas une rapide)
Alors tout semblait beau et joli sous IE, mais grosse surprise sous Firefox...

Pourquoi le sort s'acharne-t-il encore ? Smiley decu

http://www.oenas.fr/page3.html
Salut.

Petite remarque préliminaire : tu utilises des classes partout, alors que tu n'as besoin que d'id (et encore !), et tu répètes le même style pour chaque cadre dans ta feuille de style ! Il doit y avoir moyen de faire plus court ...


<div id="canari">
    <div class="composition">
    <h2>Composition</h2>
    <ul>
        <li>65% alpiste</li>
        <li>12% niger</li>
        ...
    </ul>
    </div>
    <div class="description">
        <h2>Mélange canaris</h2>
        <p>Sac de 20kg Réf: O&S/PL65-20K</p>
        <p>Sac de 5kg Réf: O&S/PL65-5K</p>
    </div>
<hr />
</div>


Pour la mise en forme :

.description{
width: 270px;
}
.composition{
float: right;
witdh: 200px;
}
#canari{
background: #fff url(../images/canari.gif) no-repeat center center;
}
hr{
clear: both;
height: 0;
}
Même remarque que Sopo, pourquoi s'amuser à utiliser des styles CSS si c'est pour mettre un style différent à chaque élément, en faisant des copier-coller du code CSS.

Le pincipe des feuilles de style est justement de pouvoir définir un style qui sera réutilisé à l'envie en l'appelant via, par exemple, une classe.

Du coup, au lieu de donner un nom de classe différent à chaque cadre, tu leurs donnes à tous la même classe, et tu ne définis qu'une seule fois dans la feuille de style la mise en forme pour tous ces cadres.
Bon après analyse du code, il y a beaucoup de cafouillage selon moi.

L'absence d'un div conteneur avec propriété oblige à redonner des propriétés à tout va (notament le float:left).
Je suis étonner de trouver des h4 et h5 sans h1 à h3 dans la page... l'accessibilité en prend un coup. Par ailleurs trop de div tue les divs.

Oui mais concrètement tu propose quoi Smiley fache ?

Je propose étant donné la nature des informations de créer un tableau bien propre, bien valide Strict, qui sert à la mise en place de données tabulaire et non d'une présentation.

Sincèrement la seule manière d'avancer est d'avoir déjà un gabarit ce qui n'est pas votre cas...

Voici pour bien démarrer la journée

/* BODY ET PSEUDOS-CLASSES
----------------------------------------------- */

body { 
	background: #fff;
	color: #000;
	font-family: arial, verdana, sans-serif;
	font-size: 0.7em;
	text-align: center;
	margin: 0;
	padding: 0;
	}

a:link { 
	text-decoration: underline; 
	color: #66c;
	background: transparent;
	}
	
a:visited { 
	text-decoration: underline; 
	color: #c30;
	background: transparent;
	}
	
a:hover, a:active { 
	text-decoration: underline; 
	color: #f60;
	background: transparent;
	}


/* DIVS DE GABARIT
----------------------------------------------- */

#conteneur {
	background: #fff;
	color: #000;
	text-align: left;
	width: 742px;
	margin: 0 auto 0 auto;
	padding: 0;
	}

[code]

Ceci est un code pour votre page html qui vous permet d'avoir le tout centré bien propre.

[code]
<html>
<head>
<body>
<div id="conteneur">
ma page
</div>
</body>
</head>
</html>


Après vous faite un tableau super valide sur cette base :


<table summary="xxxxx">
<caption>Titre et légende de mon tableau</caption>
<thead>
<th id="entete1">Mes références</th>
<th abbr="Image" id="entete2">Image du produit</th>
<th id="entete3">Désignation</th>
</thead>
<tbody>
<tr >
<td headers="entete1">Données</td>
<td headers="entete2">Données</td>
<td headers="entete3">Données</td>
</tr>
</tbody>
</table>


Voilà pour finir, ne pas confondre mise en page en tableau mise en tableau de données.
Faire des divs à tout prix est inutile, surtout quand les données sont faites pour être intégrées dans un tableau comme c'est le cas ici.

Je vous recommande pompage.net pour des informations plus précises sur les tableaus à double entrée ( menu en hat et menu à gauche)...

Bon code Smiley cligne
Samuel Berg a écrit :
Je propose étant donné la nature des informations de créer un tableau bien propre, bien valide Strict, qui sert à la mise en place de données tabulaire et non d'une présentation.


Ca se discute, non ? On peut aussi voir ça comme une succession de fiches concernant les différents types d'aliments, et qui comprennent chacune une liste des ingrédients ...
J'ai suivi les précieux conseils qui m'ont été donnés et j'ai tout repris depuis le début. Smiley cligne

Je n'ai plus de problème de décalage, ni sous IE, ni sous FF.

Merci à tous pour votre aide Smiley smile
Modifié par Dgidge (24 Jan 2006 - 13:44)
Sujet clos
Aller à