[CSS] padding : texte masqué ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] padding : texte masqué ?

ultratoonz

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;

Publicité

ultratoonz

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

FlorentG

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

ultratoonz

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.

FlorentG

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

masklinn

í dag viðrar vel til loftárása

tu fais tes tests sous MSIE non?

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?

ultratoonz

sous IE, Netscapte et Mozilla Firefox.

FlorentG

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

ultratoonz

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

FlorentG

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

Publicité

ultratoonz

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.

FlorentG

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

ultratoonz

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


<script language="JavaScript" type="text/JavaScript">

</script>
<link href="Site%20perso%205.css" rel="stylesheet" type="text/css">
<style type="text/css">

</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')">

<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> </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éé ce site afin de me présenter auprès d'éventuels recruteurs, mais également auprès de toute société désireuse de s'attacher, ponctuellement, les services d'un infographiste 2D.<br />
<br />
J'espère que les différentes rubriques vous apporteront les informations que vous souhaitez. Je me tiens dans tous les cas disponible pour tout complément. </p>
<p align="left" class="Style3"> </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>

</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}

masklinn

í dag viðrar vel til loftárása

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

ultratoonz

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

ultratoonz

mon site

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

masklinn

í dag viðrar vel til loftárása

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

FlorentG

Le problème vient de la :

Code :

div.Frame-princ--droite {
position:absolute;
left:527px;
top:153px;
width:254px;
height:330px;
}

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

FlorentG

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

masklinn

í dag viðrar vel til loftárása

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

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 mac	Javascript et css
Problème de tableau CSS	Importer tableau texte sous C
Doxygen & CSS	Zone 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é ?

Page générée en 0.034 secondes