28172 sujets

CSS et mise en forme, CSS3

Problème de centrage_

Bonjour,
J'ai une question assez basique, mais je suis complétement bloqué la dessus...

Je fait un one-pager assez basique mais "scrollable" en hauteur et en largeur sur plusieurs milliers de pixels.
J'ai un titre et quelques information qui sont centrés au milieu de cette page mais je n'arrive pas à faire charger la page au milieu, cet a dire sur le titre et ces informations.
Quand ça load, la fenêtre s’ouvre en haut à gauche...

Quelqu'un aurait-il une solution ??

Merci beaucoup Smiley smile
Modifié par Benoit_Palop (15 Jul 2015 - 04:40)
Bonjour,

Selon moi, si tu souhaites garder tout ce que tu as déjà fait, le mieux serait d'utiliser jQuery.

Si j'ai bien compris, la taille en largeur et en hauteur est énorme mais le contenu sur lequel le visiteur doit arriver est pile au centre. Dans ce cas, c'est très simple.

J'ai aussi fait comme si ton contenu centré était un div avec l'id "#centre".
Normalement, cela fonctionne mais je n'ai pas eu le temps de tester le code Smiley lol 


$( document ).ready(function() {

    // Width et Height du body
    var $body_width = $('body').width();
    var $body_height = $('body').height();
    // Width et Height de la fenêtre, qui a la même taille que ton contenu au centre
    var $window_width = $(window).width();
    var $window_height = $(window).height();

    // Valeur pour le left
    var $left = ( $body_width - $window_width ) / 2 ;
    $('#centre').css('left', $left);

    // Valeur pour le top
    var $top = ( $body_height - $window_height) / 2 ;
    $('#centre').css('top', $top);

});


Bonne journée Smiley cligne
Benoit_Palop a écrit :
Merci pour ça...
Mais je suis tellement nulle que je ne sais pas ou je dois placer ça.

c'est cette page :
http://palopbenoit.com/theothers_bis.html

Penses-tu que tu pourrais jeter un œil au code source et me dire exactement ou je dois placer tout ça.
( la portion du code + le id )

Merci ! Smiley smile


Déjà, le jQuery, tu dois le charger. Tu trouveras comment le faire en quelques secondes sur le net.
Après, étant un script, tu dois mettre la portion de code entre les balises HTML "<script> </script>".
Les 2 scripts seront chargés tout à la fin du body (le chargement de jQuery d'abord évidemment).

Tu as bien placé l'ID Smiley cligne
Sujet clos
Aller à