css mise en forme

**dodo-1924** · 27/10/2013, 18h32

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 html :

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

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 :

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

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

**JefReb** · 27/10/2013, 19h05

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

**dodo-1924** · 27/10/2013, 19h13

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 :

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

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

**JefReb** · 27/10/2013, 19h21

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 css :

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

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 html :

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

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>

**JefReb** · 27/10/2013, 19h23

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

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 css :

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

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 html :

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

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>

**dodo-1924** · 27/10/2013, 22h52

merci de ta reponse

css mise en forme [CSS 3]

CSS

Vue hybride

Discussions similaires

Partager

Partager