28172 sujets

CSS et mise en forme, CSS3

[Résolu] Débordement à droite

J'ai 2 comportements différents avec le code qui suit :
un sur IE.8.0 et un autre identique dans Firefox.20.0 et Chrome.26.0
Mon code imbrique des div à 100%, je m'attend à ce que le texte "{header1}{header2}{header3}" soit en haut à droite.
> Ca fonctionne OK sous IE.
> En revanche sur Chrome et Firefox :
- j'ai une barre de défilement en bas.. pourquoi ? tout est indiqué à 100%
- du coup, mon texte en haut à droite est "mangé" sur environ 3 caractères
si je ne fait pas défiler avec la barre ... Smiley sweatdrop

SI qqn peut m'aiguiller SVP ?


<html>
<head>
{html_head}
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body style="padding:0px; margin:0px; font-family:Arial; font-size:14px; background-color:lightslategray; ">
<div style="border:0px; padding:0px; margin:0px; background-color:lightgrey; width:100%; height:65px; ">
  <div id="header" style="border:0px; margin:0px; background-color:lightslategray; width:100%; height:53px; text-align:right; padding: 0px 10px 0px 10px; ">
  {header1}{header2}{header3}
  </div>
  <div style="background-color:lightslategray; ">
      <div id="sidebar" style="background-color:lightslategray; width:170px; float:left; ">
         <div id="menu" style="background-color:LightSteelBlue; text-align:left; padding: 10px 5px 5px 5px; ">
         {menu1}{menu2}
         </div>
         <div id="complement" style="background-color:lightslategray; height:330px; text-align:left; ">
         {complement1}{complement2}{complement3}
         </div>
      </div>
      <div id="contenu" style="background-color:lightgrey; position:absolute; top:53px; left:170px; width=auto, text-align:left; padding: 10px 10px 0px 10px; ">
      {contenu1}{contenu2}{contenu3}{contenu4}
      <div style="width=100%; "></div></div>
  </div>
</div>
</html>
</body>
Je viens d'ajouter un DOCTYPE qui n'était pas déclaré.
J'ai désormais le même pb partout : même sous IE ! ( = barre de défilement droite-gauche)
Alors que j'ai bien mis toutes mes div en width=100% et tous les padding, maging, border à 0px..

Je continue mes investigations ! Smiley sweatdrop
amawalpe a écrit :

Alors que j'ai bien mis toutes mes div en width=100% et tous les padding, maging, border à 0px.. Smiley sweatdrop


Pourtant ici tu as bien un padding de 10px ?

<div id="header" style="border:0px; margin:0px; background-color:lightslategray; width:100%; height:53px; text-align:right; padding: 0px 10px 0px 10px; ">
Oui ! Merci ! Effectivement...
Cependant j'ai appris que le padding était situé à l'intérieur de la largeur définie.
Le padding de 10 pixels à droite devrait à l'intérieur du <div id="header" ...> défini à une largeur de 100%.
J'aurais donc loupé un épisode ?

L'idée c'est que dans mon <div id="header" ...>
je veux le texte à droite mais pas collé. D'où 10 pixels de respiration...

Je continue mes recherches !
Modifié par amawalpe (04 May 2013 - 00:54)
Oups, je crois que j'ai mal appris mes leçons !
Il semblerait qu'ajouter un padding augmente d'autant la valeur définie en largeur.
Il semblerait donc que pour arriver à mes fins, je sois obligé d'imbriquer deux <div> :
Un qui fixe mes "repirations" via un padding mais en largeur automatique
L'autre qui fixe la largeur à 100%

Ainsi le code suivant répond à mes attentes :
(j'ai juste mis la partie que j'ai modifiée )


  <div id="header" style="border:0px; margin:0px; background-color:lightslategray; height:53px; text-align:right; padding: 0px 10px 0px 10px; ">
  <div style="width: 100%;margin: 0; padding: 0; border: 0;display: block" />
  {header1}{header2}{header3}
  </div>
  </div>


Merci encore benj, tu m'as ouvert les yeux Smiley smile
Oui, c'est cela. Regarde cette article http://www.alsacreations.com/article/lire/573-A-propos-du-Modele-de-boite-Microsoft-ou-quirks.html et tu comprendras pourquoi cela fonctionne différemment sur ie sans doctype. (te prends pas trop la tête dessus, c'est des problèmes d'un autre âge)

Par contre, je ne suis pas sur de l'utilité de tes width: 100%;
Par defaut la valeur de width est à auto. C'est à dire pour un élément block que ta div prend toute la place disponible. Enlève donc tes width et tu pourras mettre tes padding.
Modérateur
Oui mais non, en fait le problème viens des width: 100%;

Par défaut un élément en block prend toute la largeur maximale disonible en tenant compte des marges, padding et borders. Cela découle de la valeur width: auto (par défaut sur les divs et tous les éléments blocks). Donc tu n'as pas besoin d'ajouter des divs imbriquées ainsi.

De manière générale tu redéfinis trop de valeurs par défaut:

<div style="width: 100%;margin: 0; padding: 0; border: 0;display: block" />

se remplace agréablement par:
<div>
benj a écrit :
@kustolovic : à 5 secondes prêts, même réponse. Qui disait que alsas était mort ? Smiley cligne

Moi, je sais !!!! Smiley biggrin
C'est Hermann et jb_gfx aussi un peu, m'sieur Smiley lol
Sujet clos
Aller à