Problème margin ? padding ?

traaf a écrit :
la feuille de style est pourtant validée w3c (qqes avertissements au niveau des couleurs, mais bon..)

Le fait que la feuille de style soit validée signifie simplement que tu n'as pas fait d'erreur de syntaxe. Mais cela ne garantit aucun résultat.

En particulier, cela ne garantit pas :
- l'absence d'erreurs de conception de ta part ;
- l'absence d'erreurs d'interprétation (ou de défaut d'implémentation) par les navigateurs.

J'ai regardé un peu et testé deux ou trois choses, mais je n'ai pas trouvé la source de cet espace blanc sur IE.

De toute façon, il y a plus simple pour réaliser ce design, et moins aléatoire que l'ajout d'une div vide de contenu. Petit exemple :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Il me semble que ça correspond à ce que tu veux. Si tu travailles avec deux images (vu la nature des images de fond de ton menu, du PNG-8 via The Gimp seront très bien niveau poids), tu peux avoir un seul div conteneur, et appliquer l'autre image sur la liste ul. Si tu veux absolument trois images, deux div imbriquées contenant ton ul, et on applique les images par « strate ».

Sinon, tu as un problème sous IE (bug du Three Pixel Jog) qui génère un espace blanc entre les deux parties de ton en-tête. Outre le bug d'IE, le problème vient du fait que cette construction, avec des éléments juxtaposés, est fragile et peu fiable. Mieux vaut avoir une imbrication, par exemple. Ne pas penser en termes de « découpe » comme traditionnellement avec les tableaux, ça serait une erreur de conception fondamentale. Il y a très largement moyen d'optimiser tout ça.

merci de ton attention,
partant d'un niveau de connaissance zéro, j'essaie d'apprendre

j'ai réglé (tu me le confirmera ?) le problème du header
avec l'image en top left

et un arriere plan image de 30 pixel sur 100% de largeur de page, positionné sous l'image avec z-index

#headerD {
position: absolute;
z-index: 0;
top: 0;
right: 0;
width: 100%;
height: 201px;
border: none;
margin: 0;
padding: 0;
background: url(menus/ban01D.png) repeat-x;
}

#headerG {
position: absolute;
z-index: 10;
top: 0;
left: 0;
height: 201px;
width: 600px;
border: none;
margin: 0;
padding: 0;
background: url(menus/ban01.png);
}

en ce qui concerne le menu, j'avais privilégié 3 images de 30 pixel, pour ne pas avoir a placer en arrière-plan une image de 500pixels + lourde a charger, d'autant plus que ce menu sera fourre-tout et risque de s'allonger

j'ai reconstruit le tout en ancrant les images aux balises
H3 pour le haut
ul pour le corps
p pour le bas

c'est mieux, mais ca pose toujours problème à l'agrandissement des polices

c'est accessible ici
je pensais pas que c'etait a ce point casse tête, heureusement que j'ai toujours aimé les jeux de construction
Modifié par traaf (26 Sep 2006 - 16:44)

traaf a écrit :
j'ai réglé (tu me le confirmera ?) le problème du header
avec l'image en top left

Pour être plus précis : problème « réglé » avec l'utilisation du positionnement absolu.
C'est encore un bricolage peu heureux, même si là tout de suite il ne pose pas de problème (du moins pas de problème visible).

Utiliser le positionnement absolu pour ça, c'est un peu chasser le canard sauvage au lance-missile. Je suis d'ailleurs d'avis que le positionnement absolu devrait être interdit aux débutants, et qu'il devrait y avoir un permis de positionnement absolu. (Je plaisante à moitié).

Il y a beaucoup plus simple : utiliser deux éléments imbriqués.
J'ai déjà précisé qu'il ne fallait pas penser en « cellules » ou en « découpage ». Tout dans une page web n'est pas une « zone », et une page web n'est pas un ensemble de zones juxtaposées.

Pour ma part, je ferais un seul bloc (positionnement statique, c'est à dire par défaut), une div par exemple qui prendra naturellement 100% de la largeur disponible. Je lui donnerais la hauteur voulue pour le bandeau (un poil haut à mon goût... c'est parfait en 1280x1024, mais en 800x600 ça bouffe énormément !), et l'image de fond qui va bien en repeat-x. Une fois qu'on a ça, il ne reste plus qu'à ajouter l'image avec l'ordinateur et le texte, sans tout ce qui vient déjà du bandeau. Hop, un petit PNG transparent, tant qu'à faire optimisé (passage en couleurs indexées, pour réduire drastiquement le poids du machin !). Le voilà, d'ailleurs :

On passe de 55Ko à 16Ko. Je crois que c'est assez appréciable.
Note : la transparence, là, c'était plus pour m'amuser. On n'y gagne pas particulièrement en taille, et on aurait pu laisser le fond gris.

Pour placer l'image, soit on la met comme fond d'un bloc contenant un « texte alternatif » (que l'on masquera ensuite aux utilisateurs de navigateurs graphiques), soit, plus simple, on insère l'image comme une image de contenu, avec un texte alternatif (attribut alt) qui va bien.

En fait, dans ta situation, j'utiliserais pour le code HTML de mon en-tête le code suivant :

<h1 id="titre">
	<img src="titre-site.png" alt="Titre du site" />
</h1>

Rien de plus.

En CSS, on supprime les marges du h1, on lui donne la hauteur voulue en pixels, l'image de fond, etc.
La seule difficulté sera peut-être de positionner l'image du titre au pixel près. Pas sûr que de jouer sur les valeurs de vertical-align (appliqué à l'image, pas au h1) soit vraiment fiable. Il faudra peut-être placer l'image en display:block.

Si tu savais le nombre de construction foireuses et horriblement complexes que j'ai testées, avant de me résoudre a acheter le bouquin CSS2 recommandé ici
Bouquin que j'ai potassé pour réussir a finalement pondre ce truc que je trouvais, comparativement a mes précédentes tentatives, plutot réussi, suffisament en tout cas pour oser le présenter ici

et là, paf ! la déculottée
c'est comme ca qu'on apprend

je te disait que je débute en css, j'avais tout de même quelques notion relativement anciennes de html, et là, quand je vois cà :

<h1 id="titre">

	<img src="titre-site.png" alt="Titre du site" />

</h1>

ca me parait très bizarre comme construction, pour moi, les balises h1 sont associées a du texte
je n'aurais jamais spontanément pensé à un truc comme ca, qui n'a aucun sens sans l'utilisation conjointe des css

c'est vraiment une approche très différente...

je n'avais pas compris ta référence a l'imbrication, je vois mieux de quoi tu parles maintenant

peux tu expliciter cette phrase ?

a écrit :
Utiliser le positionnement absolu pour ça, c'est un peu chasser le canard sauvage au lance-missile. Je suis d'ailleurs d'avis que le positionnement absolu devrait être interdit aux débutants, et qu'il devrait y avoir un permis de positionnement absolu. (Je plaisante à moitié)

quelques pistes ?

merci

traaf a écrit :
je te disait que je débute en css, j'avais tout de même quelques notion relativement anciennes de html, et là, quand je vois cà :

<h1 id="titre">
	<img src="titre-site.png" alt="Titre du site" />
</h1>

ca me parait très bizarre comme construction, pour moi, les balises h1 sont associées a du texte
je n'aurais jamais spontanément pensé à un truc comme ca, qui n'a aucun sens sans l'utilisation conjointe des css

L'élément h1 est un élément de type bloc qui ne peut contenir que des éléments de type en-ligne. Or, l'élément img est un élément de type en-ligne (inline). C'est donc tout à fait valide.

Et si on regarde bien, le h1 dans le texte ci-dessus contient bien du texte :
- du texte « graphique », inscrit en dur dans l'image ;
- une alternative textuelle.

En cas de non chargement de l'image, on verra l'équivalent de :

<h1 id="titre">Titre du site"</h1>

C'est une solution qui me semble à la fois logique et accessible.

L'autre type de solution proposée, c'est de laisser l'image comportant le texte en dur dans la feuille de style, mais de fournir un texte que l'on cachera via les CSS (en le positionnant en absolu en dehors de la fenêtre, ou encore via un text-indent négatif). Exemple sur Alsacréations.FR :

<div id="header">
	<h1>Alsacréations</h1>
</div>

Voir le rendu sur le site : l'image est affichée via la feuille de style, qui cache au passage (visuellement) le h1.

Dans la version que tu proposais, tu avais une information importante (le nom du site) qui n'était accessible que si la feuille de style était appliquée. Pour les navigateurs non graphiques et les lecteurs d'écran, pas d'alternative textuelle. De même, pas d'alternative textuelle si la feuille de style n'est pas chargée ou si elle est désactivée. Ça ne me semble pas optimal comme solution.

traaf a écrit :

peux tu expliciter cette phrase ?
Utiliser le positionnement absolu pour ça, c'est un peu chasser le canard sauvage au lance-missile. Je suis d'ailleurs d'avis que le positionnement absolu devrait être interdit aux débutants, et qu'il devrait y avoir un permis de positionnement absolu. (Je plaisante à moitié)

quelques pistes ?
Le positionnement absolu est un outil très puissant mais dont l'emploi abusif est dangereux. Un élément positionné en absolu sort du flux : il n'interagit plus avec les autres éléments, ne les repousse plus, etc. De plus, il existe quelques bugs prise de tête liés au positionnement absolu, ce qui ne veut pas dire qu'il ne faut pas l'utiliser (on utilise bien les flottants, encore plus bugués avec IE !), mais qu'il faut être prudent.

C'est ce qui me fait dire que :
- le positionnement absolu est l'artillerie lourde du positionnement (efficace et radical, mais gare aux dommages collatéraux !) ;
- mieux vaut ne l'utiliser que dans les cas où il est vraiment indispensable... c'est à dire assez rarement.
Modifié par mpop (27 Sep 2006 - 10:49)