Aller au menu - Aller au contenu
Inscris-toi au e-camp "Héberge ton jeu Facebook sur Azure" de Microsoft vendredi 25 mai à 13h30 !

Bannière extensible...

...de chaque côté

Pour accéder à cette section
Connectez-vous !
connexion_rpx

Résolu Le problème de ce sujet a été résolu

Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne luc7698 # Posté le 27/08/2008 à 22:35:29
close

Bonjour à tous ! ;)

J'ai un petit problème avec mon design extensible : j'aimerai que ma bannière s'adapte à la résolution du visiteur, sans être déformée, au moyen d'une image qui se répèterait de chaque côté.

Code : HTML
1
2
3
4
5
6
7
<div id="banniere">
   <div class="bord_gauche"><img src="bord_g.jpg" /></div>
   <div class="ext_gauche"><img src="ext_g.jpg" /></div>
   <div class="centre"><img src="banniere.jpg" /></div>
   <div class="ext_droite"><img src="ext_d.jpg" /></div>
   <div class="bord_droite"><img src="bord_d.jpg" /></div>
</div>


et le CSS :
Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
body
{
}

#banniere
{
	height: 100px;
	margin: 15px 40px;
	padding: 0px;
	overflow: hidden;
}
.bord_gauche
{
	height: 100px;
	background-image: url("bord_g.jpg");
	background-repeat: no-repeat;
	background-position: left;
}
.ext_gauche
{
	height: 100px;
	background-image: url("ext_g.jpg");
	background-repeat: repeat-x;
	background-position: left;
}
.centre
{
	height: 100px;
	background-image: url("banniere.jpg");
	background-repeat: no-repeat;
	background-position: center;
}
.ext_droite
{
	height: 100px;
	background-image: url("ext_d.jpg");
	background-repeat: repeat-x;
	background-position: right;
}
.bord_doite
{
	height: 100px;
	background-image: url("bord_d.jpg");
	background-repeat: no-repeat;
	background-position: right;
}


Résultat : les différentes parties de a bannière s'affichent les uns au dessus des autres et non pas en une bannière extensible... o_O

Votre aide est la bienvenue :)

Merci
Participez au black-out anti-HADOPI :
http://www.laquadrature.net/fr/APPEL-H [...] -net-francais
 
Publicité # Posté le 27/08/2008 à 22:35:29

Hors ligne eloin # Posté le 27/08/2008 à 22:55:13
ad majorem dei gloriam
Avatar

Ville : Lavau
Pays : France métropolitaine
Études : Lycée Carnot - Dijon
Je me permet d'ajouter un petit schéma de ce que nous voulons faire (c'est un projet commun à luc7698 et à moi) :
Image utilisateur
Secret (cliquez pour afficher)
bringmlgnln --> mazette il y a du vent ce soir !
 
Hors ligne Yano # Posté le 28/08/2008 à 15:43:12
Avatar
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
Bonjour,

Si j'ai bien compris, on pourrait s'y prendre comme ça.

Un bloc principal avec le motif à répéter en arrière-plan et positionné en relative.

Dans ce bloc, trois autres blocs :

Deux avec l'image des bords en arrière-plan et positionnés en float.

Un troisième bloc positionné en absolute et centré.
Ce troisième bloc pourrait recevoir l'image dedans par <img /> ou en arrière-plan.


Tu en trouveras des exemples dans cette page.
Hors ligne luc7698 # Posté le 29/08/2008 à 11:49:50
close

Merci beaucoup à toi j'essaye de suite !
Hors ligne pinokio007 # Posté le 29/08/2008 à 12:17:50
faire l'amour, non la guerre
Avatar
Selon moi, ce qui n'a pas marché dans votre code, c'est que vous indiquez height: 100px; pour <div id="banniere">. Et dans le même moment, les class contenue dans id=bannière ont chacun des height: 100px;
Alors ya kelke choz qui va pas marcher. comment mettre 4 foix 100px dans un id qui a lui même 100px...
SI TU JOUES AU CON AVEC MOI, JE JOUE A L'AUTRE !

T'aimes pas la créativité ? Cliques pas ici !
 
Hors ligne Yano # Posté le 29/08/2008 à 16:37:33
Avatar
Citation : pinokio007
comment mettre 4 foix 100px dans un id qui a lui même 100px...

Simple.
Il suffit de les mettre les uns à côté des autres (ou de faire semblant).

Les mettre les uns en dessous des autres, ça serait moins logique.
Mais CSS permettrait de le faire. En partie.

N'est-ce pas ?
Hors ligne luc7698 # Posté le 01/09/2008 à 11:17:45
close

En effet

merci à tous de votre aide notre bannière est maintenant fonctionnelle =)

Retour au forum "HTML / CSS" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx