Bonjour. D'abord merci à vous. C'est rassurant de savoir que quelqu'un détient la réponse à ces problèmes techniques.

Je voudrais avoir votre avis (chers visiteurs Smiley smile ) sur cette toute petite chose. En fait j'envisage sérieusement de refaire complètement mon site, et c'est le positionnement des blocs sur la page, etc qui m'inquiète.

Voila ce que je viens de faire : c'est une plaquette de couleur, dans laquelle j'insère un texte (qui sera cliquable). Je mettrai plusieurs plaquettes identiques les unes au dessus des autres. Ce sera plus joli que ça bien sûr Smiley lol J'ai eu un peu de mal à placer le texte au centre de la plaquette, ça m'a paru un peu compliqué pour ce que c'est, je me suis peut-être trompé, il y a plus simple ?

Je voulais savoir si vous l'auriez écrite différemment (j'utilise un div, un span, des position:absolute, c'est ce qu'il faut?)

Voici le résultat : http://img328.imageshack.us/img328/4849/essaix2hb.gif

et :
#plaq{
	position:absolute;
	top: 123px;
	left: 700px;
	width:280px;
	height:37px;
	background-color: #D2CABD;
}

.tg {
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0;
	z-index:100;
}

.td {
	position:absolute;
	top:0;
	right:0;
	margin:0;
	padding:0;
	z-index:100;
}

.texteplaq {
	position:absolute;
	top:8px;
	margin-left:70px;
}


<div id="plaq">
	<img src="g-plaq.gif" height="37px" width="15px" class="tg">
	<img src="d-plaq.gif" height="37px" width="12px" class="td">
	<span class="texteplaq"> Essai de texte 1</span>
</div>


Désolé si ce n'est pas vraiment une question puisque j'ai réussi à créer ce que je voulais, c'est juste pour être sûr de ne pas me montrer ou de compliquer avant d'aller plus loin. Merci d'avance! Smiley ravi
Modifié par ZapLive (22 Nov 2005 - 17:24)
Salut ZapLive...

Une petite question : ne serait-il pas plus simple de créer une seule image que tu mettrais en arrière-plan avec l'option background-image ?

Tu peux la positionner très simplement et ça t'éviterais certainement pas mal de prise de tête
Smiley cligne
Merci de ta réponse Cygnus Smiley smile

Je n'avais pas pensé à mettre une image en arrière-plan, en effet Smiley ohwell Ce que j'ai fait "économise" le milieu de la plaquette en mettant de la couleur au lieu d'une image, est-ce que c'est mieux pour le poids de mes pages, comme méthode je veux dire, ou alors est-ce que je fais une économie dérisoire et je devrais peut-être choisir ta solution?
Bien, bien. Alors j'ai essayé les deux méthodes, et je tombe sur une différence pas négligeable je crois : 228octets pour la plaquette gif en arrière-plan, contre 157o pour les deux extrémités en gif+couleur-intercalée-au-centre, ce qui me fait 71o de différence. Finalement c'est beaucoup si on considère que j'en mets plusieurs. A moins que non, ce soit acceptable ?

Allez svp les gens, c'est des trucs que vous savez faire ça, éclairez-moi un peu. Je ne vous demande pas de me raconter votre vie Smiley biggrin
Modifié par ZapLive (23 Nov 2005 - 12:48)
Hello,

Ben 71 octets, même plusieurs fois....ça va pas chercher loin, c'est pas ça qui va changer grand chose au chargement de ta page Smiley cligne je suivrais l'idée de Cygnus Smiley smile
Modifié par zanzibar (23 Nov 2005 - 12:58)
Modérateur
ZapLive a écrit :
Finalement c'est beaucoup si on considère que j'en mets plusieurs.


Bonjour,

Est-ce que ces plaquettes vont changer de couleurs ? Combien en auras-tu ? Est-ce que c'est les extrémités qui changent de couleur et/ou le centre, ou encore ni l'un ni l'autre ?
zanzibar > merci de ta réponse pour l'usage d'une image en background. Je n'ai pas bien la notion de ce que représentent 71octets Smiley confused , je pensais qu'il était important de grapiller le moindre poids, c'est pour ça. Bon alors donc : ok pour le background, emballez, c'est pesé Smiley lol

Merkel > Smiley smile Non, ces plaquettes seront très basiques pour cette version, figées (et pas plus de 5). Si ce n'était pas le cas, me conseilles-tu aussi une img en background ?

Et pour le <span> que j'utilise pour entourer le texte afin de pouvoir le placer au centre-middle dans le <div>, est-ce que c'est ce qu'il faut faire (utiliser le <span>) ou alors je suis dans l'erreur ?

Merci d'avance
Modérateur
ZapLive a écrit :

Merkel > Smiley smile Non, ces plaquettes seront très basiques pour cette version, figées (et pas plus de 5). Si ce n'était pas le cas, me conseilles-tu aussi une img en background ?


Disons que si tu avais voulu faire une représentation de toutes les couleurs de la palette Pantone par exemple, je t'aurais dis d'afficher les couleurs via CSS plutôt que par des images de fond, sinon tu en aurais eu pour longtemps à générer chaque image de fond et ca l'aurait été très lourd à charger pour le visiteur.

Mais si tes palettes ne sont là qu'à titre décoratif et en nombre limité, ca va. En plus, tu peux réutiliser le même fond pour plusieurs éléments, et le navigateur réutilise la même image via sa Cache. Par exemple, si tu crée une palette bleu, et que tu utilise 200 fois cette image pour décorer les éléments de tes pages, le navigateur ne téléchargera qu'une fois cette image.

ZapLive a écrit :

Et pour le <span> que j'utilise pour entourer le texte afin de pouvoir le placer au centre-middle dans le <div>, est-ce que c'est ce qu'il faut faire (utiliser le <span>) ou alors je suis dans l'erreur ?


Pourquoi ne pas mettre un text-align:center au div lui-même ? Tu pourrais alors virer le span.

Edit : Veux-tu aussi aligner ce texte verticalement ?
Modifié par Tony Monast (25 Nov 2005 - 20:04)
Oui exact Tony Monast, je veux placer le texte à un endroit précis qui s'approche en effet du centre vertical.

Le texte des différentes plaquettes n'aura pas toujours la même longueur ; si j'utilise un ordre "center", je ne pourrai pas les aligner horizontalement les uns au-dessus des autres (ce que je veux faire,à la façon d'une liste). Par contre les centrer verticalement à l'intérieur des <div> j'ai rien trouvé pour faire sinon donner une position en pixels.
Modifié par ZapLive (26 Nov 2005 - 17:19)