J'ai un problème de positionnement et placement de bloc div en CSS, lequel ne
s'affiche pas de la même façon entre explorer et firefox !!
J'ai beau avoir bien fini le cours du site du zéro, et avoir bien compris ses pages
css et son exemple, pour mon site, je n'arrive pas à comprendre le fonctionnement
du positionnement !!
Ce qui me perturbe le plus, c'est qu'en définissant une taille de DIV, celle-ci peut
changer soudainement de taille ? (j'aurais bien aimé fixer la taille des div pour de bon)
je ne comprends pas pourquoi ?
Et l'autre chose étrange, c'est que je mets des marges extérieures dont le navigateur
ne tient pas compte. Conclusion, mes blocs se baladent dans tous les sens
Voici le code Xhtml, puis le CSS de ma page, si quelqu'un de caler dans les positionnement
pouvait venir à mon secours:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="accueil.css" />
</head>
<body>
<div id="en_tete">
</div>
<div id="corps">
<div id="lanotebleue">
<a href="bonnand-noam.html">La note bleue de Noam Bonnand<br />
<em> "A propos de l'artiste"</a></em>
</div>
#en_tete
{
width: 760px;
height: 90px;
background-image: url("images/banniere1noambonnandcombis.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
border: 4px solid white;
}
#corps
{
width: 760px;
height: 350px;
margin-top: 10px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 10px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding-top: 10px; /* 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/partitionfondpourlecorps.jpg");
background-repeat: no-repeat; /* Une petite image de fond qui se répètera horizontalement en haut */
border: 2px solid red; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#lanotebleue
{
width: 500px;
height: 0px;
max-width: 500px;
max-height: 100px;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 60px;
border: 4px solid blue;
background-color: black;
text-align: center;
}
#lanotebleue a
{
text-decoration: none;
color: blue;
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
color: blue;
text-align: center;
font-family: Georgia, "Times New Roman", Arial, serif;
text-decoration: none; /* Les liens ne seront plus soulignés */
color: blue; /* Les liens seront en rouge au lieu de bleu */
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
}
#lanotebleue em
{
font-size: 16px;
}
#lanotebleue a:hover
{
background-color: #B3B3B3;
color: black;
}
Je te remercie de ta réponse, en fait, après beaucoup de difficulté et de tatonnement,
j'ai réussi à positionner les éléments de cette page à peu près de façon convenable dans
les deux navigateurs.... (un vrai casse-tête)
Peux-tu plutôt me donner quelques consignes sur le positionnement des DIV pour que j'aille
plus vite par la suite
Je m'explique
Je suis étonné de voir que lorsque je place une image (un gif) ; , son positionnement dépend
toujours des côtés du navigateur même si elle est définit comme un DIV dans un DIV ?
Pourquoi ne dépend-elle pas des côtés du DIV dans lequel elle se trouve ?
voici la page html et css des éléments concernés, bien positionné (mais peut-être
pas de la meilleure façon qu'il faudrait)
<div id="lanotebleue">
<a href=".....................html">La note bleue de Noam Bonnand<br />
<em> "A propos de l'artiste"</a></em>
</div>
21 juil. 2008 à 10:32
Je te remercie de ta réponse, en fait, après beaucoup de difficulté et de tatonnement,
j'ai réussi à positionner les éléments de cette page à peu près de façon convenable dans
les deux navigateurs.... (un vrai casse-tête)
Peux-tu plutôt me donner quelques consignes sur le positionnement des DIV pour que j'aille
plus vite par la suite
Je m'explique
Je suis étonné de voir que lorsque je place une image (un gif) ; , son positionnement dépend
toujours des côtés du navigateur même si elle est définit comme un DIV dans un DIV ?
Pourquoi ne dépend-elle pas des côtés du DIV dans lequel elle se trouve ?
voici la page html et css des éléments concernés, bien positionné (mais peut-être
pas de la meilleure façon qu'il faudrait)
<div id="lanotebleue">
<a href=".....................html">La note bleue de Noam Bonnand<br />
<em> "A propos de l'artiste"</a></em>
</div>
<img class="notedemusique" src="images/notedemusique.gif" />
<div id="pianopedagogie">
<a href="francesectionpiano.html">La section piano pédagogie de<br />
..............................<br />
<em> "Aux pianistes amateurs et mélomanes passionnés"</a></em>
</div>
<<img class="livredeconnaissance" src="images/livredeconnaissance.gif" />
#lanotebleue
{
width: 500px;
height: 0px;
max-width: 500px;
max-height: 100px;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 60px;
border: 4px solid blue;
background-color: black;
background-image: url("images/fondlanotebleu.jpg");
text-align: center;
}
#lanotebleue a
{
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
color: #a3fffc;
text-align: center;
font-family: Georgia, "Times New Roman", Arial, serif;
text-decoration: none; /* Les liens ne seront plus soulignés */
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
background-color: blue;
}
#lanotebleue background-color
{
opacity:0.5;
}
#lanotebleue em
{
font-size: 16px;
}
#lanotebleue a:hover
{
background-color: #B3B3B3;
color: black;
}
.notedemusique
{
position: absolute;
margin-bottom: 100px;
left: 600px;
top: 210px;
border: 0px;
}
#pianopedagogie
{
width: 500px;
height: 100px;
margin-top: 85px;
margin-left: auto;
margin-right: auto;
margin-bottom: 120px;
border: 4px solid orange;
background-color: black;
text-align: center;
}
#pianopedagogie a
{
text-decoration: none;
color: orange;
font-family: Georgia, "Times New Roman", Arial, serif;
font-size: 25px;
text-align: center;
font-family: Georgia, "Times New Roman", Arial, serif;
text-decoration: none; /* Les liens ne seront plus soulignés */
font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
}
#pianopedagogie em
{
font-size: 16px;
}
#pianopedagogie a:hover
{
background-color: #B3B3B3;
color: black;
}
.livredeconnaissance
{
position: absolute;
left: 600px;
top: 400px;
color: black;
border: 0px solid black;
}