Page 1 sur 1

CSS : équivalent de hspace-right d'une image ?

Posté : 21 juil. 2006, 20:32
par albat
Bonsoir,

Une toute 'tite difficulté de mise en page.

J'ai un joli bout de code qui ressemble à ça:
(je donne un code générique parce que c'est plus simple et que je suis paranoïaque !) :langue:
<p><img src="toto.gif" alt="Toto" />image de Toto</p>
<p><img src="titi.gif" alt="Titi" />image de Titi</p>
<p><img src="tata.gif" alt="Tata" />image de Tata</p>
Mais voilà, les 3 images de Toto, Titi et Tata ne sont pas de la même largeur.
Or, je voudrais que les 3 phrases jouxtant ces 3 images soient bien alignées à gauche.
Comment faire ? :-k

Merci ! :merci:

Posté : 21 juil. 2006, 20:40
par Cyrano
:idea:
met l'image en arrière-plan et ajoute une propriété text_indent sur les paragraphes en question.
Pour chacun des paragraphes, tu peux utiliser une propriété

Code : Tout sélectionner

background-image: url(chemin/vers/limage.jpg) 0 0 no-repeat;
Pour la hauteur, ajoute ensuite la hauteur de ton imahe dans une propriété

Code : Tout sélectionner

line-height: 25px;
ça va centrer le texte sur la hauteur par rapport à la hauteur de ton image;
Et tu alignes tes trois paragraphes avec le même text-indent en te servant par exemple de l'élément parent pour rendre le truc générique:

Code : Tout sélectionner

div#contenu p {text-indent : 3em;}

Posté : 21 juil. 2006, 20:43
par albat
"Bon sang mais c'est bien sûr !"
Je n'avais pas pensé à utiliser les images d'arrière-plan. #-o
La chaleur sans doute... :roll:

Je cours tester ça ! :pouce:

Posté : 21 juil. 2006, 20:49
par albat
Cette syntaxe semble schmurtzer.
background-image: url(chemin/vers/limage.jpg) 0 0 no-repeat;
Je vais regarder du côté de

Code : Tout sélectionner

background-properties
Il devrait mieux le digérer...

Mais on n'est plus très loin ! :D

Posté : 21 juil. 2006, 20:58
par Cyrano
Pour ton image d'arrière-plan, tu peux séparer les propriétés :

Code : Tout sélectionner

background-image: url(chemin/vers/image.jpg); background-position: 0 0; background-repeat: no-repeat;
ou encore :

Code : Tout sélectionner

background-image: url(chemin/vers/image.jpg); background-position: left top; background-repeat: no-repeat;

Posté : 21 juil. 2006, 21:07
par albat
Le bonheur est là. :agenouille:
echo "<p style='background-image:url(images/".$sup_logo.".gif); background-repeat:no-repeat; height:27px; padding-left:50px'>Albat' est content</p>\n";
Merci ! :love4:

Je te remets le smiley à petits coeurs parce que je sais que ça t'angoisse sur la nature de mes sentiments... :langue:

Posté : 21 juil. 2006, 21:17
par albat
Petit tracas : c'est nickel sous Firefox mais IE n'en fait qu'à sa tête avec les marges.
Bah, pas grave... J'arrangerai ça plus tard... :roll:

Posté : 21 juil. 2006, 22:15
par Ryle
Sinon tu ne t'embêtes pas et tu fais un tableau :)

css2 est là parce que les gens faisaient trop de tableaux dans tous les sens (soit dit en passant je doute que ceux qui faisaient cela s'interessent à css, m'enfin bon il est là alors autant que nous on s'en serve hein ;)) mais c'est pas pour autant que l'on doit boycoter nos bons vieux <table> :)

Posté : 21 juil. 2006, 22:18
par albat
Sinon tu ne t'embêtes pas et tu fais un tableau :)
Tiens, un piaf mort... :lol:

Posté : 21 juil. 2006, 23:02
par Cyrano
Sinon tu ne t'embêtes pas et tu fais un tableau :)
Quelle misère de lire des choses pareilles :langue:

La mise en page en CSS, ce n'est pas nécessairment sorcier d'une part, ensuite, ça rend le code plus léger et enfin le jour où tu veux redonner une jeunesse à ton interface, tu n'as pas besoin de toucher au code HTML, une nouvelle feuille de style mettra tout le site à jour d'un seul coup. Je te mets bien au défi de faire la même chose avec une mise en page en tableaux html. :-k

Mais je t'accorde qu'il faut au moins au début faire preuve de rigueur et d'imagination pour arriver à uniformiser une mise en page tous navigateurs confondus. Et alors, ou est le problème ? Ce ne sera pas tellement plus long... et à terme, tu vas même gagner un temps considérable.

Enfin, l'argument final : mettre en page exclusivement à l'aide de feuilles de style, ça implique de respecter la sémantique du HTML : résultat, une bien meilleure indexation dans les moteurs de recherche du genre de notre ami :google: : si tu montes un site à but commercial, ça pèsera de tout son poid dans la balance.

Posté : 22 juil. 2006, 11:27
par Ryle
lol, bizare cette impression de toujours avoir le mot pour m'faire taper dessus... j'dois avoir un petit côté masochiste dans le fond ;)

Je suis tout à fait d'accord avec toi cyrano, grace aux css on peut enfin sortir tout ce qui est présentation graphique et ne laisser dans le html que la partie données, et y a rien de plus pratique pour pouvoir facilement la modifier à tout va :)

Bon, de là à dire que le code est plus léger, je ne suis pas vraiment d'accord, tu ne fais que l'externaliser, il est donc plus facile à maintenir mais côté légerté, en général tu as plus d'éléments à charger. Le côté pas sorcier, c'est clair, même si effectivement c'est franchement galère ces éternelles différences entre les navigateurs.
Quant à l'argument du moteur de recherche, je ne suis pas certains que tout ceux qui développent des sites internet le font dans l'optique de se faire référencer. C'est la même chose que pour les frames, on peut informer des inconvénients que ca apporte, mais il ne faut pas négliger les avantages et surtout arrêter de cracher dessus parce que cela est moins bien référencé (d'ailleurs c'est son seul inconvénient soit dit en passant :))

Bref, c'était juste histoire de dire que si je partage ton opinion quant aux feuilles de style, je n'en reste pas moins convaincu que certaines pratiques sont loin d'être dépréciées pour autant et peuvent toujours être utilisée, avec modération naturellement :)

Posté : 23 juil. 2006, 08:42
par Cyrano
Bon, de là à dire que le code est plus léger, je ne suis pas vraiment d'accord, tu ne fais que l'externaliser, il est donc plus facile à maintenir mais côté légerté, en général tu as plus d'éléments à charger...
Pas tout à fait exact : ta feuille de style restant chargée en cache dans le navigateur, tu ne recharges par la suite que la partie html des pages du site et les images associées s'il y en a en plus.