Probleme affichage bannière en 3 parties
Fermé
RomantikA-
Messages postés
82
Date d'inscription
samedi 13 août 2011
Statut
Membre
Dernière intervention
28 novembre 2019
-
11 nov. 2011 à 00:50
RomantikA- Messages postés 82 Date d'inscription samedi 13 août 2011 Statut Membre Dernière intervention 28 novembre 2019 - 18 nov. 2011 à 20:10
RomantikA- Messages postés 82 Date d'inscription samedi 13 août 2011 Statut Membre Dernière intervention 28 novembre 2019 - 18 nov. 2011 à 20:10
A voir également:
- Probleme affichage bannière en 3 parties
- Picasa 3 - Télécharger - Albums photo
- Bannière instagram - Guide
- Affichage double ecran - Guide
- Photorecit 3 - Télécharger - Visionnage & Diaporama
- Ai suite 3 download - Télécharger - Optimisation
5 réponses
babane5
Messages postés
99
Date d'inscription
mercredi 2 novembre 2011
Statut
Membre
Dernière intervention
26 juin 2012
11
11 nov. 2011 à 11:21
11 nov. 2011 à 11:21
<div id="Banniere"> <div class="centre"><img src="BanGauch2.png"/>
<div class="centre"><img src="BanCentr3.png"/></div>
<div class="droite"><img src="BanDroit_bis2.png"/></div>
</div></div>
.gauche { position: absolute; top: 0em; left: 0%; background-repeat:no-repeat; }
.centre { margin: 0em 0%; background-repeat:repeat; }
.droite { position: absolute; top: 0em; right: 0%; background-repeat:no-repeat; }
<div class="centre"><img src="BanCentr3.png"/></div>
<div class="droite"><img src="BanDroit_bis2.png"/></div>
</div></div>
.gauche { position: absolute; top: 0em; left: 0%; background-repeat:no-repeat; }
.centre { margin: 0em 0%; background-repeat:repeat; }
.droite { position: absolute; top: 0em; right: 0%; background-repeat:no-repeat; }
RomantikA-
Messages postés
82
Date d'inscription
samedi 13 août 2011
Statut
Membre
Dernière intervention
28 novembre 2019
8
Modifié par RomantikA- le 11/11/2011 à 12:08
Modifié par RomantikA- le 11/11/2011 à 12:08
bonjour ici :)
Merci beaucoup pour ta réponse Babane5, car je commence à désespèrer, je parcourt une nouvelle fois le net on sait jamais... mais ne trouve pas grandes indications... :s
Merci donc pour ta réponse car du coup ce problème me fait ramer. :(
-
En effet j'avais essayer pas mal de chose (côté fuille de style) mais j'avais pas pensé à virer les span et mettre des div... pourquoi ai-je mis des span plustoôt que des div? mystère! lol
Quoi qu'il en soit j'ai tester ta proposition, sur 2 écrans de résolutions différentes mais cette fichu barre bleu (la BanCentre3) me pose toujours problème, dans le résultat que tu m'offres généreusement, cette images apparait en dessous de la bannière... est-ce que c'est moi qui est mal interprèté ton code? :s
edit: Et je vais surement devoir redimensionner mes images, parceque sur ce pc là... en 1024x768, la partie gauche est décalée de la partie droite (sur l'axe horizontale).
sur un 1280x1024 ça à l'air correcte... (mis à part ce souci d'image centrale extensible qui s'étend même pas...)
peut être devrai-je tout recoder autrement... c'est peut être ma méthode qui ne convients pas ?!... :s
Merci beaucoup pour ta réponse Babane5, car je commence à désespèrer, je parcourt une nouvelle fois le net on sait jamais... mais ne trouve pas grandes indications... :s
Merci donc pour ta réponse car du coup ce problème me fait ramer. :(
-
En effet j'avais essayer pas mal de chose (côté fuille de style) mais j'avais pas pensé à virer les span et mettre des div... pourquoi ai-je mis des span plustoôt que des div? mystère! lol
Quoi qu'il en soit j'ai tester ta proposition, sur 2 écrans de résolutions différentes mais cette fichu barre bleu (la BanCentre3) me pose toujours problème, dans le résultat que tu m'offres généreusement, cette images apparait en dessous de la bannière... est-ce que c'est moi qui est mal interprèté ton code? :s
edit: Et je vais surement devoir redimensionner mes images, parceque sur ce pc là... en 1024x768, la partie gauche est décalée de la partie droite (sur l'axe horizontale).
sur un 1280x1024 ça à l'air correcte... (mis à part ce souci d'image centrale extensible qui s'étend même pas...)
peut être devrai-je tout recoder autrement... c'est peut être ma méthode qui ne convients pas ?!... :s
babane5
Messages postés
99
Date d'inscription
mercredi 2 novembre 2011
Statut
Membre
Dernière intervention
26 juin 2012
11
11 nov. 2011 à 13:01
11 nov. 2011 à 13:01
Alors, au faite les deux div (gauche et droite) se trouve dans la div centre. Après, il faut que tu mettes une taille en pourcentage au div (center | ex: width: 50%) ou que tu fasses un script un jQuery, mais la sa devient un peux plus chaud. Et pis essaies de mettre le center en position relative.
PS.{ position: absolute; top: 0; left: 0; background: url('tonimage') no-repeat #fff;} et non { position: absolute; top: 0em; left: 0%; background-repeat:no-repeat; } ...
Pareil pour { margin: 0 auto; background: url('tonimage') no-repeat #fff; position: relative; } et non { margin: 0em 0%; background-repeat:repeat; }
PS.{ position: absolute; top: 0; left: 0; background: url('tonimage') no-repeat #fff;} et non { position: absolute; top: 0em; left: 0%; background-repeat:no-repeat; } ...
Pareil pour { margin: 0 auto; background: url('tonimage') no-repeat #fff; position: relative; } et non { margin: 0em 0%; background-repeat:repeat; }
RomantikA-
Messages postés
82
Date d'inscription
samedi 13 août 2011
Statut
Membre
Dernière intervention
28 novembre 2019
8
12 nov. 2011 à 02:36
12 nov. 2011 à 02:36
Bonsoir ici :)
Bonsoir babane5 et encore merci pour ton aide précieuse.
Me voila donner des nouvelles. =)
Alors j'ai mis un bon moment a essayer de comprendre pourquoi certain truc fonctionnaient bizarement , et pourquoi dans le code finale (après examen de tes données) il m'eu semblé qu'il y avait des lignes qui servaient limites à rien... comme :
.gauche { position: absolute; top: 0em; left: 0%; background-repeat:no-repeat; } par exemple.
pas de correspondance dans le code html, donc bien inutile à priori... D'ailleur si je me risquais à supprimer cette ligne, ba c'est cool, ça me changait rien... et quelques autres détail du même style.
J'ai essayer différents trucs et différentes positions (du bidouillage de débutant je sais, et c'est pourquoi ça m'a pris aussi longtemp... lol)
et après pas mal de test et quelques modifs, je suis finalement arrivé à un truc du genre:
le résultat est ici: http://testpage.franceserv.com/indexBis.html (bannière logiquement terminée avec les vraies images)
De même, je n'ai pas trop compris pourquoi il y avait 2 div "centre"... mais bon j'ai vu que de cette façon c'était indispensable... j'ai donc essayé d'arranger de mon mieux... à ma sauce, sans savoir si je fesait bien de le faire d'ailleurs...lol
J'ai également du revoir le design de ma bannière et modifier le découpage et changer des détails qui n'allaient plus... enfin bref, tout ça pour dire qu'il y a encore 2 petit soucis :
- le background blanc de bannière :
J'ai essayer de supprimer le "#fff" (background:no-repeat #fff), mais pour le coup les bandes d'ombres se chevauche et ça me foire tout... :/ donc je vois pas trop comment faire...)
- et un tout petit pitit problème pour l'alignement des hachures diagonales sur la partie "BanCentre2.png" :
Détail à peine visible... mais qui se voit tout de même selon la résolution de l'écran...mais je ne pense pas que cela se modifie avec cette méthode de codage ; enfin vu que je ne suis que débutant en même temps je sais pas trop.)
Bref, je vais pas raconter ma vie heing...lol
Je pense que c'est en très bonne vois, mais je pense aussi que je dois un peut améliorer.
D'ailleurs si ya des critiques constructives, je suis preneur ;)
(si c'est pas trop méchants ^^ )
Sur ce... merci et bonne journée :)
Bonsoir babane5 et encore merci pour ton aide précieuse.
Me voila donner des nouvelles. =)
Alors j'ai mis un bon moment a essayer de comprendre pourquoi certain truc fonctionnaient bizarement , et pourquoi dans le code finale (après examen de tes données) il m'eu semblé qu'il y avait des lignes qui servaient limites à rien... comme :
.gauche { position: absolute; top: 0em; left: 0%; background-repeat:no-repeat; } par exemple.
pas de correspondance dans le code html, donc bien inutile à priori... D'ailleur si je me risquais à supprimer cette ligne, ba c'est cool, ça me changait rien... et quelques autres détail du même style.
J'ai essayer différents trucs et différentes positions (du bidouillage de débutant je sais, et c'est pourquoi ça m'a pris aussi longtemp... lol)
et après pas mal de test et quelques modifs, je suis finalement arrivé à un truc du genre:
<style type="text/css">
.gauche {position:absolute; top:0; left:0; background:no-repeat #fff;}
.centre {position:relative; margin:0 auto; background:url('BanCentre.png') repeat-x #fff; width:100%;}
.droite {position:absolute; top:0; right:0; background:no-repeat #fff;}
</style>
<html>
<body background="ArrPlan.png">
<div class="centre"><img src="BanCentre2.png"/>
<div class="gauche"><img src="BanGauche.png"/></div>
<div class="droite"><img src="BanDroite.png"/></div>
</div>
</body>
</html>
le résultat est ici: http://testpage.franceserv.com/indexBis.html (bannière logiquement terminée avec les vraies images)
De même, je n'ai pas trop compris pourquoi il y avait 2 div "centre"... mais bon j'ai vu que de cette façon c'était indispensable... j'ai donc essayé d'arranger de mon mieux... à ma sauce, sans savoir si je fesait bien de le faire d'ailleurs...lol
J'ai également du revoir le design de ma bannière et modifier le découpage et changer des détails qui n'allaient plus... enfin bref, tout ça pour dire qu'il y a encore 2 petit soucis :
- le background blanc de bannière :
J'ai essayer de supprimer le "#fff" (background:no-repeat #fff), mais pour le coup les bandes d'ombres se chevauche et ça me foire tout... :/ donc je vois pas trop comment faire...)
- et un tout petit pitit problème pour l'alignement des hachures diagonales sur la partie "BanCentre2.png" :
Détail à peine visible... mais qui se voit tout de même selon la résolution de l'écran...mais je ne pense pas que cela se modifie avec cette méthode de codage ; enfin vu que je ne suis que débutant en même temps je sais pas trop.)
Bref, je vais pas raconter ma vie heing...lol
Je pense que c'est en très bonne vois, mais je pense aussi que je dois un peut améliorer.
D'ailleurs si ya des critiques constructives, je suis preneur ;)
(si c'est pas trop méchants ^^ )
Sur ce... merci et bonne journée :)
babane5
Messages postés
99
Date d'inscription
mercredi 2 novembre 2011
Statut
Membre
Dernière intervention
26 juin 2012
11
12 nov. 2011 à 12:00
12 nov. 2011 à 12:00
SAlut,
Dis, tu peux me passer ton adresse email, je dois t'envoyer le fichier html, et les images retouché (pour ton problème d'ombre et d'alignement)
Bonne journée
Dis, tu peux me passer ton adresse email, je dois t'envoyer le fichier html, et les images retouché (pour ton problème d'ombre et d'alignement)
Bonne journée
RomantikA-
Messages postés
82
Date d'inscription
samedi 13 août 2011
Statut
Membre
Dernière intervention
28 novembre 2019
8
12 nov. 2011 à 14:13
12 nov. 2011 à 14:13
Erf, je viens de me rendre compte en essayant de préparer ma bande de background pour le body que là... ça va bloquer... :s
Je me demande si pour le coup ça fera mieux un body également extensible horizontalement (donc en 2 ou 3 parties), ou si une taille minimum (par exemple 700px) et centrée sur le corps de page ça conviendrait mieux...
En ce qui concerne mon e-Mail, je viens de mettre à jour mon profil tu pourras l'y trouver (normalement) ;)
Bonne journée et merci pour ton attention.
Je me demande si pour le coup ça fera mieux un body également extensible horizontalement (donc en 2 ou 3 parties), ou si une taille minimum (par exemple 700px) et centrée sur le corps de page ça conviendrait mieux...
En ce qui concerne mon e-Mail, je viens de mettre à jour mon profil tu pourras l'y trouver (normalement) ;)
Bonne journée et merci pour ton attention.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
RomantikA-
Messages postés
82
Date d'inscription
samedi 13 août 2011
Statut
Membre
Dernière intervention
28 novembre 2019
8
Modifié par RomantikA- le 18/11/2011 à 20:14
Modifié par RomantikA- le 18/11/2011 à 20:14
Bonsoir ici :)
Re Babane5,
je serais curieux de voir ce que tu proposes...
parceque depuis j'ai un peut modifié mon code mais je pense qu'il y a du travail pour le nettoyer... :s
En attend impatiemment de tes nouvelles, je te souhaite une bonne soirée (ou bonne journée... ^^)
Bye all ;)
A l'impossible... nul n'est tout nu... mdrrr
A part mes connaissances!
Re Babane5,
je serais curieux de voir ce que tu proposes...
parceque depuis j'ai un peut modifié mon code mais je pense qu'il y a du travail pour le nettoyer... :s
En attend impatiemment de tes nouvelles, je te souhaite une bonne soirée (ou bonne journée... ^^)
Bye all ;)
A l'impossible... nul n'est tout nu... mdrrr
A part mes connaissances!