Problème centrage design

Résolu/Fermé

polo2904 - 1 mars 2008 à 19:31
polo2904 Messages postés 12 Date d'inscription vendredi 28 mai 2004 Statut Membre Dernière intervention 23 mai 2009 - 2 mars 2008 à 16:58

Bonjour,

IE 7 n'arrive pas à center mon contenu alors que firefox le fait correctement.

CSS :

body
{
width: 900px;
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
background-image: url(images/fond.jpg);

}

HTML:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mariage en Traction</title>

<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />

</head>

<body>
<div id="en_tete">

</div>

<div id="menu">

<div id="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>

</div>

<div id="element menu">
<h3>Titre Menu2 </h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>

</ul>
</div>

</div>

<div id="corps">
<h1>Mariage en Traction</h1>
<p>
Bienvenue sur Mariagen en Traction<br />
vous avez besoin d'une voiture pour votre mariage....
</p>

</div>

<div id="pied_de_page"> 

<p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>

</div>

</body>

</html>

A voir également:

Problème centrage design
Logiciel design interieur gratuit - Guide
Microsoft design - Télécharger - Divers Photo & Graphisme
Stb refsw design ✓ - Forum Téléviseurs
Winner design gratuit - Forum loisirs/vie pratique
Logiciel design voiture gratuit ✓ - Forum Graphisme

13 réponses

Réponse 1 / 13

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
1 mars 2008 à 19:35

salut,

tiens donc !
pourtant ça passe d'habitude.
essaie avec la propriété courte :

body
{
width: 900px;
margin: 15px auto;
background-image: url(images/fond.jpg);
}

est-ce qu'il y a d'autres règles de la CSS qui pourraient le chiffonner ('float', 'position'…) ?
et pense à mettre ton code en forme avec ce bouton, merci.

Réponse 2 / 13

polo2904 Messages postés 12 Date d'inscription vendredi 28 mai 2004 Statut Membre Dernière intervention 23 mai 2009
1 mars 2008 à 23:57

ça ne change rien. Quelqu'un à une idée?

Merci

Réponse 3 / 13

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
2 mars 2008 à 00:08

re,

ajoute un DocType et valide ta page.
ce n'est pas logique du tout, ça devrait suffire amplement.

il n'y a pas d'autres règles CSS ?

Réponse 4 / 13

omar-senegal Messages postés 271 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 7 janvier 2017 26
2 mars 2008 à 00:12

salu moi je te suggere de creer un div contenu ki va englober l en tete les menu et le pied de page et ce div tu lui met margin:0 auto ca marche

polo2904 Messages postés 12 Date d'inscription vendredi 28 mai 2004 Statut Membre Dernière intervention 23 mai 2009
2 mars 2008 à 00:19

j'essaye ça de suite.

Autre pb la baniere elle ne s'affiche pas non plus avec IE7 je trouve sa louche

CSS:

body
{
width: 900px;
margin: auto; /*pour centrer notre page */
margin-top: 15px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 15px;
background-image: url("images/fond.jpg");

}

/* L'en-tête */

#en_tete
{
width: 760px;
height: 100px;
background-image: url("images/baniere.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;

}

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 13

omar-senegal Messages postés 271 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 7 janvier 2017 26
2 mars 2008 à 00:32

sous ie ton code css n est pas interpreté de la meme maniere pour cela il fo utiliser des astuces comme copier ton
#en_tete
{
width: 760px;
height: 100px;
background-image: url("images/baniere.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;

} puis le coller a nouveau dans le css et tu y rajoute au debut *+html {}
ce ki te donne
*+html {width: 760px;
height: 100px;
background-image: url("images/baniere.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;

} pui tu peu modifier les px pour avoir la meme chose ke sous firefox san que ce dernier ne change

Réponse 6 / 13

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
2 mars 2008 à 00:47

sous ie ton code css
définir la largeur de <body> et le centrer, si.
donc il y a bien un problème qui n'a pas été trouvé.

Réponse 7 / 13

polo2904 Messages postés 12 Date d'inscription vendredi 28 mai 2004 Statut Membre Dernière intervention 23 mai 2009
2 mars 2008 à 01:07

Pour la banière j ai réussi.

Par contre pour le centrage...

J'ai rajouté un div qui prend tout, et je lui ai mit margin= auto; widht= 760px

Résultat IE me le met bien cette fois si a 760px ( il ne le fesait pas avant) mais toujours pas centré

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
2 mars 2008 à 01:25

regarde ce bête document.
tu vois les infos centrées ?
si oui la technique fonctionne sous IE.

regarde le code, y a pas plus simple.
ça ne sert à rien de multiplier les boites, il faut trouver ce qui cloche.

polo2904 Messages postés 12 Date d'inscription vendredi 28 mai 2004 Statut Membre Dernière intervention 23 mai 2009 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
2 mars 2008 à 10:34

oui je vois le contenu centré donc cela viens de mon code. Je prefererais aussi trouver se qui cloche mais je n'arrive pas à comprendre. Vous voyez une erreur je regard depuis des heures je ne trouve pas. Si je renleve le div qui prend tout le contenu alors la largeur du body n'est plus définie alors que je lui ai mit wigth=760px; et le contenu n'est toujours pas centré.

Pour le 0 cela ne change rien.

Je débute un peu et je n'arrive pas du tout à trouver si quelqu'un à une idée...

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920 > polo2904 Messages postés 12 Date d'inscription vendredi 28 mai 2004 Statut Membre Dernière intervention 23 mai 2009
2 mars 2008 à 11:09

salut,

tu n'as pas de DocType. IE est sans doute en mode quirks.

voila un <head> correct :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		<meta http-equiv="content-language" content="fr" />
	</head>
	<body>
	</body>
</html>

J'ai remplacé mon head par le tiens mais cela ne change rien. Je te remet tous mes codes car j'en ai rajouté.

CSS:

#contenu
{
	width: 760px;
	margin: 0 auto;
	
	
}

body
{
	width: 760px;
	margin: 0 auto; /*pour centrer notre page */
	margin-top: 15px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
	margin-bottom: 15px;
	background-image: url("images/fond.jpg");
	
}

/* L'en-tête */

#en_tete
{
	width: 760px;
	height: 100px;
	background-image: url("images/baniere.png");
	background-repeat: no-repeat; 
	margin-bottom: 10px;
	
}


/* Le menu */

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 120px; /* Très important : donner une taille au menu */
}

.element_menu
{
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
   
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

/* Quelques effets sur les menus */


.element_menu h3 /* Tous les titres de menus */
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color: #B3B3B3;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: #B3B3B3;
   color: black;
}

/* Le corps de la page */

#corps
{
   margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 15px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   
   color: #B3B3B3;
   background-color: #626262; /* Une couleur de fond pour le corps */
   background-image: url("images/motif.png");
   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
   
   border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
	
#corps h1 /* Tous les titres h1 du corps */
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 /* Tous les titres h2 du corps */
{
   height: 30px;

   background-image: url("images/titre.png"); /* Une petite image de fond sur les titres h2 */
   background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
   
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 5px;

   text-align: center;

   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
}

HTML

<html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Mariage en Traction</title>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		<meta http-equiv="content-language" content="fr" />
		
		<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />

		
	</head>
	

<body>
 <div id="contenu">	
	<div id="en_tete">
	<!-- Ici on mettra la bannière -->
	</div>
	
	<!-- Cadre englobant tous les sous-menus (en bleu marine sur le schéma) -->	
	<div id="menu">        
           <div class="element_menu">
               <h3>Titre menu</h3>
               <ul>
                   <li><a href="page1.html">Lien</a></li>
                   <li><a href="page2.html">Lien</a></li>
                   <li><a href="page3.html">Lien</a></li>
               </ul>
           </div>
       
           <div class="element_menu">
               <h3>Titre menu</h3>
               <ul>
                   <li><a href="page4.html">Lien</a></li>
                   <li><a href="page5.html">Lien</a></li>
                   <li><a href="page6.html">Lien</a></li>
               </ul>
           </div>        
       </div>
	
	<div id="corps"><!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
	<h1>Mariage en Traction</h1>
	<p>
		Bienvenue sur Mariagen en Traction<br />
		vous avez besoin d'une voiture pour votre mariage....		
		</p>
		
	<h2>Pour faire quoi?</h2>
	<p>pour une arrivée inoubliable</p>	
	
	<h2>Une Traction c'est quoi?</h2>
	<p>Elue Voiture ...
</p>
	
	</div>
	
	
	
	<div id="pied_de_page"> <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
	
	 <p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
	 
	</div>
	
	
	
 </div>		<!-- div conetnu -->

	
		
	

</body>

</html>

Réponse 8 / 13

omar-senegal Messages postés 271 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 7 janvier 2017 26
2 mars 2008 à 01:14

rajout un 0 avant le auto

Réponse 9 / 13

omar-senegal Messages postés 271 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 7 janvier 2017 26
2 mars 2008 à 14:28

voila cest ca le <html> ke t as mis avant le doctype.........

aussi voici un bon doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

Réponse 10 / 13

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
2 mars 2008 à 14:37

re,

omar-senegal a trouvé la solution.

avant de mettre tes documents en page, il faut qu'elles soient validées.

Réponse 11 / 13

polo2904 Messages postés 12 Date d'inscription vendredi 28 mai 2004 Statut Membre Dernière intervention 23 mai 2009
2 mars 2008 à 15:00

Parfait, merci bcp les gars.

c'est quoi valider les pages j'ai jamais fait je crois ou sans le savoir.

le <html> c'est frontpage qui me la mit il faut pas en mettre?

Réponse 12 / 13

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
2 mars 2008 à 15:24

si, il faut bien ouvrir la balise <html>, mais une seule fois !
regarde bien le code, la balise <html> est juste sous le DocType.
et le DocType doit être le premier caractère du fichier (ni espaces ni lignes avant, c'est une bonne habitude).

pour la validation, c'est simple.
le langage HTML est définit par le W3C, et le lien que je t'ai fourni permet de valider ton code à la syntaxe définie par le W3C (la seule qui soit correcte, c'est eux qui l'ont défini !).
tu peux soumettre une adresse url d'un site en ligne, un fichier de ton disque dur ou directement en collant le code.
il en existe une version française.

pour FP, abandonne le de suite !!!
il ne fera que te compliquer la tâche, regarde cet article.

bon courage pour la suite !

Réponse 13 / 13

polo2904 Messages postés 12 Date d'inscription vendredi 28 mai 2004 Statut Membre Dernière intervention 23 mai 2009
2 mars 2008 à 16:58

Ok merci pour tous ces renseignements.

Pour frontpage je ne me sert pas des balises de front page je tape tout. Mais merci pour l'info

Discussions similaires

Avis site azura home design / Azurahomedesign

je cherche un logiciel gratuit de stylisme

Bonjour je souhaite qu'on me traduise cette phrase

Problème de reconnaissance Memup feel design

Probleme Sharp TV

Discussions similaires

Newsletters