Bonjour,
Merci à vous d'avoir répondu. Je suis déjà rassurée que je puisse faire ce que veux en terme de largeur.
Je cherche un design de base 3 colonnes avec header et footer, à partir duquel je pourrais me baser, car j'ai besoin d'apprendre.
J'en ai trouvé un dans un livre : CCS 2; mais il ne fonctionne pas correctement; il y a 2 colonnes en plus à droite, le site n'est pas centré, j'aimerais avoir le footer à la base des 3 colonnes.
Je vous envoie la page htlm et la page feuille de style; peut-être pourriez-vous me dire comment corriger ?
IL a été essayé sur IE
Merci d'avance pour toute réponse
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="fr-fr"><head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<link href="TextCss.txt" type="text/css" rel="stylesheet"><title>Accueil</title>
</head>
<body>
<h1>en-tête de page</h1>
<div id="global">
<div id="blocmenugauche">
<p>Bloc menu</p>
<p>largeur fixe: 150px</p>
<ul id="menu">
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
<li><a href="#">lien4</a></li>
<li><a href="#">lien5</a></li>
<li><a href="#">lien6</a></li>
<li><a href="#">lien7</a></li>
<li><a href="#">lien8</a></li>
<li><a href="#">lien9</a></li>
</ul>
</div>
<div id="blocmenudroite">
<p>Bloc menu</p>
<p>largeur fixe: 150px</p>
<ul id="menu">
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
<li><a href="#">lien4</a></li>
<li><a href="#">lien5</a></li>
<li><a href="#">lien6</a></li>
<li><a href="#">lien7</a></li>
<li><a href="#">lien8</a></li>
<li><a href="#">lien9</a></li>
</ul>
</div>
<div id="contenu">
<p>Bloc contenu</p>
<p>largeur restante</p>
<p id="pied">Pied de page</p>
</body>
</html>
Feuille de style
body {
margin: 0;
padding: 0;
}
p {
margin: 0 0 1em 0;
}
h1 {
height: 50px;
width: 750px;
background-color: #4c4e00;
color: white;
margin: 0;
}
#global{
width: 750px;
background-color: #666600;
}
#blocmenugauche {
width: 150px;
float: left;
background-color: #666600;
color: white;
}
#blocmenudroite {
width: 150px;
float: right;
background-color: #666600;
color: white;
}
#blocmenugauche p, #blocmenudroite p {
margin-left: 1em;
}
#blocmenugauche ul, #blocmenudroite ul {
margin: 0 0 1em 0;
}
#blocmenugauche li, #blocmenudroite li {
list-style-type: none;
margin: 0 0 1em 0;
}
#blocmenugauche li a, #blocmenudroite li a {
color: white;
text-decoration: none;
}
#blocmenugauche li a:hover, #blocmenudroite li a:hover {
color: white;
text-decoration: underline;
}
#contenu {
margin-left: 150px;
margin-right: 150px;
background-color: #eaeae9;
}
#contenu p {
margin: 0 0 0 1em;
}
#pied {
clear-both;
width: 750px;
margin-left: 150px;
margin:0;
background-color: #cccc00;
}
Modifié par vianney18 (30 Apr 2008 - 16:37)
)
)