28172 sujets

CSS et mise en forme, CSS3

Margin négatif et choix des unités pour le positionnement

Bonjour, je débute en css et j'ai vu sur une template que le créateur avait positionné sa bannière avec ce code,

#banner {
	width: 900px;
	position: absolute;
	left: 50%;
	margin-left: -450px;
	z-index: 10;
	}


pourriez vous m'expliquer pourquoi
"left: 50%"
et
"margin-left: -450px" ?


Pour le left: 50% je ne comprend trop à quoi il sert, car j'ai modifier le code en supprimant
le left:50% et en modifiant les px du magin-left et j'obtiens le même résultat...

En général je suis un peu perdu quand au choix des unités (px,%,em etc.) dans le positionnement Smiley rolleyes !
Ici par exemple le gars choisi left 50% et pourquoi pas par ex. left: 350px?

Qu'est ce qui justifie un choix d'unité en fait?
Est ce que certaines unités sont à privilégiés en fonction des cas?

Juste une dernière question qui va peut-être vous paraitre idiote...
Quand je choisi comme ici 50%, c'est 50% par rapport à quoi? lol

Merci d'avance
Salut,

c'est une technique qui sert à centrer un conteneur... mais elle n'est pas recommandée car si le bloc sort du viewport (par exemple lorsque l'on redimensionne la fenêtre) le bloc est alors inaccessible.
En gros il demande à l'objet de se placer à 50% en left, c'est à dire au milieu exact de la fenêtre sur l'axe horizontal. A ce moment-là, la bannière est positionnée de façon à ce que son bord gauche soit pile poil centré. Comme l'image fait 900px de large, il la redécale vers la gauche de 900/2, soit 450px. Du coup l'image est effectivement centrée, mais comme le dit Heyoan c'est une technique foireuse. Lui préférer un margin:0 auto qui donne résultat équivalent mais plus fiable.
Arsene a écrit :
Lui préférer un margin:0 auto qui donne résultat équivalent mais plus fiable.

Sauf que cette technique ne fonctionne pas avec les div positionnés en absolu.
Voui c'est vrai, j'avais pas fait gaffe au absolute... voir si il sert à quelque chose ou pas (probablement à rien pour une bannière de pub en tête de flux)
Agylus a écrit :
Sauf que cette technique ne fonctionne pas avec les div positionnés en absolu.

Sauf qu'ici le positionnement absolu fait partie de la technique de centrage avec marge négative (sinon le left: 50% n'a aucun effet...). Donc si on change de technique, on peut virer marge négative, left:50% ET positionnement absolu.

Bien sûr si le positionnement du reste du contenu était fait sans prendre en compte cet élément, ça peut avoir des conséquences.

Il se peut aussi que le positionnement absolu était utilisé ici pour placer en tête de page une bannière située, dans le code HTML, en fin de code.
Bonjour à tous, sorry pour le retard mon modem à décider de prendre une retraite bien méritée (RIP)...

je vous apporte plus de précision par rapport au sujet grâce à cette petite maquette globale du site.

upload/20362-sitecalmaq.gif


Dans le CSS ce qu'il appelle "banner" est en fait le header et celui-ci est déplacé de 50px vers la gauche par rapport au menu et content.

En fait dans le code le header est une simple image (sans conteneur) avec l'id "banner" et le css donné en haut du post.
C'est une technique bizarre il me semble?

Qu'elle serait le bon moyen d'envisager ce montage pour garder le header décalé vers la gauche?

merci pour vos réponses
foxprox a écrit :
C'est une technique bizarre il me semble?

À vue de nez, c'est ce que l'on appelle du bricolage.

foxprox a écrit :
Qu'elle serait le bon moyen d'envisager ce montage pour garder le header décalé vers la gauche?

Le header décalé vers la gauche, ou le contenu décalé vers la droite, hum?
Parmi les possibilités:
- marge à gauche sur le contenu (ben oui...);
- marge négative à gauche sur le header;
- positionnement relatif pour décaler légèrement le header.

Il y en a quelques autres, mais ce sont les plus évidentes.
On peut aussi ajouter un niveau d'imbrication, un bloc de la largeur du header + l'équivalent de ce qui dépasse à gauche et avec un margin:auto. Et dans ce bloc on positionne le contenu à gauche.

Mais la solution du positionnement relatif reste la meilleure il me semble.
J’ai trouvé une bonne solution ^^ laisser tomber la template de bricoleur... et repartir sur la base du gabarit nº 5 de la formation html&css de Florent V. depuis ce matin j'ai réussi à intégrer presque totalement mon design et est grâce au gabarit, elle est compatible avec Ie6... Smiley biggrin

ça me donne le sourire et pas trop de maux de tête!

ps: concernant le dvd de formation html&css de Florent V. je ne pourrais que la recommander au débutant en css et aux personnes qui comme moi était des kings du
<table>, <tr> et <td> et quoi souhaite se renouveler pour enfin réussir à créer un site aux normes

Merci pour ta formation, elle m'a appris beaucoup en très peu de temps! Smiley cligne
Sujet clos
Aller à