28219 sujets

CSS et mise en forme, CSS3

Un texte en bas a droite d'une image

bonjour,

voici mon code et je souhjaiterai mettre le texte en bas et a droite...
j'avais vu sur un site qu'on pouvais mettre right et bottom dans text-align, mais je ne sais plus ou je l'avais vu et je ne me souviens pas de la syntaxe exacte....et pour le moment cela ne marche pas...

#logo{
background-image:url('../images/entete.gif');
background-repeat: no-repeat;
padding:0;
margin:0 5px 0 0;
width:1024px;
height: 132px;
color: #bb4d02;
border-bottom: groove 4px #bb4d02;
text-align:bottom right;
}
Salut,

si tu mets ton code entre les balises de code, ce sera plus lisible...

Ensuite, je ne crois pas que text-align puisse prendre la valeur: bottom;

de plus, tu devrais enlever les guillemets de
a écrit :
background-image:url('../images/entete.gif')
ok pour les guillemets...
mais si je ne peux mettre bottom quelle est l'astuce pour l'alignement vertical du texte?
Salut,

petite chose rapide en passant, si tu pouvais utiliser le balisage BBcode [ code] pour encadrer ton code, ça faciliterai la lecture à tous, merci. (partie sous la zone de saisie des messages)

Pour ton problème, text-align: bottom right; n'existe pas non, text-align: right; oui par contre.

Tu dois confondre avec les valeurs de positionement d'une image de background je pense.

Pour régler le problème, il faudrait placer le texte dans un élément de block (#logo) et l'entourer d'une balise neutre pour le gérer et ensuite le positioner.
C'est un peu lourd d'implémentation mais bon...

<div id="logo">
<span>ton texte</span>
</div>



#logo
{
background: url(../images/entete.gif) no-repeat;
padding: 0;
margin: 0 5px 0 0;
width: 1024px;
height: 132px;
color: #bb4d02;
border-bottom: 4px groove #bb4d03;
position: relative;
}
#logo span
{
position: absolute;
right: 0;
bottom: 0;
}

Voilà qui devrait fonctionner.
En fait à la place de mon <div>, un <hN> serait sûrement plus adapté (<h1>) mais je ne connais pas le contexte de ton code.

Sinon, ton width: 1024px; me fait un peu peur Smiley langue , as tu bien pensé aux résolution 800*600 ? d'ailleurs, même en 1024*768 ça sera trop grand et générera une barre de défilement horizontale.
Enfin, pour tes url(), enleve les guillemets et quote, ça ne sert à rien du tout et c'est source de problème dans certains navigateurs.

<edit>double grilled Smiley angry lol
Modifié par Olivier (09 Jun 2005 - 11:29)
Je confirme que text-align n'admet pas bottom comme valeur. Il existe en revanche vertical-align, qui a un effet variable selon les éléments et les circonstances. L'application concrète de vertical-align n'est généralement pas simple et dépend trop des détails précis pour qu'on en parle de façon générale.
ok ca marche, merci beaucoup...
et c'est vrai que ta remarque est tres juste, et je suis donc descendue a 800px... Smiley cligne
En fait, il vaudrait mieux déscendre à 770 pixels Smiley cligne tu auras une barre de défilement sinon.

Si tu pouvais prendre en compte la remarque que je t'ai faite au début concernant le balisage BBcode de ton message, merci Smiley cligne
Et si ton sujet est résolu, tu peux l'indiquer comme il est expliqué ici :
http://forum.alsacreations.com/faq/#item22

@+
Modifié par Olivier (09 Jun 2005 - 11:49)
Sujet clos
Aller à