Bonjour,
Etant nouveau dans le XHTML et le CSS, je suis à la recherche d'un peu d'aide.
Je viens de mettre en ligne une ébauche de site : http://lionel.ferreol.free.fr/test/
validation XHTML
Validation CSS
Sous firefox, j'ai un problème d'affichage. Les onglets sont décolés du bloque principal.
Copie du source XHTM
Copie du source CSS
Dans le bloque principal (div id centre), j'ai mon texte qui se trouve dans une balise "<p>". C'est visiblement cette balise qui à cause de son margin par défaut. Si je force le margin-top à 0, mon texte est collé en haut. Si je rajoute un padding-top à 10 tout est visuellement correct, mais je suis obligé d'avoir une classe particulière pour toutes les premières balises "<p>".
C'est surtout que je ne comprends pas pourquoi une balise "<p>" peut faire bouger son contenant "<div>" alors que la balise "<p>" à toute la place qu'il lui faut dans son contenant.
J'en déduis donc qu'il doit me manquer un quelque chose à mettre quelque part... Pourriez-vous me mettre sur la bonne piste?
Cordialement,
Dkrte
Etant nouveau dans le XHTML et le CSS, je suis à la recherche d'un peu d'aide.
Je viens de mettre en ligne une ébauche de site : http://lionel.ferreol.free.fr/test/
validation XHTML
Validation CSS
Sous firefox, j'ai un problème d'affichage. Les onglets sont décolés du bloque principal.
Copie du source XHTM
<!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>...</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="Stylesheet" title="style" href="css_grimm.css" />
</head>
<body>
<div id="page">
<div id="haut">
<div id="onglet4" class="onglet_inactif">
<p><a href="?page=photos">Photos</a></p>
</div>
<div id="onglet3" class="onglet_inactif">
<p><a href="?page=tarifs">Tarifs</a></p>
</div>
<div id="onglet2" class="onglet_actif">
<p><a href="?page=profil">Profil</a></p>
</div>
<div id="onglet1" class="onglet_inactif">
<p><a href="?page=accueil">Accueil</a></p>
</div>
</div>
<div id="centre">
<br />Prochainement... </div>
</div>
</body>
</html>
Copie du source CSS
body {
text-align: center;
background-color: #ffffff;
background-image: url(img/pix_fond.png);
color: white;
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
}
#page {
width: 680px;
}
#haut {
width: 677px;
height: 25px;
border-style:solid;
border-width:0px;
border-color:white;
}
#centre {
width: 677px;
height: 321px;
background-image: url(img/fond.png);
background-repeat:no-repeat;
border-style:solid;
border-width:0px;
border-color:white;
}
a {
color:#FFFFFF;
}
a:hover {
color:#FFFFFF;
}
.onglet_inactif {
width: 70px;
height: 25px;
float: right;
background-image: url(img/onglet.png);
background-repeat:no-repeat;
}
.onglet_inactif p {
margin-top: 5px;
font-size: 8pt;
color: #47B6CA;
font-weight: bold;
}
.onglet_actif {
width: 70px;
height: 25px;
float: right;
background-image: url(img/onglet2.png);
background-repeat:no-repeat;
}
.onglet_actif p {
margin: 5px 10px 10px 10px;
font-size: 8pt;
color: #101010;
font-weight: bold;
}
#haut a {
text-decoration: none;
}
#haut a:hover {
text-decoration: none;
}
Dans le bloque principal (div id centre), j'ai mon texte qui se trouve dans une balise "<p>". C'est visiblement cette balise qui à cause de son margin par défaut. Si je force le margin-top à 0, mon texte est collé en haut. Si je rajoute un padding-top à 10 tout est visuellement correct, mais je suis obligé d'avoir une classe particulière pour toutes les premières balises "<p>".
C'est surtout que je ne comprends pas pourquoi une balise "<p>" peut faire bouger son contenant "<div>" alors que la balise "<p>" à toute la place qu'il lui faut dans son contenant.
J'en déduis donc qu'il doit me manquer un quelque chose à mettre quelque part... Pourriez-vous me mettre sur la bonne piste?
Cordialement,
Dkrte
,