bordeaux programmation et développement en css

Créer un site web en CSS

Placer une photo et l'entourer de texte :

Nous reprenons le code source de essai7.html.
Imaginons que nous voulions placer une photo dans la colonne gauche, en haut à gauche et l'entourer de texte. Il suffit pour cela de modifier le code ainsi :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>troisième page css</title>

body { 
padding:0;
margin:0;
}
#entete
{
border-bottom:1px solid black;
background-color:#eeeeee;

width:100%;
height:100px;
font-size:20px;
font-family:arial;
text-align:center;

}

#piedpage
{

background-color:#eeeeee;

width:100%;
height:60px;
font-size:20px;
font-family:arial;
text-align:center;
padding-top:20px;
border-top:1px solid black;
}

#cont
{
width:100%;
height:400px;

font-size:20px;
text-align:center;
}

#colonnegauche
{
width:26%;
border-left:1px solid black;
border-right:1px solid black;
height:400px;
float:left;
background-color:#eeeeee;
font-size:12px;
font-family:arial;
}
#colonnegauche p
{
text-align:justify;
padding:6px;
}

#colonnegauche img
{float:left;
margin-right:5px;

}

#colonnedroite
{

float:right;
background-color:#ffffff;

text-align:justify;
height:398px;
width:73%;
}

#colonnedroite p
{
text-align:justify;
padding:10px;
font-size:14px;
font-family:arial;
}

</style>
</head>

<h1>Titre de notre division en-tête</h1>
<p>sous-titre</p>
</div>
<div id="cont">
<div id="colonnegauche">

<img src="coco.png" width="20%"><p>ceci est notre colonne de gauche
où l'on va écrire des choses et même encore  beaucoup de choses autour de la photo de coco qui lui observe tout cela avec philosophie</p>
<a href="bordeaux-css.htm">retour bordeaux css</a>
</div>

<div id="colonnedroite"><p>ici la colonne droite où l'on peut écrire tout ce qu'on veut</p></div>
</div>
<div id="piedpage">
Ceci est notre pied de page
</div>
</body>
</html>

Finalement il faut deux modifications pour placer une photo :

Définir une image pour la colonne gauche.
Le sélecteur img pour la colonne gauche se définit donc : #colonne gauche img { }
On lui attribue deux règles:
float:left; ==> on choisit l'image flotte à gauche cad se situe à gauche de la colonne
margin-right:5px; ==> on aère de 5px la droite de l'image pour que le texte ne la touche pas

On n'oublie bien sûr pas d'appeler l'image sous div id="colonnegauche" par:
img src="coco.png" width="20%" où :
coco.png est le nom de la photo placée dans le même dossier que la page appelante
width="20%" concerne la photo qui est trop grande pour tenir dans la colonne gauche, on la réduit donc à 20% de sa taille réelle pour qu'elle s'adapte aux dimensions de cette colonne.
Voici le résultat : photo essai8.html

à suivre ...

retour bordeaux css