Geckozone

Vrai ou faut?

On ne peut pas centrer un élement qui est en position:absolute, parce qu'en précisant le "top" et "left", on lui donne une position fixe.

C'est bien ça?

Je pense que tu dois pouvoir en appliquant des pourcentages.
Regarde la condition suivante:
Si: 2 * left (%) + width de ton conteneur (%) = 100%
Alors je pense que ton élement est centré horizontalement !
Et puis tu fais la même chose pour le centrage vertical...

Tu peux également le centrer avec une valeur en px mais en cas de résolution d'écran différente de la tienne ou de passage en plein écran ça ne sera plus centrée.
En tout cas spécifier une position pour un élément en position:absolute ne le fait pas passer en position:fixed.

Tu peux le centrer en utilisant les propriétés left et right conjointement, pour les blocs en position fixe ou absolue. Mais évidemment sous IE

De même la propriété bottom te permet de l'aligner en bas de l'écran.

Merci, je m'amusais à faire un micro site sur Star Wars, il y a pas beaucoup de contenu c'est juste pour la pratique.

Voici l'original: http://www3.sympatico.ca/dachou29/starwars/

Comme vous pouvez le voir cliquer sur next, back ou home fait un peu débutant et à la longue Y'EN A MARRE!! Le tout est positionner dans des tableaux

(pour l'instant). Je demander conseil ici et la et en définitive un menu serais de mise.

Donc sur Alsacreation (merci Calimo), j'ai voulu tester un menu horizontale déroulant, en effet Calimo m'a influencer

Alors voila al nouvelle page (test) avec le menu: http://www3.sympatico.ca/dachou29/starw ... extest.htm. Le menu est en haut de la page sauf que....

Alors sachant que:

Alsacreation a dit:

En effet, le positionnement absolu ou relatif a des désavantages du fait de sa rigidité : il ne permet pas (ou difficilement) l'adaptation du site aux différentes résolutions la plupart du temps.

Attention cependant : cette rigidité n'est que fictive et due aux valeurs fixes données en général par les logiciels comme Dreamweaver. On peut très bien positionner en absolu en pourcentage ou en em. On peut également très bien centrer un site avec des positions absolues. Il faut simplement comprendre comment il fonctionne et ne pas se contenter des positionnements "à la dreamweaver".

Lorsqu'il est en position absolue ou relative, le bloc est dit "positionné". Il est retiré du "flux" du code html : son positionnement sera le même quelle que soit l'emplacement de la balise dans le conteneur. Le bloc est placé par rapport à son conteneur s'il est lui-même positionné, ou alors par rapport à la page entière (body).

En absolue, le bloc est généralement placé à l'aide des propriétés "top" et "left" par rapport au coin supérieur gauche du conteneur. Si les valeurs top et left sont inexistantes, le bloc apparait là où il est déclaré ce qui peut servir pour placer correctement dans la page des éléments superposés sans avoir de zone vide crée comme avec les positions relatives.

J'essais de le positionner en haut de manière "ergonomique", en bref que ça fasse du sens

Des idées pour un intermédiaire passionné?

Pas mal !
Bon, il n'y a une chose que je ne comprend pas, c'est pourquoi tout la page est décalée

Je ne vois pas ce qui peut la rendre plus large que la fenêtre

...
Ah si, tiens ! Tu as mis width:100%;, donc le bloc .menu (au fait tu pourrait en faire un #menu, il n'y en aura jamais 2

) fait la largeur de la fenêtre, mais tu le décales de 10% avec right:10%. Il faut mettre width:80%

Un petit test... et ça marche !

Sinon c'est pas mal, ça se redimentionne assez bien, même si en haute résolution le menu sera décalé à gauche. Petite remarque : les onmouseover et onmouseout il suffit de les mettre sur le <dl> sinon ça fait tout clignotter

Sinon, petite remarque pour la page suivante : tu pourrais utiliser leslistes de définitions non ? Ok, ok, je brûle les étapes

calimo a écrit :Tu as mis width:100%;, donc le bloc .menu fait la largeur de la fenêtre, mais tu le décales de 10% avec right:10%. Il faut mettre width:80% Un petit test... et ça marche !

Merci, j'ai mis width:90% et left, right: 10%

calimo a écrit : Petite remarque : les onmouseover et onmouseout il suffit de les mettre sur le <dl> sinon ça fait tout clignotter

Ils sont déjà sur <dl>:

Code : Tout sélectionner

<div class="menu">
	<dl onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
		<dt><a href="#">Menu 1</a></dt>
			<dd id="smenu1"  onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
				<ul>
					<li><a href="#">Sous-menu 1.1</a></li>
					<li><a href="#">Sous-menu 1.2</a></li>
					<li><a href="#">Sous-menu 1.3</a></li>
				</ul>
			</dd>
	</dl>.....
</div>

Merci encore pour ton aide.

Edit: Tu veux dire les mettre seulement sur le <dl> et pas sur <dd> aussi?

psyco_thug a écrit :Edit: Tu veux dire les mettre seulement sur le <dl> et pas sur <dd> aussi?

Exact, tu n'a rien à déplier dans les <dd> non ?

psyco_thug a écrit :Merci, j'ai mis width:90% et left, right: 10%

Ce qui fait un total de 110 %

calimo a écrit :Ce qui fait un total de 110 %

Oui en effet, en 800x600 avec 90%, 10%, 10%:
http://www3.sympatico.ca/dachou29/Sanstitre1.jpg

et 800x600 avec 80%, 10%, 10%:
http://www3.sympatico.ca/dachou29/Sanstitre2.jpg

Ça s'appelle "Les mystères du Web"

Dans le body j'ai mis margin 10% 0 0 0, un lien

Ça n'a rien de mystérieux ! C'est juste que ton menu est plus large que les 80% que tu lui donne

Je ne crois pas que "top" s'occupe des marges... même si j'ai toujours cru qu'il devait, dans la pratique il ne le fait pas.

En effet je viens de trouver le mouchard:

Code : Tout sélectionner

.menu dl {
float: left;
width: 9.5em;
}

J'ai mis width:9.5em, il y avait 10em à l'origine.

Je te conseille d'installer l'extension WebDevelopper. Là tu pourra faire Souligner > Les éléments de type bloc, et ainsi tu verra exactement la position de ton menu, et tu verra tout de suite qu'il n'est pas assez large pour tout placer. Une idée serait de définir les .menu dl non pas en em mais en % (tu en as 4, ça peut faire 20% pour chaque) ; comme ça ils s'adapteront mieux à la résolution et ne passeront pas à la ligne (mais attention quand-même aux débordements du texte).

Dernière chose, plutôt que overflow:scroll, tu pourrait mettre overflow:auto, et ainsi les scrollbars ne viennent que si elles sont vraiment nécessaires

Geckozone

Petite confirmation svp

Petite confirmation svp