28220 sujets

CSS et mise en forme, CSS3

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 .

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)
Un header à gauche ce ne serait pas un lefter ? Smiley lol


essaye de mettre un clear: right a ton en-tete (autrement appelé lefter re Smiley lol )

RE edition : element menu width : 800px + header 76px !!! merci pour les 800X600 sans compter les marges !
Modifié par gilles6975 (01 Jun 2005 - 19:31)
a écrit :
Un header à gauche ce ne serait pas un lefter ?

Je m'étais aussi posé la question! Smiley biggrin

a écrit :
essaye de mettre un clear: right a ton en-tete

le clear: right n'amène rien...

a écrit :
element menu width : 800px + header 76px !!! merci pour les 800X600 sans compter les marges !

Qu'entends-tu par là?
Par definition une resolution de 800X600 veut dire que la largeur maximale des éléments affichés a l'ecran va être de 800px. Si le contenu est plus grand (comme dans ton cas 876 et quelques) cela veut dire qu'il va y avoir une barre de scroll horizontale sur le site et cela ne facilite pas la navigation
Voir ici une capture de ton site sur un 15 pouces en 800X600 onne peut pas dire que cela soit merveilleux !
upload/696-image001.png



Nota : je regarde pour ton probleme
Visiblement tu t'es un peu embrouillé avec les positionnements ! Sans compter que ie est spécialement retif a toute interpretation normale des standards.

Globalement, on peut considerer que tu as 2 grands type de bloc sur ton site. Le lefter et le bloc contenu ! Tu as mis le lefter en float : left ce qui peut paraitre logique, mais les éléments d'apres (menu, corps et footer) sont separés les uns des autres et tu essayes de positionner ceux ci un par un (d'ou la presence de ces margin-left: 76 px). Une solution mais il peut y en avoir d'autre est de dire mes 2 grands blocs doivent se trouver l'un a coté de l'autre donc je créer une div englobant tout ce qui se trouve a droite du lefter et je l'a met en float :left en lui spécifiant une taille et en lui specifiant de systematiquement se tenir a droite du lefter (d'ou clear: right !).

Globalement cela donne dans le CSS
#conteneur{float: left;
width: 800px;
margin: 0;
padding: 0;
clear: right;}


Et dans le XHTML :

<div id="en_tete"></div>
      <div id="conteneur">
               <div id="menu"></div>
               <div id="corps"></div>
       </div>


en oubliant pas de supprimer les margin left des element "menu" et "corps".
Tu peux inclure le footer dans la div conteneur ou l'exclure pour quelle soit toujours en bas (cela permet de regler le probleme du min-height non reconnu sous ie). A ce moment la lui mettre un clear: both;

Voila en esperant que mes explications sont claires.


Une dernière remarque ! Ton lefter est en fait une div vide ce qui n'est pas recommandé. Une image en float left aurait pu suffir mais cela change beaucoup le code !
Modifié par gilles6975 (02 Jun 2005 - 08:59)
Pour le 800x600, ok, j'y avais pensé. Le problème c'est que sur le site se trouve un applet java qui devrait tourner déjà en 800x600, alors je préférais au début partir plus large de toute manière... Y a encore beaucoup de monde en 800x600, tu penses?

J'ai effectué les modifications que tu m'avais prescrites, mais le problème persiste :

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 */
	clear: right;
	width: 76px;
	height: 600px;
	background-image: url("header.gif");
	background-repeat: no-repeat;
	margin-bottom: 10px;
}

#conteneur {
	float: left;
	width: 800px;
	margin: 0;
	padding: 0;
	clear: right;
}

/* Configuration du menu */
#menu {
	width: 800px;
	height: 20px;
	margin: 0px;
	margin-top: 5px;
	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, 141, 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, 141, 13);
	border-top: 1px rgb(255, 141, 13) solid;
	border-left: 1px rgb(255, 141, 13) solid;
	border-right: 1px rgb(255, 141, 13) solid;
}

/* Configuration du corps */
#corps {
	min-height: 600px;
	margin-top: 0px;
	padding: 5px; /* Pour décoller le texte du bord */
	padding-left: 210px;
	
	border: 1px rgb(255, 141, 13) solid;
	
	background-image: url("voiture.jpg");
	background-repeat: no-repeat;
}

#corps h3 {
	color: rgb(255, 141, 13);
}

#corps a {
	color: rgb(255, 141, 13);
	text-decoration: none;  /* pas de soulignement */
}

#corps a:hover{
	background: rgb(255, 141, 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;
	
	border: 1px rgb(255, 141, 13) solid;
}

#corps_programme p {
	margin: 0px;
	padding: 0px;
}

/* Configuration du formulaire d'inscription */
form {
	border-top: 1px solid rgb(255, 141, 13);
	border-bottom: 1px solid rgb(255, 141, 13);
}

/* Configuration du pieds de page */
#pied_de_page {
	clear: both;
	width: 800px;
	margin-left: 76px; /* place pour le header */
	border: 1px rgb(255, 141, 13) solid;
	border-top: 5px rgb(255, 141, 13) solid;
}

#pied_de_page a {
	color: rgb(255, 141, 13);
	text-decoration: none;  /* pas de soulignement */
}

#pied_de_page a:hover{
	background: rgb(255, 141, 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>
		
	<div id="conteneur">
		<!-- 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>
	</div>
	</body>
</html>


Penses-tu que la solution est trouvable? Smiley ohwell

Pour ce qui est de l'image dans la div vide, j'ai juste suivi les conseils du "site du ZérO" qui préconise cette méthode pour un changement plus aisé de design...
C'est ok, ça a l'air de jouer!

J'ai utilisé ta méthode, cela ne jouait pas. Et j'ai adapté une réponse trouvée sur un autre forum: l'image de mon lefter doit faire plus que 76px, malgré ce qui m'est indiqué par mon programme graphique...

Bref, ça a l'air ok! Merci à tous!