CV en HTML : texte mal aligné

Résolu/Fermé

coco87 Messages postés 328 Date d'inscription samedi 18 juin 2005 Statut Membre Dernière intervention 5 juillet 2015 - Modifié par KX le 4/07/2015 à 20:58
coco87 Messages postés 328 Date d'inscription samedi 18 juin 2005 Statut Membre Dernière intervention 5 juillet 2015 - 5 juil. 2015 à 16:37

bonjour à tous et toutes,
je vous joint le code html et css de mon cv que j'ai commencé.
je n'arrive pas à mettre les dates bien en face de mon texte.
voici ce que j'ai fait.
il a été édité avec notepad ++
merci de votre aide.
amicalement.

<! DOCTYPE HTML >
<HTML>
<HEAD>
<title>Mon cv personnalisé</title>
<meta charset="utf-8"/>
<link rel= "stylesheet" href= "cv.css"/>
</HEAD>
<BODY>

 <div class = "page">
  <div class = "infophoto">
   <div class = "info">
   <p><strong>Yves Dupont</strong><br/>
   Né le 17 mai 1948</p>
   <p>19, Avenue du marais - 87000 Limoges<br/>
   09 62 12 23 45<br/>
   yves.rené@orange.fr</p>
   <p>Permis B</p>
  </div>
   <div class ="photo">
   <img src="c:/serveur/photo-cv.jpg" alt="Yves"/>
   </div>
   </div>
  <div class= "section">
   <h2>Formation</h2>
   <div class= "sec-gauche" id = "forma-gauche">
    <p>2010-2010<em><br/><span class = "durée">(6 mois)</span></em></p>
    <p>2007-2008<em><br/><span class = "durée">(18 mois)</span></em></p>
    <p>2005-2005<em><br/><span class = "durée">(3 mois)</span></em></p>
    <p>1995-1996<em><br/><span class = "durée">(24 mois)</span></em></p>
    <p>1980-1982<em><br/><span class = "durée">(24 mois)</span></em></p>
  </div>
  
   <div class= "sec-droite">
    <p><span class = "titre">Agent d'hygiène et de propreté</span><br/>AFPA Limoges</p>
    <p><span class = "titre">Agent de maintenace sur équipements bureautiques</span><br/>APSAH Aixe sur Vienne</p>
    <p><span class = "titre">Formation en Informatique (word, excel)</span><br/>GRETA Limoges</p>
    <p><span class = "titre">Brevet Professionnel en Horticulture</span><br/>Les Vaseix Limoges</p>
    <p><span class = "titre">CAP Employé de Comptabilité</span><br/>Pigier Versailles</p>
  </div>
  </div>
  <div class= "section">
   <h2>Experiences Professionnelles</h2>
   <div class= "sec-gauche">
   <div id = "exp-gauche"
    <p>2010-2011<em><br/><span class = "durée">(12 mois)</span></em></p>
    <p>2009-2010<em><br/><span class = "durée">(6 mois)</span></em></p>
    <p>2007-2008<em><br/><span class = "durée">(6 mois)</span></em></p>
    <p>2000-2002<em><br/><span class = "durée">(18 mois)</span></em></p>
    <p>1998-2000<em><br/><span class = "durée">(24 mois)</span></em></p>
    <p>1988-1995<em><br/><span class = "durée">(48 mois)</span></em></p>
    <p>1986-1991<em><br/><span class = "durée">(36 mois)</span></em></p>
    <p>1982-1984<em><br/><span class = "durée">(24 mois)</span></em></p>
    <p>1977-1978<em><br/><span class = "durée">(12 mois)</span></em></p>
    <p>1976-1977<em><br/><span class = "durée">(12 mois)</span></em></p>
    </div>
   </div>
    <div class= "sec-droite">
    <p><span class = "titre">Agent d'entretien</span><br/>ISS Abyliss France</p>
    <p><span class = "titre">Agent d'entretien</span><br/>AFIL OPHLM Limoges</p>
    <p><span class = "titre">Périodes d'application en entreprises</span><br/>Micro Rézo, Micro World 87</p>
    <p><span class = "titre">Monteur sur chaîne de montage</span><br/>Etablissement Chatenet Pierre Buffière</p>
    <p><span class = "titre">Travail au froid chez un souffleur de verre</span><br/>Crespin Patrick Bessines</p>
    <p><span class = "titre">Chauffeur Livreur</span><br/>Entr'aide Départementale Limoges</p>
    <p><span class = "titre">Cuisinier</span><br/>Secours Catholique Limoges</p>
    <p><span class = "titre">Artisan (peinture sur soie, tissage, cartonnage, jouets en bois)</span><br/>RENE Yves</p>
    <p><span class = "titre">Vendeur article de jardin</span><br/>Jardinerie du pont neuf Limoges</p>
    <p><span class = "titre">Missions en Intérim</span><br/>Bis, Adia Limoges</p>
   </div><br/>
   <div class= "section">
   <h2>Autres expériences et centres d'intérêts</h2>
    <div class= "sec-gauche">
    <p>1978-1988<em><br/><span class = "durée">(10 ans)</span></em></p>
    <p>1990-2000<em><br/><span class = "durée">(10 ans)</span></em></p>
    <p>2015-2015<em><br/><span class = "durée">(3 mois)</span></em></p>
   </div>
    <div class= "sec-droite">
    <p><span class = "titre">Licencié  pétanque</span><br/>Couzeix</p>
    <p><span class = "titre">Licencié Billard Anglais - 1/4 de finale championnat de France à Laval</span><br/>Les Acacias Limoges</p>
    <p><span class = "titre">Formation en HTML, CSS, PHP, MYSQL</span><br/>A mon Domicile</p>
   </div>
   </div>
   </div>
 </BODY>
</HTML>

.page{
 width : 780px;
 margin : auto;
 font-size : 16px;
 font-family : 'Times new Roman' Tahoma, sans-serif;
}
.infophoto{
 height : 250px;
}
.info{
 float : left;
}
.photo{
 float : right;
}
.section{
 margin-bottom : 70px;
}
.sec-gauche{
 float : left;
}
.sec-droite{
 margin-left : 150px;
 margin-top : 42px;
}
strong{
 font-size : 20px;
}
em{font-size : 14px;
}
.section{
 margin-bottom : 70px;
 text-align : justify;
}
h2{
 font-size : 24px;
 color : #3388BB;
 text-transform : uppercase;
 border-bottom : 3px solid #3388DD;
}
.sec-gauche{
 float : left;
 font-weight : bold;
 font-size : 20px;
}
.duree{
 font-weight : normal;
 font-style : italic;
 font-size : 16px;
}
.sec-droite{
 margin-left : 150px;
}
.titre{
font-weight : bold;
font-size : 20px;
}
#forma-gauche p{
margin-bottom : 15px;
}
#exp-gauche p{
margin-top : 10px;
}

A voir également:

CV en HTML : texte mal aligné
Editeur html - Télécharger - HTML
Open cv - Télécharger - Emploi & CV
Br html ✓ - Forum Webmastering
&Nbsp html - Forum HTML
Balise - Forum HTML

2 réponses

Réponse 1 / 2

coco87 Messages postés 328 Date d'inscription samedi 18 juin 2005 Statut Membre Dernière intervention 5 juillet 2015 9
5 juil. 2015 à 00:55

bonsoir,
personne pour m'aider ?
il me le faut pour lundi.
il y a juste à retoucher les expériences professionnelles, le reste pour moi est bon.
merci d'avance pour votre aide et votre soutien.
amicalement.

RandoBob
5 juil. 2015 à 04:30

google peut vous aider avec les termes : l'alignement en CSS
après si vous utilisez du flottant(hors du flux) l'alignement sera forcément calqué sur la partie que vous indiquez.
Cela ma parait vous compliquer la tâche, commencez par positionner uniquement avec ls marges internes et externes(margin et padding) donc en restant dans le flux du document(alignement normal des balises).

Réponse 2 / 2

codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
Modifié par codeurh24 le 5/07/2015 à 05:54



<!DOCTYPE html>
<html>
<head>
    <title>Mon cv personnalisé</title>
    <meta charset="utf-8">
    <style>
	
		body{
			background-color: #777;
		}
	
		.page {
			width:780px;
			margin:auto;
			font-size:16px;
			font-family:'Times new Roman' Tahoma,sans-serif;
			background-color: #FFF;
			padding: 2%;
		}
		
		table{
			width: 80%;
			margin:auto;
			margin-top:15px;
		}
		caption{
			text-align: left;
			font-size: 24px;
			color: #38B;
			text-transform: uppercase;
			border-bottom: 3px solid #38D;
		}
		
		
		th{
			text-align: left;
			margin-bottom:-5px;
			margin-top:20px;
			 font-weight: 700;
			font-size: 18px;
			line-height: 13px;
			border-top: 8px solid #FFF;
		}
		
		
		td{
			text-align: left;
		}
		
		th.colonne1{
			width: 23%;
		}
		
		td.colonne1{
			  font-style: italic;
			  font-size: 14px;
		}

		#presentation-identite-texte{
			line-height: 15px;
			margin-bottom:15px;
		}
		
		#presentation-identite-texte .block{
			margin-bottom:6px;
		}
		
		#presentation-identite-texte,
		#presentation-identite-photo{
			display: inline-block;
			width: 46%;
		}
		
		#presentation-identite-photo img{
			width: 86px;
		}
		#presentation-identite-photo{
			text-align: right;
		}

	</style>
</head>

<body>
    <div class="page">
	
		<div id="presentation-identite-texte">
			<div class="block">
				<div>Yves Dupont</div>
				<div>Né le 17 mai 1948</div>
			</div>
			<div class="block">
				<div>19, Avenue du marais - 87000 Limoges</div>
				<div>09 62 12 23 45</div>
			</div>
			<div class="block">
				<div>yves.rené@orange.fr</div>
			</div>
			<div class="block">
				<div>Permis B</div>
			</div>
		</div>
		<div id="presentation-identite-photo">
			<img src="http://www.test-overcome.net/genesis-2015/wp-content/uploads/2015/02/avatar-homme.jpg" 
			alt="ma photo de presentation sur CV" />
		</div>
	
		<table> 
			<caption>FORMATIONS</caption> 
			<tr>
				<th class="colonne1">2010-2010</th><th class="colonne2">Agent d'hygiène et de propreté</th>
			</tr>
			<tr>
				<td class="colonne1">(6 mois)</td><td class="colonne2">AFPA Limoges</td>
			</tr>
			<tr>
				<th class="colonne1">2007-2008</th><th class="colonne2">Agent de maintenace sur équipements bureautiques</th>
			</tr>
			<tr>
				<td class="colonne1">(18 mois)</td><td class="colonne2">APSAH Aixe sur Vienne</td>
			</tr>
			<tr>
				<th class="colonne1">2005-2005</th><th class="colonne2">Formation en Informatique (word, excel)s</th>
			</tr>
			<tr>
				<td class="colonne1">(3 mois)</td><td class="colonne2">GRETA Limoges</td>
			</tr>
			<tr>
				<th class="colonne1">1995-1996</th><th class="colonne2">Brevet Professionnel en Horticulture</th>
			</tr>
			<tr>
				<td class="colonne1">(24 mois)</td><td class="colonne2">Les Vaseix Limoges</td>
			</tr>
			<tr>
				<th class="colonne1">1980-1982</th><th class="colonne2">CAP Employé de Comptabilité</th>
			</tr>
			<tr>
				<td class="colonne1">(24 mois)</td><td class="colonne2">Pigier Versailles</td>
			</tr>
		</table>
		
		
		<table> 
			<caption>EXPERIENCES PROFESSIONNELLES</caption> 
			<tr>
				<th class="colonne1">2010-2011</th><th class="colonne2">Agent d'entretien</th>
			</tr>
			<tr>
				<td class="colonne1">(12 mois)</td><td class="colonne2">ISS Abyliss France</td>
			</tr>
			<tr>
				<th class="colonne1">2009-2010</th><th class="colonne2">Agent d'entretien</th>
			</tr>
			<tr>
				<td class="colonne1">(6 mois)</td><td class="colonne2">AFIL OPHLM Limoges</td>
			</tr>
			<tr>
				<th class="colonne1">2007-2008</th><th class="colonne2">Périodes d'application en entreprises</th>
			</tr>
			<tr>
				<td class="colonne1">(6 mois)</td><td class="colonne2">Micro Rézo, Micro World 87</td>
			</tr>
			<tr>
				<th class="colonne1">2000-2002</th><th class="colonne2">Monteur sur chaîne de montage</th>
			</tr>
			<tr>
				<td class="colonne1">(18 mois)</td><td class="colonne2">Etablissement Chatenet Pierre Buffière</td>
			</tr>
			<tr>
				<th class="colonne1">1998-2000</th><th class="colonne2">Travail au froid chez un souffleur de verre</th>
			</tr>
			<tr>
				<td class="colonne1">(24 mois)</td><td class="colonne2">Crespin Patrick Bessines</td>
			</tr>
			<tr>
				<th class="colonne1">1988-1995</th><th class="colonne2">Chauffeur Livreur</th>
			</tr>
			<tr>
				<td class="colonne1">(48 mois)</td><td class="colonne2">Entr'aide Départementale Limoges</td>
			</tr>
			<tr>
				<th class="colonne1">1986-1991</th><th class="colonne2">Cuisinier</th>
			</tr>
			<tr>
				<td class="colonne1">(36 mois)</td><td class="colonne2">Secours Catholique Limoges</td>
			</tr>
			<tr>
				<th class="colonne1">1982-1984</th><th class="colonne2">Artisan (peinture sur soie, tissage, cartonnage, jouets en bois)</th>
			</tr>
			<tr>
				<td class="colonne1">(24 mois)</td><td class="colonne2">RENE Yves</td>
			</tr>
			<tr>
				<th class="colonne1">1977-1978</th><th class="colonne2">Vendeur article de jardin</th>
			</tr>
			<tr>
				<td class="colonne1">(12 mois)</td><td class="colonne2">Jardinerie du pont neuf Limoges</td>
			</tr>
			<tr>
				<th class="colonne1">1976-1977</th><th class="colonne2">Missions en Intérim</th>
			</tr>
			<tr>
				<td class="colonne1">(12 mois)</td><td class="colonne2">Bis, Adia Limoges</td>
			</tr>	
		</table>
		
		
		<table> 
			<caption>AUTRES EXPÉRIENCES ET CENTRES D'INTÉRÊTS</caption> 
			<tr>
				<th class="colonne1">1978-1988</th><th class="colonne2">Licencié pétanque</th>
			</tr>
			<tr>
				<td class="colonne1">(10 ans)</td><td class="colonne2">Couzeix</td>
			</tr>
			<tr>
				<th class="colonne1">1990-2000</th><th class="colonne2">Licencié Billard Anglais - <span style="font-size:12px;">1/4 de finale championnat de France à Laval</span></th>
			</tr>
			<tr>
				<td class="colonne1">(10 ans)</td><td class="colonne2">Les Acacias Limoges</td>
			</tr>
			<tr>
				<th class="colonne1">2015-2015</th><th class="colonne2">Formation en HTML, CSS, PHP, MYSQL</th>
			</tr>
			<tr>
				<td class="colonne1">(3 mois)</td><td class="colonne2">A mon Domicile</td>
			</tr>
		</table>

    </div>
</body>
</html>

coco87 Messages postés 328 Date d'inscription samedi 18 juin 2005 Statut Membre Dernière intervention 5 juillet 2015 9
5 juil. 2015 à 12:13

bonjour et MERCI pour le mal que tu t'es donné et pour ta réponse codeurh24.
si j'ai bien compris, tu commences par le css et html ensuite, et tu mets le tout dans la même page, est ce bien ca ?

codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
5 juil. 2015 à 13:56

non. je monte petit a petit le html avec le css.
si je met le css dans la page html c'est parceque tu a juste a tout recopier d'un seul block dans une seule page.

coco87 Messages postés 328 Date d'inscription samedi 18 juin 2005 Statut Membre Dernière intervention 5 juillet 2015 9 > codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018
5 juil. 2015 à 16:37

ok, moi j'ai monté tout mon html, puis le css dans une autre page.
je vais étudier ton css pour voir et essayer de le refaire.
merci encore pour tout.

Discussions similaires

Espace en HTML

la balise ou

ou ou

&nbsp ; Quelle Fonction ?

Que veut dire  ?