100 % mais pas trop non plus [résolu]

Bonjour,

Je butte sur un problème de dimensionnement (ben tiens !). Ici :

http://ephemer.free.fr/pmdv/

Sur la barre verte (Accueil - Forum - Contact), je cherche à placer un arrondi de chaque côté, et au centre une image de fond répétée pour faire le lien entre les deux arrondis.

Seulement après moult triturages de marges, % et autres overflow je ne suis pas parvenu à caler correctement le centre de la barre de sorte à bien joidre les deux arrondis.

Si qqun peut m'expliquer... Merci

Le code HTML :

<div id="menu"><div id="menu_g"><img src="img/menu_g.gif" width="15" height="25" alt=""></div>
<div id="menu_d"><img src="img/menu_d.gif" width="15" height="25" alt=""></div>
<div id="menu_c"><p id="menu_t">Accueil - Forum - Contact</p></div>
</div>

La CSS :

* {margin:0px; padding:0px;}

#menu {position:absolute; top:130px; left:10px; width:99%; height:25px; z-index:95;}
#menu_g {position:absolute; top:0px; left:0px; width:15px; height:25px; z-index:95;}
#menu_c {position:absolute; top:0px; left:15px; width:100%; height:25px; background-image:url(img/menu_c.gif); z-index:94;}
#menu_d {position:absolute; top:0px; right:15px; width:15px; height:25px; z-index:95;}
#menu_t {position:absolute; top:2px; font-weight:bold; font-size:11.5pt; z-index:96;}

Modifié par Epheuer (19 Mar 2006 - 12:25)

Moi je reprendrais tout à zéro

Bon désolé, ça aide pas trop, mais là c'est quand même un bricolage pas très propre, pas étonnant que ça donne des choses bizarres.

Déjà, le fait d'utiliser des éléments en positionnement absolu de partout, c'est chercher les ennuis (pour rester poli ).

Par exemple, le menu en position absolute avec une largeur de 100%, il marche très bien. Il prend bien 100% de la largeur de la fenêtre (qui est son seul référent pour le calcul de la largeur, vu que son positionnement en absolu le fait sortir du flux du document), et ensuite il est positionné à 10 pixels à gauche. Du coup, 100% de la largeur + 10px, ça fait dix pixels qui dépassent quelle que soit la résolution de l'utilisateur, et ça donne une barre de scroll horizontale.

Donc pas de bug, tout marche très bien. Seulement, la technique employée ne correspond pas à l'effet recherché. Game over, on essaie autre chose.

Ensuite, le coup des 5 bloc imbriqués pour dessiner un seul bloc réel, je trouve ça un peu étrange. Ça n'aurait pas été plus simple avec un seul bloc (image de fond en repeat-x), et deux petites images à positionner des deux côtés. Ces images, on pourra les mettre en position: absolute, à l'intérieur du bloc, pourquoi pas.
Mais pour l'instant, c'est un peu lourd pour pas grand chose.

Pour terminer, je rappelle que le positionnement absolu c'est dangereux.
Ne pas oublier que si les CSS sont très puissantes, cela présente un désavantage majeur : on bidouille des choses sans trop savoir ce que ça implique. Parce que savoir ce que ça implique, ça demande beaucoup d'investissements, donc forcément ça prend du temps. Mais les enthousiastes des CSS codent à tout va, et viennent nous voir sur Alsacréations en disant « Ah mais je voulais faire ce truc trop génial, et maintenant tout fout le camp ». Bon, dans le cas qui nous occupe c'est quand même pas aussi marqué, mais il y a un peu de ça.
Je précise que je ne critique pas méchamment, vu que moi-même je faisais ça il y a même pas un an (voire il y a quelques mois...), et que je continue à faire des bourdes plus grosses que moi, mais à un autre niveau. Et puis maintenant c'est un peu plus rare, avec l'habitude on évite certaines choses.

Dans tous les cas, le positionnement en absolu ne me semble pas adapté pour le design général d'une page. Sauf contrainte spéciale, bien sûr.

On reprend tout ça en positionnement statique ?

mpop a écrit :

Par exemple, le menu en position absolute avec une largeur de 100%, il marche très bien. Il prend bien 100% de la largeur de la fenêtre (qui est son seul référent pour le calcul de la largeur, vu que son positionnement en absolu le fait sortir du flux du document), et ensuite il est positionné à 10 pixels à gauche. Du coup, 100% de la largeur + 10px, ça fait dix pixels qui dépassent quelle que soit la résolution de l'utilisateur, et ça donne une barre de scroll horizontale.

Oui c'est foireux d'accord.

mpop a écrit :

Donc pas de bug, tout marche très bien. Seulement, la technique employée ne correspond pas à l'effet recherché. Game over, on essaie autre chose.

Oui mais quoi ?

mpop a écrit :

Ensuite, le coup des 5 bloc imbriqués pour dessiner un seul bloc réel, je trouve ça un peu étrange. Ça n'aurait pas été plus simple avec un seul bloc (image de fond en repeat-x), et deux petites images à positionner des deux côtés. Ces images, on pourra les mettre en position: absolute, à l'intérieur du bloc, pourquoi pas.

Le pb c'est que les arrondis ont un fond transparent, je ne peux pas les superposer au repeat-x du conteneur. D'ou cette construction.

mpop a écrit :


Dans tous les cas, le positionnement en absolu ne me semble pas adapté pour le design général d'une page. Sauf contrainte spéciale, bien sûr.

On reprend tout ça en positionnement statique ?

Je ne vois pas bien l'intérêt d'utiliser les CSS et de faire une mise en page sans tableaux si c'est pour faire du positionnement statique.

Et à ce que j'en sais les lecteurs d'écrans lisent les blocs dans leur ordre d'écriture donc tant qu'a faire je positionnerais ensuite ceux-ci de sorte à permettre une lecture quasi directe du contenu.

Merci.

Epheuer a écrit :

Le pb c'est que les arrondis ont un fond transparent, je ne peux pas les superposer au repeat-x du conteneur. D'ou cette construction.

Finalement j'ai changé le fond des arrondis de sorte à pouvoir faire cette superposition.

Ce faisant j'ai changé l'approche de la barre : centrée, largeur 100% avec marges. Le hic c'est que comme de bien entendu Firefox ignore la marge de droite....

( http://ephemer.free.fr/pmdv/ )

Code HTML :

<div id="menu"><div id="menu_g"><img src="img/menu_g.gif" width="15" height="25" alt=""></div>
<div style="text-align:left"><p id="menu_t">Accueil - Forum - Contact</p></div>
<div id="menu_d"><img src="img/menu_d.gif" width="15" height="25" alt=""></div>
</div>

CSS :

#menu {position:relative; top:130px; width:100%; height:25px; margin-left:15px; margin-right:15px; text-align:center; background-image:url(img/menu_c.gif); overflow:hidden; z-index:95;}
#menu_g {position:absolute; top:0px; left:0px; width:15px; height:25px; z-index:95;}
#menu_d {position:absolute; top:0px; right:0px; width:15px; height:25px; z-index:95;}
#menu_t {position:absolute; top:2px; left:15px; font-weight:bold; font-size:11.5pt; z-index:96;}

Bonjour,

Si Accueil - Forum - Contact est un menu alors le plus simple serait de le décrire en html par une liste :

<ul>
<li><a href="">Accueil</a></li>
<li><a href="">Forum</a></li>
<li><a href="">Contact</a></li>
</ul>

Pour le rendu visuel que tu cherches c'est assez simple et les éléments dont on dispose suffisent déjà largement.

on a besoin de deux images :
- droite.gif : 1500px de large, se termine à droite par l'arrondi.
- gauche.gif : pas très large, un peu quand même, se termine à gauche par l'arrondi.

. ul aura droite en background
. le premier des li aura gauche en background

donc le html devient

<ul>
<li id="first_li""><a href="">Accueil</a></li>
<li><a href="">Forum</a></li>
<li><a href="">Contact</a></li>
</ul>

Pour l'histoire de la transparence on peut faire comme ceci :
Partant, par exemple, de l'hypothèse que ul fait 80% de large et est centré, on fait sortir le premier li de son conteneur à gauche par position:relative; (mettons de 30px)

le rendu à l'écran est donc un bloc de 80% + 30px décalé à gauche.
on recentre en déplaçant le tout de la moitié de la valeur du décalage vers la droite grâce à position relative sur ul.

css :

ul {
width:80%;
height:25px;
background:url(droite.gif) no-repeat top right;
list-style:none;
margin:0 auto;
padding-left:0;
position:relative;
left:15px;

}

li {
float:left;
height:100%;
margin-right:10px;/* çà c'est pour faire joli */
padding-left:15px;/* çà c'est pour faire joli aussi */
font-weight:bold;/* çà c'est pour faire joli aussi */
position:relative;
left:-30px;
}

#first_li {
background:url(gauche.gif) no-repeat top left;
}

mpop a écrit :
En reprend tout ça en positionnement statique ?

Epheuer a écrit :
Je ne vois pas bien l'intérêt d'utiliser les CSS et de faire une mise en page sans tableaux si c'est pour faire du positionnement statique.

Je parle de positionnement statique (position: static;, la valeur par défaut) par opposition au positionement absolu ou relatif. Il est plus sage, selon moi, de considérer que tous les blocs seront en statique, pour ensuite ne mettre en relatif (impact faible) ou en absolu (dangereux, fort impact) que les blocs qui en ont vraiment besoin.

Dans ton cas, la zone de titre peut être en statique, le menu qui suit peut être en statique, le menu de gauche peut être en statique mais flottant à gauche, la zone de contenu peut être en statique avec une marge à gauche de la largeur du menu de gauche, et enfin tu peux rajouter en pied de page, toujours en statique, à la fin.
Les éléments dans le code seront présent dans l'ordre de la phrase ci-dessus.

Niveau design, pour coller les éléments aux bords de l'écran, on se contentera d'un simple :

html, body {margin: 0; padding: 0;}

Epheuer a écrit :
Et à ce que j'en sais les lecteurs d'écrans lisent les blocs dans leur ordre d'écriture donc tant qu'a faire je positionnerais ensuite ceux-ci de sorte à permettre une lecture quasi directe du contenu.

Si c'est ta principale motivation pour placer tes blocs en positionnement absolu, on peut résoudre ce souci d'accessibilité en plaçant en début de page des liens d'échappement, pointant vers les différentes zones de la page (menu de navigation et zone de contenu, principalement).

Ne pas présumer que le visiteur malvoyant ou aveugle voudra forcément lire tout le contenu de la page. Il se peut qu'il veuille naviguer dans le site pour passer à une autre page.

Si la position du menu de navigation dans le code par rapport au contenu, il y avait une étude récemment (cf forum accessibilité sur Alsacréations) qui disait qu'en gros les avis étaient partagés. Certains voulaient le contenu d'abord, d'autres voulaient la navigation d'abord. Ce n'est donc pas forcément une forte contrainte. Par contre, des liens d'échappement (raccourcis), là c'est important.
Modifié par mpop (18 Mar 2006 - 15:16)

Intéressante approche clb56, mais j'ai essayé et les images de fond ne sont pas visibles ?

http://ephemer.free.fr/pmdv/
Modifié par Epheuer (18 Mar 2006 - 15:31)

mpop a écrit :

Je parle de positionnement statique (position: static;, la valeur par défaut) par opposition au positionement absolu ou relatif. Il est plus sage, selon moi, de considérer que tous les blocs seront en statique, pour ensuite ne mettre en relatif (impact faible) ou en absolu (dangereux, fort impact) que les blocs qui en ont vraiment besoin.

Donc si je comprends bien, mettre en static à l'intérieur de cadre, oui ce doit être au moins aussi bien.

mpop a écrit :

Ne pas présumer que le visiteur malvoyant ou aveugle voudra forcément lire tout le contenu de la page. Il se peut qu'il veuille naviguer dans le site pour passer à une autre page.

Oui, je pensais mettre d'abord les indications pour la navigation par clavier, ensuite le contenu, puis la navigation classique, divers éléments annexes comme le bas de page par exemple et enfin l'en-tête du document (qui en dehors de toutes considérations visuelles ne me semble pas d'une grand utilité).

Epheuer a écrit :
Intéressante approche clb56, mais j'ai essayé et les images de fond ne sont pas visibles ?

http://ephemer.free.fr/pmdv/

Ton sélecteur CSS qui n'est plus bon (il pointe vers #menu alors que tu n'as qu'un simple <ul>...</ul>)

Cette approche est toujours valable, mais demandera en plus un troisième bloc, pour l'image de fond.

Par exemple :

<div id="navigation">
	<ul>
		<li id="premier">...</li>
		<li>...</li>
		<li>...</li>
	</ul>
</div><!-- fin de div#navigation -->

#navigation {
	margin: 0 10px;
	background: url(imagefond.png) repeat-x left top;
}
#navigation ul {
	margin: 0;
	padding: 0;
	background: url(droite.png) no-repeat right top;
}
#navigation ul li {
	float: left;   /* ou display: inline; ? (Les deux sont censé marcher, mais je ne suis pas tout à fait sûr) */
	margin: 0;
	padding: 0;
	background: url(gauche.png) no-repeat left top;
}

Et voilà. Tant que #navigation n'est pas positionné en absolu, ou flottant, il prendra toute la largeur disponible (moins les marges).
Modifié par mpop (18 Mar 2006 - 16:21)

Epheuer a écrit :
Intéressante approche clb56, mais j'ai essayé et les images de fond ne sont pas visibles ?

http://ephemer.free.fr/pmdv/

Oui c'est normal, la propriété condensée ne s'exprime pas comme background-image mais comme background tout court. Background-image ne donne que l'url.

donc soit on écrit

background:url(droite.gif) no-repeat top right;

soit

background-image:url(droite.gif);
background-repeat:no-repeat;
background-position:top right;

<edit>
En me relisant je viens de me rendre compte que j'ai fait une assez belle coquille. L'ordre des valeurs de position est à l'envers j'aurai du mettre right top (et left top).

Même si bizarrement çà ne joue pas sur le résultat. Mais bon autant être rigoureux.
</edit>
Modifié par clb56 (18 Mar 2006 - 17:26)

clb56 a écrit :
En me relisant je viens de me rendre compte que j'ai fait une assez belle coquille. L'ordre des valeurs de position est à l'envers j'aurai du mettre right top (et left top).

Même si bizarrement çà ne joue pas sur le résultat. Mais bon autant être rigoureux.

Ça joue sur le résultat si tu écris 200px 40px ou 20% 5%, par exemple. Apparemment, les navigateurs se dépatouillent avec les valeurs textuelles (pas forcément tous, faudrait voir avec IE6, IE5, IE5 Mac, des vieilles versions de Safari, Opera ou Firefox/Mozilla...).

Jamais testé avec un "100px left" (comprend-il que le 100px s'applique au positionnement vertical, malgré l'ordre inversé ?).

mpop a écrit :

Ton sélecteur CSS qui n'est plus bon (il pointe vers #menu alors que tu n'as qu'un simple <ul>...</ul>)

Oui je sais je n'ai pas pris la peine de supprimer cette section mais c'est sans importance puisque non appelée ds l'HTML.

clb56 a écrit :

Oui c'est normal, la propriété condensée ne s'exprime pas comme background-image mais comme background tout court. Background-image ne donne que l'url.

Ok comme ça c'est mieux effecectivement :

http://ephemer.free.fr/pmdv/

(désolé j'ai adapté les graphiques à l'arrache)

Mais le hic, comme précédement, si je parviens à donner une marge équivalente à gauche comme à droite en 1024x768 en mettant width:96% à la balise ul, sous une autre résolution ce n'est plus le cas...

De plus, un truc curieux sous Firefox, l'image de la partie gauche, sous first_li, est grignotée par un rectangle blanc ???

Epheuer a écrit :


Mais le hic, comme précédement, si je parviens à donner une marge équivalente à gauche comme à droite en 1024x768 en mettant width:96% à la balise ul, sous une autre résolution ce n'est plus le cas...

De plus, un truc curieux sous Firefox, l'image de la partie gauche, sous first_li, est grignotée par un rectangle blanc ???

Je ne comprend pas tes remarques, je viens de vérifier ta page avec FF 1280*1024 en redimensionnant la fenêtre dans tous les sens (notamment avec la sidebar) et je ne vois aucun problème sur chacun des deux points.

Au passage 96% de large ça me parait un peu risqué par rapport aux petites résolutions et je mettrais un peu moins. Mais bon là pareil il faut tester.

Je ne saurais dire pourquoi ça ne passe pas chez moi faudra que je réessaye.

Ceci dit, je suis parvenu à mes fins et grâce à votre aide, notemment en en reprenant le construction du départ, qui est plus façile à comprendre pour moi, et en utilisant des arrondis sans fond transparent, par dessus le fond de la barre elle même, centrée grâce à une conteneur supplémentaire :

<div id="menu">
<div id="menu_f"><div id="menu_g"><img src="img/menu_g.gif" width="15" height="25" alt=""></div>
<div id="menu_d"><img src="img/menu_d.gif" width="15" height="25" alt=""></div>
<div style="text-align:left"><p id="menu_t">Accueil - Forum - Contact</p></div>
</div></div>

#menu {position:absolute; top:130px; width:100%; height:25px; text-align:center; z-index:93;}
#menu_f {position:absolute; top:0px; left:3%; width:94%; height:25px; background-image:url(img/menu_c.gif); z-index:94;}
#menu_g {position:absolute; top:0px; left:0px; width:15px; height:25px; z-index:95;}
#menu_d {position:absolute; top:0px; right:-1px; width:15px; height:25px; z-index:95;}
#menu_t {position:absolute; top:2px; left:15px; font-weight:bold; font-size:11.5pt; z-index:96;}

Je sais c'est moche j'ai utilisé un "text-align:center" pour autre chose que du texte mais bon si IE et FF son d'accords tout les deux...

ps : http://ephemer.free.fr/pmdv/index2.htm

Merci encore à vous deux

Ba c'est pas grave,
j'aurais quand même essayé de convaincre que l'on peut effectuer des opérations de rendu éventuellement complexes en pure css et en préservant intégralement le code html.

Apparemment le message n'est pas passé ce coup ci mais bon tant pis

Bonne continuation