Aucun problème le voila :
html :
- Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemple d'utilisation de CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<h2>Acceuil</h2>
<div id="globe">
<div id="corps">
<h3>Présentation</h3>
<p>
Bonjour et bienvenue sur mon site !<br />
Vous ètes ici sur mon site =)
Je suis Graphiste <em> amateur </em> je graph depuis plus d'un ans mais depuis plus de 6mois sur Adobe Photoshop.<br>
Qui je pense est le meilleur logiciel pour ce que je fait =) . </br>
<br>J'espère que vous aprecirez ce que je fait ;-).</br></p>
</div>
<div id="menu">
<div class="element_menu">
<h3>Menu</h3>
<ul>
<li><a href="galeriesign.html">Signatures</a></li><br></br>
<li><a href="galerievector.html"> Vector </a></li><br></br>
<li><a href="galeriewall.html"> Wallpapers</a></li><br></br>
<li><a href="galerieautre.html"> Autres</a></li><br></br>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS :
- Code: Tout sélectionner
body /* On travaille sur la balise body, donc sur TOUTE la page */
{
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}
a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
color: RGB(38,111,244)
}
a:hover
{
text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
color: RGB(114,95,224);
}
#globe
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
}
#en_tete
{
width: 760px;
height: 100px;
background-image: url("./images/gally.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}
.element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
p
{
text-align: center;
}
#corps
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: #B3B3B3;
background-color: #626262; /* Une couleur de fond pour le corps */
background-image: url("images/motif.png");
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
h3
{
text-align: center;
}
EDIT: après avoir pas mal chercher j'ai trovuer ^^ l'image ne pouvait pas s'afficher car la div en tète n'existait pas dans le HTML ^^ problème réglé merci =D
je debute je risque d'avoir d'autre petit problèmes =P alors attendé vous a me revoir ^^'