28114 sujets

CSS et mise en forme, CSS3

[Resolu] Center une image en vertical et horizontal dans une div ?

Bonjour,

j'ai parcouru les tutos et je n'ai rien trouvé sur le sujet, j'ai appliqué le css de centrage vertical et horizontal mais hélas le centrage s'effectue sur l'ecran et non sur la div "affichage".

ma présentation de ma page s'effectue ainsi :
- a gauche: une div contenant le menu
- a droite: une div pour l'affichage

pour cet présentation j'ai pris le css de mise en page suivant:

body {	padding: 0;
	margin: 0;
	overflow: hidden;
       }

.global { position: absolute;
            width: 100%;
            height: 100%;
              padding: 0;
	  margin: 0;
        }

.menu { position: absolute;
	left: 0;
	width: 15%;
	height: 100%;
	text-align: center;
	background-image: url('images/fond.jpg');
	background-repeat: repeat;
	padding: 0;
	margin: 0;
	float: left;
      }

.affichage { position: absolute;
	     right: 0;
	     width: 85%;
	     height: 100%;
	     margin: 0;
	     padding: 0;
	     float: left;
	     overflow: auto;
	    }

.image { position: relative; /*---meme résultat avec absolute ---*/
	 width: 456px;
	 height: 343px;
	 left: 50%;
	 top: 50%;
	 margin-left: -278px;
	 margin-top: -172px;
       }


le code html

<body>
<div class="global">

<!----------------------- menu --------------------->
   <div class="menu">
         <!--- page de code de mon menu --->
   </div>

<!------------------- page d'accueil ---------------------->

   <div class="affichage">
      
	<div class="image">
	   <img src="images/frere_jo1024.gif" alt="fr&egarve;re Joseph" title="La chapelle du fr&egrave;re Joseph">
	</div>

   </div>

</div>
</body>

Modifié par flattazor (24 Jan 2008 - 19:45)
Bonjour,

Malgré le peu d'élément (un exemple en ligne vaut mieux qu'un long discours ennuyeux), je suppose que tu cherches l'effet voulu en mettant position:relative sur la div affichage et non sur la div image. Enfin j'essai d'imaginer Smiley cligne
non ce n'est pas ça, mon css est tel quel pas de position relative sur le conteneur affichage.

désole pas de lien pour montrer un exemple de mon problème.mais une image

upload/14319-example.jpg
overflow a écrit :
essaie d'appliquer un "display:table-cell et un verical-align:middle" a ton conteneur



Non.

Ne pas donner de conseils bidouilleux (depuis quand utilise-t-on display;table-cell en production, a fortiori pour un débutant ?) quand la feuille de style comportent des position:absolute; float: left. Le résultat ne sera plus des CSS en cours d'apprentissage, mais une poupée Vaudou.

Demander la mise en ligne de la page, et renvoyer aux tutoriels sur les bases CSS.
Modifié par Laurent Denis (23 Jan 2008 - 15:48)
bonjour
ne pas mettre ensemble position absolute et float:left, soit l'un soit l'autre.
je te propose cette modification:

body {	padding: 0;
	margin: 0;
       }

.global {
            width: 100%;
            height: 100%;
        }

.menu { 
	width: 15%;
	height: 100%;
	text-align: center;
	background-image: url('images/fond.jpg');
	float: left;
      }

.affichage { 
             position:relative;
	 height: 100%;
     }

.image { position: absolute; 
	 width: 456px;
	 height: 343px;
	 left: 50%;
	 top: 50%;
	 margin-left: -228px;
	 margin-top: -172px;
       }


ça se peut que ce ne soit pas encore ça, mais comme on n'a pas de lien...
Modifié par verdan (23 Jan 2008 - 16:33)
merci verdan mais c'est le même cas l'image est centré par rapport à l'écran, donc j'ai remis l'ancien css mais sans le float, erreur stupide de ma part.

je mets le lien : http://pagesperso-orange.fr/flattazor/

j'ai essayé sur le css d'affichage j'avais ajouté :


background-image: url('images/frere_jo1024.gif');
background-position: 50% 50%;
background-repeat: no-repeat;


mais c'est pareil, je l'ai remarqué avec d'autre écran que le mien.
Modifié par flattazor (23 Jan 2008 - 20:32)
Bonsoir Flattazor,

Avec un Doctype et la correction de ton code :
width/height :... plutôt que width/height =...

Tu devrais y voir un peu plus clair Smiley cligne
bonsoir,

avec les doctypes, ça detruit ma mise en page .

puis la commande height: 100% n'est pas prise en compte par les doctypes du lien que tu m'as proposé.

je n'ai pas trouvé width/height= sur mon code source du lien.

merci
Modifié par flattazor (23 Jan 2008 - 21:19)
flattazor a écrit :
bonsoir,
avec les doctypes, ça detruit ma mise en page .

Il faudrait "peut-être" revoir ta mise en page...
a écrit :

puis la commande height: 100% n'est pas prise en compte par les doctypes du lien que tu m'as proposé.

???????????
a écrit :

je n'ai pas trouvé width/height= sur mon code source du lien.


<div class="menu">
<button type="button" 
style="border: none!important; 
background-color: transparent;
[#red]width= 75px; height= 35px;"[/#]
onclick="parent.window.location='#'">
<img src="images/Accueil.gif">
</button> [#blue]
<p></p>[/#] [#blue]<- A quoi te servent ces balises vide ?[/#]
[#red]Etcaetera sur tous les boutons de ton menu[/#]

Le code source quoi Smiley ohwell
a écrit :

merci

De rien Smiley cligne
verdan a écrit :
ne pas mettre ensemble position absolute et float:left, soit l'un soit l'autre.

Un élément peut tout à fait être à la fois positionné et flottant. Il s'agit juste savoir ce que l'on fait, ce qui ne semble à priori pas le cas de "flattazor", d'où la mise en garde de Laurent.
Bonsoir,
flattazor a écrit :

avec les doctypes, ça detruit ma mise en page .
puis la commande height: 100% n'est pas prise en compte par les doctypes du lien que tu m'as proposé.
merci

Ce n'est pas une histoire de prise en compte ou non par le doctype mais de
comportement standard ou non du navigateur qui découle ici de la présence
ou de l'absence du Doctype:
Son absence fait basculer les navigateurs récents en mode Quirks (faire une
recherche sur le blog), c-à-d dans dans un mode plus permissif qui
provoquera un interprétation non standard de certaines propriétés CSS par
le navigateur. Le height:100% ne devrait être appliqué que si un des ses ancêtres est doté d'un hauteur fixe.
Voir http://forum.alsacreations.com/faq/faq-57-Appliquer-une-hauteur-de-100-a-un-element.html
Modifié par Hermann (24 Jan 2008 - 02:26)
Bjr à tous,

oui exact pour les = mais je regardai le css pour ma mise en page, je n'ai pas cherché là. merci

pour ma mise ne page je ne veux pas de hauteur fixe. je veux que mes conteneurs s'adaptent automatiquement à la taille de la fenêtre de l'explorer aussi bien en largeur qu'en hauteur.

c'est pour eviter les frames c'est tout

pour herman, je vais voir ça

je vous tiens au courant.

Merci à tous
flattazor a écrit :

pour ma mise ne page je ne veux pas de hauteur fixe.

J'ai oublié de préciser de hauteur fixe ET si les éléments HTML et BODY sont déjà fixé à 100% de hauteur.
Modifié par Hermann (24 Jan 2008 - 13:44)
Modérateur
bonjour,

Sans vouloir troller , la solution la plus simple est un tableau 2 cellules si tu as du mal a comprendre et mettre en applications certaines regles css et appliqué un minimum les standards.

Dans tout les cas , il te faudra user d'un doctype valide , pour esperer appliqué dans un maximum de navigateur des regles css et rester dans le modele de boite standard pour IE.

Rappel en doctype valide , il ya html 4.01 et xhtml 1.0 au moins avec chacun 3 'modes' :
frameset (ah les frames ne sont pas interdites !)
transitionnal (pour pas troller avec le target _blank par exemple)
strict (pour s'imposer un minimum de rigeur)

(ne pas prendre forcement au premier dégrés les parentheses).

Le height:100% est necessaire pour le resultat que tu recherche , que ce soit sur une base de tableau ou non.

le height:100% s'applique pour un tableau comme un min-height ,tableau html ou css par le biais de display , cependant IE7 applique le 100% comme tel ailleurs que sur un veritable tableau.

Les 2 conseils de donner une hauteur qui peut etre transmise comme reference aux enfant et l'utilité d'un doctype sont a suivre.

Un tableau de cellules te prendra quelques minutes a mettre en oeuvre et passera partout , les frames te donneront des barre de scroll.

Sans tableau , je parle souvent du display:table , table-row , table-cell , .. et d'une alternative pour IE :display:inline; associé a zoom:1;
http://yidille.free.fr//plux/valign/?2-complement-vertical-align

Ces 2 methodes , l'une commune et l'autre servie a IE , permet d'aligner verticalement 2 élements .

Difficile a mettre en oeuvre dans ton cas , car tu souhaite aussi un centrage horizontal , sur un seule des colonnes , IE peut appliquer un simulacre du inline-block mais pas d'un tableau.

Une demo de tentative de mise en oeuvre de ton effet recherché , va te montrer certaines limites et surtout les surcharges de techniques css a mettre en oeuvre pour mettre IE dans le coup , IE7 s'en sort pas trop mal , mais IE6 aura tendance a faire tombé/passé le contenu sous le menu.

demo en reprenant tes images (peut a la rigeur te servir de gabarit , mais bon je te le deconseil , tu risque de voir tout s'ecrouler dans IE en voulant t'en servir).
http://gcyrillus.free.fr/essai/faux_frame.html

La raison devrait l'emporté et un tableau serait moins contraignant et plus sur.

GC
ça marche avec ce code :

body {	padding: 0;
	margin: 0;
     }

.global { width: 100%;
	height: 100%;	  
        }

.menu { float:left;
	width: 150px;
	height: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	background-image: url('images/fond.jpg');
      }

.affichage { 
	     position:relative;
		 height: 100%;
	     padding: 0;
	     margin-left:150px;
	    }

.image { position: absolute;
	 width: 456px;
	 height: 343px;
	 left: 50%;
	 top: 50%;
	 margin-left: -228px;
	 margin-top: -172px; 
       }


je pense le même que ce que j'avais proposé plus haut mais tu as oublié de changer margin-left: -228px; au lieu de -278px... erreur de calcul : la moitié de 456 c'est 228 !

d'accord avec gcyrillus, l'avantage d'un tableau (à une ou deux cellules) c'est que quelles que soient les dimensions de l'image, elle sera facilement centrée.
Modifié par verdan (24 Jan 2008 - 16:50)
bonsoir à tous et merci d'apporter votre aide à un noob comme moi.

le problème est résolu merci à tous

exact verdan ça fait bien 228 et non 478

ton code fonctionne.merci

mais j'ai apporté des modifications pour appliquer un doctype. voilà le code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>

<!------------------ css ------------------>

<style type="text/css">

body, html { padding: 0;
	     margin: 0;
	     overflow: hidden;
	     height: 100%;
     	   }

.menu { position: absolute;
	left: 0;
	width: 150px;
	height: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	background-image: url('images/fond.jpg');
      }

.affichage { position: absolute;
	     right: 0;
	     width: 88%;
	     height: 100%;
	     padding: 0;
	     margin: 0;
	     overflow: auto;
	    }

.image { position: absolute;
	 width: 456px;
	 height: 343px;
	 left: 50%;
	 top: 50%;
	 margin-left: -228px;
	 margin-top: -172px;
       }

</style>

</head>
<body>
<div class="global">

<!------------- menu ------------>

   <div class="menu">
	   <button type="button" style="border: none!important; background-color: transparent;width: 87px; height: 35px;"
	     onclick="parent.window.location='#'">
             <img src="images/Accueil.gif">
           </button> <p></p>
 	 
         
	   <button type="button" style="border: none!important; background-color: transparent; width: 135px; height: 41px;"
	     onclick="parent.window.location='#'">
             <img src="images/present.gif">
           </button> <p></p>
	 
        
	   <button type="button" style="border: none!important; background-color: transparent; width: 155px; height: 36px;"
	     onclick="parent.window.location='#'">
             <img src="images/manif.gif">
           </button> <p></p>

         	   
	   <button type="button" style="border: none!important; background-color: transparent; width: 131px; height: 40px;"
	     onclick="parent.window.location='#'">
             <img src="images/editions.gif">
           </button> <p></p>

         
	   <button type="button" style="border: none!important; background-color: transparent; width: 88px; height: 42px;"
	     onclick="parent.window.location='#'">
             <img src="images/ventron.gif">
           </button> <p></p>

         
	   <button type="button" style="border: none!important; background-color: transparent; width: 82px; height: 35px;"
	     onclick="parent.window.location='#'">
             <img src="images/charte.gif">
           </button> <p></p>

         
	   <button type="button" style="border: none!important; background-color: transparent; width: 118px; height: 39px;"
	     onclick="parent.window.location='#'">
             <img src="images/liens.gif">
           </button> <p></p>

         
	   <button type="button" style="border: none!important; background-color: transparent; width: 99px; height: 40px;"
	     onclick="parent.window.location='#'">
             <img src="images/contact.gif">
           </button> <p></p>
   </div>

<!------------------- page d'accueil ---------------------->

   <div class="affichage">
      
	<div class="image">
	   <img src="images/frere_jo1024.gif" alt="fr&egrave;re Joseph" title="La chapelle du fr&egrave;re Joseph">
	</div>

   </div>

</div>
</body>

</html>

Modifié par flattazor (25 Jan 2008 - 07:59)
Sujet clos
Aller à