28172 sujets

CSS et mise en forme, CSS3

Un bloc disparaît à l'affichage; Pourquoi ?

Bonjour à tous,


Il y a peu, j'ai réalisé un site.
Depuis peu, je rencontre des soucis avec une page.
En effet, j'utilise 3 colonnes à float:left;
Et le 1er bloc (en haut) de la 1e col (à gauche),
le bloc "Vogue" au-dessus de celui de "Grazia",
disparaît à la réactulisation de la page.

J'ai beau chercher.
Je n'en trouve pas la raison.
Pouvez-vous m'aider ?
D'avance, je vous en remercie

Ce phénomène se produit sur chrome (et peut-être d'autres navigateurs)...
Mais chose plus qu'exceptionnelle pas sur IE>7 (normal: float) !
Cela vaut la peine d'être dit !
C'est peut-être cette "anormalité" qui fait l'erreur :

La page en question est ici
Modifié par jytest (29 May 2013 - 11:10)
Voici le bout de code en question :

  <div id="contenu">
  	<div class="vague"></div>
    <div class="detail">
      <div id="col01">
        <div id="pub01">
          <div class="titrepub" style="margin-left:135px; padding-top:96px;">Vogue</div>
          <div class="detailpub" style="margin-left:135px;">&#65288;2010&#24180;6&#26376;&#33267;7&#26376;&#65289;<br>« Bijoux&#26032;&#32862; »</div>
          <div class="seepub" style="margin-left:135px;"><a href="../pdf/press/vogue-juin-juillet.pdf" target="_blank">&#28687;&#35261;&#23436;&#25972;&#22577;&#23566;</a></div>
        </div>
        <div id="pub02">
          <div class="titrepub" style="margin-left:135px; padding-top:35px;">Grazia</div>
          <div class="detailpub" style="margin-left:135px;">&#65288;2010&#24180;11&#26376;&#65289;<br>« Les 50 bagues<br>de fiancailles »</div>
          <div class="seepub" style="margin-left:135px;"><a href="../pdf/press/GRAZIA_Novembre_2010.pdf" target="_blank">&#28687;&#35261;&#23436;&#25972;&#22577;&#23566;</a></div>
        </div>
        <div id="pub03">
          <div class="titrepub" style="margin-left:135px; padding-top:25px;">Forever</div>
          <div class="detailpub" style="margin-left:135px;">&#65288;2010&#24180;10&#26376;&#65289;<br>« Union sacré &amp;<br>Joyau solo »</div>
          <div class="seepub" style="margin-left:135px;"><a href="../pdf/press/ForeverArticle1.pdf" target="_blank">&#28687;&#35261;&#23436;&#25972;&#22577;&#23566;</a></div>
        </div>
	  </div>   
      <div id="col02">
        <div id="pub00">
          <div style="padding-top:13px;">
          <span class="font_akadora" style="font-size:53px; padding-left:13px;">&#26032;&#32862;</span><br>
          <span class="font_centurygothic" style="font-size:46px; padding-left:53px; line-height:14px; color:#564a3f;">&#31295;</span>
          </div>
        </div>
        <div id="pub04">
          <div class="titrepub" style="margin-left:162px; padding-top:76px;">Dreams<br>Joaillerie</div>
          <div class="detailpub" style="margin-left:162px;">&#65288;2010&#24180;été&#65289;<br>« La magie d'internet »</div>
          <div class="seepub" style="margin-left:162px;"><a href="../pdf/press/dreams-joaillerie.pdf" target="_blank">&#28687;&#35261;&#23436;&#25972;&#22577;&#23566;</a></div>
        </div>
        <div id="pub05">
          <div class="titrepub" style="padding-left:162px; padding-top:48px;">Made In<br>Joaillerie.fr</div>
          <div class="detailpub" style="margin-left:162px;">&#65288;2010&#24180;6&#26376;16&#26085;&#65289;<br>« Celinni, bijoux et<br>diamants en ligne »</div>
          <div class="seepub" style="margin-left:162px;"><a href="../pdf/press/madeinjoaillerie.pdf" target="_blank">&#28687;&#35261;&#23436;&#25972;&#22577;&#23566;</a></div>
        </div>
      </div>   
      <div id="col03">
        <div id="pub06">
          <div class="titrepub" style="padding-left:132px; padding-top:82px;">First<br>Class</div>
          <div class="detailpub" style="padding-left:132px;">&#65288;2010&#24180;6&#26376;&#65289;<br>« Diamants<br>aux doigts »</div>
          <div class="seepub" style="margin-left:132px;"><a href="../pdf/press/first-class.pdf" target="_blank">&#28687;&#35261;&#23436;&#25972;&#22577;&#23566;</a></div>
        </div>
        <div id="pub07">
          <div class="titrepub" style="padding-left:132px; padding-top:21px;">My Best Adress<br>Book.com</div>
          <div class="detailpub" style="padding-left:132px;">&#65288;2010&#24180;5&#26376;&#65289;<br>« Celinni.com,<br>créateur de bijoux »</div>
          <div class="seepub" style="margin-left:132px;"><a href="../pdf/press/mybestadressbook.pdf" target="_blank">&#28687;&#35261;&#23436;&#25972;&#22577;&#23566;</a></div>
        </div>
        <div id="pub08">
          <div class="titrepub" style="padding-left:55px; padding-top:10px;">Celinni&#31777;&#20171;</div>
          <div style="padding-right:22px; padding-top:4px; text-align:right;">
            <a href="../<?php echo $langue; ?>/video00.php" target="_parent">
            <video id="video" controls width="160" height="90" poster="../videos/1280x720/celinni.jpg">
			<source src="../videos/856x480/celinni.m4v" type="video/mp4" />
            <source src="../videos/856x480/celinni.webm" type='video/webm' >
            <source src="../videos/856x480/celinni.ogv" type='video/ogg; codecs="theora, vorbis"'/>
            <source src="../videos/856x480/celinni.mp4" type='video/mp4'>
            <div id="myvideo"></div>
            </video>            
            </a>
          </div>
          <div class="seevideo" style="text-align:right; margin-right:22px;"><a href="../<?php echo $langue; ?>/video00.php" target="_blank">&#25353;&#27492;&#20197;&#20840;&#30059;&#38754;&#35264;&#30475;</a></div>
        </div>
      </div> 
      <div style="clear:both;"></div>  
    </div>
  </div>

Et voici mon css

@charset "utf-8";
/* CSS Document */

a .seepub {
	text-decoration: none;
	color: #000000;
}

#col01 {
	width: 235px;
	height: 582px;
	float: left;
}
#col02 {
	width: 275px;
	height: 582px;
	float: left;
}
#col03 {
	width: 241px;
	height: 582px;
	float: left;
}
#pub00 {
	height: 125px;
}
#pub01 {
	height: 255px;
	background-image: url(../images/press/pub01.png);
	background-position: 0px 0px;
	background-repeat: no-repeat
}
#pub02 {
	height: 170px;
	background-image: url(../images/press/pub02.png);
	background-position: 0px 0px;
	background-repeat: no-repeat
}
#pub03 {
	height: 157px;
	background-image: url(../images/press/pub03.png);
	background-position: 0px 0px;
	background-repeat: no-repeat
}
#pub04 {
	height: 220px;
	background-image: url(../images/press/pub04.png);
	background-position: 0px 0px;
	background-repeat: no-repeat
}
#pub05 {
	height: 237px;
	background-image: url(../images/press/pub05.png);
	background-position: 0px 0px;
	background-repeat: no-repeat
}
#pub06 {
	height: 255px;
	background-image: url(../images/press/pub06.png);
	background-position: 0px 0px;
	background-repeat: no-repeat
}
#pub07 {
	height: 170px;
	background-image: url(../images/press/pub07.png);
	background-position: 0px 0px;
	background-repeat: no-repeat
}
#pub08 {
	height: 157px;
	background-position: 0px 0px;
	background-repeat: no-repeat
}
#myvideo {
	width: 160px;
	height: 90px;
}

.vague {
	position: absolute;
	background-image: url(../images/general/vague.png);
	background-position: 0px 80px;
	background-repeat: no-repeat;
	height: 582px;
	width: 751px;
}
.detail {
	position: absolute;
	overflow-y : auto;
	height: 582px;
	width: 751px;
}
.titrepub {
	font-family:'akaDora','Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 23px;
	line-height: 24px;
	color: #84766a;
}
.detailpub {
	font-family:'MyriadProRegular','Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 13px;
	margin-top: 2px;
	color: #000000;
}
.seepub {
	font-family: 'MyriadProRegular', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: italic;
	margin-top: 5px;
	color: #000000;
}
.seevideo {
	font-family: 'MyriadProRegular', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: italic;
	margin-top: 0px;
	color: #000000;
}

Modifié par jytest (29 May 2013 - 11:00)
Si on inspecte les éléments, on peut constater que 


<div id="pub01">


contrairement aux autres, n'a aucun style d'appliqué, donc peut-être une piste ?
euh...
La feuille de style est pourtant appelée !
C'est le css joint au post !

De mon côté, je n'ai rien avec le debugger chrome
A l'aide, svp !
Modifié par jytest (29 May 2013 - 11:45)
Sujet clos
Aller à