Salut !
Alors voila, j'ai commencé un a créer le site de mon college et j'ai utilisé les fonctions CSS float pour les menus, jusque la tout va bien, mais comme je m'en doutais, il a faluu que IE decale tout et je ne sais pas par quoi remplacer FLOAT: !
est ce que quelqu'un peut m'aider ??
voila les screenshots:
[Edit] Nyro Xeo > Le "[HELP]" en majuscule semble être là uniquement pour attirer l'attention. Je ne dirai rien, mais il n'est pas nécessaire à la bonne compréhension du sujet, aussi le supprime-je. Bonne journée :-)
Est-ce que le padding gauche de ton corps comprends la taille du menu ?
Je m'explique: si ton menu fais 150px, et que tu veux une marge de 5px entre ton corps et ton menu, tu peux mettre un padding à 155px si tu as un conteneur menu+corps...
Mais IE gère mal tout ça... Essaie de mettre un padding à zéro, puis à 5px pour voir...
(Je me demande si je suis assez clair en fait, c'est pas évident à expliquer
Resalut !
bon, pour mieux voir mon probleme, je vous passse le html et le css:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="fr"> <head> <title>Collège F. Chopin - Melun</title> <metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1"/> <linkrel="alternate stylesheet"media="screen"type="text/css"title="Blue"href="blue.css"/> <linkrel="alternate stylesheet"media="screen"type="text/css"title="Red"href="red.css"/> <linkrel="stylesheet"media="screen"type="text/css"title="parchemin"href="parchemin.css"/> <linkrel="alternate stylesheet"media="screen"type="text/css"title="blue/white"href="bluetheme.css"/> </head> <body> <divid="header"> </div> <divid="menu"> <ulid="menupuce"> <li>Lien 1</li> <li>Lien 2</li> <li>Lien 3</li> <li>Lien 4</li> <li>Lien 5</li> <li>Lien 6</li> <li>Lien 7</li> <li>Lien 7</li> <li>Lien 8</li> <li>Lien 9</li> <li>Lien 10</li> <li>Lien 11</li> <li>Lien 12</li> </ul> </div> <divid="menu2"> <ulid="menupuce"> <li>Lien 1</li> <li>Lien 2</li> <li>Lien 3</li> <li>Lien 4</li> <li>Lien 5</li> <li>Lien 6</li> <li>Lien 7</li> <li>Lien 7</li> <li>Lien 8</li> <li>Lien 9</li> <li>Lien 10</li> <li>Lien 11</li> <li>Lien 12</li> </ul> </div> <divid="corps"> <h1id="title">Bienvenue sur le site du <br/>collège F. CHOPIN !</h1> <p>Ce site a été concu dans le but de vous informer de ce qui se passe au collège, une sorte de<br/> magazine quoi !</p> </div> <divid="footer"> <h4id="copyright"><br/><ahref="utilisation.html">Conditions d'utilisation<a/> - <ahref="equipe.html">Equipe de creation</a><br/>
- <ahref="remerciements.html">Remerciements</a></h4> </div> </body> </html>
body { width: 760px;
margin-left: 20%; /* Pour centrer notre page */ margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */ margin-bottom: 20px; /* Idem pour le bas du navigateur */ background-color: #F0D898; }
bonjour,
ajoute en largeur a body, les 3 px du bug de IE. et transforme ton margin-right:630px; de #menu2 en un clear:left; ce qui permet au second menu de venir se placer sous le dernier element flottant a gauche.
si tu ne veut pas augmenter la largeur de <body> a 763px, alors applique un "display:inline; a #corps, c'est un "hack/truc" qui elimine le bug des 3 px d'ie .
bonjour,
je te met la la page avec le display:inline;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="fr"> <head> <title>Collège F. Chopin - Melun</title> <metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1"/> <linkrel="alternate stylesheet"media="screen"type="text/css"title="Blue"href="blue.css"/> <linkrel="alternate stylesheet"media="screen"type="text/css"title="Red"href="red.css"/> <linkrel="stylesheet"media="screen"type="text/css"title="parchemin"href="parchemin.css"/>
<styletype="text/css">
body
{
width: 760px;
margin-left: 20%; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever
pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-color: #F0D898;
}
<divid="corps"> <h1id="title">Bienvenue sur le site du <br/>collège F. CHOPIN !</h1> <p>Ce site a été concu dans le but de vous informer de ce qui se passe au collège, une sorte de<br/>
href="equipe.html">Equipe de creation</a><br/>
- <ahref="remerciements.html">Remerciements</a></h4> </div> </body> </html>
Cela fonctionne chez moi, ceci dit, peut-etre vaudrait t-il mieux que tu declare le css par defaut en premier puis les css alternatif, IE ne sachant pas les gerer, il recupere peut-etre un code erreur avant de tomber sur la bonne balise.Il faut pas grand chose pour le perturber , peut-etre que ....
a plus
Rereresalut !
Sa y est, on a enfin reussi a regler le probleme !
J'y suis arrivé en recopiant le css de gcyrillus et en y apportant quelques modifs !
voici le resultat
voila
mais il ya desormais un autre probleme: ca ne marche plus sous firefox
regardez: ouin ouin
bon, si vraiment je peut pas faire autrement, je crois que je pourrais me passer de l'affichage sous firefox, mais bon c'est dommage
resalut,
bon , j'aime pas trop les hacks finalement (ça veut souvent dire qu'on a rate/pas un truc quelque part), finalement, ou tu reprend l'idée du corps avec 3 pixel supplementaires en largeur ou tu fais usage d'un hack: pour
#corps { background-image: url("images/fond_corps_parchemin.png"); background-repeat: no-repeat; width: 620px; height: 620px;
margin-left: 130px; padding: 5px; display:block!important;/* ne changeont rien pour firefoxe */ display:inline; /* trichons avec IE */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="fr"> <head> <title>Collège F. Chopin - Melun</title> <metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1"/> <linkrel="alternate stylesheet"media="screen"type="text/css"title="Blue"href="blue.css"/> <linkrel="alternate stylesheet"media="screen"type="text/css"title="Red"href="red.css"/> <linkrel="stylesheet"media="screen"type="text/css"title="parchemin"href="parchemin.css"/>
<styletype="text/css">
body
{
width: 763px;
margin-left: 20%; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever
pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-color: #F0D898;
}
<divid="corps"> <h1id="title">Bienvenue sur le site du <br/>collège F. CHOPIN !</h1> <p>Ce site a été concu dans le but de vous informer de ce qui se passe au collège, une sorte de<br/>
Sa marche toujours pas sur firefox mais de toute facon le display: inline; fait plus pire que mieux, apres il ne garde que les zones de texte de l'image !
Je crois que vais essayer de tout recommencer depuis le debut (html et css) et apres je vous tiendrait au courant
Comment remplacer le float sous IE ?
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui