Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1135 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Petit problème à corriger sur feuille de style css

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Petit problème à corriger sur feuille de style css

n°1972755
mquake2000
Posté le 10-03-2010 à 17:54:30  profilanswer
 

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" />
    <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <param name="LOOP" value="false" />
    <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
    <!--[if !IE]>-->
    <object data="../animationsflash/portail/portailv2.swf" type="application/x-shockwave-flash" width="980" height="580" align="middle">
      <!--<![endif]-->
      <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" />
      <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
      <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>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </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" />
      <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="main.swf" width="959" height="71">
        <!--<![endif]-->
        <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" />
        <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
        <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>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </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 &quot;objet de ses passions&quot;<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">
<!--
swfobject.registerObject("FlashID" );
swfobject.registerObject("FlashID2" );
//-->
</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...

mood
Publicité
Posté le 10-03-2010 à 17:54:30  profilanswer
 

n°1973011
macgawel
Posté le 11-03-2010 à 15:23:55  profilanswer
 

Bon, désolé mais je vais être méchant :o  
 
1. Merci d'utiliser les balises [ code=php] ou le bouton http://forum-images.hardware.fr/icones/message/c.gif 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 :D )
Quelques défauts, vite fait :
- Il y a un nombre impressionnant de DIV, certaines vides (<div id="divhaut"></div>) d'autres imbriquées :

Code :
  1. <div id="scrolltextes">
  2.       <div id="cadrestexte1">
  3. ...
  4.       </div>
  5.     </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...

n°1973064
gatsu35
Blablaté par Harko
Posté le 11-03-2010 à 18:06:30  profilanswer
 

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


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Petit problème à corriger sur feuille de style css

 

Sujets relatifs
Application tardive feuille de style sous FF[Résolu] Problème Http -> Https
Problème utilisation Service WCF depuis l'Extérieurproblème avec requête
Problème de requêtes asynchronesRecherche personne pour création d'un petit cdrom => rénumération
Convertir inline CSS en règles ? Converts inline style into CSS rulesProblème de paramètre vers une XSL
OpenLaszlo/Glassfish Probleme de chargement de media 
Plus de sujets relatifs à : Petit problème à corriger sur feuille de style css

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.072 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR