Sujet Précédent Sujet Suivant

Problème superposition bandeau Top !

Fermé
spit8fire Messages postés 3 Date d'inscription mardi 30 octobre 2012 Statut Membre Dernière intervention 30 octobre 2012 - 30 oct. 2012 à 12:53
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 30 oct. 2012 à 14:13
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 !!! 

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>


4 réponses

Réponse 1 / 4
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
Modifié par RAD ZONE le 30/10/2012 à 13:22
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 ) 

<!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. ♣
0
Réponse 2 / 4
spit8fire Messages postés 3 Date d'inscription mardi 30 octobre 2012 Statut Membre Dernière intervention 30 octobre 2012
30 oct. 2012 à 13:42
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.
0
Réponse 3 / 4
spit8fire Messages postés 3 Date d'inscription mardi 30 octobre 2012 Statut Membre Dernière intervention 30 octobre 2012
30 oct. 2012 à 14:05
Okay, j'ai trouvé ! (boulet)
Le problème vient du html... Mon div conteneur doit etre dans le div top...

Merci !
0
Réponse 4 / 4
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
30 oct. 2012 à 14:13
pas sur d avoir compris ;-))

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>

0

Discussions similaires

Top Model International : arnaque ?
Sonia023 -
Panth33ra -

16 réponses
Enlever la pub sur sa tv?
DrFake -
Stryte005 -

10 réponses
Avis site TopModel-cast
Amli12 -
Klo -

9 réponses
Enlever le mode magasin tv tcl
Cakoune -
Legalerien -

19 réponses
superposition application impossible
pacorabano -
Lolopomo -

8 réponses