28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mettre un bloc au centre d'une page

Bonjour,

ça peut vous paraître super simple comme ça mais perso je suis extrêmement nul car j'ai beau suivre de nombreux tutos qui en parle (alsacréations, openclassrooms, etc.), je n'arrive toujours pas à centrer un bloc sur une page.

Ce que je veux faire, c'est une sorte de splashscreen, d'écran d'accueil lorsque l'on se rend sur mon site, une image se met au centre, et dans cette image je veux mettre plusieurs liens : un lien pour entrer, et d'autres liens, un peu à l'image de ce site : http://web.archive.org/web/20020530095027/http://www.contactfm.com/

J'avais pensé à mettre l'image en question en fond d'écran, comme dans l'exemple ci-dessus, elle contiendrait l'intégralité de la page (sous forme d'image donc), ensuite il suffirait de mettre des spacer.gif redimensionnés et bien placés au niveau de l'endroit où la personne doit cliquer (pour reprendre l'exemple ci-dessus au niveau du logo et au niveau de "mentions légales"). Sauf que le problème c'est qu'en mettant l'image en background pas de soucis pour la mettre au centre, mais après pour les liens c'est impossible (ils sont toujours en haut à gauche), et les mettre en dur (position absolute) c'est impossible puisque leur emplacement varie suivant la résolution de l'écran de l'utilisateur (et sont donc décalés par rapport à l'endroit où ils devraient être)

Avez-vous une autre solution parce que j'ai l'impression que ce que je veux faire c'est totalement impossible, bien que l'exemple ci-dessus démontre l'inverse.

Je cherche une personne qui pourra m'aider à résoudre cette équation insoluble, ou qui me donnera une autre solution pour parvenir au but souhaité.

Merci d'avance !
Bonjour,

Internet Explorer 4.0, Netscape 4.0, Player Flash 5, splashscreen, spacer gif....

upload/12813-image.jpeg ?
(Rien de méchant dans mon propos Smiley cligne )

À première vue, tout cela ne me semble pas être une très bonne idée...
Peux-tu nous montrer ce que tu as déjà tenté au niveau code ?
Modifié par 6l20 (13 Nov 2015 - 07:29)
oui je sais bien Smiley smile

l'idée de faire un splashscreen, c'était pour faire un truc rétro justement Smiley cligne

en fait pour faire simple, ce que j'aimerais c'est réussir à placer un bloc au centre d'une page, qu'il soit centré aussi bien horizontalement (ça ça fonctionne parfaitement) que verticalement (ça par contre ça fonctionne pas du tout Smiley decu )

je n'ai pas grand chose à te montrer niveau code puisque ça ne fonctionne pas malheureusement Smiley bawling
Tu donnes une largeur et une hauteur à ton élément, tu le mets en position: absolute avec un top et un left de 50 vh et de 50 vw (ou de 50%), un margin-top équivalent à la moitié de sa hauteur et un margin-left équivalent à la moitié de sa largeur.

Exemple: 

p {
	background-color: orange;
	width: 400px;
	height: 200px;
	position: absolute;
	top: 50vh;  /* ou 50% */
	left: 50vw; /* ou 50% */
	margin-top: -100px;
	margin-left: -200px;
}
Ou encore, sur le principe dont ceci découle :
body{margin:0}
#global{display:block;position:relative;width:900px;padding:10px;left:50%;margin-left:-460px}
qui positionne l'élément id="global" au centre de n'importe quelle fenêtre, IE v.5.5 -> v.8 ...

Ensuite, de définir dans une image des area de la map à cliquer par href="_" pour activer des liens externes à la page, ou si besoin était d'exécuter des fonctions javascript (mais alors avec le reliquat nohref (toujours obligatoire et pour conserver le cursor:pointer) : onclick="maFonction()" ) ; plusieurs pistes ici :
http://www.w3schools.com/tags/tag_area.asp
http://www.w3schools.com/tags/att_area_nohref.asp
Modifié par pictural (13 Nov 2015 - 19:49)
pictural a écrit :
Ou encore, sur le principe dont ceci découle :
body{margin:0}
#global{display:block;position:relative;width:900px;padding:10px;left:50%;margin-left:-460px}
qui positionne l'élément id="global" au centre de n'importe quelle fenêtre, IE v.5.5 -> v.8 ...

Ensuite, de définir dans une image des area de la map à cliquer par href="_" pour activer des liens externes à la page, ou si besoin était d'exécuter des fonctions javascript (mais alors avec le reliquat nohref (toujours obligatoire et pour conserver le cursor:pointer) : onclick="maFonction()" ) ; plusieurs pistes ici :
http://www.w3schools.com/tags/tag_area.asp
http://www.w3schools.com/tags/att_area_nohref.asp


Cela ne prend pas en compte l'alignement vertical, quand a w3schools , site peut fiable au vu du nombre de page et d'infos obsolète depuis des lustres Smiley cligne que je n'ose le mettre en lien .

méthode compatible IE5 et tous, pour les nostalgiques: http://codepen.io/anon/pen/RWEYmb
Modifié par gc-nomade (13 Nov 2015 - 20:56)
Sujet clos
Aller à