Problème centrage design
Résolu
polo2904
-
polo2904 Messages postés 12 Date d'inscription Statut Membre Dernière intervention -
polo2904 Messages postés 12 Date d'inscription Statut Membre Dernière intervention -
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">
<!-- Ici on mettra la bannière -->
</div>
<div id="menu"><!-- Cadre englobant tous les sous-menus (en bleu marine sur le schéma) -->
<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"><!-- 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>
</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>
</body>
</html>
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">
<!-- Ici on mettra la bannière -->
</div>
<div id="menu"><!-- Cadre englobant tous les sous-menus (en bleu marine sur le schéma) -->
<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"><!-- 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>
</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>
</body>
</html>
A voir également:
- Problème centrage design
- Azura home design avis ✓ - Forum Consommation & Internet
- Maeva vient de créer son entreprise de design à montréal ✓ - Forum Loisirs / Divertissements
- Memup feel design - Forum Disque dur / SSD
- Stb refsw design c'est quoi - Forum MacOS
- Enlever stb refsw design ✓ - Forum Matériel & Système
13 réponses
salut,
tiens donc !
pourtant ça passe d'habitude.
essaie avec la propriété courte :
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.
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.
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 ?
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 ?
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
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;
}
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
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
#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
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é.
définir la largeur de <body> et le centrer, si.
donc il y a bien un problème qui n'a pas été trouvé.
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é
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é
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.
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.
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...
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...
salut,
tu n'as pas de DocType. IE est sans doute en mode quirks.
voila un <head> correct :
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:
HTML
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>
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>
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>
re,
omar-senegal a trouvé la solution.
avant de mettre tes documents en page, il faut qu'elles soient validées.
omar-senegal a trouvé la solution.
avant de mettre tes documents en page, il faut qu'elles soient validées.
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?
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?
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 !
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 !