aligner verticalement une image ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : aligner verticalement une image ?

kolbek

Bonjour,

Voila, j'aimerai créer une page simple avec une image de fond, et un logo au millieu de la page, j'aimerai que ce logo soit au centre pour n'importe quelle résolution d'écran.

voila ce que j'ai fait:

HTML :

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Mon TITRE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="style_index" href="style_index.css" />
</head>

<body>
<div id="logo">
<a href="lien"><center><IMG src="./logo.png" alt="SOLUFIZ" border="0"><center></a>
</div>

</body>
</html>

CSS:

* {
margin: 0;
padding: 0;
}

body
{
background-image: url("./fond.jpg" );
}

#logo
{
position: absolute;
width: auto;
height: auto;
vertical-align: middle;
}

Pouvez vous m'aider ?

Merci d'avance.

Publicité

xtof_83

Freeride Spirit

je crois que le css ne gére encore pas super la hauteur

donc ton truc n'est pas possible, juste centrer en largeur....

kolbek

y a t il d'autre moyen de centrer verticalement la hauteur sans passer par le css ? par un tableau ? dans le html ?

Pitsy

Tu peux y arriver en css en utilisant des marges négatives; un exemple ici:
http://www.cyberformateur.com/cour [...] _image.htm

Maintenant si tu rétrécis ta fenêtre de navigation, certaines parties de ton image ne seront plus du tout visible et donc, suivant la construction de ta page après, ça peut poser problème si des informations importantes se trouvent dans cette zone-là.

Autrement, en attendant mieux en css reste le tableau de 1 cellule qui te garantira un affichage correct sur tous les navigateurs

fourniey

Rendre au prochain

J'ai essayé cette technique et ma page apparait au 2/3 du haut et du côté droit, pas très beau finalement!

ANViL

yep...definitely ♫

Hmm j'ai un petit truc 'maison', mais qui ne fonctionnera pas partout (dépend de la résolution emplyée):

Sur base, le centrage vertical en css n'a pas de sens (étant donné qu'on fait défiler une page verticalement), mais à supposer que tu veuilles afficher un logo centré, et sur une page qui ne scroll pas, tu peux le faire via une hauteur spécifiée en %.

-> les valeurs en % en css sont calculées sur base de la largeur, donc si tu spécifies une hauteur ou une marge en %, elle le sera aussi.

Exemple:

Supposons que ton conteneur principal soit le body (largeur par défaut : 100%)

Tu crée un conteneur X centré horizontalement (margin: 0 auto).

Maintenant le truc c'est de savoir quelle marge supérieure appliquer pour que ton conteneur X soit centré verticalement.

On va supposer que l'utilisateur dispose d'une résolution de type 4/3, il te suffit de calculer à quelle distance du haut de la page se trouve ton conteneur X (compte tenu de sa hauteur), et de voir combien de % de la largeur ça fait.

Bon comme je disais, le centrage ne sera pas optimal selon que la résolution employée ne soit pas une 4/3.

nwe

salut,

tu auras des elements de réponse chez alsacreation.
http://css.alsacreations.com/Faire [...] web-en-CSS

+++

kolbek

merci a tous... et si je veux placer mon image en bas a droite, comment feriez vous ?

Message cité 1 fois

kolbek

(je veux dire queque sout la résolution et le type d'écran utilisé ca se mette dans le coin inferieur droit quoi)

gm_superstar

Appelez-moi Super

kolbek a écrit :

merci a tous... et si je veux placer mon image en bas a droite, comment feriez vous ?

Avec le positionnement absolu ou avec les propriétés de placement des images de fond.

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

FORUM HardWare.fr

Programmation

HTML/CSS

aligner verticalement une image ?

Sujets relatifs
[JAVA] Redimensionner une image via une matrice	Comment uploader des image avec dreamweaver
image transparente?	<img src="data:image/gif;base64 et IE ( "inline image" )
limite image visible, snif	[RESOLU]probleme avec zoom d'image inspiré des portes coulissantes
Récupération d'image sur le net [RESOLU]	[résolu] Image gif avec fond transparent en premier plan
Image a la place d'un bouton	Aligner verticalement une image puis un texte dans une cellule
Plus de sujets relatifs à : aligner verticalement une image ?

Page générée en 0.050 secondes