Adapter l'arrière plan a chaque écran
4 participants
Page 1 sur 1
Adapter l'arrière plan a chaque écran
Bonjour,
je rencontre un petit soucis sur le design de mon site en pleine construction.
J'ai intégré un diaporama en arrière plan, j'aimerais que l'image prenne presque toute la hauteur de l'écran et laisse entrevoir le menu tout en bas.
J'ai donc modifié le head en tapant ce code :
Malheureusement ça ne s'adapte pas à toutes les résolutions d'écrans.
Avez-vous une solution ?
Merci
je rencontre un petit soucis sur le design de mon site en pleine construction.
J'ai intégré un diaporama en arrière plan, j'aimerais que l'image prenne presque toute la hauteur de l'écran et laisse entrevoir le menu tout en bas.
J'ai donc modifié le head en tapant ce code :
- Code:
<style type="text/css">
/*<![CDATA[*/
.tpl-spacing {
height: 850px;
}
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
.body {background-color:white;}
/*]]>*/
</style>
Malheureusement ça ne s'adapte pas à toutes les résolutions d'écrans.
Avez-vous une solution ?
Merci
Re: Adapter l'arrière plan a chaque écran
De mon côté, à part l'image vierge que vous avez insérée dans votre diaporama, je ne vois rien de choquant. Pourriez-vous être plus précis ou poster des captures des écrans qui vous posent problème ?Malheureusement ça ne s'adapte pas à toutes les résolutions d'écrans.
Re: Adapter l'arrière plan a chaque écran
Peut être qu'il s'affiche bien chez vous, comme sur mon pc, mais sur mon ordinateur portable par exemple au lieu d'avoir une page d'accueil avec la photo qui prend presque tout la hauteur et le menu principal en bas de la page, le menu ne s'affiche pas il faut faire un scroll pour le voir.
J'espère être assez clair ...
J'espère être assez clair ...
Re: Adapter l'arrière plan a chaque écran
Essayez de fixer le menu en bas de page. (position fixed)
ça irait bien avec votre design de site.
ça irait bien avec votre design de site.
Re: Adapter l'arrière plan a chaque écran
Pourriez vous m'indiquer comment faire, le html et css c'est pas mon fort ^^
Re: Adapter l'arrière plan a chaque écran
Bonjour
Je pense avoir saisi votre problème : vous souhaitez que la hauteur de l'image de fond en haut s'adapte à la hauteur de l'écran pour que le menu apparaisse toujours en bas de page, quelque soit la hauteur de l'écran; c'est bien ça ?
Malheureusement, c'est assez difficile à faire puisqu'il existe des tas de résolutions d'écran différentes et parmi elle des combinaisons de tailles d'écrans très différentes également (par exemple, un écran 15,6" n'aura pas toujours le même rapport hauteur/largeur en fonction qu'il soit un écran 4/3, 16/9, 16/10, ect.). L'adaptation d'un écran à l'autre se nomme "responsive".
Ainsi, si par exemple, dans le code que vous donnez, si vous fixez la hauteur à 850px, le résultat obtenu sera parfait sur un écran à hauteur de 850px, mais trop court sur un écran moins haut (le content apparaîtra alors) ou trop long sur un écran plus haut (le menu n'apparaîtra pas alors).
Il faudrait donc, si vous maîtrisez le CSS, travailler avec un menu "fixed", avec le CSS "top" ou passer par un "min-height/max-height".
Je vous conseille pour ma part de ne pas fixer le header comme vous l'avez fait mais de travailler avec le "min-height/max-height" et de fixer le menu comme le proposent nos collègues.
J'espère que ça pourra vous aider
Je pense avoir saisi votre problème : vous souhaitez que la hauteur de l'image de fond en haut s'adapte à la hauteur de l'écran pour que le menu apparaisse toujours en bas de page, quelque soit la hauteur de l'écran; c'est bien ça ?
Malheureusement, c'est assez difficile à faire puisqu'il existe des tas de résolutions d'écran différentes et parmi elle des combinaisons de tailles d'écrans très différentes également (par exemple, un écran 15,6" n'aura pas toujours le même rapport hauteur/largeur en fonction qu'il soit un écran 4/3, 16/9, 16/10, ect.). L'adaptation d'un écran à l'autre se nomme "responsive".
Ainsi, si par exemple, dans le code que vous donnez, si vous fixez la hauteur à 850px, le résultat obtenu sera parfait sur un écran à hauteur de 850px, mais trop court sur un écran moins haut (le content apparaîtra alors) ou trop long sur un écran plus haut (le menu n'apparaîtra pas alors).
Il faudrait donc, si vous maîtrisez le CSS, travailler avec un menu "fixed", avec le CSS "top" ou passer par un "min-height/max-height".
Je vous conseille pour ma part de ne pas fixer le header comme vous l'avez fait mais de travailler avec le "min-height/max-height" et de fixer le menu comme le proposent nos collègues.
J'espère que ça pourra vous aider
Re: Adapter l'arrière plan a chaque écran
Oui c'est exactement ça,
car par la suite j'aimerais que pour les autres pages, il n'y ai plus d'arrière plan, mais le logo et le menu principal tout de haut des pages.
Finalement il ne s'agit que de la page d'accueil, mais elle est importante.
malheureusement je ne maîtrise pas le css, peut être travailler pourcentage non ?
car par la suite j'aimerais que pour les autres pages, il n'y ai plus d'arrière plan, mais le logo et le menu principal tout de haut des pages.
Finalement il ne s'agit que de la page d'accueil, mais elle est importante.
malheureusement je ne maîtrise pas le css, peut être travailler pourcentage non ?
Sujets similaires
» Adapter image arrière plan
» Arrière-plan : image plein écran sans défilement
» position titre différent a chaque page
» Avoir un header différent sur chaque page (un logo différent)
» Meta "desciption" différent pour chaque page
» Arrière-plan : image plein écran sans défilement
» position titre différent a chaque page
» Avoir un header différent sur chaque page (un logo différent)
» Meta "desciption" différent pour chaque page
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|