Image : height ignoré

**goutbouyo** · 03/06/2008, 10h53

Salut,

j'ai un header contenant une image, et je voudrais spécifier la taille du header et de l'image en pourcentage.

Dans mon exemple, l'image occupe tout le header.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="header">
    <img id="logo" src="images/image1.gif" />
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
#header {
 
    height: 100%;
    width: 25%;	
}
 
 
 
#logo {
 
	width: 100%;
 
	height : 100%;
 
}

Mon problème c'est que la propriété height dans #header n'est pas prise en compte.
C'est comme ci la hauteur était liée à la largeur.

Aidez moi SVP ???

**nicoaix** · 03/06/2008, 12h14

Je ne vois pas trop où est le problème??
Si tu veux fixer la hauteur de ton header fais le en 'px'. En pourcentage je ne pense pas que ça veuille dire quelque chose dans la mesure ou une page est scrollable et donc de taille variable en fonction du contenu.

**razorlok** · 03/06/2008, 12h51

Ton header n'a pas de taille spécifiée ?

#header {
height: 100%;
width: 25%;
}

Il fait bien 100% en eight et en width mais il n'a pas de taille au préalable.
Essaie de trouver la taille que tu souhaite avec un style dans ce genre, en modifiant la taille des px :

#header {
width:800px;
height:200px;
height: 100%;
width: 25%;
}

**Er3van** · 03/06/2008, 13h16

#header {
width:800px;
height:200px;
height: 100%;
width: 25%;
}

Donc ça revient à mettre 200*200 ? ou encore mieux, ça ne sert à rien puisqu'ignoré, seul la dernière occurence de l'attribut compte.

Ce qu'il faut AMHA c'est définir la taille du conteneur parent, pour avoir un référentiel pour le 100%.

Donc ici c'est body.
Seulement, si tu définis body en 100%, ça risque de revenir au même débat...
Il faut donc faire ça pour html et body, autant le faire pour *

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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">
<head>
	<style type="text/css">
                * {
                        margin : 0 ;
                        padding : 0 ;
                        height : 100% ;
                }
                body {
                        background-color : #FF5555 ;
                }
                #header {
                        height : 100% ;
                        width: 25%;
                        background-color : #55FFFF ;
                } 
        </style>
<body>
	<div id="header">Ceci est un test</div>
 
</body>
</html>

**Erwan31** · 03/06/2008, 14h15

Bonjour,
un header à 100% est a priori un très mauvais choix! Pourquoi 100%?

D'autre part tu oublies de dimensionner ton image (préférables pour les appareils portatifs...) et de lui donner une alternative reprenant le nom du logo.
Cette alternative sera exploitables par les robots d'indexation et visible en cas de non chargement des images (pour une raison ou une autre).

Exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<strong><img id="logo" src="images/image1.gif" alt="nom du logo" height="60" 
width="60" /></strong>

Le strong permet de donner un peu plus de poids au alt.

EDIT

Envoyé par Er3van

Il faut donc faire ça pour html et body, autant le faire pour *

Surtout pas! Tu n'as pas bien réfléchis au conséquences Er3van

**Er3van** · 03/06/2008, 14h40

Oui effectivement, il aurait tous ces enfants avec une dimension prédéfinie...

Mieux vaut rester prudent et mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

html, body { height : 100% ; }

Image : height ignoré

CSS

Vue hybride

Discussions similaires

Partager

Partager