Bandeau centré sur Site Responsive One page [Résolu/Fermé]

Signaler
Messages postés
44
Date d'inscription
mercredi 9 juillet 2014
Statut
Membre
Dernière intervention
8 décembre 2018
-
Messages postés
44
Date d'inscription
mercredi 9 juillet 2014
Statut
Membre
Dernière intervention
8 décembre 2018
-
Bonjour à tous,

Je suis en train de créer un site one page (déroulement horizontal) responsive (du moins, j'aimerais...).

Sauf que, quand je veux que mon bandeau diminue quand je diminue ma fenêtre de taille.
La taille de mon bandeau ne bouge pas d'un pouce et l'image est grignotée par la droite.
Alors que mon menu, lui, a bien compris ce que je lui demande :-) (cf photos)


Faut il que je centre le bandeau? (ni margin:0 auto ; ni text-align : center ne me donne de résultat)
Faut il que je lui donne une taille ? (A part lui dire que je veux qu'il fasse 100% je ne vois pas...)
Bref, J'avoue que je sèche....


Voici ce que j'ai codé :

(Pour situer la place du bandeau :) HTML :

<body> (qui fait 100%)

<div id="wrap"> (qui fait 100%)

<div id="content">
<div id="vue1"class="vue"><div class="bandeau"><img src="images/bandeau-large.png" alt="CeVeK"></div><p>Vue 1</p></div>
</div>
...


Et en CSS :

#content {
width:400%;
height:100%;
position:relative;
overflow:scroll;
}

#bandeau {
margin: 0 auto;
width:100%;
height:100%;
z-index:10;
display:block;
}

.vue {
width:25%;
height:100%;
position:relative;
float:left;
}

J'espère que vous pourrez m'éclairez,
Merci d'avance pour votre aide !
Bonne journée,

4 réponses

Messages postés
76
Date d'inscription
mardi 10 juin 2014
Statut
Membre
Dernière intervention
25 juillet 2014
3
Je pense que si tu veux faire un site responsive tu devrais utiliser les media queries, c'est pas plus mal ^^
Messages postés
44
Date d'inscription
mercredi 9 juillet 2014
Statut
Membre
Dernière intervention
8 décembre 2018

J'ai utilisé les media queries aussi, d'ailleurs cela fonctionne pour le menu...
Bref, au final après avoir tout essayé, et presque jeté l'éponge, j'ai résolu mon problème, après 3 heures de multi tentatives, j'ai eu une révélation... !!

Dans le CSS je devais m'adresser à #bandeau img ... tout bêtement, j'ai sauté de joie quand ça a fonctionné ! Le Web... ça tient à peu de choses de devenir chauve !
Merci quand même Nemoh-Khalifa !
Bonne journée :)
Bonjour,

Essaye avec cette méthode l'image devrait s'adapter à toutes les résolutions :

#bandeau{

background: url(images/bandeau-large.png) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
z-index:10;
display:block;
}
Messages postés
44
Date d'inscription
mercredi 9 juillet 2014
Statut
Membre
Dernière intervention
8 décembre 2018

Merci beaucoup
Ça fonctionne très bien !