Bandeau centré sur Site Responsive One page
Résolu
cevek
Messages postés
45
Date d'inscription
Statut
Membre
Dernière intervention
-
cevek Messages postés 45 Date d'inscription Statut Membre Dernière intervention -
cevek Messages postés 45 Date d'inscription Statut Membre Dernière intervention -
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,
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,
A voir également:
- Bandeau centré sur Site Responsive One page
- Site comme coco - Accueil - Réseaux sociaux
- Comment supprimer une page sur word - Guide
- Site de telechargement - Accueil - Outils
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site pour vendre des objets d'occasion - Guide
4 réponses
Je pense que si tu veux faire un site responsive tu devrais utiliser les media queries, c'est pas plus mal ^^
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 :)
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;
}
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;
}