css mise en forme

Version imprimable

css mise en forme

bonjour

je suis pas encore une bete en langage html :p

j'ai un petit problème je voudrais aligner des éléments a droite et a gauche sur une même ligne j'ai trouvé la solution quand on incorpore du ccs sur la meme pas html mais moi il faut que je fasse le ccs sur une autre page. je vous montre se que j'ai fait :

page 1 :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>CV </title> </head> <body> <div class="gauche">prenom nom </div> <div class="droite"> @ : mail </div> <div class="gauche">age</div> <div class="droite">tel:</div> <div class="gauche">Permis B</div> <div class="droite">adresse: </div> <div class="droite">code postal </div>
et la deuxième page
Code:

1 2 3 4 5 6 7 8 9 .droite { text-align: right; } .gauche { text-align: left; }
si vous trouver une solution sa m'aiderait beaucoup

en vous remerciant par avance

27/10/2013, 19h05
JefReb

Tu ne nous donnes pas beaucoup d'info!
De plus le code html est tronqué et tu donnes des règles css pour h1 et h2 qui ne sont pas utilisées.
Pourrais-tu cerner un peu plus ton soucis ... et simplifier pour que l'on comprenne un peu?
cordialement

en faite je dois faire un CV
et je voudrais mettre par exemple mon nom et prénom sur la premier ligne a gauche et mettre mon adresse mail sur la même ligne mes complètement a droite

si j'aurais du le faire avec du ccs sur la meme page sa aurais donner sa le code
Code:

1 2 3 <font style="float:left">nom prenom</font> <font style="float:right">@:mail </font><br> <font style="float:left">18 ans</font> <font style="float:right">tel: </font><br> <font style="float:left">Permis B</font> <font style="float:right">adresse: </font><br>
en espérant de t'avoir un peux plus aider

Bon je me suis amusé en donnant une réponse nulle en utilisant les propriétés adjacentes. mais bof c'est une réponse comme une autre avec le peu d'info donnée.
Mais je pense que le plus simple est de regarder du coté des float=left ou right ...

Voir http://codepen.io/JefReb/pen/DJsGK
code css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
ul                 {list-style-type:none; padding:0px; }
li span            { width:30%px; text-align:left; display:inline-block; }
li span+span       { width:30%; text-align:center; padding-left:5px; }
li span+span+span  { width:30%; text-align:left; padding-left:5px; }
div.exemple ul                 {list-style-type:none; padding:0px; }
div.exemple li span            { width:10%px; text-align:left; display:inline-block; }
div.exemple li span+span       { width:10%; text-align:center; padding-left:5px; }
div.exemple li span+span+span  { width:10%; text-align:left; padding-left:5px; }
div.exemple li span+span+span+span  { width:10%; text-align:left; padding-left:5px; }
div.exemple li span+span+span+span+span  { width:10%; text-align:left; padding-left:5px; }
div.exemple li span+span+span+span+span+span  { width:10%; text-align:left; padding-left:5px; }
div.exemple li span+span+span+span+span+span+span  { width:10%; text-align:left; padding-left:5px; }

code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
   <ul>                                             
        <li><span>Nom Prénom</span><span>@:mail</span></li>
        <li><span>age</span><span>tel:</span></li>
        <li><span>Permis B</span><span>adresse:</span><span>code postal </span></li>
   </ul>
Ou alors:
<div class="exemple">
   <ul>                                             
        <li><span>Nom Prénom</span><span>@:mail</span><span>age</span> <span>tel:</span><span>Permis B</span><span>adresse:</span><span>code postal </span></li>
   </ul>
 
</div>

???? pourquoi utiliser la balise font??? pour mettre une règle de flottant?
:roll:

Une petite erreur dans mon code (width:30%; et non width:30%px; ) que je tiens à corriger. Voir http://codepen.io/JefReb/pen/DJsGK

Code:

1
2
3
4
ul                 {list-style-type:none; padding:0px; }
li span            { width:30%; text-align:left; display:inline-block; }
li span+span       { width:30%; text-align:left; padding-left:5px; }
li span+span+span  { width:30%; text-align:left; padding-left:5px; }

Code:

1
2
3
4
5
<ul>                                             
        <li><span>Nom Prénom</span><span>@:mail</span></li>
        <li><span>age</span><span>tel:</span></li>
        <li><span>Permis B</span><span>adresse:</span><span>code postal </span></li>
   </ul>

27/10/2013, 22h52
dodo-1924

merci de ta reponse