aligner verticalement une image ?
aligner verticalement une image ? - HTML/CSS - Programmation
Marsh Posté le 19-02-2006 à 14:33:48
je crois que le css ne gére encore pas super la hauteur 
donc ton truc n'est pas possible, juste centrer en largeur....
Marsh Posté le 19-02-2006 à 14:45:48
y a t il d'autre moyen de centrer verticalement la hauteur sans passer par le css ? par un tableau ? dans le html ?
Marsh Posté le 19-02-2006 à 14:47:30
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
Marsh Posté le 19-02-2006 à 16:41:31
J'ai essayé cette technique et ma page apparait au 2/3 du haut et du côté droit, pas très beau finalement!
Marsh Posté le 19-02-2006 à 20:27:21
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.
Marsh Posté le 20-02-2006 à 04:03:19
salut,
tu auras des elements de réponse chez alsacreation.
http://css.alsacreations.com/Faire [...] web-en-CSS
+++
Marsh Posté le 21-02-2006 à 00:12:18
merci a tous... et si je veux placer mon image en bas a droite, comment feriez vous ?
Marsh Posté le 21-02-2006 à 00:13:06
(je veux dire queque sout la résolution et le type d'écran utilisé ca se mette dans le coin inferieur droit quoi)
Marsh Posté le 21-02-2006 à 00:15:06
| 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
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
Marsh Posté le 19-02-2006 à 12:54:48
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.