Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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:
Problème de codage - Page d'Accueil cliquable 474507Sanstitre1

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

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

Scoubifitz
Membre actif

Masculin
Messages : 3613
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

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