Petit problème à corriger sur feuille de style css

Marsh Posté le 10-03-2010 à 17:54:30

Bonjour.
Voici l'adresse provisoire d'un des sites dont je m'occupe actuellement : http://tenrolf1.free.fr/siteoffici [...] index.html
Et voici celle de sa feuille de style : http://tenrolf1.free.fr/siteoffici [...] styles.css
Il contient un petit bug que je ne parviens pas à corriger;
En effet, sous Firefox, sur les pages "textes", et "musique", l'un des quatres éléments du contenue, celui qui est en haut, à droite, est décalé vers le bas. (Sur IE, et Chrome, tout est à peu près propre.)
Pourriez-vous jeter un petit coup d'oeil svp?
Merci;

Voici le code XHTML de la page "texte" :

<!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=utf-8" />
<title>SKIE - Site Officiel | Textes</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
#apDiv1 {
width:405px;
height:200px;
top: 852px;
overflow: auto;
visibility: visible;
position: relative;
margin: auto;
left: 0px;
right: 0px;
background-image: url(images/fondcadres.png);
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
}
#apDiv2 {
width:405px;
height:240px;
z-index:1;
top: 846px;
color: #FFF;
text-align: left;
position: relative;
background-image: url(images/fondcadres.png);
}
</style>
</head>

<body>
<div id="divsite"><div id="divanimskie">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="980" height="580" align="middle" id="FlashID" title="portail">
<param name="movie" value="../animationsflash/portail/portailv2.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />

<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="LOOP" value="false" />


<object data="../animationsflash/portail/portailv2.swf" type="application/x-shockwave-flash" width="980" height="580" align="middle">

<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="LOOP" value="false" />

<div>
<h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
</div>

</object>

</object>
</div>
<div id="divcontenue">
<div id="divhaut"></div>
<div id="divmenuflash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="959" height="71" id="FlashID2" title="Menu">
<param name="movie" value="main.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />

<param name="expressinstall" value="Scripts/expressInstall.swf" />


<object type="application/x-shockwave-flash" data="main.swf" width="959" height="71">

<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />

<div>
<h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
</div>

</object>

</object>
</div>
<div id="divcontenuetexte">
<div id="reseauxsociauxetnewsletter"></div>
<div id="barretextes"></div>
<div id="scrolltextes">
<div id="cadrestexte1">
<div id="souscadrestexte1gauche">
<div id="sousdivcontenue"> <img src="images/barre.png" name="im" width="418" height="30" id="im" alt="barre" />
<div id="apDiv1">
<p><span class="gras">Refrain:</span><br />
<br />
J'ai failli y laisser ma vie<br />
Mes envies <br />
Je pars le coeur libre<br />
<br />
Je te laisse à tes erreurs <br />
Et tes peurs<br />
Je pars le coeur libre<br />
<br />
<span class="gras">Couplet 1:</span><br />
<br />
Quand un coeur saigne<br />
Il n'y a aucun baume pour calmer sa peine<br />
J'imaginais des fleurs dans notre jardin<br />
Des lilas, des roses<br />
<br />
Si tu m'avais un tant soit peu respectée<br />
J'aurais été celle qui <br />
Aurait béni tes nuits<br />
Et partagé ta vie<br />
<br />
<span class="gras">Refrain</span><br />
<br />
<span class="gras">Couplet 2</span>:<br />
<br />
Les premiers nuages sont arrivés<br />
quand il m'a fait "objet de ses passions"<br />
Ses démons ont fermé son bon sens <br />
et ouvert la fréquence des humilations que je recevais sans cesse<br />
c'est sans mon soleil qu'il trouvait le sien<br />
et dans mon ciel qu'il puisait ses reves<br />
<br />
<span class="gras">Refrain</span><br />
<br />
<span class="gras">Couplet 3:</span><br />
<br />
C'est dans des moments comme ceux là<br />
qu'on se rend compte<br />
qu'on tient à la vie<br />
Et qu'on a pas envie de la gacher<br />
avec n'importe qui<br />
alors, choisissez bien<br />
ceux qui vous tiendront la main<br />
les gens sont parfois ingrats<br />
ne laissez personne vous diriger<br />
<br />
<span class="gras">Refrain</span></p>
</div>
</div>
</div>
<div id="souscadrestexte1droite">
<div id="sousdivcontenuedoite"> <img src="images/barresijavaisuelachance.png" name="im2" width="980" height="71" id="im2" alt="Si j'avais eu la chance" />
<div id="apDiv2"> <br />
<strong> Si j’avais eu la chance…</strong><br />
Si j’avais eu la chance de connaître le froid<br />
De manquer de confiance, de ne pas croire en moi<br />
La destinée de ceux qui n’ont pas vraiment eu le choix<br />
Si j’avais eu la chance de manquer de confort<br />
De savoir ce que c’est que de dormir dehors<br />
J’aurais le goût des choses alors je n’me plaindrai pas…<br />
<p>Seulement voilà…</p>
<p><strong>Refrain:</strong></p>
<p><strong>Je n’ai pas eu la chance d’être malheureuse</strong><br />
<strong>Ma vie était bien trop ennuyeuse</strong><br />
<strong>Dans ma tendre enfance j’avais / tout pour moi</strong><br />
<strong>Je n’ai pas eu le droit d’être malchanceuse</strong><br />
<strong>Pas même le besoin d’être ambitieuse</strong><br />
<strong>On m’a donné tout c’que je / n’voulais pas…</strong><br />
Si j’avais eu la chance de manquer de tendresse<br />
De n’être pas traitée comme une petite princesse<br />
J’aurais pu progresser tout au long de ma jeunesse<br />
J’ai dû me contenter de toutes ces politesses<br />
De regards hypocrites, sourires plein de tendresse<br />
Mais j’aurais voulu un peu moins de délicatesse </p>
Seulement voilà…</div>
</div>
</div>
</div>
<div id="cadretexte2">
<div id="souscadrestexte2gauche"><div id="soudivcontenue2"><img src="images/barrelapeausurlesos.png" alt="LA PEAU SUR LES OS" name="imagelapeausurlesos" width="418" height="30" id="imagelapeausurlesos" />
<div align="left" id="apDiv3">
<p>Non je t’assure je fais pas exprès<br />
Aucun régime, aucun secret<br />
Non non non non<br />
<br />
J’ai beau avaler tout ce que je veux<br />
A m’engoinfrer jusqu’aux yeux<br />
Non non non non<br />
<br />
Je me tape un bœuf musical<br />
Je m’empiffre les cordes vocales<br />
Non non non non<br />
<br />
Je t’assure je ne suis pas ma ligne<br />
A part mon bon RER D<br />
Je ne lis pas non plus les magazines<br />
Où l’on fait du 95 D <br />
<br />
Chez moi j ai une petite cuisine<br />
Que j’ai eu du mal à monter<br />
Non non non non <br />
<br />
<strong>J ai la peau sur les os</strong><br />
<strong>Je sais manque de peau</strong><br />
<strong>J ai la peau sur les os</strong><br />
<strong>J e n’aime pas la po… lémique<br />
La polémique</strong></p>
<p><strong>J’ai la peau sur les os<br />
Je sais manque de peau</strong><br />
<strong>J’ai la peau sur les os</strong><br />
<strong>Je n’aime pas cette po… litique<br />
Cette politique<br />
</strong><br />
Je t’assure je ne suis pas mannequin<br />
A me faire vomir tous les matins<br />
Non non non non<br />
<br />
J’aimerais bien y mettre un terme<br />
Mais j’ai ça sous mon épiderme<br />
Et c’est pour de bon <br />
<br />
Ca peut me rendre aigre douce<br />
Comme pimentée ou farouche<br />
Ca peut m’en donner des secousses<br />
La chair de poule ou la peau douce<br />
<br />
Parfois je marque les bons points<br />
De ne pas avoir d’embonpoint<br />
C’est pas de ma faute<br />
Non c’est pas de ma faute<br />
J’en ai des aigreurs d’estomac<br />
Quand on me montre du doigt<br />
Ma maigreur maladive<br />
Pas besoin de salade d’endives<br />
<br />
Mais moi je me plais et mon mec m’aime<br />
En poids léger et c’est sans gêne<br />
Il aurait peur de me briser<br />
A bras de cœur, mise de côté<br />
Le haut le cœur, fleur dans la peau</p>
Quand il m’effleure le bas du dos<br />
Je suis comme une fleur dans un pot<br />
<br />
Manque de peau<br />
Manque de peau <br />
Manque de peau…<br />
<br />
Sur les os<br />
Sur les os<br />
Sur les os<br />
<br />
Une fleur sans eau..</div></div></div>
<div id="souscadrestexte2droite"><div id="sousdivcontenuedroite2"><img src="images/barremonego.png" width="418" height="30" alt="MON EGO" />
<div id="apDiv4"><p>Oh c’est vrai tu le sais que j aime bien mon style<br />
M’occuper de moi, et si c est trop futile<br />
Mes effets/ personnels que personne ne s’en mêle<br />
Oui c’est vrai tu m’trouves égoïste<br />
Solitaire, et égo/centriste<br />
C’est vrai, je suis/ comme ça, je préfère ne penser qu’à moi<br />
D égo à égal, moi je trouve que c’est normal<br />
Je m aime moi-même et je rêve de nuit de soi<br />
D’égo à égal, je trouve ça plus que normal<br />
Je n’aime que moi-même c’est pour ne pas… avoir mal<br />
<br />
Oh c’est vrai que ça peut paraître facile<br />
Indifférente, et même insensible<br />
Je ne demande rien à personne<br />
C’est aussi comme ca que je donne <br />
D égo à égal, moi je trouve que c’est normal<br />
Je n’aime vraiment que moi-même je suis juste une égoïste </p>
<p><strong>Je suis juste égoïste<br />
Pour ne pas être triste</strong><br />
<strong>Je suis juste égoïste<br />
</strong><br />
Et toi tu aimerais me voir partager<br />
T’avouer mes peines, et mes grands secrets<br />
Mais ce n’est pas la peine,<br />
Pour moi je veux tout garder<br />
<br />
Je m’voile la face que veux tu qu’j’y fasse<br />
Je m’enferme (je me cache) dans ma carapace<br />
Ingrate, indélicate<br />
Je résiste seule à vos attaques<br />
<br />
D’égo à égal, moi je trouve que c’est normal<br />
Je m aime moi-même et je rêve de nuit de soi<br />
Sans gêne, je m’affaire à mes envies solitaires<br />
Je n’aime que moi même, c’est mon arme face à la guerre<br />
Et si je me replie constamment sur moi-même<br />
Ce n’est pas en attente de tes je t’aime<br />
Narcissique ou héroïque, je suis juste une égoïste<br />
<br />
<strong>Je suis juste egoïste<br />
Pour ne pas être triste</strong></p>
<strong>Je suis juste egoïste<br />
Je me plais dans ce vice</strong></div></div></div>
</div>
</div>
<div id="pieddepage"></div>
</div>
</div>
</div><script type="text/javascript">

</script></body></html>

et le code css du site :

@charset "utf-8";
body {
background-image: url(fondsitewebv2.jpg);
color: #D6D6D6;
top: 0px;
text-align: center;
margin-top: 0px;
padding-top: 0px;
}
body img {

}
#FlashID {
padding: 0px;
height: 580px;
width: 980px;
float: none;
clear: none;
position: relative;
clip: rect(0px,0px,0px,0px);
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
}
body table {
margin: auto;
padding: 0px;
top: 0px;
clip: rect(0px,auto,auto,auto);
background-image: url(sitewebv22.jpg);
height: 812px;
width: 980px;
}
#FlashID2 {
margin: auto;
height: 71px;
width: 960px;
top: 78px;
position: relative;
left: 2px;
}
#divcontenue #im {
position: relative;
margin: auto;
height: 30px;
width: 418px;
clip: rect(auto,auto,auto,auto);
}
#divcontenue #sousdivcontenuedoite #im2 {
position: relative;
height: 30px;
width: 418px;
margin: auto;
clip: rect(auto,auto,auto,auto);
}

#divcontenue #apDiv1 {
overflow: auto;
position: relative;
visibility: visible;
width: 406px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
color: #FFF;
height: 240px;
z-index: auto;
margin: auto;
text-align: left;
top: -1px;
}
#divcontenue #apDiv2 {
position: relative;
width: 406px;
overflow: auto;
visibility: visible;
z-index: auto;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
height: 240px;
top: -1px;
margin: auto;
text-align: left;
right: 1px;
}
#divcontenue #barremusiques {
top: 0px;
position: relative;
width: 900px;
margin: auto;
height: 28px;
background-image: url(images/barremusiques.png);
}

#divcontenue {
height: 998px;
width: 980px;
background-image: url(contenue.jpg);
padding: 0px;
margin-top: auto;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
top: 200px;
bottom: 0px;
clip: rect(0px,auto,0px,auto);
font-family: Verdana, Geneva, sans-serif;
text-align: left;
right: 300px;
}
#divsite #divcontenue #divcontenuetexte #reseauxsociauxetnewsletter {
height: 125px;
width: 980px;
margin: auto;
}
#divsite #divcontenue #divcontenuetexte {
height: 850px;
width: 980px;
position: relative;
margin: auto;
}

#divsite #divcontenue #divhaut {
height: 77px;
width: 980px;
position: relative;
margin: auto;
}
#divsite #divcontenue #divmenuflash {
height: 71px;
width: 960px;
position: relative;
margin: auto;
padding: 0px;
}
#divsite #divcontenue #divmenuflash #FlashID2 {
margin: auto;
height: 71px;
width: 960px;
position: relative;
top: 0px;
}

#divsite {
height: 1578px;
width: 980px;
margin-top: auto;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-bottom: 0px;
clip: rect(auto,auto,auto,auto);
}
#divanimskie {
margin: auto;
height: 580px;
width: 980px;
}

#sousdivcontenue {
width: 420px;
height: 270px;
position: relative;
clip: rect(auto,auto,auto,auto);
top: auto;
left: auto;
right: auto;
bottom: auto;
margin-top: 21.75px;
margin-right: auto;
margin-left: auto;
margin-bottom: 21.75px;
}
#divsite #divcontenue #divcontenuetexte #scrolltextes {
height: 627px;
width: 928px;
margin: auto;
position: relative;

}
#divsite #divcontenue #divcontenuetexte #scrolltextes #cadretexte2 {
height: 313.5px;
width: 910px;
position: relative;
top: 0px;
overflow: hidden;
padding-top: 0px;
margin: auto;
}

.gras {
font-weight: bold;
}

#divcontenue #slideshow {
width: 900px;
margin: auto;
height: 400px;
top: 225px;
position: relative;
}
#divcontenue #sousdivcontenuedoite {
position: relative;
height: 270px;
width: 420px;
margin-top: 21.75px;
margin-right: auto;
margin-bottom: 21.75px;
margin-left: auto;
top: auto;
clip: rect(auto,auto,auto,auto);
left: auto;
right: auto;
bottom: auto;
}
#sousdivcontenuedroite2 #apDiv4 {
position: relative;
height: 240px;
width: 406px;
color: #FFF;
text-align: left;
overflow: auto;
visibility: visible;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
background-image: url(images/fondcadres.png);
margin: auto;
top: -1px;
right: 1px;
}
#divsite #divcontenue #divcontenuetexte #scrolltextes #cadretexte2 #souscadrestexte2gauche #soudivcontenue2 {
width: 420px;
height: 270px;
margin-top: 21.75px;
margin-right: auto;
margin-bottom: 21.75px;
margin-left: auto;
position: relative;
}

#soudivcontenue2 {
height: 270px;
width: 420px;
position: relative;
color: #FFF;
}
#divcontenue #imagelapeausurlesos {
height: 30px;
width: 418px;
position: relative;
margin: auto;
}
#soudivcontenue2 #apDiv3 p {
text-align: left;
top: -2px;
}
#soudivcontenue2 #apDiv3 {
text-align: left;
position: relative;
top: -1px;
height: 240px;
width: 406px;
overflow: auto;
visibility: visible;
z-index: auto;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
background-image: url(images/fondcadres.png);
margin: auto;
}
#divcontenue #barrephotos {
top: 200px;
position: relative;
width: 900px;
margin: auto;
height: 28px;
background-image: url(images/barrephotos.png);
}
#bienvenue {
top: 200px;
position: relative;
width: 900px;
margin: auto;
height: 600px;
color: #FFF;
}
#divcontenue #bienvenue #textedebienvenue {
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
height: 600px;
width: 891px;
position: relative;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
top: -20px;
left: 2px;
text-align: left;
background-image: url(images/fondcadres.png);
}
#divcontenue #bienvenue img {
clip: rect(auto,auto,auto,auto);
height: 28px;
width: 900px;
margin: 0px;
position: relative;
text-align: right;
padding: 0px;
}
#divcontenue #bienvenue #textedebienvenue p {
text-align: left;
color: #FFF;
}
#divcontenue #bienvenue #textedebienvenue p {
font-size: 18px;
}
.datesnews {
font-size: 10px;
margin: 0px;
padding: 0px;
}
#contenuenews {
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
height: 600px;
width: 891px;
position: relative;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
top: -17px;
left: 2px;
text-align: left;
background-image: url(images/fondcadres.png);
}
#barrevideos {
top: 200px;
position: relative;
width: 900px;
margin: auto;
height: 28px;
background-image: url(images/barrevideos.png);
}
#contenueconcerts {
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
height: 600px;
width: 891px;
position: relative;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
top: -1px;
left: 2px;
text-align: left;
background-image: url(images/fondcadres.png);
}

#contenueevenements {
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
height: 600px;
width: 891px;
position: relative;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
top: -17px;
left: 2px;
text-align: left;
background-image: url(images/fondcadres.png);
}
#divsite #divcontenue #bienvenue #contenuenews #bs {
height: 2px;
}
#divsite #divcontenue #bienvenue #contenueconcerts #bs {
height: 2px;
}

#barremusiques {
top: 200px;
position: relative;
width: 900px;
margin: auto;
height: 28px;
background-image: url(images/barremusiques.png);
}
#barretextes {
top: 0px;
position: relative;
width: 928px;
margin: auto;
height: 28px;
background-image: url(images/barretexte.png);
}
#divsite #divcontenue #divcontenuetexte #pieddepage {
position: relative;
width: 960px;
top: 0px;
margin: auto;
height: 60px;
}

#divsite #divcontenue #divcontenuetexte #cadrestexte1 {
height: 313.5px;
top: 0px;
position: relative;
margin: auto;
width: 910px;
overflow: hidden;
}
#divsite #divcontenue #divcontenuetexte #cadrestexte1 #souscadrestexte1gauche {
width: 455px;
position: relative;
height: 313.5px;
left: 0px;
top: 0px;
overflow: visible;
}
#divsite #divcontenue #divcontenuetexte #scrolltextes #cadretexte2 #souscadrestexte2gauche {
height: 313.5px;
width: 455px;
left: 0px;
top: 0px;
position: relative;
padding: 0px;
visibility: visible;
overflow: auto;
}
#divsite #divcontenue #divcontenuetexte #scrolltextes #cadretexte2 #souscadrestexte2droite #sousdivcontenuedroite2 {
width: 420px;
height: 270px;
margin-top: 21.75px;
margin-right: auto;
margin-bottom: 21.75px;
margin-left: auto;
position: relative;
}
#divsite #divcontenue #divcontenuetexte #scrolltextes #cadretexte2 #souscadrestexte2droite #sousdivcontenuedroite2 img {
margin: auto;
height: 30px;
width: 418px;
position: relative;
}

#divsite #divcontenue #divcontenuetexte #scrolltextes #cadretexte2 #souscadrestexte2droite {
height: 313.5px;
width: 455px;
position: relative;
left: 455px;
top: -313.5px;
overflow: hidden;
}

#divsite #divcontenue #divcontenuetexte #cadrestexte1 #souscadrestexte1droite {
width: 455px;
position: relative;
height: 313.5px;
top: -313.5px;
left: 455px;
clip: rect(auto,auto,auto,auto);
overflow: hidden;
padding: 0px;
margin-top: 0px;
}

#divvideo1 {
width: 300px;
height: 300px;
position: relative;
top: 0px;
left: 70px;
text-align: center;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
background-image: url(images/fondcadres.png);
}
#divsite #divcontenue #divcontenuetexte #scrolltextes #cadrestexte1 #souscadrestexte1gauche #divvideo1 object {
margin: auto;
height: 248px;
width: 300px;
position: relative;
}

#divvideo2 {
position: relative;
top: 0px;
height: 300px;
width: 300px;
left: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
background-image: url(images/fondcadres.png);
margin: auto;
}
#divsite #divcontenue #divcontenuetextes {
margin: auto;
height: 600px;
width: 980px;
position: relative;
top: 200px;
}
#divsite #divcontenue #bienvenue #contenueevenements #bs {
height: 2px;
}
#divsite #divcontenue #divsouscontenue {
width: 960px;
height: 800px;
position: relative;
margin: auto;
text-align: left;
}
#divsite #divcontenue #divcontenuetexte #biographie {
width: 918px;
margin: auto;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
position: relative;
height: 595px;
background-image: url(images/fondcadres.png);
top: -1px;
left: 1px;
color: #FFF;
}

#barrebio {
top: 0px;
position: relative;
width: 928px;
margin: auto;
height: 28px;
background-image: url(images/barretexte.png);
}
#divsite #divcontenue #divcontenuetexte {
}
#divsite #divcontenue #divcontenuetexte #biographie {
}
#divsite #divcontenue #divcontenuetexte #entrebioetpieddepage {
height: 30px;
width: 980px;
margin: auto;
position: relative;
}
#divsite #divcontenue #divcontenuetexte #barrebio {
background-image: url(images/barrebiographie.png);
}
#divsite #divcontenue #divcontenuetexte #barrebienvenue {
background-image: url(images/barreaccueil.png);
margin: auto;
height: 28px;
width: 928px;
position: relative;
top: 0px;
}
#divsite #divcontenue #divcontenuetexte #barreconcert {
background-image: url(images/barreconcerts.png);
margin: auto;
height: 28px;
width: 928px;
position: relative;
top: 0px;
}
#divsite #divcontenue #divcontenuetexte #barreevenements {
background-image: url(images/barreevenements.png);
margin: auto;
height: 28px;
width: 928px;
position: relative;
top: 0px;
}
#divsite #divcontenue #divcontenuetexte #barrevideo {
background-image: url(images/barrevideos.png);
margin: auto;
height: 28px;
width: 928px;
position: relative;
top: 0px;
}
#divsite #divcontenue #divcontenuetexte #barrenews {
background-image: url(images/barrenews.png);
margin: auto;
height: 28px;
width: 928px;
position: relative;
top: 0px;
}
#divsite #divcontenue #divcontenuetexte #barrephotos {
background-image: url(images/barrephotos.png);
margin: auto;
height: 28px;
width: 928px;
position: relative;
top: 0px;
}
#divsite #divcontenue #divcontenuetexte #biographie #FlashID3 {
margin: auto;
height: 595px;
width: 918px;
position: relative;
}

Merci encore...

Reply

Marsh Posté le 10-03-2010 à 17:54:30

Reply

Marsh Posté le 11-03-2010 à 15:23:55

Bon, désolé mais je vais être méchant

1. Merci d'utiliser les balises [ code=php] ou le bouton pour le code, ça facilite la lecture.
Dans le même registre, essaye de limiter le code à l'endroit qui pose problème. En plus, ça te permet de l'isoler et de travailler plus simplement dessus...

2. Après un rapide coup d'oeil, je dirais que le principal problème c'est le concepteur (j'avais prévenu )
Quelques défauts, vite fait :
- Il y a un nombre impressionnant de DIV, certaines vides (<div id="divhaut"></div>) d'autres imbriquées :

Code :

<div id="scrolltextes">
      <div id="cadrestexte1">
...
      </div>
    </div>

Une DIV vide n'a pas lieu d'être. Soit on déporte la présentation sur les éléments autour, soit on utilise un séparateur (<hr /> par exemple).
De la même manière, tu devrait remplacer deux DIV imbriquées par une seule...

- Le CSS est réparti entre la feuille de styles et la page HTML. C'est mal, il faut tout mettre dans la feuille de styles.

- L'intérêt du CSS, c'est de séparer le sens de la présentation. Dans cette optique, il est déconseillé de nommer un élément en fonction de la présentation.
Quand tu nommes une DIV #souscadrestexte1gauche, que se passe-t'il le jour où tu changes la présentation et qu'elle se retrouve à droite ? soit tu changes le nom (long et fastidieux, une des raisons pour lesquelles on est passé au CSS) soit tu conserves un élément dont le nom ne veut plus rien dire...

- Tous tes DIV sont identifiés (ils ont un id=). Il y a un truc sympa, c'est le principe des classes.
Par exemple, tu as plusieurs éléments identifiés par id="bs". Dans un cas comme ça on utilise des classes.
Déjà parce que l'identifiant est (théoriquement) unique, et ensuite parce que comme ça tu définis dans ton CSS le comportement de tous tes bs d'ubn coup :
.bs {height: 2px;}

- A partir du moment où tu identifies un élément avec id=, il n'y a pas besoin de renoter tout le chemin dans le CSS...

- Il y a des redondances dans le CSS (tu donnes plusieurs fois des propriétés au même élément).

Bref, le plus simple à mon avis est de tout revoir. Commence par écrire le code html, sans tenir compte de la présentation.
Et ensuite, travaille-la. Normalement, tu ne devrais avoir que très peu d'éléments à rajouter pour obtenir la présentation que tu veux...

Reply

Marsh Posté le 11-03-2010 à 18:06:30

Sans compter le positionnement de ses blocs qui est fait n'importe comment, un simple float:left aurait suffit

---------------
Blablaté par Harko

Reply

Petit problème à corriger sur feuille de style css

Sujets relatifs:

Leave a Replay