Centrer verticalement et horizontalement

bonjour je souhaiterai centrer verticalement et horizontalement sur tout mes navigateurs

puis décaler le contenue de 300px sur la droite pour ne pas prendre en compte le menu lors du centrage horizontale (c'est la mon plus gros problème)

puis faire en sorte que mon contenu ne passe ni devant ni derrière mon menu, qu'il bloc à son niveau droit lorsque la page se rétrécie à sa min-width


merci

Bonjour,

où est votre codepen/fiddle de test, du code, une page en ligne au pire ? Non personne ne va le faire à votre place...
Avez-vous cherché et trouvé un tuto sur le sujet ? Le 1er résultat avec ma requête ramène sur alsacreations.com...

voir la réponse plus bas merci à @AH_creation_site
Modifié par kodjoed (20 Aug 2013 - 15:39)

Salut,

Voici peut-être quelques pistes, je ne vois vraiment de solution simple à première vue.
Si dans un état classique ta div globale fait 1200 pixels par exemple, elle contient ton menu à 300px à gauche et ton contenu à 900px à droite. Globale et contenu sont destinés à changer de taille. Les deux div dans globale sont en positions relatives, avec des floats.

En toute logique pour centrer globale en position relative, avec sa largeur, c'est margin-left et margin-right en auto, mais ça prend en compte le menu dans ce cas.

Tu peux alors ajouter 300 pixels de plus à droite du contenu, à l'intérieur de globale pour avoir une largeur globale à 1500px par exemple. Le contenu est alors centré, le menu décalé à gauche. Si ta div contenu et globale sont flexibles ou avec un min / max -width elles pourront s'adapter en fonction de la taille de l'écran, pour des tailles plus petites ou plus grandes. On gardera toujours cette marge supplémentaire "vide" de 300 à droite pour le centrage du contenu et faire l'équilibre avec le menu de l'autre côté, ce qui peut poser problème en petite taille. On pourrait faire le test en javascript pour savoir quand afficher ou non cet espace vide à droite.

Eventuellement avec un peu plus de javascript, si tu place ta div globale, contenu et menu dans leurs positions initiales avec la largeur minimum. Par exemple 1000 pour globale, 300 pour menu et 600 pour contenu, globale est fixé à gauche. Lorsque la taille de l'écran est supérieure tu fais le test en javascript pour déterminer si la place est suffisante pour éventuellement agrandir ta div contenu et globale et surtout placé la marge à gauche de menu équivalente à (fenêtre-contenu)/2 -300 du menu, si oui tu génère ta marge à gauche en fonction de la taille de la fenêtre et du contenu.
En espérant que ça t'aide.
Modifié par AH_creation_site (19 Aug 2013 - 11:21)

Bonjour,

Le premier qui s'énerve c'est toi ; alors que le conseil c'est que tu nous au moins un bout de code HTML pour qu'on puisse t'aider au mieux ; en plaçant les attributs au bon endroit et gniagniagnia.

Sinon y'a la méthode avec les "display : table-cell" mais je me ferais pas plus chié que çà vu ton emballement ...

AH_creation_site c'est parfait grâce à toi j'ai réussi . C'est ce que j'appelle une bonne piste car je tournais autour de cette méthode sans trop y croire !!!
Modifié par kodjoed (20 Aug 2013 - 15:40)

Content que tu aies pu trouver un solution.
N'hésites pas à expliquer le principe que tu as mis en oeuvre pour résoudre ton problème, ça pourra servir à d'autres.

@kodjoed : pour commencer cela fait un certain temps que je suis sur Alsacréations; que je demande de l'aide et que j'aide les autres lorsque je le peux. Et cela fait longtemps aussi que je croise certains membres et dont notre cas notre cher @Felipe (qui dans son message n'avait rien d'agressif mais un rappel à l'ordre, car si tu ne le sais pas encore il y a une charte de bonne conduite).

Tu demandes de l'aide et envoie boulet ce que tente de t'aider. Je n'ai pas besoin d'en démontrer plus vu les jugements rapides que tu fais sur les gens ...

Pour finir je suis UNE internaute et pas à la revoyure sur un autre post vu ta négligence pour l'être humain.
Modifié par mini-truc (20 Aug 2013 - 11:33)

Voir la réponse plus bas
Modifié par kodjoed (20 Aug 2013 - 15:42)

Je crois que tu devrais arrêter les forums çà te monte sérieusement à la tête...

J'aurais bien voulu répondre à chacune de tes citations mais çà me prendra beaucoup trop de temps pour un résultat incertain.

Bonne continuation.

Donc pour ceux que ça intéresse j'ai utilisè la méthode de @AH_creation_site :

j'ai tout simplement centrè verticalement mes deux colonnes qui étaient centrè sur la même ligne puis ajoutè un padding-left à ce centrage comme ceci :

#vertical {
padding-left:300px; 
position: absolute; 
top: 50%; 
left: 0%; 
width: 100%; 
height: 600px; 
margin: -300px 0 0 -0px; 
}

puis j'ai ajoutè ces 300px à ma div comportant mes deux colonnes

.col-1, .col-2 { display: block; width:100%;  max-width: 1340px;}
}

Modifié par kodjoed (20 Aug 2013 - 23:38)

Pour les attaques perso t'es prié de me les envoyer par message privé ; je pense que tu pourris à toi seul ton post et qu'il y a peut d'intérêt ici pour les personnes qui peuvent rencontrer le même problème que toi.

Excuse moi d'avoir répondu à ton premier ; j'aurais du tracer ma route comme tu dis...

mini-truc a écrit :
Pour les attaques perso t'es prié de me les envoyer par message privé

T'as vraiment envie d'en recevoir ? Parce que la règle ici c'est que personne n'en envoie à personne... Si le destinataire se plaint auprès d'un modo/admin ce sera évidemment le ban pour l'expéditeur.

mini-truc a écrit :
Excuse moi d'avoir répondu à ton premier ; j'aurais du tracer ma route comme tu dis...

Yep, à moins que tu aies du temps pour ça.

PS: j'ai lu la 1ère réponse qui m'était adressée mais pas les autres avant edit. J'ai le choix de prendre ces edits pour du maquillage ou pour des regrets a posteriori. Je vais choisir la seconde option.

Felipe a écrit :
T'as vraiment envie d'en recevoir ? ...

Il est facile d'ignorer les messages privés ; ce que j'aime pas c'est les attaques publics ; surtout sur un forum d'entraide c'est quand même regrettable

Felipe a écrit :
Yep, à moins que tu aies du temps pour ça.

Bah pas tellement, mais ce forum m'a tellement aidé quand j'ai commencé que du coup je me vois obligée de rendre l'appareil (quand je le peut) et surtout que je suis très têtue


Mais en effet je n'avais pas vu que les messages étaient modifiés ; mais le problème a été reglé en MP et sans insultes c'est promis

Du coup il n'y a plus d'intérêt à la présence de ses messages si tu peux les faire sauter je pense que cela sera bénéfique pour les autres personnes qui rencontrent ce problème