28172 sujets

CSS et mise en forme, CSS3

bonjour

voila mon texte
"
2003 Ecole des Avocats de Lyon
Certificat d’aptitude à la etc... etc...
"

Il est inclue dans une div id="CV"
j'aimerai que la ligne "Certificat d’aptitude à la etc... etc..." soit aligner à la ligne "Ecole des Avocats de Lyon" au dessus, de façon a rendre plus présentable.
Je sais pas si ma div suffit ou il faut ajouter un paragraphe

merci du coup de main

Modifié par Sanctus (26 Nov 2008 - 15:14)
Bonjour,

Peut-être avec quelque chose dans ce goût-là.


<div id="cv">
<ul>
<li class="date"><span>2003</span>Ecole des Avocats de Lyon</li>
<li>Certificat d’aptitude à la etc... etc...</li>
</ul>
</div>




li {
 padding-left:15px;
}
li span {
 padding-right:5px;
}
li.date {
 padding-left:0;
}


A voir pour les valeurs des retraits.
Modifié par kalipka (26 Nov 2008 - 13:48)
Bonjour,

Apparemment, il y a eu un petit problème avec la balise [ /b], faut pas oublier de la mettre sinon on obtient un message difficilement lisible Smiley cligne

Sinon, on ne pourra pas aligner "Ecole" et "Certificat" simplement, parce qu'on ne connait a priori pas la largeur exacte occupée par l'année "2003" ... Il faut passer par du positionnement. Par exemple :
<div class="cv">
  <span class="annee">2003</span>
  <p>École des avocats de Lyon <br />Certificat d'aptitude ...</p>
  <span class="annee">2001</span>
  <p>bla bla bla</p>
</div>

div.cv, div.cv p {
  overflow: hidden;
}
span.annee {
  float: left;
}
Ou encore :

<dl>
  <dt>2003</dt>
  <dd>Bla bla bla</dd>
  <dd>Bli bli bli ...</dd>
</dl>

... et stylé avec CSS :
dt {
  position: relative;
  top: 1.2em; /* dépend de la taille du font et/ou du line-height */
}

Ce qui donne quelque chose comme ceci :
upload/321-tobedeleted.jpg
Modifié par Philix (26 Nov 2008 - 14:56)
vraiment merci à tous c'est vraiment sympa,

j'ai essayé la technique de Thomas et ça marche nikel je ne doute surtout pas des autre méthode proposée.

j'ai juste rajouté un padding pour faire plus propre

span.annee {

  float: left;
  padding-right:10px;

}


PS: je suis sur SPIP alors les "à la ligne" ne sont pas </br> mais "_ "


merci encore !
Modifié par Sanctus (26 Nov 2008 - 14:55)