Bonjour!
Je chercher à placer sur mon site mon header verticalement et à gauche du contenu. Cela fonctionne très bien sous Safari, Firefox, etc... mais pas avec Internet Expolorer: il me place le contenu en dessous!
J'ai recherché un peu partout dans les notes, et je n'ai rien trouvé. Merci de votre aide!
Le site est visible là.
Et voici mes codes:
CSS
html
Modifié par boumzim (02 Jun 2005 - 16:59)
Je chercher à placer sur mon site mon header verticalement et à gauche du contenu. Cela fonctionne très bien sous Safari, Firefox, etc... mais pas avec Internet Expolorer: il me place le contenu en dessous!
J'ai recherché un peu partout dans les notes, et je n'ai rien trouvé. Merci de votre aide!
Le site est visible là.
Et voici mes codes:
CSS
/* Placement de la page */
body {
width: 876px; /* Largeur du site à 875 pixels */
margin: auto; /* Pour centrer la page */
margin-top: 0px; /* Décolle le haut */
margin-bottom: 20px; /* Décolle le bas */
font-family: Arial;
}
/* Configuration de l'en-tête */
#en_tete {
float: left; /* mettre l'en-tête à gauche */
width: 76px;
/*height: 600px;*/
background-image: url("header.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
padding-bottom: 600px;
}
/* Configuration du menu */
#menu {
width: 800px;
height: 20px;
margin: 0px;
margin-top: 5px;
margin-left: 80px;
padding: 0px;
padding-left: 8px;
}
.element_menu { /* Présentation des sous-menus */
padding: 0px;
margin: 0px;
}
.element_menu ul { /* Listes à puce des sous-menus */
list-style-type: none; /* Pas de puces */
width: 100%; /* précision pour Opéra */
padding: 0px;
margin: 0px;
}
.element_menu li {
padding: 0px;
margin: 0px;
float: left;
}
.element_menu a { /* Apparence des boutons du menu */
width: 110px;
height: 20px;
padding: 0px;
margin: 0px;
display: block;
text-align: center;
border-left: 1px white solid;
border-right: 1px white solid;
font-variant: small-caps; /* petites majuscules */
background: rgb(255, 111, 13); /* arrière-plan */
color: white; /* texte en blanc */
text-decoration: none; /* pas de soulignement */
}
.element_menu a:hover { /* Survol des boutons */
background: white;
color: rgb(255, 111, 13);
border-top: 1px rgb(255, 111, 13) solid;
border-left: 1px rgb(255, 111, 13) solid;
border-right: 1px rgb(255, 111, 13) solid;
}
/* Configuration du corps */
#corps {
min-height: 600px;
margin-top: 0px;
margin-left: 76px; /* place pour le header */
padding: 5px; /* Pour décoller le texte du bord */
padding-left: 210px;
border: 1px rgb(255, 111, 13) solid;
background-image: url("voiture.jpg");
background-repeat: no-repeat;
}
#corps h3 {
color: rgb(255, 111, 13);
}
#corps a {
color: rgb(255, 111, 13);
text-decoration: none; /* pas de soulignement */
}
#corps a:hover{
background: rgb(255, 111, 13);
color: white;
}
/* pas de cadre aux images*/
#corps img {
border: 0 none;
}
p {
margin-top: 0px;
}
/* Configuration du corps pour le programme */
#corps_programme {
width: 798px;
/*height: 570px;*/
margin-top: 0px;
margin-left: 76px; /* place pour le header */
/* Pour décoller le texte du bord */
border: 1px rgb(255, 111, 13) solid;
}
#corps_programme p {
margin: 0px;
padding: 0px;
}
/* Configuration du formulaire d'inscription */
form {
border-top: 1px solid rgb(255, 111, 13);
border-bottom: 1px solid rgb(255, 111, 13);
}
/* Configuration du pieds de page */
#pied_de_page {
clear: both;
width: 798px;
margin-left: 76px; /* place pour le header */
border: 1px rgb(255, 111, 13) solid;
border-top: 5px rgb(255, 111, 13) solid;
}
#pied_de_page a {
color: rgb(255, 111, 13);
text-decoration: none; /* pas de soulignement */
}
#pied_de_page a:hover{
background: rgb(255, 111, 13);
color: white;
}
/* Texte dans le pied de page */
#pied_de_page p {
text-align: center;
}html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mettral Auto Ecole - Théorie de la ciruclation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design site" href="ressources/design.css" />
</head>
<body>
<!-- Block de l'entête -->
<div id="en_tete">
</div>
<!-- Block du menu -->
<div id="menu">
<div class="element_menu"> <!-- cadre du premier sous-menu -->
<ul>
<li><a href="">Accueil</a></li>
<li><a href="presentation.html">Présentation</a></li>
<li><a href="test/test.html">Essayer ?</a></li>
<li><a href="tarifs.html">Les Tarifs</a></li>
<li><a href="inscription.html">Inscription</a></li>
<li><a href="restricted/accueil_membres.html">Membres</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<!-- Block du contenu -->
<div id="corps">
<p>
Bienvenue sur le site <em>Examen-Theorie.ch</em>, le site de théorie de conduite on-line le plus professionel de suisse romande !</p>
<p>Théorie pour catégories de permis A1, A (scooter, moto dès 16 ans) et B (voiture).</p>
<p>
Notre programme représente une réelle alternative aux programmes de répétition que l'on peut trouver dans le commerce.
Non seulement son interface est simple et intuitive, et la correction conforme à celle pratiquée lors du passage de l'examen,
mais en plus, son système de paiement est totalement nouveau et avantageux :<br />
Nous vous proposons un système d'inscription par abonnement. Choisissez la durée pendant laquelle vous aurez un accès complet
au contenu de ce site. 1, 2, 3 ou 4 semaines sont les durées proposées.</p>
<p>
Le programme entier est stocké sur notre site et aucun téléchargement n'est nécessaire. Vous aurez donc accès au site
<strong>depuis n'importe quel poste connecté à internet</strong>.
</p>
<p>Pour vous convaincre de l'intérêt de notre programme, veuillez lire <a href="presentation.html">cette présentation</a> ou
encore <a href="test/test.html">tester le programme</a> avec les 2 premiers questionnaires (complets) de la série de 14.</p>
</div>
<!-- Bolck du pieds de page -->
<div id="pied_de_page">
<p>© 2005, tous droits réservés. <a href="mailto:technique@examen-theorie.ch">Contacter le webmaster</a></p>
</div>
</body>
</html>
Modifié par boumzim (02 Jun 2005 - 16:59)
