(CSS) Problème de float-left sous IE

Résolu
animaux99 Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   -  
animaux99 Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   -
Salut !

J'ai un petit problème sur un site web que j'ai fais...

J'ai mis le menu de gauche dans un tableau pour le placer avec un float-left à gauche du corps du site.

Sous Mozilla Firefox et Google Chrome, cela marche parfaitement, mais pas sur Internet Explorer !

Sous IE, le menu et le corps s'affiche en diagonale comme dans les échecs quand le fou avance de deux cases. Je cherche depuis pas mal de jours comment faire sans trouver...

Quelqu'un pourrait-il m'aider ?


Merci d'avance !


A voir également:

5 réponses

Réponse 1 / 5
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Salut

je comprend pas bien pourquoi tu te prend la tete avec des float ??

si j ai bien compris tu veux 2 colonnes ,

une menu fixe et a gauche

l autre au centre qui elle est dynamic
???

si c est ca ???
voila un exemple simple , en XHTML et CSS et div ! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <title> 
      RAD ZONE Webcreation 
    </title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css" media="screen"> 
/*<![CDATA[*/ 
html { 
  padding: 0px; 
  margin: 0px; 
} 

body { 
  background-color: #e1ddd9; 
  font-size: 12px; 
  font-family: Verdana, Arial,  Sans-Serif; 
  color: #564b47; 
  padding: 0px 20px; 
  margin: 0px; 
} 

p, h2 ,h1 { 
  padding: 10px; 
  margin: 0px; 
} 

h1 { 
  font-size: 14px; 
  color: #564b47; 
  background-color: #90897a; 
  padding: 5px 15px; 
  margin: 0px; 
} 

h2 { 
  font-size: 14px; 
  padding-top: 10px; 
  color: #564b47; 
  background-color: transparent; 
} 

#menu { 
  position: absolute; 
  width: 200px; 
  left: 20px; 
  background-color: #C0C0C0; 
  padding: 0px; 
  margin: 0px; 
} 

#central { 
  margin-left: 200px; 
  background-color: #fff; 
  overflow: auto; 
} 
--> 
/*]]>*/ 
</style> 
  </head> 
  <body> 
    <div id="menu"> 
      <h2> 
        colonne menu 
      </h2> 
      <p> 
        Lorem ipsum dolor sit amet consectetuer velit Aenean interdum amet Lorem. Justo convallis nec sociis id risus 
        congue et metus nibh risus. Lorem id in congue Phasellus quam tortor Vestibulum turpis laoreet enim. Ut ut sed 
        in egestas Morbi nunc quis tortor ante malesuada. Mollis interdum Vestibulum In auctor eget Sed hendrerit Sed. 
      </p> 
      <p> 
        Tempus velit nulla at mattis tempor pellentesque suscipit pellentesque et eros. Adipiscing habitasse ut nec 
        sollicitudin mollis tellus massa metus wisi facilisi. Natoque semper Donec elit velit ac auctor nibh 
        ullamcorper felis malesuada. Tortor semper scelerisque mattis pretium Cum et semper congue et consequat. 
        Phasellus mauris elit orci Proin Nunc Quisque congue accumsan. 
      </p> 
    </div> 
    <div id="central"> 
      <h1> 
        colonne central 
      </h1> 
      <p> 
        Lorem ipsum dolor sit amet consectetuer lorem sed semper scelerisque pellentesque. Mauris fermentum consequat 
        pede Curabitur consequat sem laoreet mauris velit nibh. Lorem nunc tempus at interdum ligula at et mauris eu 
        morbi. Quis dui sagittis amet consequat lacinia elit condimentum interdum Cras leo. Lorem fringilla dictum 
        adipiscing Phasellus rhoncus quis neque Vestibulum ullamcorper sed. Vivamus semper Lorem quis mauris. 
      </p> 
      <p> 
        Ante ut quis fames morbi eros feugiat tincidunt molestie mauris Phasellus. Turpis Aenean In et aliquet Ut neque 
        scelerisque et at natoque. Vestibulum Praesent Nullam In iaculis semper est sed condimentum ligula non. Ligula 
        nec Morbi justo quis tristique vitae Lorem pulvinar feugiat quis. Aliquet Phasellus pretium pretium nibh enim 
        nunc. 
      </p> 
      <p> 
        Lorem ligula Cras nisl magna pede egestas sem pretium malesuada pede. Molestie et Pellentesque adipiscing 
        ultrices porttitor amet ac nunc ridiculus lorem. Elit ipsum ipsum velit quis ultrices elit dui sem lobortis 
        condimentum. Ut et pede sem ante sit wisi et Aliquam Nulla Quisque. Fringilla convallis ac Nam congue eget 
        velit Donec pretium. 
      </p> 
      <p> 
        Feugiat velit fermentum id non lacus nibh enim quis lacus auctor. Rutrum odio euismod Ut eget Morbi mi libero 
        vitae vitae leo. Fringilla pellentesque tellus dolor enim ipsum et Lorem et sem metus. Fringilla dolor metus 
        quis Vestibulum turpis elit suscipit pellentesque Nam pulvinar. Tempus non turpis eget nisl est purus 
        adipiscing Sed ut pellentesque. Volutpat convallis et iaculis quis a sollicitudin. 
      </p> 
      <p> 
        A nisl et condimentum sed Suspendisse nibh nunc ipsum dis porttitor. Cras libero quis wisi velit volutpat in 
        amet tristique rutrum ut. Phasellus tincidunt magnis ut et eu ligula Phasellus venenatis Quisque lorem. 
        Curabitur nibh pretium nibh cursus pellentesque volutpat netus amet fringilla gravida. Leo venenatis vel et 
        amet id Maecenas tempor Fusce semper lobortis. Ac tincidunt congue iaculis eu semper pellentesque Sed congue 
        Phasellus. 
      </p> 
      <p> 
        Et interdum a egestas morbi facilisi volutpat netus dolor senectus Phasellus. Aenean Maecenas Morbi libero id 
        Ut vel dapibus pede Nulla et. Leo vel consequat et nascetur eros tristique id venenatis cursus mauris. Cursus 
        Vivamus tempus Curabitur Suspendisse id magna wisi Suspendisse Sed risus. Vestibulum neque In tristique Morbi 
        feugiat tristique et nibh Aliquam condimentum. Et pellentesque Ut Aliquam arcu congue. 
      </p> 
      <p> 
        Tempus Vestibulum Curabitur nec Integer commodo commodo ac ridiculus tortor condimentum. Tortor euismod risus 
        dolor nulla amet arcu feugiat aliquam consectetuer sed. Massa condimentum eleifend a Curabitur vel aliquam ac 
        justo sagittis tincidunt. Quis molestie interdum wisi porttitor quis lacinia in Curabitur eros lobortis. 
        Maecenas tincidunt commodo Sed senectus massa ac Vestibulum. 
      </p> 
      <br /> 
      <p> 
        Lorem ipsum dolor sit amet consectetuer tempus accumsan justo Sed Nulla. Consequat condimentum Quisque laoreet 
        urna id ligula In Phasellus eget nibh. Metus Nam Nullam et ut sed augue interdum euismod lacinia et. Orci In 
        condimentum tempus id facilisis consequat tincidunt parturient elit sagittis. Egestas tincidunt leo dignissim 
        Phasellus et justo enim est Sed nibh. Id convallis Pellentesque nibh nunc Curabitur tortor Nam interdum 
        faucibus aliquam. Interdum. 
      </p> 
      <p> 
        Curabitur porta nec id nec mus in Maecenas id est tellus. Curabitur tellus id Suspendisse congue laoreet nibh 
        ligula eros orci Phasellus. Adipiscing Nunc quis elit Nam ac justo interdum Sed dis semper. Ridiculus semper 
        sed et vel congue platea Nulla Nullam nibh Vestibulum. Libero porta Mauris nec rutrum nisl egestas turpis a 
        amet consectetuer. 
      </p> 
      <p> 
        Est Nam gravida Curabitur nec ante ipsum tempus consequat consectetuer tellus. Consectetuer quis Donec ac 
        hendrerit vel ante elit parturient nascetur hendrerit. Eget neque malesuada Quisque Fusce sem ac habitant vitae 
        wisi pellentesque. Nunc vitae lacus vel et ligula tellus sed cursus urna tortor. Habitasse adipiscing nisl leo 
        dui Sed porta elit sem. 
      </p> 
      <p> 
        Tortor risus tincidunt justo augue ultrices eget Cras Donec neque nec. Cum vitae urna ut eget Vestibulum quam 
        lacus pretium rhoncus suscipit. Lorem et porttitor aliquet massa volutpat cursus tellus Duis consectetuer et. 
        Condimentum dignissim id orci elit sodales lacinia sodales pede elit ac. Nibh dui nunc amet velit condimentum 
        iaculis justo. 
      </p> 
    </div> 
  </body> 
</html>


a+

? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
1
animaux99 Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   6
 
Merci, le problème est résolu :)
0
Réponse 2 / 5
Utilisateur anonyme
 
vire les tableaux et utilise la position:absolute;

tu pourras marquer la position d'une image avec :
top: bottom: left: et right: ( utilise les pourcentages plutot que les pixels pour garder ton menu compatible quel que soit la taille de la fenetre du navigateur ).

P.S: moi c'est ce que j'ai fait pour mon site et ca marche nickel sur tous les navigateurs.
0
animaux99 Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   6
 
Donc je met en position:absolute et j'utilise les margin-top, margin-bottom, etc pour bien placer le menu là où je veux qu'il soit ?

J'essaye :D
0
Utilisateur anonyme
 
si tu met position: absolute , n'utilise pas magin, utilise directement top, bottom, left, right,

par exemple:

.image
{
position: absolute;
top: 5%;
left: 10%;
}
0
animaux99 Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   6
 
Merci beaucoup ! Ca marche maintenant !
0
Utilisateur anonyme
 
de rien :)
0
Réponse 3 / 5
bg62 Messages postés 23732 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
regarde ici:
https://forums.commentcamarche.net/forum/affich-20224396-css-encore-et-toujours
il y a plusieurs solutions proposées et finalement ça passe sous tous les navigateurs ...
l'url a été supprimée, car c'était un test si tu en as besoin : MP après la page sera HS ... :-)
0
animaux99 Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   6
 
Cela ne marche toujours pas...le tableau s'est élargi dans la largeur de la page...
J'ai essayé les plusieurs solutions proposés, pourtant.

Merci quand même !
0
Réponse 4 / 5
animaux99 Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   6
 
J'ai essayé la solution de ammmmmine mais cela ne marche pas. Cela ne fait plus le problème d'avant (le corps et menu en diagonale), mais le corps et le menu sont l'un sur l'autre.

Sur Google Chrome et Mozilla Firefox, cela marche très bien, mais pas sur Internet Explorer.

Ca affiche cela sur IE :
http://img510.imageshack.us/img510/1517/ecran.png

Et sur Mozilla Firefox :
http://img151.imageshack.us/img151/4101/ecran2.png

Merci quand même ;)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
bg62 Messages postés 23732 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
vois si ça peut t'aider :
https://www.commentcamarche.net/telecharger/web-internet/12105-ietester/
:-)
0
animaux99 Messages postés 135 Date d'inscription   Statut Membre Dernière intervention   6
 
Merci je vais l'essayer :D
0

Discussions similaires

Cherche une chanson !
Utilisateur anonyme -
Audrey -

9 réponses
Prélèvement Apple.com Bill
Eva_007 -
kikine -

8 réponses
Je recherche une chanson
Miniqueen -
moimeme -

9 réponses
Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses