28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrage vertical ?

Bonjour,

Je sais que ce sujet a déjà été abordé mais je ne trouve pas de réponses. J'ai un site en cours de développement, visible ici : http://studizy.lescigales.org

Mon <body> fait 100% de la hauteur du navigateur, et 750px minimum. Je voudrais centrer verticalement mon bloc "corps", c'est à dire celui contenant les carrés de la page d'accueil et après, le bloc orange au milieu, sur les autres pages.

J'ai voulu m'inspirer du design à 3 colonnes présenté sur le site (avec des flottants et des marges) mais je ne vois pas comment l'adapter verticalement. Mes blocs sont positionnés ainsi :
- Header en relatif (aucun changement, juste pour positionner mon menu en absolute dans ce bloc après)
- Corps avec des marges automatiques et une largeur de 529px
- Footer en absolu, à 0px du bas de la page + clear both (pour enlever les effets des flottants de la page d'accueil)

Mais, dans ce cas, je suis obligé de garder une hauteur fixe, là ou je voudrais n'avoir qu'un header et un footer de 100px de hauteur, et le reste qui s'adapte automatiquement avec une petite marge pour que ce ne soit pas "collé". Comment faire ?

Merci

EDIT : Après test, si je place mes éléments dans l'ordre dans lequel ils arrivent (en éliminant les position: absolute etc), j'obtiens ça : http://studizy.lescigales.org/ qui correspond à ce que je voudrais, mais dans ce cas, l'image de fond dépasse. Comment règler ce problème ?

L'image de fond est positionnée en CSS comme cela, c'est le meilleur moyen que j'ai trouvé pour qu'elle soit centrée et de taille correcte.
background:transparent url(bg.jpg) no-repeat scroll center center;

Modifié par Pod (12 Feb 2009 - 14:08)
Bonjour Pod,
Je ne comprends pas la fin de ton message:
a écrit :
mais dans ce cas, l'image de fond dépasse. Comment règler ce problème ?

Avec IE6, pas de "dépassement" d'image de fond (je ne peux pas visualiser avec d'autres navigauteurs). Tu peux préciser?

Autre chose: ton lien sur Conficius est erroné, il pointe vers
http://fr.wikipedia.org/wiki/Confucius!DOCTYPE%20html%20PUBLIC

Etrange, ce Confucius!DOCTYPE html PUBLIC Smiley ravi
Merci de m'avoir signalé le lien sur Confucius ^^ Ce satané notepad++ refuse de me changer des doctype (fonction rechercher - remplacer dans tous les documents ouverts, il m'a foutu un beau ...) Smiley fache

Sinon, pour le problème en lui-même, je n'ai pas pu tester sur IE6 ^^ Mais je te poste un screen de ce que j'obtiens sur IE7 et Firefox (c'est radicalement différent de IE6 je pense ^^) :
- IE 7 : http://images0.hiboox.com/images/0709/c780154811a9d32c8c401e9690710a12.jpg
- Firefox : http://images0.hiboox.com/images/0709/813db89e294acd6bbfe955d1334242f0.jpg
(le trait rouge représente la limite de la "zone de vue", la zone ou s'affiche réellement la page)

Merci

P.S. : Une autre solution, si le problème est insoluble tel qu'il est actuellement, serait de faire un "symétrique", avoir aussi un petit bout d'image (idéalement, de la même taille) au-dessus du header. Mais je préfèrerais réussir sans ...
P.P.S. : Mon écran, lorsque je prend ces screens est en 1680*1050. En 800*600 le problème disparait (obligé de scroller ^^). Toutes les résolutions intermédiaires sauf les résolutions des portables (1280*800 et 1280*768) présentent ce problème.
Modifié par Pod (12 Feb 2009 - 10:45)
Bonjour,

Pod a écrit :
Je voudrais centrer verticalement mon bloc "corps", c'est à dire celui contenant les carrés de la page d'accueil et après, le bloc orange au milieu, sur les autres pages.
Je passe en coup de vent, tu peux étudier la solution des marges négatives (l'info est tout en bas de l'article).
Désolé mais la technique des marges négatives ne peux pas être utilisée. Le problème vient du fait que mon body n'a pas de taille fixe mais à la hauteur de la fenêtre du navigateur.

Je viens de trouver une solution, en postant ce message ^^ ça à l'air de marcher, il faut encore creuser un peu. J'englobe tout mon site (donc les 3 blocs principaux header, corps et footer), dans un autre bloc, global. Au lieu de mettre l'image d'arrière plan sur le <body> je le mets sur ce bloc global. Résultat, ça marche pour la page d'accueil.

Après, il faut encore creuser un peu pour les autres pages, comme sur cette page par exemple, ou cela pose problème. Le problème vient de la hauteur minimale imposée au bloc, sans cette hauteur, je me retrouve avec 3 lignes de texte et donc une toute petite image.

Il faudrait donc réussir à :
- Imposer une hauteur minimale, tout en centrant le corps (marges en haut et en bas)
- Idéalement, faire en sorte que le site (et donc l'image et les blocs) occupent toute la hauteur de la zone visible (pas de bande blanche en dessous dans certaines résolutions).

Merci
Pod a écrit :
Désolé mais la technique des marges négatives ne peux pas être utilisée. Le problème vient du fait que mon body n'a pas de taille fixe mais à la hauteur de la fenêtre du navigateur.
A quel endroit dans l'article as-tu lu qu'il fallait une taille fixe pour <body> ? Smiley sweatdrop

Pod a écrit :
Je viens de trouver une solution, en postant ce message ^^ ça à l'air de marcher, il faut encore creuser un peu. J'englobe tout mon site (donc les 3 blocs principaux header, corps et footer), dans un autre bloc, global. Au lieu de mettre l'image d'arrière plan sur le <body> je le mets sur ce bloc global. Résultat, ça marche pour la page d'accueil.
Je ne suis plus sûr de bien comprendre ce que tu souhaites obtenir. J'ai peut-être lu un peu vite tes précédents posts, mais pour moi c'est pas très clair Smiley ohwell

Connais-tu un autre site qui reproduit la mise en page que tu recherches, ou peux-tu fournir un exemple graphique (un petit montage vite fait bien fait) ?
a écrit :
A quel endroit dans l'article as-tu lu qu'il fallait une taille fixe pour <body> ? sweatdrop


Je l'ai pas lu, je l'ai inventé ^^ Par rapport à mon problème à moi, il me faudrait une taille fixe.

a écrit :
Je ne suis plus sûr de bien comprendre ce que tu souhaites obtenir. J'ai peut-être lu un peu vite tes précédents posts, mais pour moi c'est pas très clair ohwell

Connais-tu un autre site qui reproduit la mise en page que tu recherches, ou peux-tu fournir un exemple graphique (un petit montage vite fait bien fait) ?

Alors, j'ai tout ça ^^ Je cherche un faire un site ressemblant à ceci :
- http://ringvemedia.com/ pour l'image extensible (redimensionner la fenêtre, l'image est redimensionnée entièrement en CSS)
- http://www.siteduzero.com/uploads/fr/files/153001_154000/153367.png -> l'idée de départ, mon premier croquis sur lequel je me base
- http://www.thehorizontalway.com/ -> pour le côté horizontal qu'aura surement mon site

Sinon, pour résumer, voici les objectifs que j'aimerais remplir :
- Site qui occupe toujours toute la zone visible (largeur et hauteur) et 750pixels de hauteur minimum (pour les petites résolutions)
- Header et Footer de 100px
- Image de fond qui occupe toujours la zone visible moins header et footer (soit 100% - 100px de haut et 100% de large) ou toute la zone (mais elle est alors masquée par le header et le footer, en partie)
- Corps de ma page avec des marges en haut et en bas afin qu'il ne colle pas et qu'il ne se superpose pas au header / footer

Le problème vient surtout du fait que je n'arrive pas à centrer le corps, comme on peut le faire facilement dans un design à 3 colonnes horizontales, le reste en découle. Je cherche donc un moyen efficace de centrer un bloc verticalement, sans connaitre sa hauteur (500pixels minimum) comme on le fait en repoussant un bloc central avec des marges horizontalement.

Merci
Modifié par Pod (12 Feb 2009 - 12:01)
a écrit :
Je l'ai pas lu, je l'ai inventé ^^
Ça fait plaisir Smiley sweatdrop

Pod a écrit :
- http://ringvemedia.com/ pour l'image extensible (redimensionner la fenêtre, l'image est redimensionnée entièrement en CSS)
Pour obtenir cet effet, il faut que l'image soit dans le code XHTML via la balise <img>, et pas en arrière-plan d'une <div> comme tu l'as fait (tu ne peux pas "étirer" une image d'arrière-plan en CSS).

Cette idée de mise en page est intéressante, mais franchement pas adaptée au site que tu souhaites réaliser et à tes compétences...

A ta place, je me contenterais de centrer horizontalement et verticalement ton arrière-plan (prévoir un fondu sur les extrémités de l'image pour les grosses résolutions, ou faire un - énorme - motif). Et ensuite, utiliser la technique des marges négatives pour centrer verticalement le bloc qui contient les vignettes...
Modifié par BeliG (12 Feb 2009 - 12:16)
a écrit :
Ça fait plaisir sweatdrop


Je voulais juste dire que j'avais lu l'article mais que quand j'ai essayé de le mettre en place pour mon site, cela ne marchait pas, sauf si j'avais une taille fixe (en pixels et non en %).

a écrit :
Pour obtenir cet effet, il faut que l'image soit dans le code XHTML via la balise <img>, et pas en arrière-plan d'une <div> comme tu l'as fait (tu ne peux pas "étirer" une image d'arrière-plan en CSS).

Cette idée de mise en page est intéressante, mais franchement pas adaptée au site que tu souhaites réaliser et à tes compétences...

A ta place, je me contenterais de centrer horizontalement et verticalement ton arrière-plan (prévoir un fondu sur les extrémités de l'image pour les grosses résolutions, ou faire un - énorme - motif). Et ensuite, utiliser la technique des marges négatives pour centrer verticalement le bloc qui contient les vignettes...

Ok, je vais essayer de revoir un peu le design et de repartir sur un css "propre".

Merci
Florent V. a écrit :

Centrage vertical non bidouillé:


Ca fait quand même mal au sac d'être obligé d'utiliser un tableau pour de la mise en page...
D'après l'article de Raphael, il semblerait que le problème des marges soit essentiellement pour Explorer Mac :
a écrit :
Préambule : Les marges négatives en CSS posent des problèmes sur Explorer Mac ainsi que divers problèmes lors du redimensionnement de la page (bords mangés, pas de barre de défilement horizontal quand on réduit la page, etc.). Il est donc fortement conseillé d'éviter cette méthode sauf si vous en maîtrisez les conséquences.

Je serai assez tenté de dire qu'on peut négliger ces utilisateurs-ci .... Parce qu'il me semble que pour utilise i.e, malgré tous les autres navigateurs qu'il ya sous Mac (et qui sont nettement mieux sur cet O.S), il faut quand même être sacrément maso Smiley lol
Maintenant si quelqu'un me sort des statistiques prouvant que la part de marché d'i.e 6 sous mac est encore très importante (sûrement à cause d'entreprise qui reste sous i.e6), et bien dans ce cas je m'inclinerai Smiley bawling
Modifié par Mikerob (12 Feb 2009 - 14:48)
Je pense que je vais repartir sur un design plus "classique", tout du moins, plus vertical. ^^ C'est le plus simple et la meilleure solution je pense, sauf si quelqu'un a une solution miracle pour me prouver que mon design est bien adapté ^^

Merci pour votre aide
Modifié par Pod (12 Feb 2009 - 15:05)
Mikerob a écrit :
D'après l'article de Raphael, il semblerait que le problème des marges soit essentiellement pour Explorer Mac

Le problème des marges ce n'est pas quand les marges négatives ne sont pas prises en compte (IE Mac, à oublier). C'est quand les marges négatives sont prises en compte (tous navigateurs), et que la hauteur du viewport (zone de prévisualisation du navigateur) est inférieure à la hauteur du contenu positionné en absolu et décalé via des marges.

Si l'utilisation d'un tableau de mise en page (absolument pas problématique ici) te gêne, rien ne t'empêche de faire plus propre encore: même solution, mais en exploitant l'élément BODY et un DIV, et en utilisant display: table et display: table-cell. Ça marchera dans tous les navigateurs modernes, dont IE8, mais pas IE6 et 7. (Le contenu sera alors, pour ces navigateurs, aligné en haut et pas au centre.)

Pour rappel, le passage suivant que tu cites ne concerne pas IE Mac, mais tous les navigateurs actuels sans exception:
a écrit :
ainsi que divers problèmes lors du redimensionnement de la page (bords mangés, pas de barre de défilement horizontal quand on réduit la page, etc.). Il est donc fortement conseillé d'éviter cette méthode sauf si vous en maîtrisez les conséquences.


Bien tenté quand même. Smiley cligne
erf.. j'avais pas compris la phrase comme ça.... Dommage, je préfèrais mon interprétation Smiley biggol

a écrit :

Ça marchera dans tous les navigateurs modernes, dont IE8, mais pas IE6 et 7. (Le contenu sera alors, pour ces navigateurs, aligné en haut et pas au centre.)
Ouaip mais bon, les sites que je fais en ce moment concerne majoritairement des utilisateurs d'i.e6 (80%) Smiley bawling et le gens avec qui je bosse (moi compris Smiley lol ) seraient trop maniaque cour accepter des différences pareils. Heureusement, j'ai trop de contenu a mettre pour faire des sites centrés verticalements Smiley langue
Modifié par Mikerob (12 Feb 2009 - 16:12)
Modérateur
Au risque de me faire huer Smiley cligne ,

Je rappelle quand même que je propose ces pistes sur le centarge vertical , au choix en version taille fixe ou extensible en hauteur , que bien evidement je met le tableaux en premiere position ,
<hs note="enfin pas si sur" >...et ce depuis bien longtemps deja (je n'etait pas le premier hein Smiley cligne : http://gcyrillus.free.fr/trucs_css/centrons-un-site-sans-marges-negatives.html ) , quand j'avais mis ça en ligne , il n'etait pas envisageable de l'evoquer sur ce forum 'fin 2005' , puis en remontant a mon premier post naif sur alsa , je demandais un avis / conseil sur cette mise en page : http://yidille.free.fr/ (pas sur mais probablement que c'etait déja sur la même url )
</hs>

Bon pour ces pistes , qui finalement ne devrait pas etre bien difficile a mettre en oeuvre , ce n'est que logique et je n'y vois aprés reflexion pas de bidouilles , aprés tout en php par exemple , personnes ne voit comme "bidouilles" une requete que l'on securise pour ne pas se faire hacker Smiley cligne sa base .

http://yidille.free.fr/plux/valign/?10-5-pistes-pour-centrer-en-xy-vos-pages

puis ceci http://doc-css.com se sert de l'un de ces gabarit

Je m'adresse en parti a Florent , non , je ne crois pas que l'usage du display:table ou inline-block avec les correctifs IE et ff2(en passe d'etre obsolete) soit de la bidouille .

Me semble bien , qu'un vrai integrateur passe son temps a patcher son code .... quoi de plus naturel que d'adjoindre un display:inline a un flottant ou un clear car certains navigateur n'ont pas forcement le même contexte de formatage ...

je cherche pas a lancer un troll , mais a mieux cernée certain point de vue .

GC
Sujet clos
Aller à