Fixer la hauteur d'une banière en CSS
Résolu
ladgalen
Messages postés
158
Statut
Membre
-
frtttttt -
frtttttt -
Bonjour,
Voici le code d'une simple page html. J'ai inclu la feuille de style à l'intérieur. Mon problème est que l'image bg_head.png que j'utilise pour faire la banière fait 200px de haut et je voudrais que le div header fasse aussi 200px de haut et que l'on voit ainsi la totalité de la banière. Pour faire des tests vous pouvez prendre l'image ici :
https://www.sfr.fr/fermeture-des-pages-perso.html
Que je mettent min-height ou height:200px ça ne marche pas. Je n'arrive pas à imposer la hauteur du div ou en tout cas qu'il ait la hauteur de l'image.
Merci pour votre aide
--
Linux - Ubuntu 8.04
Firefox 3.03
Voici le code d'une simple page html. J'ai inclu la feuille de style à l'intérieur. Mon problème est que l'image bg_head.png que j'utilise pour faire la banière fait 200px de haut et je voudrais que le div header fasse aussi 200px de haut et que l'on voit ainsi la totalité de la banière. Pour faire des tests vous pouvez prendre l'image ici :
https://www.sfr.fr/fermeture-des-pages-perso.html
Que je mettent min-height ou height:200px ça ne marche pas. Je n'arrive pas à imposer la hauteur du div ou en tout cas qu'il ait la hauteur de l'image.
Merci pour votre aide
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Germain Salvato-Vallverdu</title>
<!-- la feuille de style -->
<style type="text/css">
body {
background-color:#FFFFFF;
margin:0 auto;
padding:0;
color: #222222;
font-family: "Trebuchet MS","Verdana","Arial", sans-serif;
font-size: medium;
line-height: 3ex;
}
div#header {
background-image:url(img/bg_head.png);
background-repeat:repeat-x;
background-position:top left;
margin:0 auto;
padding:0;
height:200px
width: 100%;
color:#EEEEEE;
}
div#header div {
margin-left: auto;
margin-right: auto;
width:800px;
padding:0;
}
div#conteneur {
margin-left: auto;
margin-right: auto;
width:800px;
padding:0;
}
</style>
</head>
<body>
<div id="header">
<!-- -->
<div>
<h2> Un titre </h2>
</div>
</div> <!-- header -->
<div id="conteneur">
Test pour les accents et caractères spéciaux : é à ç è être
<img src="img/bg_head.png"/>
</div> <!-- conteneur -->
</body>
</html>
--
Linux - Ubuntu 8.04
Firefox 3.03
Configuration: Linux Firefox 3.0.13
4 réponses
-
Ce n'est pas simplement parce qu'il manque un ";" à height:200px?
-
J'ai honte !!!!!!!! C'était effectivement ça !
Est ce que tu peux me dire la différence entre
margin: 0;
et
margin:0 auto;
Merci beaucoup !
-
De rien,
pour margin, je crois que :
margin: 0; c'est pour mettre la marge supérieur à 0, les autres étant à la valeur par défaut
margin: 0 auto; c'est pour mettre la marge supérieur à 0, la marge de droite à automatique, les autres étant à la valeur par défaut -
Bonsoir,
margin:0
cela veut toutes les marges sont à 0
margin:0 auto
cela veut 0 pour haut et bas et auto pour gauche et droite
