CSS & IE

visible ou pas ?

Sujet résolu

15 février 2006 à 8:00:15

Voilà, j'ai fait un site en utilisant les css, sous firefox et netscape il passe nikel mais sous IE aïe...
Ce qui bloque surtout c'est les margin & padding .... pourtant dans le tuto il n'est pas précisé que cela ne fonctionne pas sur IE.
Est ce que vous pourriez m'en dire plus ?

D'avance merci

EDIT : je vais mettre mon css et mon code html comme j'ai vu que tout le monde le faisait

Citation : code css

body
{
width: 760px;
margin: auto; /* Pour centrer la page */
margin-top: 20px; /* pour ne pas que ça colle en haut de page */
margin-bottom: 20px; /* idem */
background-color: #F0F0FF;

font-family: "Arial Narrow", Arial, serif;
text-align: justify;
font-size: 13px;
}

a
{
color:black;
font-weight: bold;
}

a:active
{
text-decoration: none;
color: brown;
}

a:hover
{
text-decoration: underline;
background-color: yellow;
}

/* Voilà pour l'en tête */

#logo
{
margin:0 auto;
float: left;
background-image:url("../_img/logo.png");
background-repeat: no-repeat;
width: 168px;
height: 163px;
margin:0 auto;
margin-top: 10px;
}

#en_tete
{
margin:0 auto;
margin-left: 180px;
padding-top: 50px;
width: 760px;
height: 165px;
background-image:url("../_img/banmdp.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}

#adresse
{
text-align: center;
}

/* Le Menu */

#menu
{
margin:0 auto;
float: left; /* Le menu flottera sur la gauche */
width: 163px; /* Taile du menu */
margin-top: 10px;
}

.element_menu
{
background-color : #D5D5FF;
border: 2px ridge #D5D5FF;
margin-bottom: 20px; /* Pour eviter que les éléments ne soient collés au menu */
}

h3 /* Titre des sous menu */
{
font-family: CoventryGarden, "Arial Narrow", "Arial Black", Arial, serif;
font-size: 15px;
font-weight: bold;
text-align: center;
}

/* Effets sur le menus */

.element_menu ul /* agit sur les listes */
{
list-style-image:url("../_img/Colors.gif");
padding: 0px;
padding-left: 20px;
margin: opx;
margin-bottom: 5px;
}

.element_menu a
{
color: black;
font-weight: bold;
}

/* Corps du site !!!!! */

#corps
{
margin:0 auto;
margin-left: 180px;
margin-top: 20px;
margin-bottom: 20px;
padding: 5px;

color: black;
border: 2px ridge #D5D5FF;
}

#corps_2
{
margin:0 auto;
margin-left: 180px;
margin-top: 20px;
margin-bottom: 20px;
padding: 5px;

color: black;
border: 2px ridge #D5D5FF;
}

.flottante
{
float: right;
}

.retour
{
clear: right;
}

h1
{
border-bottom: 2px solid black;
font-size: 15px;
font-variant: small-caps;
}

h2
{
color: black;
font-size: 14px;
font-variant: small-caps;
}

h4
{
color: ;
font-weight: bold;
}

/* Pied de page */

#pied_de_page
{
margin:0 auto;
margin-left: 180px;
padding: 0px;
text-align: right;
border: 2px ridge #D5D5FF;
}

input, textarea
{
font-family: "Times New Roman", Times, serif;
}

input:focus, textarea:focus
{
backgroundcolor: #F0F0FF;
}

legend
{
font-family: Georgia, "Times New Roman", Times, serif;
color : blue;
font-weight: bold;
}

fieldset
{
background-color: #D5D5FF;
}

.up
{
text-align:right;
}

Code HTML :

<body>
<div id="logo">

</div>

<div id="en_tete">

<p id="adresse"><font face="serif" size="2"><b>1 avenue Péladan<br>
30 000 Nîmes<br>
Tel : 04 66 36 64 64 - Fax : 04 66 67 56 67</b></font></p>
</div>

<div id="menu">

<div class="element_menu"> 

<h3>Actualite</h3>

<ul>
<li><a href="../liens.htm">Les liens</a></li> 
<li><a href="../maj.htm">Mise à jour</a></li>
<li><a href="../dates_importantes.htm">Dates Importantes</a></li>

<li><a href="../realise_eleves.htm">Réalisé par les élèves</a></li>
</ul>
</div>

<div class="element_menu"> 

<h3>Le Collège</h3>

<ul>
<li><a href="../college_histoire.htm">Son Histoire</a></li> 
<li><a href="../college_administration.htm">Administration</a></li>

<li><a href="../college_reglement_interieur.htm">Règlement Intérieur</a></li>
<li><a href="../college_salle_informatique.htm">Salle Informatique</a></li>
<li><a href="../college_salle_musique.htm">Salle de Musique</a></li>
</ul>
</div>

<div class="element_menu"> 
<h3>C.D.I.</h3> 
<ul>
<li><a href="../cdi_fonctionnement.htm">Fonctionnement</a></li> 
<li><a href="../cdi_recherche.htm">Recherche</a></li>

<li><a href="../cdi_utilisation_internet.htm">Utilisation d'Internet</a></li>

<li><a href="../cdi_livre_lire.htm">Livres à lire</a></li>

<li><a href="../cdi_activites.htm">Les Activités</a></li>

<li><a href="../cdi_nouveautes.htm">Les Nouveautés</a></li>

<li><a href="../cdi_paroles_eleves.htm">Paroles d'élèves</a></li>
</ul>
</div>

<div class="element_menu"> 
<h3>Les Projets</h3> 
<ul>
</ul>
</div>

<div class="element_menu"> 

<h3>Les Activités</h3>

<ul>
<li><a href="../activites_club.htm">Les clubs</a></li> 

<li><a href="../activites_exposes.htm">Exposés</a></li>
<li><a href="../activites_journal.htm">Journal</a></li>
</ul>
</div>

<div class="element_menu"> 
<h3>Manifestations</h3> 
<ul>
</ul>
</div>

<div class="element_menu"> 
<h3>S.E.G.P.A.</h3> 
<ul>
</ul>
</div>

<div class="element_menu"> 
<h3>C.R.O.P.S.</h3> 
<ul>
</ul>
</div>

</div>


<div id="corps">

</div>
<div id="corps2">

</div>



<div id="pied_de_page">

<p>Site réalisé par <a href="...">ASP</a></p>
</div>

</body>
</html>

Voili voilou ! Donc sous IE ça fait pas jolie, les cadres se chevauchent :/

Merci d'avance de votre aide !

Dadaxx

15 février 2006 à 9:19:05

je peut voir ton site stp pour voir se qui ne vas pas

AnSoFy

15 février 2006 à 9:24:57

http://perso.wanadoo.fr/montduplan/

AnSoFy

16 février 2006 à 12:20:41

J'ai essayé de faire un css pour IE et un autre pour les autres navigateurs cela ne fonctionne pas ... Personne pour m'aider ?

jp949

16 février 2006 à 12:28:51

url n'est pas bonne

AnSoFy

16 février 2006 à 12:31:38

Voilà !! j'ai édité le message l'url est bon!

jp949

16 février 2006 à 13:10:40

c'est un template on peut pas le retoucher

pierrelalune

16 février 2006 à 13:42:52

Qu'est ce qui ne marche pas d'après toi sous IE ?

AnSoFy

16 février 2006 à 16:10:39

Voilà, là c'est plus un template...

<body>

<div id="logo">

</div>

<div id="en_tete">

<p id="adresse"><font face="serif" size="2"><b>1 avenue Péladan<br>
30 000 Nîmes<br>
Tel : 04 66 36 64 64 - Fax : 04 66 67 56 67</b></font></p>
</div>

<div id="menu">

<div class="element_menu"> 

<h3>Actualite</h3>

<ul>
<li><a href="liens.htm">Les liens</a></li> 
<li><a href="maj.htm">Mise à jour</a></li>
<li><a href="dates_importantes.htm">Dates Importantes</a></li>

<li><a href="realise_eleves.htm">Réalisé par les élèves</a></li>
</ul>
</div>

<div class="element_menu"> 

<h3>Le Collège</h3>

<ul>
<li><a href="college_histoire.htm">Son Histoire</a></li> 
<li><a href="college_administration.htm">Administration</a></li>

<li><a href="college_reglement_interieur.htm">Règlement Intérieur</a></li>
<li><a href="college_salle_informatique.htm">Salle Informatique</a></li>
<li><a href="college_salle_musique.htm">Salle de Musique</a></li>
</ul>
</div>

<div class="element_menu"> 
<h3>C.D.I.</h3> 
<ul>
<li><a href="cdi_fonctionnement.htm">Fonctionnement</a></li> 
<li><a href="cdi_recherche.htm">Recherche</a></li>

<li><a href="cdi_utilisation_internet.htm">Utilisation d'Internet</a></li>

<li><a href="cdi_livre_lire.htm">Livres à lire</a></li>

<li><a href="cdi_activites.htm">Les Activités</a></li>

<li><a href="cdi_nouveautes.htm">Les Nouveautés</a></li>

<li><a href="cdi_paroles_eleves.htm">Paroles d'élèves</a></li>
</ul>
</div>

<div class="element_menu"> 
<h3>Les Projets</h3> 
<ul>
</ul>
</div>

<div class="element_menu"> 

<h3>Les Activités</h3>

<ul>
<li><a href="activites_club.htm">Les clubs</a></li> 

<li><a href="activites_exposes.htm">Exposés</a></li>
<li><a href="activites_journal.htm">Journal</a></li>
</ul>
</div>

<div class="element_menu"> 
<h3>Manifestations</h3> 
<ul>
</ul>
</div>

<div class="element_menu"> 
<h3>S.E.G.P.A.</h3> 
<ul>
</ul>
</div>

<div class="element_menu"> 
<h3>C.R.O.P.S.</h3> 
<ul>
</ul>
</div>

</div>

<div id="corps">

</div>
<div id="corps2">

</div>

<div id="pied_de_page">

<p>Site réalisé par <a href="mailto:montduplan_communication@laposte.net">ASP</a></p>
</div>

</body>
</html>

Le premier cadre #corps se colle au menu alors que #corps2 se situe au bonne endroit.
Après il y a le soucis du centrage de la page.
Mais le problème principal c'est le premier cadre qui n'est pas au même endroit sous FF que sous IE.

jp949

16 février 2006 à 16:36:08

tu as #entete {margin-left:180px; ] a supprimer
.element-menu ul {margin:0; } et non pas o
.element-menu li { margin-left:0; padding-left:0; }
voila pour un debut

AnSoFy

17 février 2006 à 16:48:49

J'ai trouvé la solution au probleme, en fait je mettais une image flottante dans #corps ce qui faisait buger le design sous IE ...
donc j'ai remplacer float: right; par margin: 380px;

Et tout est nickel !!!

jp949

17 février 2006 à 20:30:47

sauf que le design n'est pas centré le logo est au dessus de la banniere ton corps commence a 400px du haut de la page

AnSoFy

18 février 2006 à 0:25:29

Je n'ai pas encore mis a jour la paga sur le web, mais sur mon ordi cela fonctionne.Le logo et la petite banniere ne sont plus mis en background.

http://matiafis.heaven-vs-darkness.net/montduplan/

jp949

18 février 2006 à 5:00:28

Ok ca va beaucoup mieux comme ca , le logo est encore un peu bas mais pas bien grave

AnSoFy

18 février 2006 à 9:32:00

Effectivement, je l'ai remonté un peu

CSS & 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.

CSS & IE

visible ou pas ?

CSS & IE

Supprimer

Modérer

Signaler le message aux modérateurs