[Résolu] Problèmes avec marges et affichage des images - Vérifier mes codes. par kirnette - page 1

Bonsoir à tous

Je débute avec les cours de m@teo et j'essaie de concevoir un site pour un établissement scolaire.

Mon premier problème : les marges sont à peu près correctes avec FF mais le décalage dans l'alignement horizontal des blocs est visible avec IE.

Deuxième problème : ma bannière ne s'affiche pas avec IE

Troisième problème : les deux photos que j'ai mises à gauche du corps ne s'affichent pas non plus. J'ai pourtant bien vérifier l'emplacement et les noms, il n'y pas d'erreurs.
Je vous donne mes codes (on ne se moque pas ce sont mes premiers !

, Pouvez-vous me dire où j'a pu commettre des erreurs car je n'arrive pas à trouver. J'ai déjà fait plusieurs changements mais je n'y arrive pas.
Merci à ceux qui pourront me donner un coup de mains.

<!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>Site de l'école primaire des Sablons</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
   </head>


<div id="en_tete">

</div>

<div id="menu">

<div class="element_menu">

   <h3> Informations générales </h3>

<ul>
<li> <a href="page2.html"> Page des infos de l'école</a> </li>
<li> <a href="page3.html"> Sécurité informatique</a> </li>

</ul>
</div>

<div class="element_menu">
<h3>Vie dans les classes</h3>

<ul>
<li> <a href="cycle1.html"> Cycle1</a> </li>
   <li> <a href="cycle2.html"> Cycle2 </a> </li>
<li> <a href="cycle3.html"> Cycle3 </a> </li>
</ul>
</div>
</div>

<div id="corps">

<div class="imageflottante">
<img src="ecole/ecole5.jpg" alt="photo de l'école"/>
<img src="ecole/ecole1B.jpg" alt="salle des maitres"/>
</div>

<h1>Bienvenue sur le site de <br/>l'école primaire des Sablons de Châtillon</h1>

<p>Sur ce site vous trouverez des informations générales sur l'école:<br/>
Dates des vacances, festivités... <br/>
Des informations et des productions d'enfants sur les activités de chaque classe, <br/>
des liens vers d'autres sites pouvant intéresser les enfants <br/>et une page réservée à la sécurité du matériel et des enfants pour naviguer sur la toile.. <br/> Pour l'instant c'est un peu vide et laid, normal le site est en construction !!!</br></p>
</div>

<div id="pied_de_page">
<p>Copyright "Création Ecole des Sablons"" 2006‚ tous droits réservés</p>
</div>
<body>

body
{
width: 100%;

margin-top: 10px; /* marge en haut du navigateur */
margin-bottom: 10px; /* Idem pour le bas du navigateur */
background: #e6e6fa; /* couleur du fond */
}
/* L'en-tête */

#en_tete
{
width:770px; /*taille header*/
height: 180px; /*hauteur du header*/
margin-left: 265px; /*marge de gauche*/
background-image: url("images/bannière7.jpg");/*image de la bannière*/
background-repeat: no-repeat;
margin-bottom: 10px; /*marge sous labannière */
border-bottom: 20px groove blue; /* bordure sous la bannière*/
}

/* Le menu */

#menu
{
float: left; /* menu de gauche */
width: 200px; /* Taill e du menu*/
margin-left: 20px; /*marge à gauche du menu*/
margin-right: 40px; /*marge à droite du menu*/

}

h3 /*titre des menus*/
{
color:blue;
text-align: center;
}
h1 /*caractéristiques des titres h1*/
{
color: black;
}
.element_menu
{
font-family: Verdana ,Courier ,"Arial black", ; /*police du menu*/
text-align: left;
background-color: #b0c4de; /*couleur de fond du menu*/
background-repeat: repeat-x;
border: 2px solid black; /*bordure entourant le menu*/
margin-bottom: 20px; /* séparation des menus */
}

/*Propriété des éléments du menus*/

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/puce.png"); /* puces du menu */
padding: 0px; /* marge intérieure de 0 pixels */
padding-left:30px; /* ... mais la marge de gauche 30 pixels */
margin: 0px; /* pas de marge*/
margin-bottom: 5px; /* mais marge en dessous */
text-align: left;

}
.element_menu a /*liens dans le menu*/
{
color:white;
}

.element_menu a:hover /*click sur les liens*/
{
background-color: #B3B3B3;
color: yellow;
}
.imageflottante /* images à gauche du corps*/
{
float: right;
width: 200px;

margin-right: 20px;

}

#corps
{
width:800px; /* taille du centre*/
height: 350px;
margin-left: 250px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-right: 20px; /* marge à droite du corps*/
margin-bottom: 40px; /* séparation corps et pied de page */
padding: 5px; /* marge intérieure */
color: #000080;
background-color: #b0c4de; /* couleur de fond */
text-align: center;
border: 2px solid black; /* bordure limite du corps */
}

#pied_de_page
{
margin-left: 20px; /*marge de gauche*/
width: 95%; /*taille du pied de page*/
background-color: #e6e6fa; :/*couleur de fond du pied de page*/
padding: 5px; /*marge intérieure*/
text-align: center; /*texte centré*/
color: grey; /*couleur du texte*/
background-repeat: repeat-x;
border: 2px solid black; /*bordure du pied de page*/
}

kirnette

1 juin 2006 à 22:20:10

Gunjack

1 juin 2006 à 22:26:03

Salut,
tout ce que tu veux afficher sur ta page doit se trouver dans la balise body, c'est a dire:

1 juin 2006 à 22:41:53

Merci Gunjack,

J'ai rajouté <body> qui manquait au début. Je n'avais vraiment pas vu qu'il me manquait la balise de départ

Les photos s'affichent, mais j'ai toujours le problème de la bannière avec IE et le problème de l'alignement des blocs.

Après bien des recherches et une petite aide extérieure, j'ai résolu le problème de la bannière avec IE, il suffisait d'enlever l'accent du nom du fichier.
Pour le reste j'ai repris tout à zéro

Problèmes avec marges et affichage des images

Vérifier mes codes.

Problèmes avec marges et affichage des images

Supprimer

Modérer

Signaler le message aux modérateurs