[CSS] padding : texte masqué ?

padding : texte masqué ? [CSS] - HTML/CSS - Programmation

Marsh Posté le 15-12-2004 à 17:05:18    

J'ai trois div sur un même plan, les uns à côtés des autres horizontalement. Quand je veux avoir un retrait de mon texte depuis le bord du div du milieu ( à gauche par exemple : padding-left: 15px;), ce même texte, à droite, est "bouffé d'autant" (de 15) !!  
 
J'ai un peu tout essayé (près de 6 heures d'essais et de recherches !), en vain. HELP !!
 
C'est "div.Frame-princ--gauche" qui a une partie du texte caché. Mes trois div :  
 

Citation :


div.Frame-princ--gauche {
 position:absolute;
 left:187px;
 top:153px;
 width:340px;
 height:394px;
 background-image: url(images/Frame-princ.-gauche.gif);
 text-align: justify;
 clip: auto;
 text-indent: 0px;
 white-space: normal;
 padding-right: 0px;
 padding-left: 15px;
 padding-top: 0px;
 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-size: 12px;
}
 
div.Frame-princ--droite {
 position:absolute;
 left:527px;
 top:153px;
 width:254px;
 height:330px;
}
 
div.Frame-descriptif {
 position:absolute;
 left:21px;
 top:201px;
 width:166px;
 height:346px;
 background-image: url(images/Frame-descriptif.gif);
 text-align: justify;
 text-indent: 0px;
 overflow: visible;
 padding-right: 0px;
 padding-bottom: 10px;
 padding-left: 0px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-style: normal;
 font-weight: normal;
 color: #993366;
 padding-top: 0px;

 

Reply

Marsh Posté le 15-12-2004 à 17:05:18   

Reply

Marsh Posté le 15-12-2004 à 17:35:53    

http://www.mikegraphic.com/html3.htm J'ai ça tout en bas de la page, "Un calque texte peut se mettre ainsi à chevaucher une image ou un autre texte.
Pour éviter cela, si vous devez construire une page faite de texte et d'images l'illustrant ( comme la présente page ), essayez toujours de faire votre construction dans un tableau inclu dans un calque ( voir code source ). " Lapidaire ! Alors, pas de solution ? Qu'en pensez-vous ? Moi qui voulait faire un site tableless, je crois que je vais mettre des tableaux dans mes calques !!

Reply

Marsh Posté le 15-12-2004 à 17:55:52    

Réduit le width de 15px. Dans le modèle de boite standard, le padding n'est pas bouffé du width, il se rajoute. Donc le bord de ta div est décalé.

Reply

Marsh Posté le 15-12-2004 à 17:57:45    

Oui mais après mon texte va jusqu'au bord du div ! Si j'utilise le padding c'est justement pour mettre un espace entre mon texte et les limites du calque.

Reply

Marsh Posté le 15-12-2004 à 18:00:31    

Ben si tu réduit le width de 15, et que tu met ton padding, ça devrait marcher pourtant..

Reply

Marsh Posté le 15-12-2004 à 18:01:03    

tu fais tes tests sous MSIE non?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 15-12-2004 à 18:01:40    

sous IE, Netscapte et Mozilla Firefox.

Reply

Marsh Posté le 15-12-2004 à 18:04:47    

Et tu fais ça en XHTML 1.0 Strict sans prologue XML ?

Reply

Marsh Posté le 15-12-2004 à 18:09:15    

J'ai copié collé le doctype suivant, je sais d'ailleurs pas si c'est adapté, en tous cas le validateur w3c prend mes pages avec :  
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
Pas mis de prologue. Indispensable ?


Message édité par ultratoonz le 15-12-2004 à 18:11:39
Reply

Marsh Posté le 15-12-2004 à 18:12:14    

Change et met ça :  
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
Comme ça t'aura IE en mode standard, et t'aura à peu près le même rendu que le reste

Reply

Marsh Posté le 15-12-2004 à 18:12:14   

Reply

Marsh Posté le 15-12-2004 à 18:27:48    

Merci Florent mais ça ne résoud pas mon problème. Quand je mets du padding à gauche, ça me fait déborder mon texte de la limite droite du calque ! Toujours le même problème. Il faut croire qu'il n'y a que la solution du tableaux dans le calque ou des calques superposés.

Reply

Marsh Posté le 15-12-2004 à 18:30:58    

Envoi une fois un morceau du code source html de ta page pour voir, parce que ça me semble étrange

Reply

Marsh Posté le 15-12-2004 à 18:33:01    

Citation :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>
<head>
<title>Site perso</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (Site perso.psd - Slices: 00, 10, 11, 16, 17, Accueil surv, Affiches surv, Barre de menu bas dessous, Bord droit , Bord gauche , CV surv, Communication surv, Contact surv, Frame descriptif, Frame haut, Frame princ. droite, Frame princ. gauche, Icone rubrique, Identite visuelle surv, Logos surv, Menu
du bas au dessus, Plaquettes surv, Profil surv, Publication surv, Publicite surv, Web surv) -->
<!-- End ImageReady Styles -->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#" )!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?" ))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="Site%20perso%205.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.Style3 {
 font-size: 10;
 color: #FF9900;
 font-weight: bold;
}
.Style4 {
 font-family: "Times New Roman", Times, serif;
 color: #FF9900;
 font-weight: bold;
}
.Style5 {
 color: #993366;
 font-weight: bold;
 font-size: 14px;
 font-style: italic;
}
-->
</style>
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;" onload="MM_preloadImages('images/Accueil-surv.gif','images/Publication-surv.gif','images/Profil-surv.gif','images/Contact-surv.gif','images/Communication-surv.gif','images/CV-surv.gif')">
<!-- ImageReady Slices (Site perso.psd - Slices: 00, 10, 11, 16, 17, Accueil surv, Affiches surv, Barre de menu bas dessous, Bord droit , Bord gauche , CV surv, Communication surv, Contact surv, Frame descriptif, Frame haut, Frame princ. droite, Frame princ. gauche, Icone rubrique, Identite visuelle surv, Logos surv, Menu
du bas au dessus, Plaquettes surv, Profil surv, Publication surv, Publicite surv, Web surv) -->
<div class="Tableau_01">
 <div class="Frame-haut">
  <img src="images/Frame-haut.gif" width="802" height="90" alt="">
 </div>
 <div class="Bord-gauche-">
  <img src="images/Bord-gauche-.gif" width="21" height="538" alt="">
 </div>
 <div class="Accueil-surv"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Accueil','','images/Accueil-surv.gif',1)"><img src="images/Accueil.gif" alt="Accueil" name="Accueil" width="126" height="44" border="0"></a>
 </div>
 <div class="Publication-surv">
      <a href="publication.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Publication','','images/Publication-surv.gif',1)"><img src="images/Publication.gif" alt="Publication" name="Publication" width="128" height="44" border="0"></a> </div>
 <div class="Communication-surv">
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Communication','','images/Communication-surv.gif',1)"><img src="images/Communication.gif" alt="Communication" name="Communication" width="126" height="44" border="0"></a> </div>
  <div class="Profil-surv"><span class="CV-surv"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Profil','','images/Profil-surv.gif',1)"><img src="images/Profil.gif" alt="Profil" name="Profil" width="126" height="44" border="0"></a></span> </div>
  <div class="CV-surv"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('CV','','images/CV-surv.gif',1)"><img src="images/CV.gif" alt="CV" name="CV" width="127" height="44" border="0"></a> </div>
 <div class="Contact-surv">
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/Contact-surv.gif',1)"><img src="images/Contact.gif" alt="Contact" name="Contact" width="127" height="44" border="0"></a> </div>
 <div class="Bord-droit-">
  <img src="images/Bord-droit-.gif" width="21" height="538" alt="">
 </div>
 <div class="Site-perso-10">
  <img src="images/Site-perso_10.gif" width="760" height="19" alt="">
 </div>
 <div class="Site-perso-11">
   <div align="right"><strong>Bienvenue sur mon site professionnel</strong></div>
 </div>
 <div class="Frame-princ--gauche">
   <p>fdsfsdfsdfsd dsf dsfsd z fdsqn sqkdfnklsq lds lqsnfd qls qlskd qs qslkd qskld nqlskd lkqs kqsnd lkqsd lqskd qslkd qls lksqd qslk qsld lsqkd kqsd lkqs,d nq,snd dsgfsd sd,fs ssmf smkdlmsd^sd s sdm;sd sd dskfsd^ksd^kf sd sdkf sdf sd sd^f sdkf sdf sdf </p>
   <p>&nbsp;</p>
   <p> sdf sdjf sof sposdfpo spodfk skdf ksdfqfqjf qjqi jiqsjf sdqjf qsd sdjf jsdf if qf qdsf qjdf piosdf dsfo kqsopfdsqpofkopdsqfkq of pofopsdkfk qskds</p>
 </div>
 <div class="Frame-princ--droite">
  <img src="images/Frame-princ.-droite.gif" width="254" height="330" alt="">
 </div>
 <div class="Frame-descriptif">
   <p align="right" class="Style4">J'ai cr&eacute;&eacute; ce site afin de me pr&eacute;senter aupr&egrave;s d'&eacute;ventuels recruteurs, mais &eacute;galement aupr&egrave;s de toute soci&eacute;t&eacute; d&eacute;sireuse de s'attacher, ponctuellement, les services d'un infographiste 2D.<br />
      <br />
      J'esp&egrave;re que les diff&eacute;rentes rubriques vous apporteront les informations que vous souhaitez. Je me tiens dans tous les cas disponible pour tout compl&eacute;ment. </p>
   <p align="left" class="Style3">&nbsp;</p>
  </div>
 <div class="Icone-rubrique">
  <img src="images/Icone-rubrique.gif" width="254" height="87" alt="">
 </div>
 <div class="Site-perso-16">
  <img src="images/Site-perso_16.gif" width="166" height="23" alt="">
 </div>
 <div class="Site-perso-17">
  <img src="images/Site-perso_17.gif" width="340" height="23" alt="">
 </div>
 <div class="Menu-du-bas-au-dessus">
  <img src="images/Menu-du-bas-au-dessus.gif" width="760" height="23" alt="">
 </div>
 <div class="Identite-visuelle-surv">      </div>
 <div class="Plaquettes-surv">      </div>
 <div class="Web-surv">      </div>
 <div class="Logos-surv">      </div>
 <div class="Affiches-surv">      </div>
 <div class="Publicite-surv">      </div>
 <div class="Barre-de-menu-bas-dessous">
  <img src="images/Barre-de-menu-bas-dessous.gif" width="760" height="12" alt="">
 </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>


 

Citation :

div.Tableau_01 {
 position:relative;
 margin-left: auto;
    margin-right: auto;
 left:0%;
 top:0%;
 width:802px;
 height:628px;
 right: 0%;
 bottom: 0%;
}
 
div.Frame-haut {
 position:absolute;
 left:0px;
 top:0px;
 width:802px;
 height:90px;
}
 
div.Bord-gauche- {
 position:absolute;
 left:0px;
 top:90px;
 width:21px;
 height:538px;
}
 
div.Accueil-surv {
 position:absolute;
 left:21px;
 top:90px;
 width:126px;
 height:44px;
}
 
div.Publication-surv {
 position:absolute;
 left:147px;
 top:90px;
 width:128px;
 height:44px;
}
 
div.Communication-surv {
 position:absolute;
 left:275px;
 top:90px;
 width:126px;
 height:44px;
}
 
div.Profil-surv {
 position:absolute;
 left:401px;
 top:90px;
 width:126px;
 height:44px;
}
 
div.CV-surv {
 position:absolute;
 left:527px;
 top:90px;
 width:127px;
 height:44px;
}
 
div.Contact-surv {
 position:absolute;
 left:654px;
 top:90px;
 width:127px;
 height:44px;
}
 
div.Bord-droit- {
 position:absolute;
 left:781px;
 top:90px;
 width:21px;
 height:538px;
}
 
div.Site-perso-10 {
 position:absolute;
 left:21px;
 top:134px;
 width:760px;
 height:19px;
 background-image: url(Aucune);
}
 
div.Site-perso-11 {
 position:absolute;
 left:21px;
 top:153px;
 width:166px;
 height:48px;
 background-image: url(images/Site-perso_11.gif);
 font-family: Arial, Helvetica, sans-serif;
 font-size: 15px;
 font-weight: bold;
 font-style: normal;
 color: #FFFFFF;
 letter-spacing: normal;
 padding: 0px;
}
 
div.Frame-princ--gauche {
 position:absolute;
 left:187px;
 top:153px;
 width:340px;
 height:394px;
 background-image: url(images/Frame-princ.-gauche.gif);
 text-align: justify;
 text-indent: 0px;
 white-space: normal;
 padding-right: 0px;
 padding-left: 15px;
 padding-top: 0px;
 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-size: 12px;
}
 
div.Frame-princ--droite {
 position:absolute;
 left:527px;
 top:153px;
 width:254px;
 height:330px;
}
 
div.Frame-descriptif {
 position:absolute;
 left:21px;
 top:201px;
 width:166px;
 height:346px;
 background-image: url(images/Frame-descriptif.gif);
 text-align: justify;
 text-indent: 0px;
 overflow: visible;
 padding-right: 0px;
 padding-bottom: 10px;
 padding-left: 0px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-style: normal;
 font-weight: normal;
 color: #993366;
 padding-top: 0px;
}
 
div.Icone-rubrique {
 position:absolute;
 left:527px;
 top:483px;
 width:254px;
 height:87px;
}
 
div.Site-perso-16 {
 position:absolute;
 left:21px;
 top:547px;
 width:166px;
 height:23px;
}
 
div.Site-perso-17 {
 position:absolute;
 left:187px;
 top:547px;
 width:340px;
 height:23px;
}
 
div.Menu-du-bas-au-dessus {
 position:absolute;
 left:21px;
 top:570px;
 width:760px;
 height:23px;
}
 
div.Identite-visuelle-surv {
 position:absolute;
 left:21px;
 top:593px;
 width:126px;
 height:23px;
 background-image: url(images/Barre-menu-vide-petit.gif);
}
 
div.Plaquettes-surv {
 position:absolute;
 left:147px;
 top:593px;
 width:128px;
 height:23px;
 background-image: url(images/Barre-menu-vide-petit.gif);
}
 
div.Web-surv {
 position:absolute;
 left:275px;
 top:593px;
 width:126px;
 height:23px;
 background-image: url(images/Barre-menu-vide-petit.gif);
}
 
div.Logos-surv {
 position:absolute;
 left:401px;
 top:593px;
 width:126px;
 height:23px;
 background-image: url(images/Barre-menu-vide-petit.gif);
}
 
div.Affiches-surv {
 position:absolute;
 left:527px;
 top:593px;
 width:127px;
 height:23px;
 background-image: url(images/Barre-menu-vide-petit.gif);
}
 
div.Publicite-surv {
 position:absolute;
 left:654px;
 top:593px;
 width:127px;
 height:23px;
 background-image: url(images/Barre-menu-vide-petit.gif);
}
 
div.Barre-de-menu-bas-dessous {
 position:absolute;
 left:21px;
 top:616px;
 width:760px;
 height:12px;
}
.Style1 {color: #FFFFFF}

Reply

Marsh Posté le 15-12-2004 à 18:33:33    

tu voudrais pas nous lier la page direct? parce que là, bon :/


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 15-12-2004 à 18:34:21    

div.Frame-princ--gauche {  c'est le calque ou j'ai mis le padding de 15px. ;-)

Reply

Marsh Posté le 15-12-2004 à 18:46:31    

mon site


Message édité par ultratoonz le 17-12-2004 à 16:42:53
Reply

Marsh Posté le 15-12-2004 à 18:55:41    

bon
pour commencer, j'ai du mal à voir l'intérêt du JS, t'aurais pu faire le même effet à coup de :hover
 
Ensuite j'ai un peu du mal avec tes identifiants (frame-princ--gauche, c'est trop compliqué et c'est déjà une information de style, ca devrait être une information sémantique)
 
Arrête de tout surdéfinir, tu définis trop de trucs inutiles dans tes CSS
 
Le tout absolute, c'est franchement pas une bonne idée (c'est dangereux, parce que ca merde toujours)


Message édité par masklinn le 15-12-2004 à 18:59:20

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 15-12-2004 à 18:57:04    

Le problème vient de la :
 

Code :
  1. div.Frame-princ--droite {
  2. position:absolute;
  3. left:527px;
  4. top:153px;
  5. width:254px;
  6. height:330px;
  7. }


 
Le left est trop à gauche, si tu calcul ta Frame-princ--gauche , ça fait :
 
187 (left) + 340 (width) + 15 (padding-left) = 542
 
Donc ton left: 527 déborde forcément sur la div de gauche ;)

Reply

Marsh Posté le 15-12-2004 à 18:57:53    

Sinon je suis d'accord que le Javascript sert à rien, vaut mieux tout mettre en CSS

Reply

Marsh Posté le 15-12-2004 à 19:04:32    

Florent a trouvé le problème (qui découle entre autre de ton utilisation de l'absolu, tu utilises les divs comme des cases de tableaux, c'est pas fait pour ca)
 
Pour le résoudre rapidement ajoute "z-index: 10" dans le CSS du div qui disparait


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed