Problème avec ma page d'accueil.

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

Résolu Problème avec ma page d'accueil.

Message par Bibouh le Mar 12 Juil 2011 - 18:17

Bonjour ! Very Happy
Je viens de me lancer dans le codage et je ne suis pas encore au point, voire pas du tout. Sur ma page d'accueil, après quelques recherches peu convaincantes, je n'arrive pas à savoir pourquoi il y a un espace entre les différentes cases que j'ai faîtes.

Voici le code HTML :
Spoiler:
Code:
<center><div class="titrepa">~ Bienvenue dans le Monde d'Aekeva ~</div></center>
<table style="background-color:#73B3D1; width:100%;">
<td class="contexte"><center><div class="titrepa2">Contexte</div></center><div style="height:140px"><font color="#3699C7"><br>
<br>Dans le monde d'Aekeva, la Magie a été bannie par la Science.<br>
<br>
Cette dernière, incarnée par la Reine, règne d'une main de fer sur son Empire.<br>
<br>
Mais dans l'ombre, menée par un mystérieux chef, la Magie s'apprête à revenir...<br>
<br>
Où trouverez-vous votre place ?</font></div><div style="text-align: right"><a style="text-shadow: 1px 1px 2px #ffffff;" href="">En lire plus ?</a></div></td>
<td class="parto"><center><div class="titrepa2">Partenaires</div></center>
<span><marquee behavior="scroll" direction="up" scrollamount="1" height="180"><center><a href="http://eludian.forumactif.com/"><img src="http://i27.servimg.com/u/f27/15/67/97/45/88x31_11.jpg" /></a><a href="http://fandir.forumgratuit.org/"><img src="http://img4.hostingpics.net/pics/722733boutonpng.png" /></a><a href="http://galgals.guildealliance.com/forum.htm"><img src="http://img10.hostingpics.net/pics/3170468831.png" /></a><a href="http://mandalor.forumgratuit.org/"><img src="http://arythea.rd-h.fr/fichierdl/bg/mandalornude8831.jpg" /></a><a href="http://leseigneurdesanneaux.superforum.fr/"><img src="http://img687.imageshack.us/img687/4231/backtodagordagorath.png" /></a><a href="http://celestianne.forumgratuit.org/"><img src="http://i69.servimg.com/u/f69/16/19/82/51/bouton11.jpg" /></a><a href="http://paysdewa.forumsactifs.net/"><img src="http://img4.hostingpics.net/pics/483188Logo1.png" /></a></center></marquee></span></td>
<td class="liens"><center><div class="titrepa2">Liens utiles</div>
<br>
<center><a href="http://aekeva.forumactif.com/t717-royaumes-carte-d-aekeva" class="postlink" target="_blank" rel="nofollow">♦  Carte & Royaumes</a><br>
<br><a href="http://aekeva.forumactif.com/t879-staff-mais-quelle-equipe-diabolique-vous-surveille" class="postlink" target="_blank" rel="nofollow">• L'équipe du forum</a>
<br><a href="http://aekeva.forumactif.com/t877-livre-du-savoir-complementaire" class="postlink" target="_blank" rel="nofollow"><br>♣ Pour bien commencer !</a><br>
<br><a href="http://aekeva.forumactif.com/t455-liste-de-personnages-predefinis" class="postlink" target="_blank" rel="nofollow">♥ Personnages Prédéfinis </a><br>
</center>
<td class="news"><center><div class="titrepa2">Nouveautés</div></center><span><marquee behavior="scroll" direction="down" scrollamount="1" height="140"><font color="#3699C7">>> Une nouvelle Page d'Accueil ! ;D
<br>>> Un concours est lancé ! /OU PAS\
<br>>> ...</font></marquee></span></td>
</table>

& le CSS :
Spoiler:
Code:
.titrepa {
      background-color:#3793BA;
      border-bottom: 4px #CDECFA solid;
      text-align:center;
      font-size: 22px;
      font-color:#CDECFA;
      text-shadow: 1px 1px 2px #000000;}

.titrepa2 {
      -moz-border-radius: 10px 10px 0px 0px;
      -webkit-border-radius: 10px 10px 0px 0px;
      -khtml-border-radius: 10px 10px 0px 0px;
      background-color:#3793BA;
      border-bottom: 4px #cccccc double;
      text-align:center;
      font-size: 20px;
      font-color:#3793BA;
      text-shadow: 1px 1px 2px #cccccc;}

.contexte{
float:left;
height: 200px;
font-size:13px;
width: 630px;
-moz-box-shadow: 0px 0px 4px #000000;
-webkit-box-shadow: 0px 0px 4px #000000;
-khtml-box-shadow: 0px 0px 4px #000000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border: 1px solid #3793BA;
background-color:#CDECFA;
text-align: center;}

.parto {
float:right;
font-size:13px;
-moz-box-shadow: 0px 0px 4px #000000;
-webkit-box-shadow: 0px 0px 4px #000000;
box-shadow: 0px 0px 4px #000000;
height: 200px;
width: 320px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-left: 10px;
border: 1px solid #3793BA;
background-color: #CDECFA;
text-align: center;}

.news{
float:right;
height: 160px;
font-size:13px;
width: 630px;
-moz-box-shadow: 0px 0px 4px #000000;
-webkit-box-shadow: 0px 0px 4px #000000;
-khtml-box-shadow: 0px 0px 4px #00000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border: 1px solid #3793BA;
background-color:#CDECFA;
margin-left: 10px;
text-align: center;}

.liens{
float:left;
font-size:13px;
-moz-box-shadow: 0px 0px 4px #000000;
-webkit-box-shadow: 0px 0px 4px #000000;
box-shadow: 0px 0px 4px #000000;
height: 160px;
width: 320px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
border: 1px solid #3793BA;
background-color: #CDECFA;
text-align: center;}
Pouvez-vous m'éclairer ? ^-^
Merci d'avance & bonne soirée ! ♫


Dernière édition par Bibouh le Mar 12 Juil 2011 - 19:11, édité 1 fois

Bibouh
**

Féminin
Messages : 57
Inscrit(e) le : 21/12/2010

http://aekeva.forumactif.com/
Bibouh a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec ma page d'accueil.

Message par Invité le Mar 12 Juil 2011 - 19:03

Bonsoir,
Votre tableau est sur une seule ligne, c'est pour cela qu'il y a des espaces. Ce qu'il vous faut pour mettre tout en place ce sont 2 tableaux à la suite l'un de l'autre.
N'oubliez pas d'ouvrir les lignes <tr> avant les cellules <td> et bien sur de refermer cellules et lignes Wink .
Code:
<center><div class="titrepa">~ Bienvenue dans le Monde d'Aekeva ~</div></center>
<table style="background-color:#73B3D1; width:100%;">
<td class="contexte"><center><div class="titrepa2">Contexte</div></center><font color="#3699C7"><br>
<br>Dans le monde d'Aekeva, la Magie a été bannie par la Science.<br>
<br>
Cette dernière, incarnée par la Reine, règne d'une main de fer sur son Empire.<br>
<br>
Mais dans l'ombre, menée par un mystérieux chef, la Magie s'apprête à revenir...<br>
<br>
Où trouverez-vous votre place ?</font><div style="text-align: right"><a style="text-shadow: 1px 1px 2px #ffffff;" href="">En lire plus ?</a></div></td>
<td class="parto"><center><div class="titrepa2">Partenaires</div></center>
<span><marquee behavior="scroll" direction="up" scrollamount="1" height="180"><center><a href="http://eludian.forumactif.com/"><img src="http://i27.servimg.com/u/f27/15/67/97/45/88x31_11.jpg" /></a><a href="http://fandir.forumgratuit.org/"><img src="http://img4.hostingpics.net/pics/722733boutonpng.png" /></a><a href="http://galgals.guildealliance.com/forum.htm"><img src="http://img10.hostingpics.net/pics/3170468831.png" /></a><a href="http://mandalor.forumgratuit.org/"><img src="http://arythea.rd-h.fr/fichierdl/bg/mandalornude8831.jpg" /></a><a href="http://leseigneurdesanneaux.superforum.fr/"><img src="http://img687.imageshack.us/img687/4231/backtodagordagorath.png" /></a><a href="http://celestianne.forumgratuit.org/"><img src="http://i69.servimg.com/u/f69/16/19/82/51/bouton11.jpg" /></a><a href="http://paysdewa.forumsactifs.net/"><img src="http://img4.hostingpics.net/pics/483188Logo1.png" /></a></center></marquee></span></td></tr></table>
<table style="background-color:#73B3D1; width:100%;"><tr>
<td class="liens"><center><div class="titrepa2">Liens utiles</div>
<br>
<center><a href="http://aekeva.forumactif.com/t717-royaumes-carte-d-aekeva" class="postlink" target="_blank" rel="nofollow">♦  Carte & Royaumes</a><br>
<br><a href="http://aekeva.forumactif.com/t879-staff-mais-quelle-equipe-diabolique-vous-surveille" class="postlink" target="_blank" rel="nofollow">• L'équipe du forum</a>
<br><a href="http://aekeva.forumactif.com/t877-livre-du-savoir-complementaire" class="postlink" target="_blank" rel="nofollow"><br>♣ Pour bien commencer !</a><br>
<br><a href="http://aekeva.forumactif.com/t455-liste-de-personnages-predefinis" class="postlink" target="_blank" rel="nofollow">♥ Personnages Prédéfinis </a><br>
</center>
<td class="news"><center><div class="titrepa2">Nouveautés</div></center><span><marquee behavior="scroll" direction="down" scrollamount="1" height="140"><font color="#3699C7">>> Une nouvelle Page d'Accueil ! ;D
<br>>> Un concours est lancé ! /OU PAS\
<br>>> ...</font></marquee></span></td></tr>
</table>

Dans votre CSS, les float: left et float: right sont inutiles, je les ai remplacés par vertical-align: top, pour que les titre et les textes se placent bien:
Code:
.titrepa {
      background-color:#3793BA;
      border-bottom: 4px #CDECFA solid;
      text-align:center;
      font-size: 22px;
      font-color:#CDECFA;
      text-shadow: 1px 1px 2px #000000;}

.titrepa2 {
      -moz-border-radius: 10px 10px 0px 0px;
      -webkit-border-radius: 10px 10px 0px 0px;
      -khtml-border-radius: 10px 10px 0px 0px;
      background-color:#3793BA;
      border-bottom: 4px #cccccc double;
      text-align:center;
      font-size: 20px;
      font-color:#3793BA;
      text-shadow: 1px 1px 2px #cccccc;}

.contexte{
vertical-align: top;
height: 200px;
font-size:13px;
width: 630px;
-moz-box-shadow: 0px 0px 4px #000000;
-webkit-box-shadow: 0px 0px 4px #000000;
-khtml-box-shadow: 0px 0px 4px #000000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border: 1px solid #3793BA;
background-color:#CDECFA;
text-align: center;}

.parto {
vertical-align: top;
font-size:13px;
-moz-box-shadow: 0px 0px 4px #000000;
-webkit-box-shadow: 0px 0px 4px #000000;
box-shadow: 0px 0px 4px #000000;
height: 200px;
width: 320px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-left: 10px;
border: 1px solid #3793BA;
background-color: #CDECFA;
text-align: center;}

.news{
vertical-align: top;
height: 160px;
font-size:13px;
width: 630px;
-moz-box-shadow: 0px 0px 4px #000000;
-webkit-box-shadow: 0px 0px 4px #000000;
-khtml-box-shadow: 0px 0px 4px #00000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border: 1px solid #3793BA;
background-color:#CDECFA;
margin-left: 10px;
text-align: center;}

.liens{
vertical-align: top;
font-size:13px;
-moz-box-shadow: 0px 0px 4px #000000;
-webkit-box-shadow: 0px 0px 4px #000000;
box-shadow: 0px 0px 4px #000000;
height: 160px;
width: 320px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
border: 1px solid #3793BA;
background-color: #CDECFA;
text-align: center;}

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec ma page d'accueil.

Message par Bibouh le Mar 12 Juil 2011 - 19:11

Merci beaucoup, je pensais à tout revoir sauf mon tableau ! Mr. Green
Et merci encore pour cette rapidité ! Very Happy

Bibouh
**

Féminin
Messages : 57
Inscrit(e) le : 21/12/2010

http://aekeva.forumactif.com/
Bibouh 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