Css, float et IE

Fermé
Straw - 23 janv. 2008 à 15:19
alymira Messages postés 7 Date d'inscription lundi 15 octobre 2012 Statut Membre Dernière intervention 16 octobre 2012 - 16 oct. 2012 à 11:12
Bonjour à tous,

Je débute en CSS et je rencontre quelques problèmes au niveau de l'alignement de mes blocs J'ai un menu à gauche en "float:left", et un bloc à sa droite, le corps, contenant tout mon texte.
Sous firefox, y'a pas de pro, mais sous IE6, mon corps se positionne en dessous du menu (diagonalement car je lui ai appliqué une marge).

Voici mon code html :

<!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" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles/1ersite.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="en_tete"><img src="images/structure/images_bandeaux/FR/bandeau_bienvenue_FR.jpg" alt="" width="765" height="150" /></div>

<div id="menu"> <!-- Cadre englobant tous les sous-menus (en bleu marine sur le schéma) -->
<div class="element_menu"> <!-- Cadre correspondant à un sous-menu -->
<h3>Bienvenue aux Valades</h3>
<ul>
<li>Qui sommes-nous ?</li> <!-- Liste des liens du sous-menu -->
<li>Chalets bois</li>
<li>Le site</li>
<li>Etang de pêche</li>
</ul>
<h3>Nos formules</h3>
<ul>
<li>Escapade romantique</li> <!-- Liste des liens du sous-menu -->
<li>Aventure</li>
<li>Préhistoire</li>
<li>Tarifs</li>
</ul>
<h3>Contact</h3>
</div>
<div class="element_menu">
<h3>Nos liens</h3>
<ul>
<li>Camping</li> <!-- Liste des liens du sous-menu -->
<li>Blog</li>
<li>Vidéos</li>
</ul>
</div>
</div>
<div id="corps">
<h1>Locations de vacances en Dordogne</h1>
<h2>Hébergement en chalet bois sur un site naturel</h2>
<p>Venez séjourner dans le cadre intime et chalheureux d'un <a href="FR/chalets-bois.html">chalet en bois</a> et</p>
<p>Vous ressourcer dans un écrin de verdure paradisiaque</p>
<P>Surprise, <strong>idée cadeau</strong> à offrir ou à s'offrir</p>
<img src="images/contenu/animations/anim_1.jpg" alt="" /> <img src="images/contenu/animations/anim_2.jpg" alt="" /></P>
<h2>Découvrez nos idées week-end et nos séjours à thèmes</h2>
<p>Escapade romantique ? Séjour sportif ? Semaine farniente ? De l'<strong>hébergement simple</strong> au <strong>séjour organisé</strong>, trouvez la formule qui vous correspond !</p>
<p><strong>Etang de pêche</strong>, randonnée, calme et repos</p>
<h2>Découvrez nos idées week-end et nos séjours à thèmes</h2>
<p>Escapade romantique ? Séjour sportif ? Semaine farniente ? De l'<strong>hébergement simple</strong> au <strong>séjour organisé</strong>, trouvez la formule qui vous correspond !</p>
<p><strong>Etang de pêche</strong>, randonnée, calme et repos</p>
</div>

<div id="pied_de_page">
<p>Camping LES VALADES<a href="mailto:info@lesvalades.com">info@lesvalades.com</a>- +33 (0) 5 53 29 14 27<br/>
COPYRIGHT © 2008 Les Valades Dordogne</p>
</div>

</body>
</html>

Et voici mon CSS :

body
{
width: 1100px;
margin: 20px auto;
background-image:url('../images/structure/cadre%20general/fond_rayures.jpg');
color:#330000;
font-family:Trebuchet MS, georgia, arial; margin-top:20px; /
margin-bottom:20px

}

#en_tete
{
width: 1100px;
height: 180px;
background-image: url('../images/structure/cadre%20general/bandeau_nature.png');
background-repeat: no-repeat;
margin-bottom: 10px
}

#en_tete img
{
position: relative;
left: 323px;
top: 19px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

#menu
{
float: left;
width: 187px;
border: 2px solid #A3A864;
}

.element_menu
{
background-color: #3E4307;
margin-bottom: 20px;
}

.element_menu h3
{
color: #FFDB32;
text-align: center;
}

.element_menu ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
color: #FFFFFF;
}

.element_menu a
{
color: #FFFFFF;
}

.element_menu a:hover
{
color: #FFFF33;
}

#corps
{
margin-left: 190px;
margin-bottom: 20px;
background-image: url('../images/structure/cadre%20general/fond_beige_milieu.jpg');
background-repeat: repeat-y;
border: 2px solid #A3A864;
width: 913px;
background-position: center 50%;
}

#corps h2
{
position: relative;
left: 30px;
}

#pied_de_page
{
width: 913px;
text-align: center;
margin-bottom: 20px;
font-size: small;
margin-left: 190px;
}




J'imagine que ce bug doit être assez courant (?)

Je vous remercie d'avance pour votre aide !

10 réponses

Réponse 1 / 10
Moulloud
18 avril 2008 à 15:23
A creuser:

utiliser un float avec Firefox ET IE est possible.
Par contre, les marges sont alors doublées avec IE.

La solution: utiliser le mot clef !important lors de la definition des margin / padding.
!important fait partie de la norme W3C, mais encore une chose que IE ne respecte pas

Firefox va considérer le parametre CSS contenant !important comme prioritaire
IE va tout simplement l'ignorer

Exemple de code CSS compatible:

float: left;
margin-left: 40px !important; /* pris en compte par Firefox */
margin-left: 20px; /* pris en compte par IE*/
10
goosy
9 févr. 2010 à 22:42
merci man
0
Réponse 2 / 10
naflo
5 juin 2008 à 10:15
il te manque un display: inline;
pour tes élément en float left et qui ont un margin left
voila
5
lemanico
12 juin 2008 à 19:52
salut,

au lieu de rajouter "!important", il est vraiment préférable de créer une feuille de style spéciale pour IE. En effet, IE7 reconnaît le "!important" alors qu'il ne gère toujours pas mieux les modèles de boite.

Pour cela il suffit de rajouter dans le header de ta page html

<!--[if IE]>
<link rel="stylesheet" media="screen" type="text/css" title="feuille de style pour IE" href="css/style_ie.css" />
<![endif]-->

et de modifier à loisir cette nouvelle feuille de style qui ne sera lu que par IE.
Il existe de nombreuses options pour cibler la version de IE que tu peut trouver facilement sur google.
0
Csil > lemanico
20 févr. 2009 à 20:09
Bonjour,
j'ai fait un copier-coller tel quel du code que tu as donné (en changeant le nom de ma feuille de style bien sur) mais j'ai beau modifier mes parametres dans mais feuille_ie.css, ca ne change pas l'apparence de ma page sous IE.
Du coup j'ai des margin-top beaucoup trop grand et ma mise en page est totalement déglinguée !
Ya pas autrechose, un autre code, une autre manière de proceder ?

Merci pr votre aide
0
incode Messages postés 8 Date d'inscription mercredi 23 juin 2010 Statut Membre Dernière intervention 13 mars 2017
14 oct. 2011 à 16:02
Il faut le mettre en dessous de l'appel de la première feuille css et pas avant
0
alymira Messages postés 7 Date d'inscription lundi 15 octobre 2012 Statut Membre Dernière intervention 16 octobre 2012
16 oct. 2012 à 10:03
Bonjour,
J'ai fait ce que vous avez dit, j'arrive à modifier des couleurs et d'autres choses depuis ma css_ie, mais mon problème de boite est inchangé... Pourriez-vous m'aider svp? que faut-il mettre dans la css_ie pour avoir le contenu de ma page à droite de mon menu flottant (float:left), et pas en diagonale en bas???
0
Réponse 3 / 10
nickybutterfly
10 sept. 2009 à 13:12
Un conseil pour l'utilisation des float, la majorité des problèmes lui étant associés sont dus aux attributs "width" et "overflow".

Donc pour "width", il faut spécifier une largeur à chaque élément flottant, cette largeur doit être très précise et doit être ajoutée a celle d'éventuels padding, margin, border. Et bien entendu, la somme de tout cela ne doit pas dépasser la largeur du conteneur de l'élément flottant.

Pour l'overflow, il faut le mettre en "hidden" dans la majorité des cas.
Autrement il faut utiliser la propriété "clear" pour supprimer l'effet des flottants sur les boites les suivant.
2
kabybot
8 nov. 2009 à 13:29
essaye ça: *{margin: 0;padding: 0;}
0
Réponse 4 / 10
thilde
23 janv. 2008 à 15:34
j'ai eu le meme probleme et j'ai du appliqué de codage différent
un pour ie et l'autre pour firefox

ou autre solution rapide que j'ai testé

mettre le lien pour télécharger firefox ou alors de dire aux gens de s'adapter

mais quelqu'un d'autre aura peut etre une meilleure solution
1
alymira Messages postés 7 Date d'inscription lundi 15 octobre 2012 Statut Membre Dernière intervention 16 octobre 2012
16 oct. 2012 à 09:51
bonjour,

J'essaie de faire 2 css différents, mais je ne sais quoi mettre dans le css_ie pour que ça fonctionne... pouvez-vous m'aider svp? Un exemple de code? merci
0
alymira Messages postés 7 Date d'inscription lundi 15 octobre 2012 Statut Membre Dernière intervention 16 octobre 2012
16 oct. 2012 à 10:05
j'arrive à modifier des choses depuis ma css_ie, mais mon problème principal reste inchangé :(. (j'ai exactement le même souci que le post principal). Heelllppp pleeaase
0

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

Posez votre question
Réponse 5 / 10
Darkito Messages postés 1191 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 26 mai 2010 545
23 janv. 2008 à 15:33
Bonjour,
La réponse est dans le titre de ton message =o)
En effet, IE n'aime pas trop les floats...
Essaie en mettant float:left dans ton corps également.
En gros, tu mets float left si su tu veux des div sur la même ligne.
Ce n'est pas l'utilisation "propre" de float mais il semble que ce soit la seule qui fonctionne sous IE.

--
Tøƒ
0
Réponse 6 / 10
Straw
23 janv. 2008 à 18:24
ok, je vais essayer de mettre un float left sur le corps et je reviens vers vous ;

Y a-t-il autre chose que le float ? Si j'utilise des positions absolues, je ne vais plus pouvoir centrer mon design, non ?

Pour Thilde : qd tu dis que tu as appliqué un codage différent "un pour ie et l'autre pour firefox ", comment tu fais ? on peut reconnaitre le navigateur de l'internaute et choisir un CSS en fonction ?
0
Réponse 7 / 10
LeRenardDuWeb Messages postés 3211 Date d'inscription vendredi 19 mars 2004 Statut Contributeur Dernière intervention 26 décembre 2008 419
11 mai 2008 à 11:12
Bonjour,

Je cherchais une solution à ce problème de cohabitation que rencontrent parfois FF et IE au niveau des marges.
J'y suis arrivé avec l'aide de ton conseil :

margin-left: 240px !important; /* pris en compte par Firefox */
margin-left: 0px; /* pris en compte par IE*/

Merci Moulloud.
0
Réponse 8 / 10
alymira Messages postés 7 Date d'inscription lundi 15 octobre 2012 Statut Membre Dernière intervention 16 octobre 2012
15 oct. 2012 à 15:02
Bonjour, j'ai exactement le même problème que le sujet principal de cette page. J'ai lu les comment, et essayé chaque méthode décrite ci-dessus, sans succès... :( qu'ai-je donc raté, ou il ya-t-il une raison "normale" cela? existe-il d'autres solutions? aidez-moi svp, merci
0
Réponse 9 / 10
alymira Messages postés 7 Date d'inscription lundi 15 octobre 2012 Statut Membre Dernière intervention 16 octobre 2012
16 oct. 2012 à 11:12
Re-bonjour,

je viens de résoudre mon problème ^^!! Je te l'explique en exemple:

Soit <div id="menu"></div> l'élément que tu veux faire flotter à gauche, et <div id="contenu"></div> ton contenu à mettre à droite du menu flottant.

Je n'applique pas l'élément float directement sur ma div "menu", mais je l'entoure d'une autre div à laquelle sera appliqué le float. On a donc:
<div id="div_float">
<div id="menu"></div>
</div>
<div id="contenu"></div>

Voici mon css:

#div_float{
float:left;
width:221px;
height:100%;
}

#menu{
display:block;
width:220px;
height:100%;
overflow:hidden;
margin-left: 1em !important;
marginleft:0.2em;
}

#contenu{
display:block;
width: 850px;
overflow: hidden;
margin-left: 15em !important;
margin-left:7em;
}

Bien sur tu adapte les mesures à ce que tu veux.

Par contre, je ne sais pas si toutes les données (overflow, margin-left, etc) sont indispensables, j'ai tout recopié car ça passe bien chez moi du coup.

Si vous auriez des conseils, des idées pour améliorer, optimiser ce code, n'hésitez pas :)
0
Réponse 10 / 10
Fredou
31 oct. 2008 à 10:15
Bonjour, pour un div l'un au dessus de l'autre et suite à un décalage vertical entre Firefox et IE7 à cause d'un form dans le div du dessus, j'ai trouvé comme solution de mettre une marge presque inverse en mettant margin-bottom: 15px; pour le div au dessus et margin-top: -10px; pour le div en dessous. Même principe pour le premier div au dessus du form1 avec margin-bottom: 15px; et margin-top: -5px; pour le second div. 

<div style="text-align: center; margin-bottom: 15px;">
</div>

<div style="text-align: right; margin-top: -5px; margin-bottom: 15px;">
<form 1>
</form>
</div>

<div style="text-align: center; margin-top: -10px;">
<form 2>
</form>
</div>


Voila si ça peut aider en adaptant le principe de *marge presque inverse* (nom venant d'être inventé).

J'ai moi-même un problème de positionnement mais c'est par manque de connaissance sur le sujet (je cherche sur le web de l'aide mais pas que sur le positionnement, des bouts de codes simples avec explications et cette page fait partie de ma recherche : 162 onglets ouverts ; voir l'addon pour Firefox 'Tab Counter').

Je voudrais centrer 2 lignes alignées au bord gauche sous un textarea (form2) lui-même centrer (Une aide je crois que j'ai trouvée qu'il faut que j'étudie ici : openweb.eu.org/IMG/article45/annexe1.html ). Et je voudrais pour faire un formulaire à onglet sans décentrer le textarea, mais en utilisant des boutons radios, placer les boutons radios à gauche du textarea = comment ne pas décentrer le texaera et placer les boutons radios à gauche ?.

Accessoirement (pour votre aide), je veux pouvoir enregistrer le textaera dans un fichier en local afin de facilité la tâche de l'utilisateur et exécuter le script (.vbs) même sans enregistrement à partir de la page ouverte.

Comment (j'ai vu la faq ccm mais c'est pas clair pour moi) lire le code de la page ouverte elle-même et l'insérer dans le texarea toujours sur la même page tout ET EN partie (= au choix du lecteur OU moi) ? Avec un code simple et détaillée sans fichier externe hormis la page html elle-même ? Merci. Bouton script et script interne et code '.vbs' autorisé ; le code vbs est l'origine du projet et tout le code libre utilisé reste libre. Merci.

1 seul fichier html contenant le textaera à enregistrer pour un fonctionnement en local = style css interne ; voir même placé dans les balises comme la présentation (du code je parle) ci-dessus.

Pour les balises form peut-on mettre les mêmes balises styles de positionnement que dans un div pour évité un décalage, voir remplacer une balise div par une balise form pour éviter un décalage (double?) ? form = div ? div + form et inversement = double décalage ? Si l'on utilisent des div, un div de positionnement (c'est bien le but des div = positionner ?) du formulaire sur la page (au plus près du formulaire) doit toujours englober une balise form ?

___________________________
.............................1B 2B 3B 4B
___________________________
...............................azrtyyui1op
..............................sdsdfsd1sdj

......... fichier: toto.bidule 1A (Rétablir)
......==============
1:@|......textarea............|
2:@|......textarea............|
3:@|......textarea............|
......|......textarea............|
......|......textarea............|
......==============
...... md5 : dfdfddsdds
...... sha-1 : dsdfsdfsdfs

salut ; merci.
-1

Discussions similaires

trait horizontal avec du css
tipi75 -
alainpre -

9 réponses
indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
TypeError: can't multiply sequence by non-int of type 'str'
Barou_0442 -
yg_be -

7 réponses
Enlever trait sous un lien href
ponpon17430 -
trucmachinchose-rose -

30 réponses