Problème superposition bandeau Top !
spit8fire
Messages postés
3
Statut
Membre
-
RAD ZONE Messages postés 5362 Statut Contributeur -
RAD ZONE Messages postés 5362 Statut Contributeur -
Bonjour à tous,
Je me suis remis depuis peu dans le codage de page HTML + CSS et j'ai de gros problème pour centrer mes pages automatiquement. J'ai donc écumé pas mal de forum pour parvenir à avoir un code CSS de base pour y arriver.
Cependant j'ai un problème d'alignement lorsque je souhaite créer un fond en CSS avec bandeau en TOP et une bannière également centré horizontalement et en TOP (les 2 superposés donc...avec le block bandeau en dessous de l'image)
J'ai envisagé la solution position:absolute etc. sur l'image mais je ne souhaite pas que ma page se casse selon les écrans :/ Merci de votre aide !!!
Je me suis remis depuis peu dans le codage de page HTML + CSS et j'ai de gros problème pour centrer mes pages automatiquement. J'ai donc écumé pas mal de forum pour parvenir à avoir un code CSS de base pour y arriver.
Cependant j'ai un problème d'alignement lorsque je souhaite créer un fond en CSS avec bandeau en TOP et une bannière également centré horizontalement et en TOP (les 2 superposés donc...avec le block bandeau en dessous de l'image)
J'ai envisagé la solution position:absolute etc. sur l'image mais je ne souhaite pas que ma page se casse selon les écrans :/ Merci de votre aide !!!
body /*Trouvé sur des forum pour définir marges générales*/
{
margin: auto;
background-color: #f8f8f8;
height: 100%;
width: 100%;
}
#conteneur /*Mon bloc page centré*/
{
display: block;
width: 1000px;
height: 1400px;
margin:0 auto;
background-image:url(images/etudiant_02.png);
background-repeat:no-repeat;
}
#top /*Mon bandeau*/
{
display: block;
background-color:#c4c4c4;
position: absolute;
height: 16px;
width: 100%;
left: 0px;
top: 21px;
}
<body> <div id="conteneur"> </div> </body>
A voir également:
- Problème superposition bandeau Top !
- Set-top box - Accueil - Box & Connexion Internet
- Top site telechargement - Accueil - Outils
- Bandeau instagram - Guide
- Comment retirer le bandeau noir de google ✓ - Forum Réseaux sociaux
- Supprimer ce vilain bandeau noir sur Google ✓ - Forum Réseaux sociaux
4 réponses
Salut
??? comprend pas bien ton probleme de centrage ? pourquoi tu ne fait pas tout simplement comme ca !
( la j ai mis un width de 300px a la place de 1000 px et une couleur au bg du #conteneur pour que tu vois bien le centrage )
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
??? comprend pas bien ton probleme de centrage ? pourquoi tu ne fait pas tout simplement comme ca !
( la j ai mis un width de 300px a la place de 1000 px et une couleur au bg du #conteneur pour que tu vois bien le centrage )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
RAD ZONE Webcreation
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body , html{
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
#conteneur/*Mon bloc page centré*/ {
width: 300px;
height: 1400px;
margin: 0 auto;
background-color: #FFFFCC;
background-image: url(images/etudiant_02.png);
background-repeat: no-repeat;
}
#top/*Mon bandeau*/ {
background-color: #c4c4c4;
height: 16px;
width: 100%;
}
/*]]>*/
</style>
</head>
<body>
<div id="conteneur">
<div id="top"></div>
</div>
</body>
</html>
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
Merci de ta reponse, je précise mon problème;
J'est pas de problème pour le centrage à proprement parlé mais dans le cas présent je n'arrive pas à faire en sorte que mon bloc page passe au dessus du bandeau ..
Par exemple : https://www.creation-de-site-pas-cher.fr/
Le bandeau gris et rouge s'etend dans toute la largeur du site et le bloc page (a a une ombre portée) passe correctement au-dessus du bandeau...
J'ai exactement l'inverse: une banniere qui s'étend dans la largeur du site mais tout le haut de mon image passe en dessous..
Merci de ton aide, et désolé si les explications sont un peu confuse.
J'est pas de problème pour le centrage à proprement parlé mais dans le cas présent je n'arrive pas à faire en sorte que mon bloc page passe au dessus du bandeau ..
Par exemple : https://www.creation-de-site-pas-cher.fr/
Le bandeau gris et rouge s'etend dans toute la largeur du site et le bloc page (a a une ombre portée) passe correctement au-dessus du bandeau...
J'ai exactement l'inverse: une banniere qui s'étend dans la largeur du site mais tout le haut de mon image passe en dessous..
Merci de ton aide, et désolé si les explications sont un peu confuse.
Okay, j'ai trouvé ! (boulet)
Le problème vient du html... Mon div conteneur doit etre dans le div top...
Merci !
Le problème vient du html... Mon div conteneur doit etre dans le div top...
Merci !
pas sur d avoir compris ;-))
mais c est ca alors que tu veux ?
mais c est ca alors que tu veux ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
RAD ZONE Webcreation
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body , html{
margin: 0;
padding: 0;
background-color: #f8f8f8;
}
#conteneur/*Mon bloc page centré*/ {
width: 1000px;
height: 1400px;
margin: auto;
margin-top: -37px;
background-color: #FFFFCC;
background-image: url(images/etudiant_02.png);
background-repeat: no-repeat;
}
#top/*Mon bandeau*/ {
position: absolute;
background-color: #c4c4c4;
height: 16px;
width: 100%;
top: 21px;
}
/*]]>*/
</style>
</head>
<body>
<div id="top"></div>
<div id="conteneur">
</div>
</body>
</html>
