Posez votre question Signaler

Texte décalé vers la gauche [Résolu]

beate 166Messages postés 28 août 2005Date d'inscription 7 juillet 2010Dernière intervention - Dernière réponse le 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.

Texte décalé vers la gauche »

Suggestions

Texte décalé vers la gauche
[WORD] Problème de décalage » Forum
Word - Ecrire de droite à gauche » Fiches pratiques
CSS: centrer site sous Explorer (margin:auto (Résolu) » Forum
Oo Calc- Texte en haut à gauche de la cellule (Résolu) » Forum
CSS Texte décalé sur differents écrans (Résolu) » Forum

Plus

Réponse

-1

Gihef 5246Messages postés 20 juillet 2005Date d'inscription 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 ?

--

Ajouter un commentaire

Réponse

-1

beate 166Messages postés 28 août 2005Date d'inscription 7 juillet 2010Dernière intervention 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.

Ajouter un commentaire

Réponse

-1

Gihef 5246Messages postés 20 juillet 2005Date d'inscription 10 déc. 2007 à 23:28

De rien (-:

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

--

Ajouter un commentaire

Réponse

-1

beate 166Messages postés 28 août 2005Date d'inscription 7 juillet 2010Dernière intervention 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

Ajouter un commentaire

Réponse

-1

Gihef 5246Messages postés 20 juillet 2005Date d'inscription 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/...

--

Ajouter un commentaire

Répondre au sujet

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

Texte décalé vers la gauche [Résolu]

Texte décalé vers la gauche »

Passage au tout numérique : quel coût pour les particuliers ?