28173 sujets

CSS et mise en forme, CSS3

Alignement vertical du texte CSS

Bonjour,

Je suis debutant dans le domaine Smiley sweatdrop

Et je suis confront" a je suis sur un tout petit probleme:

je n'arrive pas a descendre mon texte de qqe pixels....
je ne connais pas vraiment le terme a employé
en utilisant text-indent: je peux jouer sur les cotés..
mais sur la hauteur... je suis bloqué...





mon code html

		<TD align="left" valign="top" id="fonction1" name="fonction1">
				<a href="#">item n°1</a>
		</TD>


mon css:


#fonction1 a{

	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 167px ;
	line-height: 27px ;
	text-indent: 30px ; /* On décale le texte de 40px du bord gauche */
	text-decoration: none ;
	background: url(/art/images_banniere/fonction1.gif) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 0px solid #dbd ;
	color:#FFFFFF;
}
	
#fonction1 a:hover{

	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 167px ;
	line-height: 27px ;
	text-indent: 30px ; /* On décale le texte de 40px du bord gauche */

	text-decoration: none ;
	background: url(/art/images_banniere/fonction1_over.gif) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 0px solid #dbd ;
	color:#DBD9FF;
}



Merci bcp a tous Smiley smile de me repondre Smiley smile
Modifié par ronio (26 Apr 2006 - 11:08)
oui, j'ai deja essayé

en fait il me decalle tous les tr du dessous.....
et donc ca me decalle tout dans mon tableau....
Modifié par ronio (26 Apr 2006 - 13:50)
Bon alors j'ai reussi a faire ce que je voulais faire mais je pense que c'est assez telescopé....

j'ai mis un div dedans:

		<TD align="left" valign="top" id="fonction1" name="fonction1">
				<a href="#"><div>item n°1</div></a>
		</TD>


et j'ai rajouté dans le css:


#fonction1 a div{
position:relative;
left:0px;
top:4px;
}


si qqun a mieux Smiley smile qu'il me le dise Smiley lol
merci d'avance

Ronio
Bonjour,
je n'arrive toujour pas à mes fin.
Alors j'ais fait comme ça le problème pour le moment c'est les liens de la boite outils divers, jaimerais qu'ils soit à gauche.

Et je voudrais savoir si dans mon model de page la logique est respecté au niveaux du code.

Merci A+
Modérateur
bonjour,

hmm, Smiley smile on ne met pas de balises <div> dans une balise <a>. ... Smiley smile
Ensuite pour augmenté la taille d'une interligne , tu peut jouer sur le "line-height:2em;" par exemple, et en dernier lieu les elements dans une cellule de tableau sont par defaut centré verticalement ...

applique ton position relative directement a <a> en passant par l'id du TD .

	<TD align="left" valign="top" id="fonction1" name="fonction1">
				<a href="#">item n°1</a>

		</TD>

#fonction1 a {
position:relative;
left:0px;
top:4px;
}


Ceci dit, le site et le forum sont la pour eclairer et mettre en avant des Normes de "codages de site" de façons plus propre, efficace, etc ...
(usage d'une dtd valide, ne pas utiliser les tableau pour la mise en forme, user des bonnes balises et de listes pour les liens ..., difficile a enumerer en fait car une liste seule ne veut rien dire . Va donc, par exemple , jetez un oeil aux annonces dans la section : http://forum.alsacreations.com/list-14-Ressources-et-liens-sur-les-standards.html

... Alors tu comprendras que une cellule de tableau pour un lien , bah forcement, il n'y a pas grand monde qui va oser s'interesser a ton probleme sans te dire de reprendre ta façon de coder et te renvoyer sur les differents tutos du site .

De plus des pages "bien codées" sont beaucoup plus faciles a mettre a jour ou a debugger coté css (les tableaux inutiles font fuir ).

++
gcyrillus a écrit :
... Alors tu comprendras que une cellule de tableau pour un lien , bah forcement, il n'y a pas grand monde qui va oser s'interesser a ton probleme sans te dire de reprendre ta façon de coder et te renvoyer sur les differents tutos du site .

De plus des pages "bien codées" sont beaucoup plus faciles a mettre a jour ou a debugger coté css (les tableaux inutiles font fuir ).


Hé hé, c'est assez vrai. Comme j'essaie d'apprendre quelque chose en aidant les autres, et que je n'ai pas la moindre intention d'apprendre la mise en page à base de tableaux, les problèmes qui impliquent des tableaux de mise en page ne m'intéressent guère…

Ce que je te conseillerais de faire, si tu n'as pas les moyens (en terme de temps surtout) de reprendre un certain nombre de choses à zéro – par exemple si tu as des résultats à livrer et que tu ne peux pas te permettre de tatônner –, c'est d'essayer en parallèle de faire de la mise en page full XHTML+CSS, pour te familiariser avec l'avenir Smiley smile (enfin, en 2006 ça serait plutôt le présent…). Quitte à commencer par des choses simples.
Sujet clos
Aller à