28172 sujets

CSS et mise en forme, CSS3

Centrage Verticale Div dans Div ... 1 de plus...

Bonjour a tous. Pour commencé j'ai cherché un peu partout, dans les tuto et les sujets traités et je n'y arrive pas. Si vous n'avez pas la solution a mon pb et que vous avez une autre idée et bien je suis tout a fait ouvert Smiley cligne

Voila je fait un site pour ma mère, simple site de présentation en 4 ou 5 pages. Et pour l'instant je galère pour centrer verticalement un fond de 600px de haut et largeur variable de 800px min a 1600px max. Après dans ce fond il y a un conteneur de 800*600 ou toutes les pages serons.

Je débute dans ce domaine et j'ai essayé de suivre tout les tutos et sujets en ligne mais la je bloc Smiley langue .

Il apparait que le centrage verticale est pas trop mal (mais c'est pas encore ça), mais je sais pas pourquoi quand on réduit la largeur de la fenêtre, cela modifie le centrage en hauteur... Smiley confus

Vous pouvez voir le site sur: http://benchacal.free.fr/

Et après comme j'ai dit si vous avez d'autre idée qu'un centrage verticale, je suis ouvert Smiley biggrin

Ici c'est l'index... enfin la partie qui nous interesse

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
 
    <head> 
         
        <title>Site de Chacal</title> 
         
        <link href="css/template_css.css" rel="stylesheet" type="text/css" /> 
        <link rel="icon" type="image/png" href="favicon.png" /> 
         
    </head> 
     
    <body> 
        <div id="fond"> 
        </div> 
    </body> 
</html>


Et ici le CSS

body{ 
    width: 100%; 
    height: 100%; 
    background-color:#FC6; 
    margin: 0; 
    padding: 0; 
} 
#fond{ 
    width:100%; 
    min-width: 800px; 
    max-width:1600px; 
    height:600px; 
    background:url(../images/Fond.jpg); 
    position: absolute; 
    top: 50%; 
    margin-top: -25%; 
    padding: 0; 
    }


Merci d'avance... cordialement
Modifié par benchacal (12 May 2011 - 12:02)
Bonjour, merci de ta réponse. Cependant j'avais déjà regardé ces postes. Je les ai regardés encore plus en détail, et testés mais cela ne fonctionne toujours pas.

J'ai bien essayer le coup de

div.fenetre{
	width: 100%;
	height: 100%;
	[b]text-align:center;[/b]
	margin: 0;
	padding: 0;
}
div.fond{
	width:100%;
	min-width: 800px;
	max-width:1600px;
	height:600px;
	background:url(../images/Fond.jpg);
	[b]display:inline-block; 
	vertical-align:middle;[/b]
	padding: 0;
	}


et pour le html 

<body>
	<div class="fenetre">
		<div class="fond">
		</div>
	</div>
</body>


et dans ce dernier cas ce n'est pas du tout centrer verticalement. C'est juste calé en haut de la page. L'utilisation des marges négatives est ce qui reste de plus efficaces (même si ce n'est pas réellement centré verticalement). Mais je ne comprend pas pourquoi la modification de la largeur de la fenêtre du navigateur, modifie le centrage verticale de mon <div id="fond">. (vous pouvez le tester sur http://benchacal.free.fr/ )

Si quelqu'un a une autre idée... Smiley smile
Modifié par benchacal (12 May 2011 - 12:00)
Tout se décale à cause de ton bloc #fond qui a des propriétés mal utilisées.

#fond{ 
    width:100%; 
    min-width: 800px; 
    max-width:1600px; 
    height:600px; 
    background:url(../images/Fond.jpg); 
    position: absolute;  /*** inutile ***/
    top: 50%;             /*** inutile ***/
    margin-top: -25%; /*** avec ceci tu peux ajuster la hauteur par rapport au haut de page ***/
    padding: 0; 
    }


Ceci étant dit, dans l'article sur le centrage vertical des éléments, il y a pourtant une solution à ton problème. Attention d'appliquer les propriétés au bon éléments.
Ici tu as fait des tests avec 

div.fond{ 
    width:100%; 
    min-width: 800px; 
    max-width:1600px; 
    height:600px; 
    background:url(../images/Fond.jpg); 
    display:inline-block;  
    vertical-align:middle; 
    padding: 0; 
    }

Mais tu aurais du appliquer le display et le vertical-align à ton bloc conteneur que tu veux centrer dans ta page. Encore là, attention parce que ton bloc fond a une hauteur de 600px et donc ton bloc conteneur sera centré dans cette hauteur.

Bref, relis bien l'article sur le centrage.
C'est bien le #fond que je veut centrer verticalement dans #fenêtre Smiley biggrin (le body d’ailleurs, j'ai enlevé la balise #fenetre elle ne servais plus a rien).

Le bloc #conteneur et automatiquement centré dans #fond puisqu'il font la même hauteur.

Si j'enlève position: absolute; ou le top: 50%; de #fond je me retrouve avec mon bloc fond en haut de la page, et on en vois que la moitier inférieur.... Et pour des raisons que j'ignore totalement le display et vertical-align dans #fond n’ont aucun effet.


body{
	width: 100%;
	height: 100%;
	background-color:#FC6;
	margin: 0;
	padding: 0;
}
#fond{
	width:100%;
	min-width: 800px;
	max-width:1600px;
	height:600px;
	background:url(../images/Fond.jpg);
	position: absolute;
	top: 50%;
	margin-top: -25%;
	padding: 0;
	}


et le html sans la div fenetre


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

	<head>
		
		<title>Site de Chacal</title>
        
		<link href="css/template_css.css" rel="stylesheet" type="text/css" />
		<link rel="icon" type="image/png" href="favicon.png" />
		
	</head>
	
	<body>
		<div id="fond">
		</div>
	</body>
    
</html>


Dsl d'insisté... Smiley sweatdrop
Bonjour,

c'est tout le bloc fond ou juste l'image que tu veux centrer ?
Parce que je pense que si c'est juste l'image, la propriété CSS " background-position " mise à " center center " peut bien faire l'affaire, non ?
benchacal a écrit :
Si j'enlève position: absolute; ou le top: 50%; de #fond je me retrouve avec mon bloc fond en haut de la page, et on en vois que la moitier inférieur.... Et pour des raisons que j'ignore totalement le display et vertical-align dans #fond n’ont aucun effet.

As-tu appliqué le display: inline-block et le vertical-align: middle à ton bloc #conteneur ?

Je t'invite à relire la réponse précédente que je t'ai donné.
Bonjour, et merci de toutes ces réponses pour commencé Smiley smile

n3k0 a écrit :
Bonjour,

C'est tout le bloc fond ou juste l'image que tu veux centrer ?
Parce que je pense que si c'est juste l'image, la propriété CSS &quot; background-position &quot; mise à &quot; center center &quot; peut bien faire l'affaire, non ?


C'est effectivement tout le bloc #fond que je souhaite centrer, car en fonction de la résolution, l'image sera présente une ou deux fois jusqu’à la taille maximal de 1600px. Mais oui je veut juste centrer verticalement tout le bloc #fond dans mon body

Mabelle a écrit :
As-tu appliqué le display: inline-block et le vertical-align: middle à ton bloc #conteneur ?

Je t'invite à relire la réponse précédente que je t'ai donné.


Je viens de l'essayer oui... mais sans grand intérêt, car comme je te l'ai dit plus haut mon bloc conteneur et déjà centré dans le bloc fond car il font la même hauteur et en plus avec la propriété inline-bloc il n'est plus centré horizontalement dans le bloc #fond... mais bon c'est pas ça le problème Smiley smile . Et je vois pas en quoi les propriété de #conteneur pourrait aligné verticalement #fond dans mon body vue que c'est le #fond qui contient le #conteneur... Smiley confus . On oublie le #conteneur j'ai pas de problème avec lui. Juste je veut centrer le bloc #fond (qui est un bloc avec une image qui ce répète jusqu’à 2 fois) dans mon body...
Ton #fond est contenu dans #fenêtre qui n'a pas de dimensions fixes donc il prend la dimension de son contenu qui est #fond à 600px de haut... Il est donc centré verticalement mais tu ne le vois pas.

Ton bloc #fenêtre se retrouvera toujours en haut du body... Il te faut faire quelque modification dans ta structure.
Modifié par Mabelle (12 May 2011 - 11:54)
Mabelle a écrit :
Ton #fond est contenu dans #fenêtre qui n'a pas de dimensions fixes donc il prend la dimension de son contenu qui est #fond à 600px de haut... Il est donc centré verticalement mais tu ne le vois pas.

Ton bloc #fenêtre se retrouvera toujours en haut du body... Il te faut faire quelque modification dans ta structure.


Justement dans le dernier code j'ai viré le bloc fenêtre... il n'y a plus que body et #fond comme je l'ai mit précédemment. J’édite le premier message pour que ce soit plus parlant. Qu'entend tu par quelque modification?
benchacal a écrit :
Justement dans le dernier code j'ai viré le bloc fenêtre... il n'y a plus que body et #fond comme je l'ai mit précédemment. J’édite le premier message pour que ce soit plus parlant.

Pourtant, si je vais voir en ligne, ton bloc fenêtre est toujours là.
benchacal a écrit :
Qu'entend tu par quelque modification?

Tu veux centrer verticalement ton bloc #fond dans ta page (ton body) mais ton bloc #fond est dans ton bloc #fenêtre qui lui est dans ton body. Soit que tu vires ton bloc #fenêtre ou bien tu changes ta façon de faire pour centrer verticalement #fenêtre à la place de ton bloc #fond...

Une précision de ma part, je me fis sur ton code en ligne pas sur ton code écrit dans ce post.
Sujet clos
Aller à