Découverte des propriétés CSS float et clear qui nous aident à mettre en page nos éléments HTML.
Retrouvez le script complet de ce cours HTML / CSS sur mon site : http://pierre-giraud.com/home.php.
N’hésitez pas à mettre un pouce bleu ou un commentaire, merci d’avance !
Source du tuto
7 Commentaires. En écrire un nouveau
Merci pour votre cours précis et clair!
Je veux avoir trois colonnes (expériences/compétences/formation) mais ni le float ni le display:inline-block ne fonctionne. Pouvez vous m'aider
<textarea>
body
{
background-image:url("images/montagne.jpg");
background-repeat:repeat;
background-attachment:fixed;
/background-color:rgba(245,147,132,0.6)/
color:white;
font-size:1.12em;
}
.text
{
font-family:airstreamregular,Impact,adriana,sans-serif;
color:white;
text-align:center;
/background-color:gray;/
width:83%;
/border-radius:25px,25px,25px,25px;/
font-style:italic;
font-size:1.1em;
}
.competences,.formation,.exper
{
background-color:black;
color:white;
font-weight:bold;
border:1px olive groove;
}
.competences
{
display:inline-block;
width: 30%;
border: 1px solid black;
vertical-align:top;
}
.formation
{
display: inline-block;
width:30%;
vertical-align:top;
border: 1px solid black;
}
.exper
{
display: inline-block;
width: 30%;
border: 1px solid black;
vertical-align:top;
}
.nom
{
text-align:center;
}
.photo
{
float:right;
}
</textarea>
<code><!Doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="activite3_classroom.css"/>
<title>Cv câblage télécom – Informatique</title>
</head>
<body>
<h1 class="nom">A-D</h1>
<p><img src="images/etoile.jpg" class="photo" alt="Ma photo" title="Ma photo"><p>
<p class="text">Technicien en câblage télécom
</p>
<h2>Mon expérience</h2>
<div class="exper"> <ul>
<li>
<strong>De 2013 à 2015:</strong> Agent de rénovation – SNCF (LYON):Rénovation et entretien de Gares SNCF.
– Monteur câbleur dans des répartiteurs de France Télécom<br/> à lyon: Jarretiérage,traitement de dérangement ADSL, raccordement de ligne téléphonique…
</li>
</ul>
</div>
<h3>Mes compétences</h3>
<div class=competences>
<ul>
<li>Traitement de dérangement adsl.</li>
<li>Câblage télécom & informatique.</li>
</ul>
</div>
<h3>Ma formation</h3>
<div class="formation">
<ul>
<li><strong>2007: </strong> Attestation en installation telecom(UNF val d'oise).</li>
<li><strong>2008: Diplôme DUT RESEAU TELECOM (Paris 13 Villetaneuse).</li>
</ul>
</div>
<br/>
</body>
</html>
</code>
Merci beaucoup 🙂
Merci infiniment pour ces cours Pierre Giraud, j'ai juste un petit doute, à quoi sert la valeur "initial" de la propriété "overflow"? s'il vous plaît
merci bcp !
Merci beaucoup Pierre Giraud !
<merci giraud>
<ce cour est genial???>
</super>