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

Question

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 : (qui fait 100%)

(qui fait 100%)

... 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,

Nemoh-Khalifa · Answer

Je pense que si tu veux faire un site responsive tu devrais utiliser les media queries, c'est pas plus mal ^^

cevek · Answer

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 :)

sitio dev · Answer

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; 
}

cevek · Answer

Merci beaucoup
Ça fonctionne très bien  !

Bandeau centré sur Site Responsive One page

4 réponses

Discussions similaires