CSS : Pb de centrage horizontal résolu

[milo]

Bonjour à tous,

Pour ma 1e intervention sur le hub (une communauté ), je fais part de la manière dont j'ai résolu mon pb de centrage horizontal.

En fait je souhaite réécrire le design de mon site en full css -> voilelegere.com

Comme vous pouvez le voir le texte dans la barre de menu est centré horizontalement (Accueil | Actualité | ...) et en CSS y'a pas de propriété pour aligner verticalement du texte dans un bloc .

Je suis tombé par hasard sur le très bon article sur les portes coulissantes (en me baladant sur le hub je crois ) et je l'ai utilisé à ma sauce.

Voici mon code CSS:

...

#menu {
	width:100%;
	background: #e5eaf0 url('fondMenuHaut.gif') repeat-x top;
	text-align:center;
	padding-top:7px;
}

#menu2 {
	width:100%;
	background: url('fondMenuBas.gif') repeat-x bottom;

	padding-bottom:7px;
}

...

Et l'utilisation en html :

...

  <div id="menu">
  	<div id="menu2">
    <a href="#" title="Accueil">Accueil</a> | <a href="#" title="Actualité">Actualité</a>
  	</div>
  </div>

...

Explication rapide : un 1er calque avec l'image du haut en fond, fixée en haut du calque et répétée horizontalement. Ce calque a un espacement supérieur de 7px (pour moi)

Un 2e calque est imbriqué, avec pour fond l'image du bas, fixée en bas et répétée horizontalement. Ce calque a un espacement supérieur de 7.

En plus avec cette technique le fond du menu s'adapte automatiquement à la taille de la police, contrairement au html

css powaaaaaaa !

[Dan]

Bonjour Milo et bienvenue a bord du Hub !

Merci pour le que tu adresses à la communauté du Hub.

C'est grâce à des membres tels que toi, qui n'hésitent pas à partager leurs connaissances qu'elle en est là, et espère bien progresser encore.

Bonne astuce css ! Elle trouvera très certainement "acheteur" ici

Dan

PS: j'ai pris la liberté d'éditer ton post pour changer les marqueurs CODE en HTML. Ca ne change rien pour les css, mais le code HTML se retrouve coloré, ce qui est plutôt sympa et aide la lecture.

[Monique]

Bonjour milo,

bienvenue sur le Hub

Ton entrée sur le Hub est de bonne augure quant à ta participation et quand tu auras lu ma signature, tu comprendras pourquoi j'y suis particulièrement sensible.

Je viens de faire un tour sur ton site et j'ai eu toutes les peines du monde pour m'en arracher, les articles sont très riches et intéressants (mais attention, quelques liens ne fonctionnent pas notammant à propos des 420 et des Europes)

PS : j'ai fait du 420 dans ma lointaine jeunesse

[milo]

Salut Dan et Monique, merci pour votre accueil.

Sympa de retrouver d'autres voileux (ou ex) dans des domaines où on ne s'y attend pas !

Monique, peux-tu me préciser (par MP peut-être pour ne pas partir hors-sujet) les liens brisés ? parce que j'ai fait le tour des articles et je n'en ai pas trouvé.

[Guest exabs]

Bonsoir,

Cela reste malheureusement un "centrage" artificiel puisqu'il faut indiquer la marge haute et la marge basse...

[Fight]

Bonjour,

une petite question, pourquoi ne pas avoir utilisé une liste comme dans l'exemple que tu donne au lieu d'avoir 2 div imbriqué ?

[milo]

Oui, effectivement, c'est un centrage artificiel surtout adapté aux barres de ce type.

En fait c'est l'imbrication des 2 div (les "portes coulissantes") qui permet de centrer (enfin d'avoir la même marge en haut et en bas).

J'ai essayé avec les listes mais j'ai le symbole "|" entre chaque item, et je ne voyais pas comment l'intégrer proprement.

[Beatnykk]

encore une fois oui, okay. le site est extra, le design clean et dosé impec. mais pourquoi faire du 800x600 ??

en quoi travailler en pourcentages empêche-t-il d'avoir un design aussi bon, et de plus extensible à toute résolution ?

décidèment soit j'ai rien compris, soit tout le monde s'entête à la mode "d'il y a 10 ans" ... et pas "de chez nous"

[milo]

Salut Beatnykk

J'ai déjà essayé, dans les versions précédentes du site, de faire du %.

Je suis revenu à la dimension fixe parce que j'en avais marre de voir toute ma mise en page chamboulée suivant la résolution, et je trouve qu'un aspect "élastique" est moins agréable qu'un aspect fixe. Parce qu'il y a encore beaucoup de 800*600, mon design s'y est adapté, mais lorsqu'ils auront quasiment disparus, je passerai en 1024 fixe. Pour info je crois qu'une étude a montré qu'il y avait encore ~40% d'internautes en 800*600 (cela m'a d'ailleurs étonné - ainsi que les 13% ayant désactivé le javascript).

[Guest exabs]

décidèment soit j'ai rien compris, soit tout le monde s'entête à la mode "d'il y a 10 ans" ... et pas "de chez nous" 

Salut,

On a déjà répondu dans le sujet

http://www.webmaster-hub.com/index.php?showtopic=1216

ou tu critiquais les choix des webmaster travaillant en 800x600.

Montre nous un site esthétique de 800x600 à 1600x1200 et on en reparle.

40% de 800x600 (ce sont aussi les stats de mes sites), c'est énorme et il faudra des années avant de passer en 1024x768

Modifié 8 Janvier 2004 par absoluteweb

[milo]

J'ai essayé avec les listes mais j'ai le symbole "|" entre chaque item, et je ne voyais pas comment l'intégrer proprement.

J'ai trouvé une solution apparente au problème, ici : en utilisant li:before et li.first:before.

Où peut-on trouver une liste complète des propriétés CSS ?

[milo]

J'aime les monologues

J'ai trouvé la réponse à ma question ici.