28172 sujets

CSS et mise en forme, CSS3

Centrer verticalement bloc

Bonjour,

Je cherche à centrer le contenu de mon site de manière vertical et pour l'instant je ne vois pas comment cela pourrai être possible avec ma feuille de style Smiley decu .
Peut être pourriez-vous m'éclairer Smiley lol .
La structure de mon site est la suivant: 
<body class='section-<%section_id%>'>
<div id='content'>
<div class='container'>

<!-- text and image -->
<plug:front_exhibit />
<!-- end text and image -->

</div>
</div>

<div id='menu'>
<div class='container'>

<%obj_itop%>
<plug:front_index />
<%obj_ibot%>

<!-- Indexhibit -->

</div>	
</div>	

</body>

Comme vous pouvez le voir j'utilise le CMS Indexhibit.
Mon css comprend entre autre:
body {
	width: 870px;
	position: relative;
	margin: 0px;
	padding:0px;
	margin-left: auto;
	margin-right: auto;
}
#menu {
    width: 870px;
      position: fixed;
	z-index: 20;
	bottom: 10px;
   }
#menu ul {
	list-style: none;
	float:right;
	padding: 0 0 0 30px;
	text-align:right;
}
#menu ul li.section-title { 
	text-transform: uppercase;
	padding: 0 0 0 10px;
}
#content {
	width: 870px;
	display: table-cell;
	vertical-align: middle;
	z-index: 10;
	padding: 0 0 150px 0;
}
#content p { width: 870px; margin-bottom: 0px; }
.container {
}

Le menu reste donc collé au bas de page et le bloc "content" devrait pouvoir se centrer au milieu de page selon la résolution de l'écran. Mais comment peut-il se centrer avec le menu qui est lui fixe?

Je coince, si vous avez une idée Smiley cligne .
D'avance merci.

PS: vous pouvez voir le résultat actuel ICI
Bonjour fafa007,

Je n'ai pas regarder ton site dans le détail, mais cet item de la FAQ pourra s'en doute t'aiguiller sur les différentes méthodes existantes pour centrer verticalement un élément Smiley cligne

Cdt,
Sylvain
Merci de ta réponse 6l20, en effet j'avais consulté ce FAQ, mais malheureusement aucunes de ces solutions ne fonctionnent correctement pour mon cas.
Seul la solution des marges négatives affiche un centrage mais le problème est que ma div "content" n'as pas une taille fixe donc sur certaines pages une partie disparait Smiley bawling .

Si tu vois une autre solution ?!

Merci,
Modérateur
Bonjour ,

pas certains de tout bien saisir a l'effet recherché , cependant si une barre de scroll a le droit d'apparaitre , on peut assembler quelques techniques .

1) le pied en bas de page : neccesite de dimensionné html et body puis de positionné en absolue le pied , en prevoyant un degagement dans la zone de contenue , ... pour ne pas rester scotcher sur ou dessus le pied.

2) Modifier le comportement de tes block .
option a , qui passe bien en particulier dans les version de Firefox inferieur a Trios. : display:table; etc ... , mais incompatible avec [b]IE
option b : [display:inline-block; , (certaine de tes pages embarque 2 div adjacent 
<div class="colonneG">le contenu</div><div class="cl"><!-- --></div>[/b]

Parfait ! , inline-block est envisageable.
La encore IE peut se montrer récalcitrant en mode de rendu standard , mais en servant en cc :. 

display:inline;
zoom:1;

on activera alors le layout pour obtenir l'effet quasi normal d'un inlin-block.

En choissisant l'option 2 voici un gabarit html qui peut peut-etre te servir: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>


<title>test/gabarit : uapS</title>

<style type='text/css' >
* {margin:0;padding:0;/* pour ce faciliter la vie ! */}
html  , body {
overflow:auto;
}
body {}
html , body , #content , #content .container , div.cl {
height:100%;
}

#content {display:table;}
#content .container , div.cl , div.colonneG{
display:table-cell; /* FF  inf. a  V3 */
display:inline-block; /* nav respectueux , voir cc pour IE */
vertical-align:middle;
}
#content .colonneG {
padding-bottom:100px;
}

#menu {
position:absolute;
bottom:0;
left:0;
height:100px;
}
div.cl {
width:0;
overflow:hidden;
}
</style>
<!--[if lte IE 7]>
<style  type='text/css' >
  #content .container , div.cl , div.colonneG  {
  /* version inline-block en mode standard pour les elements de type block */
display:inline;
zoom:1;
}
</style>
<![endif]-->

</head>

<body class='section-1'>
<div id='content'>
	<div class='container'>

	<div class="colonneG">
		<p><img src="http://www.uaps.net/files/accueil/accueil1.jpg" height="300px" /></p>
		<p>Taille de l'image diminué , pour jugez du resultat sur un petit ecran .</p>
	</div>
	
	<div class='cl'><!-- sert d'etais a colonneG pour la hauteur --></div>

<!-- end text and image -->

</div>
</div>

<div id='menu'>
<div class='container'>
<div class="logo"><h2>uapS</h2>Anne Mie Depuydt &#38; Erik Van Daele</div>


</div>	
</div>	

</body>

</html>


L'usage de trois element :
1 conteneur contenant
1 element englobant le contenu
1 element vide pour imposer une hauteur minimale

Permet de centrer verticalement le contenu dans le parent .

Une autre application de cette technique sur des liens par exemples :

http://gcyrillus.free.fr/essai/boiteleien.html

Notez les limites d'application pour FF2 qui ne permettent pas d'inserer une boite ainsi formater dans un flux d'élément inline :
Bonsoir,

Merci de ces conseils détaillés Gcyrillus Smiley ravi , mais je n’arrive toujours pas à afficher mon contenu (div « content ») aligner verticalement sur la page (quand la résolution est grande bien sur).
Pour préciser, je veux donc que le contenu puisse ce centrer au milieu de la page quand il y a de la place (grande résolution d’écran) et que le menu reste lui toujours accroché en bas de la page. Dans les basses résolutions d’écran, il reste visible au dessus du contenu.

J’ai testé ton code gcyrillus avec succès sur IE7 et Safari mais il ne semble pas marcher avec FF3 et Opéra chez moi (PC Vista x64) :
http://www.uaps.net/ndxz-studio/site/uaps/test.php

Pour aller dans le sens de ton système qui semble ingénieux, j’ai insérer une balise div « cl » pour faire un étai (avec le code css qui va avec), mais sans succès :

<div id='content'>
<div class='container'>

<!-- text and image -->
<plug:front_exhibit />
<!-- end text and image -->

</div>
<div class='cl'><!-- sert d'etais a colonneG (« container » plutôt) pour la hauteur --></div>
</div>


Je pense que peut être cette impossibilité vient du code qui est insérer par <plug:front_exhibit /> qui se compose de div et autre span (voir code source d’une page).

Merci de ton aide en tt cas, peut être à tu une autre piste ? Smiley murf
Modérateur
bonjour,

Non , je pense que tu as raté un 'quelquechose' dans la preparation de ton template (je ne connais pas indexit) , mais en regardant le code on voit qu'il y a un peu de cafouillage au niveau des quotes , un coup elles sont simple , un autre elles sont double Smiley smile .

Je me suis permis de reprendre le gabarits deja proposé (coté CSS) , ça buggé un peu dans IE et opera . (: dimension sur #menu + fond blanc ).
http://gcyrillus.free.fr/essai/indexit-uaps.html

<edit>
j'ai rebasculé la technique du inline-block en table et table-cell , Opera ,derniere mouture , ne prend le inline-block comme attendu . Du coup , l'etaiement ne sert qu'a Internet Explorer </edit>

Page en ligne pour tester uniquement html et css avec differents nav .

GC
Modifié par gcyrillus (16 Oct 2008 - 10:17)
Ok ça marche Smiley smile

En fait j'ai eu du mal à calquer ton code sur le miens et en effet il manquait quelques "quelquechose" !

Dc mon template est du type:
<div id='content'>
<div class='container'>
<div class='box'>

<!-- text and image -->
<plug:front_exhibit />
<!-- end text and image -->

</div>
</div>
</div>

avec en css:
#content {
	display:table;
}
box {
	display: table-cell; /* FF  inf. a  V3 */
	vertical-align: middle;
	padding-bottom: 50px;
}
.container {
  	height:100%;
	display:table-cell; /* FF  inf. a  V3 */
	vertical-align:middle;
}
et surtout,
html, body {
	height: 100%;
}
que j'avais oublié...

Mais cela ne marche pas avec IE par contre Smiley decu
J'ai pourtant bien mis le code dans mon fichier css ie et j'ai mit aussi l'etai dans mon template, je ne comprends pas.

En tt cas bravo pour cette solution très élégante. Smiley cligne
Je vais encore un peu m'acharner sur IE pour voir.
Modérateur
bonsoir/bonjour

je viens de suivre ce lien :
http://www.uaps.net/ndxz-studio/site/uaps/test.php

IE semble appliqué les styles proposé correctement .

Dans l'exemple en ligne (voir mon precedent post) , j'ai mis en commentaire une ligne :
#content .container , div.cl , div.colonneG{
display:table-cell; /* FF  inf. a  V3 */

[b]/*display:inline-block;  nav respectueux , voir cc pour IE */[/b]

vertical-align:middle;
}


La raison :
Opera bug sur le height:100%; (valeur en pourcentage) lorsqu'il s'applique a un element en display:inline-block; , dans l'exemple , le centrage horizontal ne pourra pas etre obtenu dans opera qu'en rebasculant sur le display:table-cell; .
=> Impossible sans javascript d'extraire la hauteur de la page en pixel pour la réinjecter dans les styles.

Attention , en gardant le display:inline-block; de bien specifier la largeur des elements considérés , ici une largeur de 0 pour l'etai permet de ne pas affecté de valeur a l'autre element adjacent) .

Pour IE , il est de mise de toujours placé les commentaires conditionnels derriere les styles communs a tout les navigateurs , ils servent generalement a remplacé certaines valeurs inadaptés par des corrections ou alternatives.

Je n'ai pas ouvert ta page test a partir de FF3 , ce pc n'en dispose pas encore Smiley confused ... si elle ne s'affiche pas , je n'ai aucune explication .

++
Modérateur
bonjour,

hou ! la la !

j'ai bien peur que tu n'y arriveras pas ! tu as peut-etre saisi le principe des etais , mais pour le reste la mise en forme est encore bien compliqué pour toi .

etonnant deja que ça passe dans firefox , mais dans IE , aucune chances avec ta feuille de style.

Tu essaie d'imbriqué ce principe a plusieurs reprises sans en avoir bien saisie le fonctionnement , en particulier dans IE ou la feuille de styles est incoherente.

1) si tu souhaite continué dans cette voie , (que je te deconseille vivement au vue de tes capacités actuelles ) , il te faut gerer l'alignement vertical a un seul niveau : 1 etai pour la hauteur et chaque autre block en adjacent dimensionné en largeur avec une marge interne inferieur pour repoussé le pied ... ces differents block pourront repassé les uns sous les autres si la largeur de l'ecran n'est pas suffisante

2) Vaudrait mieux que tu opte pour un vrai tableau a 1 ligne et a 1 ou plusieurs colonnes selon tes pages (100% de hauteur , border-collapse:collapse; et un padding-bottom:egal a la hauteur a degager pour le menu dans chaque cellule .
tu pourras toujours ensuite placé ton pied en absolu en bas de page au dessus de ce tableau conteneur principal.

Par ailleurs , ton menu a des defaut :
-de ne pas se refermé tout seul (le curieux qui clique dessus a le droit de changer de page )
-de ne pas avoir un fond opaque .
- ... ,

je regrette de m'etre embarquer dans ta galere Smiley smile

1 colonne , ça va , 2 : bonjour les dégats Smiley cligne .

Voici un gabarit basé sur un tableau , j'espere que tu arriveras a en faire un meilleur usage et t'eviter des prises de têtes inutiles:
aie aie , je regrette de ne pas avoir perçu avant que ça allait s'embarquer dans de la divite et une certaine imcomprehension .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head><title>gabarit</title>
<style type="text/css">html , body , table {
height:100%;
width:100%;
margin:0;
padding:0;
border-collapse:collapse;
background :#eee;
}
td {padding-bottom:100px;}
#menu {min-height:100px;
height:auto!important;
height:100px;
position:fixed;
left:0;
right:0;
bottom:0;
}

#menu , td div {
background:#ccc;
}
</style>
<!--[if lt IE 7]>
<style>
html {overflow:hidden;}
body {overflow:auto;}
#menu {position:absolute;width:100%;width:expression(document.body.clientWidth );}
</style>
<![endif]-->
</head>
<body>
<table>
	<tbody>
		<tr>
			<td>
				<div>col1
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				sauts !</div>
			</td>
			<td>
				<div>col2
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				sauts !
				<br>
				<br>
				<br>
				<br>
				sauts !</div>
			</td>
			<td>
				<div>col 3</div>
			</td>
		</tr>
	</tbody>
</table>
<div id="menu">
	<div>menu</div>
	<ul><li>item</li><li>item</li></ul>
</div>
</body>
</html>


GC
Modifié par gcyrillus (20 Oct 2008 - 10:12)
Bon, on a finit pas ce comprendre... Smiley cligne

En fait j'ai un peu bidouillé le CMS en m'inspirant d'autres sites, mais c'est vrai que j'avais pas tout saisi et surtout mettre le menu en bas m'a un peut compliqué la vie, mais victoire Smiley sweatdrop .
En partant sur une bonne vieille mise en page en tableau, ça passe beaucoup mieux en effet ds FF2&3 et IE7&6 (d'ailleurs ta page ne marchait pas sur IE7 jusqu'à ce que je mets par hasard [if lt IE8].
J'ai aussi amélioré le menu après Smiley biggol ;

Voila je crois que maintenant tout est en place pour la mise en page général (sauf un bug dans IE6 sur la largeur des sous-menus), il ne reste plus qu'a compléter le contenu.

Merci beaucoup en tt cas de ton aide, cela m'as grandement aidé Smiley langue .
Smiley smile Ça fait plaisir. Smiley biggrin
Sujet clos
Aller à