Bandeau haut de page

Résolu/Fermé

Html
Bandeau

Mireliria Messages postés 48 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 13 septembre 2013 - 6 août 2012 à 17:25
Mireliria Messages postés 48 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 13 septembre 2013 - 8 août 2012 à 20:46

Bonjour

Je veux mettre un bandeau en haut de la page mais problème il ne prend pas toute la longueur de la page.

#bandeau
{
display: block;
top: 0;
margin: 0;
width: 100%;
height: 60px;
background-color: #FFFFF;
color: white;
}

Il reste centré dans le conteneur:

#contener
{
position: relative;
margin-left: auto;
margin-right: auto;
width: 60%;
height: 100%;
background-color: white;
border: 1px solid #FFFFF;
}

Hors je veux les dissocier, auriez vous la Solution?

A voir également:

4 réponses

Réponse 1 / 4

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
6 août 2012 à 17:37

bonjour
rajouter

html, body
{
width: 100%;
}

Réponse 4 / 4

Mireliria Messages postés 48 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 13 septembre 2013 3
6 août 2012 à 17:47

Voici le html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />

<title>monsite</title>
</head>

<div id="contener">
<?php include("header.php"); ?>
<?php include("contener.php"); ?>
<?php include("footer.php"); ?>
<p>Mon site est cool</p>
</div>

<body id="body">

</body>
</html>

Voici tout le css

html, body
{
margin: 0; /* Marge 0 sur la page */
padding: 0;
width: 100%; /* Taille au Max */
background-color: pink; /* Couleur de fond */
color: black;
}

#bandeau
{
display: block;
top: 0;
margin: 0;
width: 100%;
height: 60px;
background-color: #FFFFF;
color: white;
}

#contener
{
position: relative;
margin-left: auto;
margin-right: auto;
width: 60%;
height: 100%;
background-color: white;
border: 1px solid #FFFFF;
}

h1
{
text-decoration: none;
color: white;
background-image: url("photo.jpg");
font-size: 70px;
font-family: Comic Sans MS, "Arial Black", sans-serif;
padding-top:0px;
}

.header
{
display: inline;
color: #00000;
top: 10px;
}

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
6 août 2012 à 18:38

Votre

<div id="conteneur">

nest pas entre les balises

<body>

et vous n'avez pas de bloc appelé bandeau

Mireliria Messages postés 48 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 13 septembre 2013 3
8 août 2012 à 20:46

Ca y est j'ai trouvé!! Voici qqs uns de mes codes CSS

#conteneur
{
position: relative; /* Position indépendante du conteneur */
margin: 40px;
margin-left: auto; /* Marge définie suite à position */
margin-right: auto;
width: 60%; /* Largeur auto */
height: 800px; /* Taille de la hauteur */
background-color: white;
border: 2px solid #FD6C9E; /*Bordure*/
border-radius: 20px;
padding: 60px;
}

#bandeau
{
position: absolute;
z-index: 100; /* passe au dessus du conteneur */
top:0;
width: 100%;
height: 40px;
background-image: #FEBFD2;
color: white; /* couleur du texte */
}

Merci, à plus

Discussions similaires

Comment faire bande de couleur haut de page?

Apparition bouton retourner en haut de la page

HTML remonter en haut d'une page

supprimer ce vilain bandeau noir sur Google

2 Bandes noires sur les bords de l'écran

bande blanche en haut de l'ecran du bureau