design au centre avec CSS

Consultez la formation au référencement naturel Google de WebRankInfo / Ranking Metrics


sim100
WRInaute accro
WRInaute accro
 
Messages: 1280
Inscription: Dim Fév 02, 2003 18:45

design au centre avec CSS

Message le Mar Mar 21, 2006 10:08

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


French Dread
WRInaute accro
WRInaute accro
 
Messages: 1982
Inscription: Mer Mai 07, 2003 10:04

Message le Mar Mar 21, 2006 10:14

Dans IE il faut utiliser text-align: center dans l'élément parent il me semble


Aquarius
WRInaute impliqué
WRInaute impliqué
 
Messages: 447
Inscription: Lun Nov 08, 2004 19:37

Message le Mar Mar 21, 2006 10:16

French Dread a écrit:Dans IE il faut utiliser text-align: center dans l'élément parent il me semble


Exact, il me semble aussi.

madx
WRInaute impliqué
WRInaute impliqué
 
Messages: 303
Inscription: Jeu Juin 19, 2003 10:18

Message le Mar Mar 21, 2006 11:12

Essayes :
margin-left:auto;
margin-right:auto;

Eric 2A
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 147
Inscription: Dim Fév 26, 2006 12:00

Message le Mar Mar 21, 2006 11:18

Pour les backgrounds, il faudrait voir :

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
WRInaute accro
 
Messages: 1281
Inscription: Sam Aoû 06, 2005 7:34

Message le Mar Mar 21, 2006 12:10

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 ;-)

oberon
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 154
Inscription: Ven Sep 26, 2003 17:57

Message le Mer Mar 22, 2006 3:42

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
WRInaute accro
 
Messages: 1281
Inscription: Sam Aoû 06, 2005 7:34

Message le Mer Mar 22, 2006 8:20

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...

oberon
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 154
Inscription: Ven Sep 26, 2003 17:57

Message le Mer Mar 22, 2006 19:33

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.


phpmikedu83
WRInaute accro
WRInaute accro
 
Messages: 1281
Inscription: Sam Aoû 06, 2005 7:34

Message le Mer Mar 22, 2006 20:20

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à...

oberon
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 154
Inscription: Ven Sep 26, 2003 17:57

Message le Mer Mar 22, 2006 20:58

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>


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 :



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités