Alignement de texte ?

**brolon** · 29/07/2007, 09h57

Bonjour tout le monde,

j'aimerais arriver à, sur une ligne, avoir un bout de texte (le titre d'un article) aligné à gauche et un autre bout de texte (la date de création de l'article) aligné à droite.

Comment puis-je arriver à faire cela ? Pour l'instant j'utilise "float:right", sur le span contenant ma date. Je ne trouve pas cela génial car je dois placer ce span dans le div précédant celui qui contient le titre. De plus l'alignement vertical n'est pas optimal.

Une autre idée ?

D'avance, merci.

**katlinea** · 29/07/2007, 14h10

Bonjour à toi aussi,

je suis nouvelle dans le monde du web, mais si j'ai bien compris tu veux aligner ton texte sur une ligne, sur les côtés opposés. Je te propose une solution de ce genre :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<body>
<span style="float:left;">titre</span>
<span style="float:right;">date</span>
</body>

je l'ai utilisé pour positionner des images et ça a marché, je n'ai même pas dû faire d'alignement vertical.

**Seta-san** · 29/07/2007, 18h20

Ou mieux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div class="conteneur">
  <div class="titre">Les titres</div>
  <div class="date">Les dates</div>
</div>

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
.conteneur {
width: 500px;
}
.titre {
float:left;
width:380px;
}
.date {
float:right;
width:100px;
}

J'ai mis des fausses dimensions. Le div titre et date doivent faire à tous les deux, un peu moins que la taille du div conteneur. Sinon la plupart du temp, elles se superpose ou passe l'une en dessous de l'autre (dans les cas que j'ai personnellement rencontrés bien sur).

**trotters213** · 30/07/2007, 09h54

Si date, conteneur et titre sont uniques (ils apparaissent une seule fois dans ta page HTML), alors utilise un id plutôt qu'une classe et dans ton CSS utilise le # au lieu du .

**brolon** · 30/07/2007, 11h28

Merci pour vos réponses !

Je m'empresse de tester cela directement

@ trotters213 : ma page contient plusieurs articles donc l'utilisation de class est nécessaire

**brolon** · 30/07/2007, 11h45

Voilà, j'ai du chipoter un peu mais j'obtiens le résultat désiré (et peux inaugurer officiellement le site

) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div class="aNew">
  <div class="newsDate">
    <span class="newsDate">
      MaDate
    </span> 
  </div> 	
  <div class="newsTitle"> 
    <span class="newsTitle"> 
      Mon Titre
    </span> 
  </div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
div.newsDate {
	width: 25% ;
	float: right ;
	text-align: right ;
}
 
div.newsTitle {
	position:relative;
	border-width: 0px 0px 1px 0px ; 
	border-color: black ;
	border-style: solid ;
	width: 75% :
	text-align: left ;
	float:left ;
}

Alignement de texte ?

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager