Texte décalé vers la gauche

Résolu/Fermé
beate Messages postés 166 Date d'inscription dimanche 28 août 2005 Statut Membre Dernière intervention 7 juillet 2010 - 9 déc. 2007 à 23:42
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 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">
<!--
body {width:100%;
margin:0;
margin-top:15px;
margin-bottom:15px;
text-align:left;
color:#000080;
font-family:Verdana,Helvetica,Arial,sans-serif;
background:#000080; }
p {font-size:12px;}
#cadre {border:2px solid #1e90ff;
width:730px;
position:relative;
margin:0 auto;
background-color:#ffffff;}
#page {margin:30px 20px 20px 190px;min-height:500px;} 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;}
#gauche {width:150px;
float:left;
padding-top:42px;
text-align:center;}
#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>
</body>
</html>

Je ne vois pas.
Merci bien d'avance.

5 réponses

Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
10 déc. 2007 à 01:15
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 ?

--
0
beate Messages postés 166 Date d'inscription dimanche 28 août 2005 Statut Membre Dernière intervention 7 juillet 2010 6
10 déc. 2007 à 23:04
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
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
10 déc. 2007 à 23:28
De rien (-:

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

--
-1
beate Messages postés 166 Date d'inscription dimanche 28 août 2005 Statut Membre Dernière intervention 7 juillet 2010 6
10 déc. 2007 à 23:33
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
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
11 déc. 2007 à 00:18
“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