Problème de codage - Page d'Accueil cliquable

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème de codage - Page d'Accueil cliquable

Message par Leyaa le Sam 20 Déc 2014 - 22:33

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://onceuponatest.forumactif.org/

Description du problème

Bonsoiiir ! Hi
Depuis quelques jours, je bosse sur le nouveau design de mon forum qui devrait arriver pour les fêtes de Décembre. J'ai réussi à tout grapher et coder sans problèmes, excepté sur la PA.
Comme le montre la capture d'écran, j'ai graphé au préalable tout le fond de la page d'accueil pour ensuite y positionner les textes et les liens dans les catégories, parfois à l'aide d'images transparentes rendues cliquables.
Oui mais voilà, ces images cliquables, je n'arrive pas à les positionner correctement sur les écritures "Reglement, Contexte, etc" (il y a une image pour chaque.) Dans le screen, j'ai surligné pour vous montrer la position décalée des images, et ainsi mon problème.
Malheureusement, dès que j'essaie de tout régler avec des <.br> ou des margin, cela décale toute ma colonne et même celle d'à côté, qui elle n'a aucun problème. J'ai beau cherché, je ne trouve vraiment pas d'où vient le problème... Pouvez-vous m'aider ? Sorry

Voici le html de ma PA si besoin:
Code:


ainsi que le CSS, bien que je ne l'ai pas vraiment utilisé:
Code:




Merci beaucoup d'avance pour ceux qui trouveront d'où vient le soucis !


Dernière édition par Leyaa le Mer 24 Déc 2014 - 15:26, édité 2 fois

Leyaa
**

Féminin
Messages : 70
Inscrit(e) le : 04/06/2011

http://arkham-test.forumactif.org
Leyaa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de codage - Page d'Accueil cliquable

Message par Scoubifitz le Mar 23 Déc 2014 - 3:56

bonsoir,

Pas besoin de margin ou autres "br" pour placer des div ...

La règle d'or : Le contenant en position relative , le contenu en position absolue .

remplacez toute la partie HTML de la PA par :

Code:
<div class="pacolor">
<div class="PAbeginning">
Vous êtes à Storybrooke, ville maudite au fin fond du Maine ! Vos souvenirs ne sont que des mensonges, votre réelle identité n'existe plus... La méchante reine est devenue le maire de la ville, et vous vivez là depuis vingt-huit ans sans pouvoir partir. Votre seul espoir ? Une nouvelle venue, Emma Swan. La malédiction ne demande qu'à être brisée, mais pour cela il vous faudra retrouver votre âme d'enfant et croire en la magie...
</div>
<div class="PAdailymirror">
<a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t1052-parutions-du-daily-mirror"></a>
</div>
<div class="PApartner">
<a href="http://onceuponacurse.forumgratuit.fr/t1023-nos-partenaires"><img src="http://img4.hostingpics.net/pics/287921nosamisledevenir.png"/></a><a href="http://onceuponacurse.forumgratuit.fr/t7-demande-de-partenariat"><img src="http://img4.hostingpics.net/pics/287921nosamisledevenir.png"/></a><br/><a href="http://moonlight-rises.forumactif.org/"><img src="https://cdn4.iconfinder.com/data/icons/free-game-icons/48/Key.png" class="tops"/></a><a href="http://with-fire-and-blood.forumactif.fr/"><img src="https://cdn4.iconfinder.com/data/icons/free-game-icons/48/Key.png" class="tops"/></a><a href="http://guiltypleasure.forumgratuit.org/"><img src="https://cdn4.iconfinder.com/data/icons/free-game-icons/48/Key.png" class="tops"/></a><br/><a href="http://www.aht.li/2491597/boutonpartenairesfrozen.png"><img src="https://cdn4.iconfinder.com/data/icons/free-game-icons/48/Key.png" class="tops"/></a><a href="http://www.aht.li/2491597/boutonpartenairesfrozen.png"><img src="https://cdn4.iconfinder.com/data/icons/free-game-icons/48/Key.png" class="tops"/></a><a href="http://www.aht.li/2491597/boutonpartenairesfrozen.png"><img src="https://cdn4.iconfinder.com/data/icons/free-game-icons/48/Key.png" class="tops"/></a><br/><a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t8-liste-des-top-sites-un-petit-clic"><img src="http://img4.hostingpics.net/pics/321488topsite.png"/></a>
</div>
<div class="PAstaff">
<a href="http://onceuponacurse.forumgratuit.fr/t49-louna-nerys-certains-luttent-avec-les-armes-et-d-autres-avec-les-mots" target="_blank"></a><a href="http://onceuponacurse.forumgratuit.fr/t398-mary-margaret-blanchard-siffler-en-travaillant-terminee" target="_blank"></a><a href="http://onceuponacurse.forumgratuit.fr/t71-o-captain-my-captain-sebastian-hopkins-fini" target="_blank"></a><a href="http://onceuponacurse.forumgratuit.fr/t38-aliena-oo-a-chaque-parole-que-vous-direz-il-vous-sortira-de-la-bouche-ou-une-fleur-ou-une-pierre-precieuse" target="_blank"><a href="http://onceuponacurse.forumgratuit.fr/t105-ruby-granny-where-s-the-wolf" target="_blank"></a>
</div>
<div class="PAnews">
<marquee scrollamount="1" direction="up" onmouseout="this.start();" onmouseover="this.stop();" style="height: 115px;">
<em><strong> ☾ 31/08/2012 :</strong> Ouverture officielle du forum. <br/><strong> ☾ 31/08/2014 :</strong> Once upon a Curse a deux an ! <br/><strong> ☾ 31/08/2014 :</strong> Mise à jour du contexte.<br/><strong> ☾ 31/08/2014 :</strong> Mise à jour du règlement.<br/><strong> ☾ 06/11/2014 :</strong> Nouvel habillage pour OUAC !<br/></em>
</marquee><a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t12-nouveautes-du-forum" style="display:inline-block;width:240px;height:20px;"></a>
</div>
<div class="liensrapides">
<a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t5-les-lois-de-la-ville"></a>
  <a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t6-contexte-once-upon-a-curse"></a>
  <a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t15-bottin-des-avatars"></a>
  <a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t16-bottin-des-personnages-de-contes"></a>
  <a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t1372-recapitulatif-des-mondes-magiques"></a>
  <a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t1687-la-chronologie-de-storybrooke"></a>
  <a target="_blank" href="http://youtu.be/hk-TZAJ88gQ"></a>
  </div>
<div class="PAbanderolle">
<marquee behavior="alternate" scrollamount="5" direction="left" onmouseout="this.start();" onmouseover="this.stop();" style="height: 157px;"><a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t1370-pays-imaginaire-1-1"><img src="http://img4.hostingpics.net/pics/720896pvcarmen.png"/></a><a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t98-m-martin-freeman-andrew-e-smith-libre"><img src="http://img4.hostingpics.net/pics/939985pvnikola.png"/></a><a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t1371-foret-enchantee-4-4"><img src="http://img4.hostingpics.net/pics/244297pvgwen.png"/></a><a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t1594-m-matt-smith-zach-winter-libre"><img src="http://img4.hostingpics.net/pics/405136pvadrian.png"/></a><a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t110-f-kate-winslet-melinda-pearl-libre"><img src="http://img4.hostingpics.net/pics/526614pvannasoline.png"/></a><a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t631-m-joseph-morgan-jacob-e-wayland-libre"><img src="http://img4.hostingpics.net/pics/664612pvoliver.png"/></a><a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t1370-pays-imaginaire-1-1"><img src="http://img4.hostingpics.net/pics/446002pvsedna.png"/></a><a target="_blank" href="http://onceuponacurse.forumgratuit.fr/t1370-pays-imaginaire-1-1"><img src="http://img4.hostingpics.net/pics/505032pvamaury.png"/></a></marquee>
</div>
</div>

et rajoutez ceci à votre partie CSS :

Code:
/* debut du contenant */

.pacolor{
  background:url(http://img4.hostingpics.net/pics/485831PAOUACcopie.png);
  width:781px;
  height: 848px;
  border-radius: 50px;
  position:relative;
  margin:auto;
}
/* fin du contenant */
/* debut du contenu */

.PAbeginning{
  overflow: auto;
  width: 300px;
  height: 120px;
  text-align:justify;
  color:#d2bba9;
  font-size:15px;
  font-family:Smythe;
  padding:0 5px;
  position:absolute;
  top:40px;
  left:30px;
}
.PAdailymirror{
  position:absolute;
  top:180px;
  left:25px;
}
.PAdailymirror a{
  display:block;
  width:220px;
  height:120px;
}
.PApartner{
  text-align:center;
  position:absolute;
  top:375px;
  left:80px;
}
.PAstaff{
  position:absolute;
  top:85px;
  right:40px;
}
.PAstaff a{
  display:inline-block;
  width:54px;
  height:78px;
  margin:0 2px;
}
.PAstaff a:hover{
  background:gray;opacity:0.5
}
.PAnews{
  width:245px;
  text-align:justify;
  color:#d2bba9;
  font-size:17px;
  font-family:smythe;
  position:absolute;
  top:220px;
  right:20px;
}
.liensrapides{
  width:300px;
  position:absolute;
  top:375px;
  right:0px;
  text-align:center;
}
.liensrapides a{
  display:block;
  height:29px;
}
.liensrapides a:hover{
  background:gray;opacity:0.5
}
.PAbanderolle{
  position:absolute;
  width:780px;
  bottom:50px;
  left:0;
}
/* fin du contenu */

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de codage - Page d'Accueil cliquable

Message par Leyaa le Mer 24 Déc 2014 - 15:25

Merci beaucoup, tout est bon ! Yes

Leyaa
**

Féminin
Messages : 70
Inscrit(e) le : 04/06/2011

http://arkham-test.forumactif.org
Leyaa a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum