Aligner les catégories de l'en-tête

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

Résolu Aligner les catégories de l'en-tête

Message par lunasims57 le Mer 8 Fév 2012 - 19:25

[ J'hésitais à mettre ce sujet dans la partie qui parle de CSS et de HTML, si je me suis trompée j'en suis désolée... ]

Bonjour/bonsoir !


Je travaille actuellement sur l'en-tête de mon forum. Mais voilà, j'ai un soucis pour aligner. ( Et je n'ai pas trouvé d'autres sujets parlant de mon problème ) :

Spoiler:

Je ne sais pas pourquoi, mais la partie "annonces" se met dans "le staff" au lieu d'être à droite. La 3ème image est également censée être à droite de la 2e. Puis finalement mon 3ème problème est que mon forum prends la même largeur et la même taille d'écriture que la catégorie "le staff" ( on peut voir cela en bas de l'image )!

Voici mon CSS :

Code:
.en_tete{
  width:900px;
  min-height:400px;
  height:400px;
  background:url("http://i46.servimg.com/u/f46/17/06/36/36/fonden10.jpg");
  background-repeat:no-repeat;
  margin:0;
  border:1px solid#000000;
  }

/****** Mise en page des colonnes ******/

table tr{
  vertical-align:top;
  }

#tab1_col1{
  width: 200px;
  padding:12px;
  }

#tab1_col2{
  width: 400px;
  padding:12px;
  }

#tab1_col3{
  width: 200px;
  padding:12px;
  }

#tab2_col1{
  width: auto;
  padding:12px;
  }

#tab2_col2{
  width: auto;
  padding:12px;
  }

#tab2_col3{
  width: auto;
  padding:12px;
  }


/****** Mise en page des titres ******/

#titre_en_tete{
  background-color:none;
  border:none;
  height: 24px;
  font-family:Arial;
  font-size: 16px;
  color:#7D0000;
  text-align:center;
  padding: 4px;
  border: 1px solid#7D0000;
  border-top: 1px solid#7D0000;
  -moz-border-radius: 10px;
  }
 
/****** Mise en page du texte ******/

#en_tete_nav{
  font-family:Arial;
  font-size:16px;
  color:#7D0000 ;
  margin-left:35px;
  margin-bottom:-4px;
  }
 
#contenu_en_tete{
  font-family:Arial;
  font-size:14px;
  color:#7D0000 ;
  text-align:justify;
  text-indent:12px;
  padding-left:8px;
  padding-right:8px;
  margin-bottom:-4px;
  }

#en_tete_infos_forum{
  font-family:Arial;
  font-size:12px;
  color:#7D0000 ;
  text-align:justify;
  text-indent:12px;
  padding-left:8px;
  padding-right:8px;
  margin-bottom:-4px;
  }
 
#en_tete_news{
  font-family:Arial;
  font-size:16px;
  color:#7D0000 ;
  margin-left:12px;
  margin-bottom:-4px;
  }

#logo_en_tete, #staff_en_tete{
  text-align:center;
  }

#logo_en_tete a, #staff_en_tete{
  text-decoration:none;
  }

#logo_en_tete img{
  padding-bottom:4px;
  }

#staff_en_tete img{
  padding-left:6px;
  }
     
/****** Mise en page des liens ******/

#lien_en_tete{
  color:#7D0000 ;
  text-decoration:none;
  }

#lien_en_tete:hover{
  border-bottom:dotted 1px #7D0000 ;
  font-weight:bold;
  }

#vers_profil{
  color:#0d1128;
  text-decoration:none;
  font-style:italic;
  }
 
#vers_profil:hover{
  border-bottom:dotted 1px #0d1128;
  }

Et voici mon code HTML :

Code:
 <div class="en_tete">
  <table>
    <tr>
      <td id="tab1_col1">                              </td>
      <td id="tab1_col2"><center>
<font style="color: rgb(54, 27, 29); font-size: 50px; letter-spacing: -2px; text-shadow: 0px 0px 4px rgb(114, 87, 87);"><strong><font color="#800000">Bienvenue !</font></strong> </center></td>
        <td id="tab1_col3"></td>
    </tr>
  </table>
   

  <table>
    <tr>   
      <td id="tab2_col1">
          <h1 id="titre_en_tete"><span style="font-size: 18px; line-height: normal">Nos partenaires</span></h1>
            <p><A href="http://shinichi.forumgratuit.org/"><IMG class=image0R title="Pensionnat Shinichi" alt="" src="http://i41.servimg.com/u/f41/16/51/68/41/shinic12.jpg" border=0></A></p>
            <p><A href="http://atari.forumpro.fr/"><IMG class=image0R title="Académie Atari" alt="" src="http://i40.servimg.com/u/f40/16/00/04/27/90539910.jpg" border=0></A></p>
    </td>

    <td id="tab2_col2">
       
          <h1 id="titre_en_tete"><span style="font-size: 18px; line-height: normal">Le Staff</span></h1>
 
        <table><tbody><tr><td>
<p><A href="http://la-bloody-moon-rpg.forumgratuit.org/u1"><IMG class=image0R title="Korumi Saiaku" alt="" src="http://i46.servimg.com/u/f46/17/06/36/36/korumi10.jpg" border=0></A></p>

          </td><td>
<p><A href="http://la-bloody-moon-rpg.forumgratuit.org/u2"> <IMG class=image0R title="Luna Lockberry" alt="" src="http://i46.servimg.com/u/f46/17/06/36/36/lunaen11.png" border=0></A></p>  <p id="contenu_en_tete"><table><tbody> 

          </td><td>
<p><A href="http://la-bloody-moon-rpg.forumgratuit.org/u5"><IMG class=image0R title="Liam Aïdan" alt="" src="http://i46.servimg.com/u/f46/17/06/36/36/liamen10.jpg" border=0></A></p>

          </td></tr></tbody></table>

        </td>

        <td id="tab2_col3">
          <h1 id="titre_en_tete"><span style="font-size: 18px; line-height: normal">Annonces</span></h1>
            <p id="en_tete_news">En-tête en travaux ! ( ça se voit non ? )</p>
        </td>

    </tr>

  </table>
</div>

Merci beaucoup de votre aide Smile


Dernière édition par lunasims57 le Mer 8 Fév 2012 - 20:15, édité 1 fois

lunasims57
**

Féminin
Messages : 85
Inscrit(e) le : 27/11/2011

http://tsuki-no-gakuen.forumactif.org/
lunasims57 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aligner les catégories de l'en-tête

Message par Anzu le Mer 8 Fév 2012 - 19:48

Bonsoir,

Il y avait pas mal d'erreurs dans votre tableau. Je l'ai donc corrigé:

Code:
        <div class="en_tete">
          <table>
            <tr>
              <td id="tab1_col1">                              </td>
              <td id="tab1_col2"><center>
        <font style="color: rgb(54, 27, 29); font-size: 50px; letter-spacing: -2px; text-shadow: 0px 0px 4px rgb(114, 87, 87);"><strong><font color="#800000">Bienvenue !</font></strong> </center></td>
                <td id="tab1_col3"></td>
            </tr>
          </table>
         
       
          <table>
            <tr> 
              <td id="tab2_col1">
                  <h1 id="titre_en_tete"><span style="font-size: 18px; line-height: normal">Nos partenaires</span></h1>
                    <p><A href="http://shinichi.forumgratuit.org/"><IMG class=image0R title="Pensionnat Shinichi" alt="" src="http://i41.servimg.com/u/f41/16/51/68/41/shinic12.jpg" border=0></A></p>
                    <p><A href="http://atari.forumpro.fr/"><IMG class=image0R title="Académie Atari" alt="" src="http://i40.servimg.com/u/f40/16/00/04/27/90539910.jpg" border=0></A></p>
            </td>
       
            <td id="tab2_col2">
             
                  <h1 id="titre_en_tete"><span style="font-size: 18px; line-height: normal">Le Staff</span></h1>
       
<table><tr><td>
        <p><A href="http://la-bloody-moon-rpg.forumgratuit.org/u1"><IMG class=image0R title="Korumi Saiaku" alt="" src="http://i46.servimg.com/u/f46/17/06/36/36/korumi10.jpg" border=0></A></p>
       
                  </td><td>
        <p><A href="http://la-bloody-moon-rpg.forumgratuit.org/u2"> <IMG class=image0R title="Luna Lockberry" alt="" src="http://i46.servimg.com/u/f46/17/06/36/36/lunaen11.png" border=0></A></p>  <p id="contenu_en_tete">
       
                  </td><td>
        <p><A href="http://la-bloody-moon-rpg.forumgratuit.org/u5"><IMG class=image0R title="Liam Aïdan" alt="" src="http://i46.servimg.com/u/f46/17/06/36/36/liamen10.jpg" border=0></A></p>
       
                  </td></tr></table>

       
                </td>
       
                <td id="tab2_col3">
                  <h1 id="titre_en_tete"><span style="font-size: 18px; line-height: normal">Annonces</span></h1>
                    <p id="en_tete_news">En-tête en travaux ! ( ça se voit non ? )</p>
                </td>
       
            </tr>
       
          </table>
        </div>

Logiquement, tous les problèmes sont corrigés.
Pour l'image, elle n'est pas assez grande, donc c'est tout à fait normal que le contenu dépasse.

Cordialement.

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

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

Résolu Re: Aligner les catégories de l'en-tête

Message par lunasims57 le Mer 8 Fév 2012 - 20:15

Merci beaucoup, ça marche comme je voulais Very Happy ! Je coche résolu.

lunasims57
**

Féminin
Messages : 85
Inscrit(e) le : 27/11/2011

http://tsuki-no-gakuen.forumactif.org/
lunasims57 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