par
Cyrano » 09 juil. 2006, 18:06
Sois donc précis et clair dans tes question, des containers, tu en as plein ton code...
Alors d'abord, si tu fais une mise en page en CSS, commence par virer tous les éléments HTML de mise en forme : balise <center> ou attribut align="center" : sinon, ça ne sert pas à grand chose.
Ensuite, tu définis la largeur générale en pourcentage : celui qui va regarder ta page en 800/600 va souffrir un peu. Fixe une largeur en pixels si tu tiens àbsolument à bloquer la largeur et tant qu'à faire, centre le, ce sera plus esthétique. Allez, proposition de corrigé de ton style CSS:
Code : Tout sélectionner
#tout{
position: absolute;
top: 0;
left: 50%;
width:780px;
margin-left: -390px;
border:2px solid #000000;
background-color:#FFFCAC;
padding:1em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#titre, #footer, #nav {
text-align: center;
}
#nav {
background-color:#FFCC00;
padding:0.2em;
border: 1px solid #000;
}
#contenu {
text-align: left;
}
#nav a{
padding: 0.2em;
color: red;
font-weight: bold;
text-decoration: none;
}
#nav a:hover{
color:#009999;
background-color:#FF6666;
}
h1 {
font-size: 24px;
font-style: italic;
font-weight: bold;
}
Et dans la foulée proposition de corrigé du HTML:
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="1.CSS" />
</head>
<body>
<div id="tout">
<h1 id="titre">Bienvenu sur mon site </h1>
<div id="nav">
<a href="index.html">Accueil</a> | <a href="#">telechargement</a>
</div>
<div id="contenu">
<p>blabla</p>
</div>
<div id="footer">
©2006 ism-infomaster.com
</div>
</div>
</body>
</html>
Observe que j'ai également viré un div autour du titreet remplacé par une balise de titre h1 : l'idée générale de la mise en page en CSS, c'est aussi de remettre chaque chose à sa place : on respecte la sémantique du html et pour un titre, on utilise une balise faite pour ça. Le align="center" à dégagé et se retrouve dans les propriétés CSS du bloc #contenu. Etc... je te laisse découvrir et expérimenter.
Sois donc précis et clair dans tes question, des containers, tu en as plein ton code...
Alors d'abord, si tu fais une mise en page en CSS, commence par virer tous les éléments HTML de mise en forme : balise <center> ou attribut align="center" : sinon, ça ne sert pas à grand chose.
Ensuite, tu définis la largeur générale en pourcentage : celui qui va regarder ta page en 800/600 va souffrir un peu. Fixe une largeur en pixels si tu tiens àbsolument à bloquer la largeur et tant qu'à faire, centre le, ce sera plus esthétique. Allez, proposition de corrigé de ton style CSS:
[code]#tout{
position: absolute;
top: 0;
left: 50%;
width:780px;
margin-left: -390px;
border:2px solid #000000;
background-color:#FFFCAC;
padding:1em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#titre, #footer, #nav {
text-align: center;
}
#nav {
background-color:#FFCC00;
padding:0.2em;
border: 1px solid #000;
}
#contenu {
text-align: left;
}
#nav a{
padding: 0.2em;
color: red;
font-weight: bold;
text-decoration: none;
}
#nav a:hover{
color:#009999;
background-color:#FF6666;
}
h1 {
font-size: 24px;
font-style: italic;
font-weight: bold;
}[/code]
Et dans la foulée proposition de corrigé du HTML:
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="1.CSS" />
</head>
<body>
<div id="tout">
<h1 id="titre">Bienvenu sur mon site </h1>
<div id="nav">
<a href="index.html">Accueil</a> | <a href="#">telechargement</a>
</div>
<div id="contenu">
<p>blabla</p>
</div>
<div id="footer">
©2006 ism-infomaster.com
</div>
</div>
</body>
</html>[/code]
Observe que j'ai également viré un div autour du titreet remplacé par une balise de titre h1 : l'idée générale de la mise en page en CSS, c'est aussi de remettre chaque chose à sa place : on respecte la sémantique du html et pour un titre, on utilise une balise faite pour ça. Le align="center" à dégagé et se retrouve dans les propriétés CSS du bloc #contenu. Etc... je te laisse découvrir et expérimenter.
