Texte décalé vers la gauche

Résolu

beate Messages postés 169 Statut Membre -
Gihef Messages postés 5165 Statut Contributeur - 11 déc. 2007 à 00:18

Bonjour,
Qui peut m'aider?
Ma page a un cadre, avec la colonne de gauche contenant les liens dans une liste. Pourquoi le texte de mon paragraphe est-il légèrement décalé vers la gauche un peu en-dessous des liens dans la colonne de gauche avec IE? Avec Firefox il n'y a pas de problème.
Voici mon code:

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<div id="cadre">
<div id="gauche">
<ul id="piece"><li><a href="lien1">Lien 1</a></li>
<li><a href="lien2">Lien 2</a></li>
<li><a href="lien3">Lien 3</a></li>
<li><a href="lien4">Lien 4</a></li>
</ul>
</div>
<div id="page">
<h2>Titre</h2>
<p>bla bla bla bla bla<br>
bla bla bla bla bla<br>
bla bla bla bla bla<br>
bla bla bla bla bla<br>
bla bla bla bla bla<br>
bla bla bla bla bla<br>
bla bla bla bla bla<br>
bla bla bla bla bla<br>
bla bla bla bla bla<br>
bla bla bla bla bla<br>
bla bla bla bla bla<br>
bla bla bla bla bla<br>
bla bla bla bla bla<br>
Avec IE, depuis un peu plus bas<br>
que le menu de gauche,<br>
le texte dans le paragraphe<br>
est légèrement décalé vers la gauche...
</p>
</div>
</div>
</body>
</html>

Je ne vois pas.
Merci bien d'avance.

Configuration: Windows XP
Internet Explorer 6.0

Afficher la suite

5 réponses

Gihef Messages postés 5165 Statut Contributeur 2 781

Bonjour,

Essaye comme ça

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<title>En float ?</title>
<style type="text/css">
  <!-- 
  body {
    width:100%;
    margin:0;
    margin-top:15px;
    margin-bottom:15px;
    text-align:left;
    color:#000080;
    font-family:Verdana,Helvetica,Arial,sans-serif;
    background-color:#338;
     } 
  p {
    font-size:12px;
    } 
  
  #cadre {
    position:relative;
    border:2px solid #1e90ff;
    width:730px;
    margin:0 auto;
    background-color:#fff;
    } 
  #page {
    margin:30px 20px 20px 40px;
  /* puisque le gauche est en float,
    alors, le page aussi            */
    float:left;
    width:520px;
    min-height:500px;
    background-color:#dde;
    }
  #gauche {
    width:150px;
    float:left;
    padding-top:42px;
    text-align:center;
    background-color:#edd;
    } 
  #pied {
    clear : left;
    background-color:#eed;
    }
  h2 {
    font-size:21px;
    font-weight:normal;
    text-align:left;
    } 
  a {
    color:#8B0000;
    text-decoration:none;
    } 
  a:visited {
    color:#8B0000;
    text-decoration:none;
    } 
  a:hover {
    text-decoration:underline;
    } 
  a:active {
    text-decoration:underline;
    } 
  #piece {
    font-size:12px;
    list-style:none;
    } 
  #piece li {
    border:1px solid #1a1b18;
    margin:2px 0 20px 0;
    } 
  --> 
</style> 
</head> 
<body> 
  <div id="cadre"> 
    <div id="gauche"> 
      <ul id="piece">
        <li><a href="lien1">Lien 1</a></li> 
        <li><a href="lien2">Lien 2</a></li> 
        <li><a href="lien3">Lien 3</a></li> 
        <li><a href="lien4">Lien 4</a></li> 
      </ul> 
    </div> 

    <div id="page"> 
      <h2>Titre</h2> 
      <p>bla bla bla bla bla<br> 
      bla bla bla bla bla<br> 
      bla bla bla bla bla<br> 
      bla bla bla bla bla<br> 
      bla bla bla bla bla<br> 
      bla bla bla bla bla<br> 
      bla bla bla bla bla<br> 
      bla bla bla bla bla<br> 
      bla bla bla bla bla<br> 
      bla bla bla bla bla<br> 
      bla bla bla bla bla<br> 
      bla bla bla bla bla<br> 
      bla bla bla bla bla<br> 
      Avec IE, depuis un peu plus bas<br> 
      que le menu de gauche,<br> 
      le texte dans le paragraphe<br> 
      est légèrement décalé vers la gauche... 
      </p> 
    </div> 
    <div id="pied">
      &nbsp;
    </div> 
  </div> 
</body> 
</html>

avec le “page” aussi en “float“.

Auquel il faut ajouter un bloc en “clear” pour reprendre le flux et adapter le “cadre”.

++
Merci d'utiliser le bouton Code pour présenter le vôtre.

Le “min-height” fonctionne dans IE6 ?

--

Réponse 2 / 5
beate Messages postés 169 Statut Membre 6

Merci, Gihef,
Merci pour ta peine!
ça marche, je suis tiré d'embarras.

ps: La prochaine fois j'utiliserai le bouton code pour mettre le code.
0
Réponse 3 / 5
Gihef Messages postés 5165 Statut Contributeur 2 781

De rien (-:

Résolu, on peut considérer que c'est résolu alors ?

--
-1
Réponse 4 / 5
beate Messages postés 169 Statut Membre 6

Oui, c'est résolu pour moi.
Il faut donc, si je comprends bien, considérer #page aussi comme un bloc et le placer en float à côté de #gauche, pour éviter ce décalage qui dérangeait.
Merci encore
-1
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 5
Gihef Messages postés 5165 Statut Contributeur 2 781

“considérer #page aussi comme un bloc et le placer en float à côté”
Exactement.

++
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS

--
-1

Texte décalé vers la gauche

5 réponses

Discussions similaires

Newsletters