Page HTML en CSS qui s'adapte à la résolution
jp.bond
-
jp.bond -
jp.bond -
Bonjour,
je cherche à développer une page simple dont la largeur s'adapte à la largeur de l'écran du visiteur.
En gros, j'ai un menu en image, et j'aimerai que une de ces images (un fond uni) s'agrandisse au maximum pour que le menu prenne toujours toute la largeur de la page... je sais le faire avec des tableaux, mais j'aimerai le faire avec des div et css.
Car malgré mes essais, si je mets mon image "élastique" à width="100%", l'image ne s'adapte pas à la résolution mais se place à la ligne, et les images suivantes vont à la ligne suivantes. (en gros, elle prend effectivement 100% de la page en largeur...)
Ca doit etre un petit détail mais je sèche...
merci de votre aide !
voila mon code :
<div id="Table_01">
<div id="bandeau-top-left"><img src="images/bandeau_top_left.jpg" width="608" height="41" alt=""></div>
<div id="bandeau-top-pourcent"><img src="images/bandeau_top_pourcent.jpg" width="100%" height="41" alt=""></div>
<div id="bandeau-top-right"><img src="images/bandeau_top_right.jpg" width="310" height="41" alt=""></div>
</div>
et voila ma css :
#Table_01 {
top:0px;
width:100%;
position: absolute;
}
#bandeau-top-left {
float: left;
height: 41px;
width: 608px;
}
#bandeau-top-pourcent {
width:100%;
height:41px;
float: left;
}
#bandeau-top-right {
width:310px;
height:41px;
float: left;
}
je cherche à développer une page simple dont la largeur s'adapte à la largeur de l'écran du visiteur.
En gros, j'ai un menu en image, et j'aimerai que une de ces images (un fond uni) s'agrandisse au maximum pour que le menu prenne toujours toute la largeur de la page... je sais le faire avec des tableaux, mais j'aimerai le faire avec des div et css.
Car malgré mes essais, si je mets mon image "élastique" à width="100%", l'image ne s'adapte pas à la résolution mais se place à la ligne, et les images suivantes vont à la ligne suivantes. (en gros, elle prend effectivement 100% de la page en largeur...)
Ca doit etre un petit détail mais je sèche...
merci de votre aide !
voila mon code :
<div id="Table_01">
<div id="bandeau-top-left"><img src="images/bandeau_top_left.jpg" width="608" height="41" alt=""></div>
<div id="bandeau-top-pourcent"><img src="images/bandeau_top_pourcent.jpg" width="100%" height="41" alt=""></div>
<div id="bandeau-top-right"><img src="images/bandeau_top_right.jpg" width="310" height="41" alt=""></div>
</div>
et voila ma css :
#Table_01 {
top:0px;
width:100%;
position: absolute;
}
#bandeau-top-left {
float: left;
height: 41px;
width: 608px;
}
#bandeau-top-pourcent {
width:100%;
height:41px;
float: left;
}
#bandeau-top-right {
width:310px;
height:41px;
float: left;
}
A voir également:
- Page HTML en CSS qui s'adapte à la résolution
- Supprimer page word - Guide
- Editeur html - Télécharger - HTML
- Mettre google en page d'accueil - Guide
- Traduire une page en français - Guide
- Imprimer tableau excel sur une page - Guide
3 réponses
sayu, pas de soucis pour l'image, c'est une image en pleine couleur donc elle pixelera pas
jnk972, si j'enleve le width et height du html, le div va s'étendre mais pas l'image...car le width et height du html sont des attribut de l'image alors que dans la css ce sont les attributs du div...
jnk972, si j'enleve le width et height du html, le div va s'étendre mais pas l'image...car le width et height du html sont des attribut de l'image alors que dans la css ce sont les attributs du div...