design au centre avec CSS
11 messages • Page 1 sur 1
Consultez la formation au référencement naturel Google de WebRankInfo / Ranking Metrics
design au centre avec CSS
Bonjour
J'ai une bannière dans mon site.
Je voudrais la centrer
Donc dans mon CSS j'ai
#header {
width:760px;
height:145px;
background : url(design/header-chine-china.jpg) no-repeat;
margin:0 auto;
}
Mais impossible de le centrer, il reste à gauche de la page!
Merci pour l'aide
J'ai une bannière dans mon site.
Je voudrais la centrer
Donc dans mon CSS j'ai
#header {
width:760px;
height:145px;
background : url(design/header-chine-china.jpg) no-repeat;
margin:0 auto;
}
Mais impossible de le centrer, il reste à gauche de la page!
Merci pour l'aide
-

French Dread - WRInaute accro

- Messages: 1982
- Inscription: Mer Mai 07, 2003 10:04
Dans IE il faut utiliser text-align: center dans l'élément parent il me semble
Pour les backgrounds, il faudrait voir :
Source : SELFHTML
Edité après m'être rendu compte de ne pas avoir bien saisie la question.
L'insertion de style="vertical-align:middle" dans la balise IMG devrait la centrer verticalement.. Non ?
Avec background-position: vous pouvez fixer où le coin supérieur gauche du graphique doit être. La position se rapporte à l'élément HTML pour lequel le graphique est défini. Une mention numérique est permise ainsi que les mentions suivantes:
top = aligné en haut verticalement.
center = centré horizontalement.
middle = au milieu verticalement.
bottom = aligné en bas verticalement.
left = aligné à gauche horizontalement.
right = aligné à droite horizontalement
Source : SELFHTML
Edité après m'être rendu compte de ne pas avoir bien saisie la question.
L'insertion de style="vertical-align:middle" dans la balise IMG devrait la centrer verticalement.. Non ?
Dernière édition par Eric 2A le Mar Mar 21, 2006 12:24, édité 1 fois.
-

phpmikedu83 - WRInaute accro

- Messages: 1281
- Inscription: Sam Aoû 06, 2005 7:34
madx a écrit:Essayes :
margin-left:auto;
margin-right:auto;
ça marche sous tout ce qui n'est pas IE ( encore faut il avoir défini width )
mais pour IE, il faut effectivement le text-align dans l'élément parent
phpmikedu83 a écrit:madx a écrit:Essayes :
margin-left:auto;
margin-right:auto;
ça marche sous tout ce qui n'est pas IE ( encore faut il avoir défini width )
mais pour IE, il faut effectivement le text-align dans l'élément parent
Ca fait longtemps qu'IE n'a plus besoin de passer par ce bug d'IE5 pour ça, il suffit jute d'avoir une dtd correcte pour sa page (4.01 strict de préférence) pour que ça marche.
-

phpmikedu83 - WRInaute accro

- Messages: 1281
- Inscription: Sam Aoû 06, 2005 7:34
oberon a écrit:Ca fait longtemps qu'IE
Ca veut dire quoi: "ça fait longtemps" ???
POur moi, ça veut dire qu'il y a des ordis équipés de cet IE et qu'il faut s'en préoccuper...
Longtemps ça veut dire des années, 2001 pour être précis. Et moi je pense qu'au lieu de se "préoccuper" d'IE, il vaudrait mieux se préoccuper de l'état de ses connaissances en HTML/CSS, ça évite de faire du code crade et de sortir des bidouilles datant de 1998 pour régler des problèmes qui n'existent plus depuis l'invention du doctype switching.
Enfin bon, s'il y a encore des masos qui font des pages sans DTD comme à l'époque d'IE4 alors que toutes les versions d'IE utilisées actuellement se comporte presque correctement quand on fait du vrai html...
Ah oui, pour info IE7beta 2 vient de sortir, j'ai pas testé ce cas précis mais il y a 90% de chances que la bidouille du text-align ne marche plus du tout avec cette version.
Enfin bon, s'il y a encore des masos qui font des pages sans DTD comme à l'époque d'IE4 alors que toutes les versions d'IE utilisées actuellement se comporte presque correctement quand on fait du vrai html...
Ah oui, pour info IE7beta 2 vient de sortir, j'ai pas testé ce cas précis mais il y a 90% de chances que la bidouille du text-align ne marche plus du tout avec cette version.
-

phpmikedu83 - WRInaute accro

- Messages: 1281
- Inscription: Sam Aoû 06, 2005 7:34
oberon a écrit:Longtemps ça veut dire des années, 2001 pour être précis. Et moi je pense qu'au lieu de se "préoccuper" d'IE, il vaudrait mieux se préoccuper de l'état de ses connaissances en HTML/CSS, ça évite de faire du code crade et de sortir des bidouilles datant de 1998 pour régler des problèmes qui n'existent plus depuis l'invention du doctype switching.
Enfin bon, s'il y a encore des masos qui font des pages sans DTD comme à l'époque d'IE4 alors que toutes les versions d'IE utilisées actuellement se comporte presque correctement quand on fait du vrai html...
Ah oui, pour info IE7beta 2 vient de sortir, j'ai pas testé ce cas précis mais il y a 90% de chances que la bidouille du text-align ne marche plus du tout avec cette version.
Enfin, moi ce que j'en vois, c'est que la dernière fois que j'ai fait un design avec la même problématique, sur IE6 et avec une DTD XHTML 1.0 transitional, et bien j'avais besoin de passer par ce subterfuge spécialement pour IE, voilà...
phpmikedu83 a écrit:Enfin, moi ce que j'en vois, c'est que la dernière fois que j'ai fait un design avec la même problématique, sur IE6 et avec une DTD XHTML 1.0 transitional, et bien j'avais besoin de passer par ce subterfuge spécialement pour IE, voilà...
C'est bien ce que je dis, avant de chercher des bidouilles il faut que tu apprennes les bases :
<!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>
<title>centre</title>
<style type="text/css">
#page {
width:400px;
border:1px solid black;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="page">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</body>
</html>
11 messages • Page 1 sur 1
Formation recommandée sur ce thème :
Formation Référencement naturel Google : apprenez une méthode efficace pour optimiser à fond le référencement naturel dans Google de façon durable... Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.
Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.
Lectures recommandées sur ce thème :
- Google crawle les fichiers CSS
- Le vainqueur du design WRI 2005
- Concours de design 2005 de WRI
- Google ouvre son 2nd centre de R&D hors US à Zurich
- Changement de design de WRI
- Concours Alsa-WRI : changement de design
- Design de WRI version 3
- Liste des Data Centers de Google (centres de données) avec leurs IP
- Afficher le PageRank en entier dans Firefox (barre d'outils Google)
- 25 astuces pour optimiser son blog
Consultez la description détaillée des produits ou services de Google suivants : Google Webmaster Central
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités




le forum