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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] padding : texte masqué ?

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] padding : texte masqué ?

n°924179
ultratoonz
Posté le 15-12-2004 à 17:05:18  profilanswer
 

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;

 

mood
Publicité
Posté le 15-12-2004 à 17:05:18  profilanswer
 

n°924221
ultratoonz
Posté le 15-12-2004 à 17:35:53  profilanswer
 

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 !!

n°924238
FlorentG
Unité de Masse
Posté le 15-12-2004 à 17:55:52  profilanswer
 

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é.

n°924242
ultratoonz
Posté le 15-12-2004 à 17:57:45  profilanswer
 

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.

n°924246
FlorentG
Unité de Masse
Posté le 15-12-2004 à 18:00:31  profilanswer
 

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

n°924248
masklinn
í dag viðrar vel til loftárása
Posté le 15-12-2004 à 18:01:03  profilanswer
 

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
n°924250
ultratoonz
Posté le 15-12-2004 à 18:01:40  profilanswer
 

sous IE, Netscapte et Mozilla Firefox.

n°924253
FlorentG
Unité de Masse
Posté le 15-12-2004 à 18:04:47  profilanswer
 

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

n°924263
ultratoonz
Posté le 15-12-2004 à 18:09:15  profilanswer
 

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
n°924271
FlorentG
Unité de Masse
Posté le 15-12-2004 à 18:12:14  profilanswer
 

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

mood
Publicité
Posté le 15-12-2004 à 18:12:14  profilanswer
 

n°924306
ultratoonz
Posté le 15-12-2004 à 18:27:48  profilanswer
 

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.

n°924312
FlorentG
Unité de Masse
Posté le 15-12-2004 à 18:30:58  profilanswer
 

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

n°924316
ultratoonz
Posté le 15-12-2004 à 18:33:01  profilanswer
 

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}

n°924318
masklinn
í dag viðrar vel til loftárása
Posté le 15-12-2004 à 18:33:33  profilanswer
 

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
n°924321
ultratoonz
Posté le 15-12-2004 à 18:34:21  profilanswer
 

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

n°924330
ultratoonz
Posté le 15-12-2004 à 18:46:31  profilanswer
 

mon site


Message édité par ultratoonz le 17-12-2004 à 16:42:53
n°924343
masklinn
í dag viðrar vel til loftárása
Posté le 15-12-2004 à 18:55:41  profilanswer
 

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
n°924348
FlorentG
Unité de Masse
Posté le 15-12-2004 à 18:57:04  profilanswer
 

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 ;)

n°924351
FlorentG
Unité de Masse
Posté le 15-12-2004 à 18:57:53  profilanswer
 

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

n°924359
masklinn
í dag viðrar vel til loftárása
Posté le 15-12-2004 à 19:04:32  profilanswer
 

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

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

  [CSS] padding : texte masqué ?

 

Sujets relatifs
[CSS] corriger mon css[oracle] plus de 4000 caracteres pour du texte
[CSS] textarea transparent sous macJavascript et css
Problème de tableau CSSImporter tableau texte sous C
Doxygen & CSSZone de texte + scoll dragable
Feuille CSS a commenter[js]afficher du texte dans la barre d'etat (compatible firefox 1.0)
Plus de sujets relatifs à : [CSS] padding : texte masqué ?

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

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