Problème de codage - Page d'Accueil cliquable
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Problème de codage - Page d'Accueil cliquable
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 !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 ?
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
Re: Problème de codage - Page d'Accueil cliquable
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 :
et rajoutez ceci à votre partie CSS :
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 */
Re: Problème de codage - Page d'Accueil cliquable
Merci beaucoup, tout est bon !
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum