Petite confirmation svp

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
psyco_thug
Lézard vert
Messages : 132
Inscription : 25 févr. 2004, 17:33

Petite confirmation svp

Message par psyco_thug »

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? :D
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

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...
Cordialement.
Guilhem.
SB
Varan
Messages : 1095
Inscription : 05 mars 2004, 18:38

Message par SB »

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.
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

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.
psyco_thug
Lézard vert
Messages : 132
Inscription : 25 févr. 2004, 17:33

Message par psyco_thug »

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 :oops: (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 :P

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.... :roll: 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 :wink:

Des idées pour un intermédiaire passionné? :D
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

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 :wink: ) fait la largeur de la fenêtre, mais tu le décales de 10% avec right:10%. Il faut mettre width:80% :wink: Un petit test... et ça marche ! :D
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 :wink:

Sinon, petite remarque pour la page suivante : tu pourrais utiliser leslistes de définitions non ? Ok, ok, je brûle les étapes :lol:
psyco_thug
Lézard vert
Messages : 132
Inscription : 25 févr. 2004, 17:33

Message par psyco_thug »

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% :wink: Un petit test... et ça marche ! :D
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 :wink:
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. :D

Edit: Tu veux dire les mettre seulement sur le <dl> et pas sur <dd> aussi?
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

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 % :wink:
psyco_thug
Lézard vert
Messages : 132
Inscription : 25 févr. 2004, 17:33

Message par psyco_thug »

calimo a écrit :Ce qui fait un total de 110 % :wink:
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" :lol:

Dans le body j'ai mis margin 10% 0 0 0, un lien :?:
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

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

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

Message par psycothug »

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. :)
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

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 :wink:
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité