18041 sujets

Questions générales et questions de débutants

[Résolu] Positionnement de texte dans une DIV

Bonjour

avant tout, félicitation pour ce site qui reste une grande aide et une grande inspiration pour les courageux (si!) qui veulent quitter la programmation dépréciée.

Je suis en train de me mettre à tenter de coder proprement, avec quelques exercices simples. Et là, je cale sur du super simple :


<style type="text/css">
body
{
margin-top:50px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
width:8000px;
}

#titre_1
{
height:70px;
margin-left:50px;
padding-bottom:10px;
background-color:#9b0707;
}

#titre_2
{
padding-top:10px;
padding-bottom:10px;
margin-left:50px;
background-color:#9b0707;
}

.rubrique
{
vertical-align:text-bottom;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#ffffff;
}
</style>
</head>
<body>
<div id="titre_1">
	<p class="rubrique">texte 1</p>
</div>
<br><br><br>
<div id="titre_2">
	<p class="rubrique">texte 2</p>
</div>
</body>


Pourquoi, mais POURQUOI ! le "Texte 1" ne se place pas en bas de la DIV, selon l'ordre de la classe "vertical-align:text-bottom;".. ???

merci de m'aider, sinon je vais finir par créer 2 tables dans une 3eme table puis d'mettre un div align="bottom" etc etc.. !!!!

Smiley ravi
Modifié par Breskovic (25 Oct 2006 - 12:23)
Modérateur
Bonsoir et bienvenue Breskovic,

Ton titre n'est pas explicite... Lorsque tu fais une demande sur le forum, il vaut mieux motiver ceux qui te lisent en mettant quelquechose de clair plutôt que "Là, je comprends plus" ou "J'y arrive pas !" ou encore "J'en ai marre !"... car, à défaut, tes sujets risquent de vite se perdre... Smiley cligne

vertical-align ne fonctionne que sur des éléments tels qu'une cellule de tableau ou une image... pas sur une div. Dans ton cas, il faut jouer sur le padding, par exemple.

Les br sont inutiles -> tu peux te servir de margin à la place. Smiley smile

Les class rubrique aussi, c'est inutile... Tu peux accéder à tes éléments via p tout simplement... D'une manière générale, fais toujours au plus simple pour accéder à tes éléments puis spécialise ensuite via des id et des class. Smiley cligne
Grillée

Salut et bienvenue !
Avant toute chose, pense à bien définir ton problème dans l'énoncé de ton sujet cat tu avoueras que là... C'est pour le moins difficilement trouvable.

Ensite, sache que les éléments titres et paragraphes sont tous deux de types blocs. En conséquences, tu n'as pas besoin de les enfermer dans des div qui leur sont exclusivement réservés. Utilise directement les marges de ces éléments-là.

Je te propose le code ci-dessous :
<head>
<style type="text/css">
body {
margin:50px 0 0 0;
width:8000px;
}

#titre_1 {
height:70px;
margin: 0 0 30px 50px;
padding : 50px 0 0 0;
background-color:#9b0707;
}

#titre_2 {
padding:10px 0 10px 0;
margin:30px 0 0 50px;
background-color:#9b0707;
}

.rubrique {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#ffffff;
}
</style>
</head>
<body>
<h1 id="titre_1" class="rubrique">texte 1</h1>
<h2 id="titre_2" class="rubrique">texte 2</h2>
</body>


Tu remarqueras que j'ai utilisé la notation raccourcie pour alléger le code et surtout car je vais plus vite comme ça Smiley lol ...
Et aussi que j'ai utilisé les balises sémantiques correspondant à tes attentes : h1 pou un titre de niveau 1 et h2 pour un titre de niveau 2...

Voilà,
Maintenant quetu as compris le principe, à toi de jouer Smiley cligne
Modifié par Cygnus (25 Oct 2006 - 00:16)
Salut, et avant tout merci.
OK pour le titre, tu as raison - c'est le coeur qui parle...

Pour le padding, j'y avais bien pensé, sauf que je cherchais à l'éviter précisement pour faire "plus simple" (disons plutot "moins de code") : imaginons que je crée plusieurs types de div, avec des hauteurs différentes.
Je voulais trouver un code simple pour dire au texte de systematiquement se placer sur le bas de la DIV.
Sauf erreure, avec un padding, je dois donner un padding différent pour chaque DIV, et donc ne jamais être sûr d'avoir exactement le même espace entre le texte et le bas de la DIV. Or, en disant "texte en bas" et padding-bottom:10px; je suis certain d'avoir toujours mon texte à 10 pixels du bas d'une cellule...

Tu disais "il faut jouer sur le padding, par exemple." Y aurait-il un autre exemple ??

Pour les BR, sorry... les vieux reflexes ont la vie dure...
Merci aussi à Cygnus

je regarde ça de plus près. ça me semble effectivement interessant.

pour ce qui est de coincer un texte dans une DIV, c'est encore un vieux reflexe de quelqu'un qui posait des tables à tout bout de champs y'a encore une semaine...
Modifié par Breskovic (25 Oct 2006 - 00:30)
Administrateur
Breskovic a écrit :
Salut, et avant tout merci.
OK pour le titre, tu as raison - c'est le coeur qui parle...

Ce n'est pas grave, mais aurais-tu quand-même la courtoisie de le modifier et de le rendre pertinent pour les futures recherches des membres qui auraient le même problème que toi ?

Merci d'avance Smiley cligne
Sujet clos
Aller à