Forums des Zéros

30 novembre 2005 à 13:05:45

tu as la largeur suffisante pour mettre l'image et le texte?

30 novembre 2005 à 13:07:18

Citation : zipjo

Sors ton image de ton block

Ben non, le but c'est de l'avoir dedans !

J'explique :

j'ai fais un agenda qui ressemble aux petits éphémérides qu'on trouve dans les cuisines parfois.
Le jour en haut, le n° en rouge dessous et le mois /année en troisième ligne.

L'événement apparaît en dessous, en blue, en représentant un peu un truc ajouter à la main...

Ce que je veux c'est ajouter en haut à droite un petit icone qui sert de lien vers le plan d'accès au lieu où se déroule l'événement.

Ce est créé dynamiquement, en fonction de la bdd (il y en a dc plusieur à la suite).
Je dois inclure l'image dans le , sinon, comment on saura quelle image va avec quel événement ?

Citation : jp949

tu as la largeur suffisante pour mettre l'image et le texte?

Très largement !!

Il y a écris un mot (jour de la semaine) et l'image fais 32px.
le fais 300px.

Zipjo

30 novembre 2005 à 13:11:37

Fais voir ton code déjà, histoire de voir comment faire ça "sur mesure"...

30 novembre 2005 à 13:13:10

fayt voir avec les margin left et right

30 novembre 2005 à 13:15:29

Voilà ce que j'ai actuellement :

Image utilisateur

On voit bien que le jour et le numéro sont décalés vers la gauche, au lieu d'être bien centrés.

Voici mon code (qui comporte un petit soucis avec la condition "if") :

while($row = mysql_fetch_row($result2)) {
print "

<?php if (". ($row['10']). "!= NULL) { ?> <a href='". ($row['10']). "' style='float:right;'><img src='images/plan.png' title='Voir le plan' alt='Plan'></a> <?php } ?>

". ($row['2']). " ".
($row['3']). " ".
($row['4']). " ". ($row['5']). " ".

nl2br(($row['11'])). " 
(lieu : ". ($row['9']). ") 

Plus d'infos : ". ($row['12']). ". 
Fin prévue le ". ($row['8']). ".
"
; }

p.agenda {
width : 300px;
background : #FFFFFF;
border : 2px solid #423131;
margin : auto;
margin-bottom : 5px;
padding-top : 4px;
padding-bottom : 4px;
padding-left : 4px;
padding-right : 4px;
text-align : center;
}

30 novembre 2005 à 13:23:53

et css pour image

30 novembre 2005 à 13:25:12

C'est dans le premier code... Ce n'est pas l'image qui a le style, mais le lien.

30 novembre 2005 à 13:35:11

il n' y a pas le css dans ton code

30 novembre 2005 à 13:36:41

Ben si :

<?php if (". ($row['10']). "!= NULL) { ?> <a href='". ($row['10']). "' style='float:right;'><img src='images/plan.png' title='Voir le plan' alt='Plan'></a> <?php } ?>

30 novembre 2005 à 13:38:03

ca ne nous dit pas si tu as mis les margin a 0 ou a 100px

Anonyme

30 novembre 2005 à 13:39:29

background-position : fixed ; ?

Pour que l'image soit fixe et ne déplace pas ton texte ? Juste une idée, je ne l'ai pas encore testé :euh:

30 novembre 2005 à 13:41:06

L'image n'a ni margin, ni padding.

Si je met l'image en background, elle ne peut plus servir de lien...

30 novembre 2005 à 13:50:23

si tu mets margin-left:0;peut-etre qu'elle poussera moins le texte

30 novembre 2005 à 13:52:04

Citation : jp949

si tu mets margin-left:0;peut-etre qu'elle poussera moins le texte

Aucun changement...

30 novembre 2005 à 13:54:54

Non, c'est un padding-left qu'il faut mettre, c'est à l'intérieur que l'on veut repousser

30 novembre 2005 à 13:57:14

Citation : Erdnax

Non, c'est un padding-left qu'il faut mettre, c'est à l'intérieur que l'on veut repousser

Tu veux dire un paddin-left sur le block pour repousser le texte ?

Ca ne rendra pas comme il faut...

30 novembre 2005 à 13:59:02

En fait, il faut faire un padding-left de la même largeur que ton image, comme ça, le centrage se fera sur du 100% moin la largeur de l'image d'un côté, et moin la largeur du padding de l'autre.

En gros, le padding compensera le décalage de l'image.

Au moins essaye, ça ne coûte rien

30 novembre 2005 à 14:10:40

Citation : Erdnax

En fait, il faut faire un padding-left de la même largeur que ton image, comme ça, le centrage se fera sur du 100% moin la largeur de l'image d'un côté, et moin la largeur du padding de l'autre.

En gros, le padding compensera le décalage de l'image.

Au moins essaye, ça ne coûte rien

Alors :

1/ Si je l'applique au block () ça décalle rien, mais ça aggrandi le block en mettant une sorte de "marge" blanche sur la gauche (j'entend marge au sens de celle sur les cahier, la zone où il n'y a rien dedans, pas au sens du css...).

2/ Si je l'applique aux span qui contiennent le jour et le numéro, ça fonctionne.

MAIS :

Mon objectif n'est d'avoir l'image que dans certains cas (je coince là-dessus... Cf forum php).

Quand l'image ne sera pas là... Le texte ne sera plus centré, mais adécalé vers la droite de 32px du coup...

30 novembre 2005 à 14:14:49

Alors tu peux peut-être faire ça (je l'ai fais sur un site, ça va plutôt bien) :

3 calques :

1 pour le décalage, 1 pour le texte centré, et 1 pour l'image. Les deux des extrémités ont des taille fixes (la taille de ton image), et comme ça, même lorsque l'image n'est pas là, il y a un "double décallage" qui centre le texte.

Dis moi si j'ai pas été très clair

30 novembre 2005 à 14:23:42

Citation : Erdnax

Alors tu peux peut-être faire ça (je l'ai fais sur un site, ça va plutôt bien) :

3 calques :

1 pour le décalage, 1 pour le texte centré, et 1 pour l'image. Les deux des extrémités ont des taille fixes (la taille de ton image), et comme ça, même lorsque l'image n'est pas là, il y a un "double décallage" qui centre le texte.

Dis moi si j'ai pas été très clair

Quand tu dis calque... Je supposes que tu veux dire <div> ?
(j'ai lu que dire calque est une erreur...)

En effet ça pourrait marcher, mais ça devient vite lourd à gérer, car le tout est généré par un while...

Il me vient un idée moins élégante qui résoudrait mes 2 problème (celui-ci et celui en php où je ne trouve pas d'aide).
Je pense que je vais m'arranger pour avoir toujours l'image, et pour créer une page vers laquelle on sera renvoyé quand il n'y aura pas de lien "réel" à mettre en place.

C'est pas imple je pense mon idée... Mais je me comprend.

Ca devrait marcher, même si ce sera (un peu) peu élégant pour les utilisateurs.

30 novembre 2005 à 14:28:44

Et en fait je viens de penser à un truc, ton image, c'est toujours ton php qui la place je suppose. Si c'est avec une condition que tu l'affiche, et si lorsque la condition est fausse tu ne l'affiche pas, tu peux mettre en image "vide" ou "blanche" non ?