Page d'accueuil petite modif d'un code

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

Résolu Page d'accueuil petite modif d'un code

Message par Gabee le Mar 4 Sep 2012 - 0:01

Bonjour,
Il y a peu de temps j'ai passé une commande ici,je souhaiterais simplement modifier un peu le code pour enlever la partie "liens utiles".

Voilà le code html :
Code:
  <table width="800px">
        <tr>
      <td rowspan="3" width="300px">
      <div class="titre1"><div style="text-shadow: 0px 0px 4px red;">Le staff</div></div><br><div class="boite1">
      <img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t14.jpg" class="transparence"><br><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t16.jpg" class="transparence"><img src="URL DE L'IMAGE" class="transparence"><img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence">
      </div></td>
      <td rowspan="2" width="350px">
      <div class="titre1"><div style="text-shadow: 0px 0px 4px red;">Bienvenue sur ROTN</div></div><br><div class="boite2">
      <div style="height:200px;overflow:auto;width: 300px;
    padding: 10px;">
  Tu viens d'arriver dans le monde le plus cruel qui soit avec des créatures dont tu ignorais l'existence avant. Les vampires se sont dévoilés au grand jour inspirant la panique général chez les humains. Les elfes,eux,n'avaient rien à s'inquiéter,car ils bénéficient d'une infaillible protection. Les rois et reines se sont mis d'accord,chacun devraient rester sur son territoire sinon il y aurait des problèmes.
<img src="http://i31.servimg.com/u/f31/16/91/07/21/61345012.png" border="0" alt="" />
Ensuite tu as avec toi des anges et des démons dont tous ignorent leur race. Une guerre menace d'éclater dans ce beau ciel bleu qui risque d'être souillé de sang tout comme le sol. Pour couronner le tout,une autre guerre risque d'apparaître entre les elfes et les humains contre les vampires. La tristesse,la joie,le bonheur comme le malheur  sont au rendez-vous.
<img src="http://i31.servimg.com/u/f31/16/91/07/21/61345012.png" border="0" alt="" />

 <br>
      Tu as une histoire,un passé,un présent et un futur.
Que feras-tu quand tu mettras les pieds dans ce monde où la guerre le menace ?
      </div></div></td>
        <td rowspan="3" width="300px; height: 150px;">
      <div class="titre1"><div style="text-shadow: 0px 0px 4px red;">Annonces</div></div><br><div  class="boite1">
      <span><marquee behavior="scroll" direction="down" scrollamount="1" height="250">
    <center>~ Annonce 1<br>
    ~ Annonce 2<br>
    ~ Annonce 3<br>
    ~ Annonce 4<br>
    ~ Annonce 5<br>
    ~ Annonce 6<br>
    </marquee></span></center>
      </div></td>
      </tr>
   
      <tr>
      </tr>
   
      <tr>
      <td rowspan="2" width="400px"><div  class="boite4">
      <img src="http://www.servimg.com/u/f31/16/91/07/21/sans_t10.jpg">
   
   
      </div></td>
        </tr>
     
      <tr>
      <td width="200px">
      <div class="titre1"><div style="text-shadow: 0px 0px 4px red;">Liens utiles</div></div><br><div  class="boite3">
   
      <table style="height:200px;width:100%;">
    <tr><td style="vertical-align:top;text-align:center;width:100%;">
   
    <script src="http://www.archive-host.com/files/775966/96de005e35ffd2b9823d2b1d229d90d18341a601/cssllistederoulanteavecnavigateur.js"></script>
   
    <script src="http://www.archive-host.com/files/775967/96de005e35ffd2b9823d2b1d229d90d18341a601/csslistederoulante.js"></script>
         

        <!-- script du menu -->
    <script type="text/javascript" src="dynMenu.js"></script>
   
    <!-- détéction du navigateur -->
    <script type="text/javascript" src="browserdetect.js"></script>
   
   
   
    <!-- liste imbriquée de liens qui fera office de menu -->
    <ul id="menu">
        <li><a href="#menu1">Tout d'abord</a>
            <ul>
                <li><a href="#"><a href="http://regionofthenight.forum-canada.com/t99-reglement">Règlement</a>    </a></li>
   
                <li><a href="#"><a href="LienLienLien">Contexte</a></a>

                         
                        </li>
                 
                </li>
                <li><a href="#"><a href="LienLienLien">Métier</a></a></li>
   
                <li><a href="#"><a href="LienLienLien">Carte</a></a>
                 
                </li>
   
            </ul>
        </li>
        <li><a href="#menu2" >Votre personnage</a>
            <ul>
                <li><a href="#"><a href="LienLienLien">Les prédéfinis</a></a></a></li>
                <li><a href="#"><a href="LienLienLien">texte</a></a></a></li>
                <li><a href="#">élément 3eeee</a></li>
   
            </ul>
        </li>
        <li><a href="#menu3" >menu 3</a>
            <ul>
                <li><a href="#">élément 1rrr</a></li>
                <li><a href="#">élément 2ttt</a></li>
                <li><a href="#">élément 3yyy</a></li>
   
            </ul>
        </li>
    </ul>
   
   
   
    <script type="text/javascript">
        initMenu();
    </script>
    </td></tr></table></div></td>
   
    </tr>
      </table>

      <br>
    <center><div class="partenaires"><p><marquee class="html-marquee2" direction="left" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>

    <a href="http://www.clanofthemoon.forumgratuit.org" target="_blank"><img src="http://nsa27.casimages.com/img/2011/07/16/110716100821717052.jpg"></a>

  <a href="http://lifehouse-fan.kazeo.com/" target="_blank"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t12.jpg"></a>


  <a href="http://lifehouse-fan.forum-canada.com/" target="_blank"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t13.jpg"></a>

    </marquee></p></div></center>

Et le css

Code:
/* effet de transparence image */

.transparence {
background-color: transparent;
border: none;
opacity: 0.5;
}

.transparence:hover{
background-color: transparent;
border: none;
opacity: 2;
}

.transparence2 {
margin: 3px;
background-color: transparent;
border: none;
opacity: 0.5;
}

.transparence2:hover{
background-color: transparent;
border: none;
opacity: 2;
}


.titre1{
color: #8F3D3D;
font-family: georgia;
font-size: 20px;
letter-spacing: -2px;
text-transform: lowercase;
text-align: center;
}

.html-marquee2 {height:31px;}

.partenaires {
background-color: #0E0E0E;
background-image: url(http://img15.hostingpics.net/pics/874614Partenaires.png);
background-position: left center;
background-repeat: no-repeat;
padding: 1px 10px 1px 250px;
width: 500px;
}
.partenaires p {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background-color: #0E0E0E;
border-bottom: 3px solid #0E0E0E;
border-left: 3px solid #0E0E0E;
border-radius: 20px;
border-right: 3px solid #0E0E0E;
height: 31px;
padding: 6px;
}
.partenaires img {
  box-shadow: 0px 0px 4px #999; }

.boite1 {
background-color: #0E0E0E;
padding: 14px;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}

        .boite2 {
        background-color:  #0E0E0E;/*couleur de fond*/
        margin-left: 30px;
        width: 310px; /*la largeur*/
        border-radius: 30px; /*les bordures arrondies pour tout les navigateurs*/
        -moz-border-radius: 30px; /*les bordures arrondies pour mozilla*/
        -webkit-border-radius: 30px; /*les bordures arrondies pour google chrome*/
        }


.chatling {
color: #111;
font-size: 13px;
font-family: trebuchet ms;
line-height: 13px;
}
.boite4{margin-left: 60px;
  margin-top: -150px;}

/* CSS du menu vertical, bieler batiste */
 
 .menu{
    position:absolute;
    /* solve a Opera7/IE display bug */
    width:152px;
    width/**/:150px;
    border-top: 1px #000 solid;
    border-left: 1px #000 solid;
    border-right: 1px #000 solid;
    margin:0;
    padding:0;
    }
 
.menu span{
    display:none;
    }
 
.menu ul{
    border-top: 1px #000 solid;
    border-left: 1px #000 solid;
    border-right: 1px #000 solid;
    margin:0;
    padding:0;
    position:absolute; /* important */
    width:152px;
    width/**/:150px;
    }
 
.menu li ul{
    visibility:hidden;
    }
         
.menu li ul{
    margin-left:150px; /* be careful */
    margin-top:-24px;
    }
 
.menu a{
    text-align:center;
    background-color: #0E0E0E;
    color:#000;
    text-weight:bold;
    display:block;
    width:150px;
    border-bottom: 1px #000 solid;
    text-decoration:none;
    margin:0;
    padding:3px 0 3px 0; /* em units can creat little graphic bug in mozilla */
    }
 
.menu a:hover{
    background-color: #242424;
    }
 
/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #242424;
}
 
.menu span{
    /* hide some accessibility stuff */
    display:none;
    }
     
.menu li{
    width:150px;
    display:block; 
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    }
 
/* IE PC selector */
* html .menu li {
    display:inline; /* solve a IE PC list bug */
    float:none; /* solve a IE5 clav nav bug */
    }

 
a.linkOver{
    background-color: #eee;
    }

Merci.


Dernière édition par Gabee le Mer 26 Sep 2012 - 0:03, édité 1 fois

Gabee
Nouveau membre

Messages : 17
Inscrit(e) le : 29/07/2012

http://regionofthenight.forum-canada.com
Gabee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueuil petite modif d'un code

Message par Milouze14 le Mar 4 Sep 2012 - 4:05

Salut Gabee,

supprime tout le contenu et remplace par ceci:
Code:
      <table width="800px">
            <tr>
          <td rowspan="3" width="300px">
          <div class="titre1"><div style="text-shadow: 0px 0px 4px red;">Le staff</div></div><br><div class="boite1">
          <img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t14.jpg" class="transparence"><br><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t16.jpg" class="transparence"><img src="URL DE L'IMAGE" class="transparence"><img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence">
          </div></td>
          <td rowspan="2" width="350px">
          <div class="titre1"><div style="text-shadow: 0px 0px 4px red;">Bienvenue sur ROTN</div></div><br><div class="boite2">
          <div style="height:200px;overflow:auto;width: 300px;
        padding: 10px;">
      Tu viens d'arriver dans le monde le plus cruel qui soit avec des créatures dont tu ignorais l'existence avant. Les vampires se sont dévoilés au grand jour inspirant la panique général chez les humains. Les elfes,eux,n'avaient rien à s'inquiéter,car ils bénéficient d'une infaillible protection. Les rois et reines se sont mis d'accord,chacun devraient rester sur son territoire sinon il y aurait des problèmes.
    <img src="http://i31.servimg.com/u/f31/16/91/07/21/61345012.png" border="0" alt="" />
    Ensuite tu as avec toi des anges et des démons dont tous ignorent leur race. Une guerre menace d'éclater dans ce beau ciel bleu qui risque d'être souillé de sang tout comme le sol. Pour couronner le tout,une autre guerre risque d'apparaître entre les elfes et les humains contre les vampires. La tristesse,la joie,le bonheur comme le malheur  sont au rendez-vous.
    <img src="http://i31.servimg.com/u/f31/16/91/07/21/61345012.png" border="0" alt="" />

    <br>
          Tu as une histoire,un passé,un présent et un futur.
    Que feras-tu quand tu mettras les pieds dans ce monde où la guerre le menace ?
          </div></div></td>
            <td rowspan="3" width="300px; height: 150px;">
          <div class="titre1"><div style="text-shadow: 0px 0px 4px red;">Annonces</div></div><br><div  class="boite1">
          <span><marquee behavior="scroll" direction="down" scrollamount="1" height="250">
        <center>~ Annonce 1<br>
        ~ Annonce 2<br>
        ~ Annonce 3<br>
        ~ Annonce 4<br>
        ~ Annonce 5<br>
        ~ Annonce 6<br>
        </marquee></span></center>
          </div></td>
          </tr>
     
          <tr>
          </tr>
     
          <tr>
          <td rowspan="2" width="400px"><div  class="boite4">
          <img src="http://www.servimg.com/u/f31/16/91/07/21/sans_t10.jpg">
     
     
          </div></td>
            </tr>
       
         
          </table>

          <br>
        <center><div class="partenaires"><p><marquee class="html-marquee2" direction="left" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>

        <a href="http://www.clanofthemoon.forumgratuit.org" target="_blank"><img src="http://nsa27.casimages.com/img/2011/07/16/110716100821717052.jpg"></a>

      <a href="http://lifehouse-fan.kazeo.com/" target="_blank"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t12.jpg"></a>


      <a href="http://lifehouse-fan.forum-canada.com/" target="_blank"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t13.jpg"></a>

        </marquee></p></div></center>

Ne touche à rien dans ta CSS Wink .

Bonne journée.
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueuil petite modif d'un code

Message par Gabee le Dim 9 Sep 2012 - 1:13

OK ça marche,ce que je voulais qui disparaisse à disparut,mais maintenant j'ai l'image en plein milieu de la boîte 2




et en rouge c'est l'endroit où elle doit être.

Gabee
Nouveau membre

Messages : 17
Inscrit(e) le : 29/07/2012

http://regionofthenight.forum-canada.com
Gabee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueuil petite modif d'un code

Message par Milouze14 le Dim 9 Sep 2012 - 6:14

Salut Gabee ,
j'ai modifié tout ton tableau ainsi que la feuille de style,
le résultat est identique Wink .

Supprimes la partie css que tu as déposée ici.


Les quatre parties importantes de ta page d 'accueil se nomment respectivement:
Le bloc complet sans les partenaires:
Code:
<div id="M14_tout">
Le premier tableau:
Code:
 <div class="M14_tab1">
Le deuxième tableau:
Code:
 <div class="M14_tab2">
Le troisième tableau:
Code:
 <div class="M14_tab3">


Elles sont mentionnées et identifiées dans ta css et
ensuite il suffit de les déplacer à ta convenance Wink .


Le code html:
Spoiler:

Code:
 
<div id="M14_tout">
 <div class="M14_tab1"><div class="titre1">Le staff</div><br><div class="boite1">
          <img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t14.jpg" class="transparence"><br><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t16.jpg" class="transparence"><img src="URL DE L'IMAGE" class="transparence"><img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence">
          </div>
</div><div class="M14_tab2"><div class="titre1">Bienvenue sur ROTN</div><br><div class="boite2">
      Tu viens d'arriver dans le monde le plus cruel qui soit avec des créatures dont tu ignorais l'existence avant. Les vampires se sont dévoilés au grand jour inspirant la panique général chez les humains. Les elfes,eux,n'avaient rien à s'inquiéter,car ils bénéficient d'une infaillible protection. Les rois et reines se sont mis d'accord,chacun devraient rester sur son territoire sinon il y aurait des problèmes.
    <img src="http://i31.servimg.com/u/f31/16/91/07/21/61345012.png" border="0" alt="" />
    Ensuite tu as avec toi des anges et des démons dont tous ignorent leur race. Une guerre menace d'éclater dans ce beau ciel bleu qui risque d'être souillé de sang tout comme le sol. Pour couronner le tout,une autre guerre risque d'apparaître entre les elfes et les humains contre les vampires. La tristesse,la joie,le bonheur comme le malheur  sont au rendez-vous.
    <img src="http://i31.servimg.com/u/f31/16/91/07/21/61345012.png" border="0" alt="" />

    <br>
          Tu as une histoire,un passé,un présent et un futur.
    Que feras-tu quand tu mettras les pieds dans ce monde où la guerre le menace ?<br><br>
</div><div class="M14_image"><img src="http://www.servimg.com/u/f31/16/91/07/21/sans_t10.jpg" border="0" alt="" />
</div>

</div><div class="M14_tab3">
          <div class="titre1">Annonces</div><br><div  class="boite1">
          <span class="annonce_defil"><marquee behavior="scroll" direction="down" scrollamount="1" height="250">
        <center>~ Annonce 1<br>
        ~ Annonce 2<br>
        ~ Annonce 3<br>
        ~ Annonce 4<br>
        ~ Annonce 5<br>
        ~ Annonce 6<br>
        </marquee></center></span>
          </div>
</div>
</div>
<div class="partenaires"><p><marquee class="html-marquee2" direction="left" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>
        <a href="http://www.clanofthemoon.forumgratuit.org" target="_blank"><img src="http://nsa27.casimages.com/img/2011/07/16/110716100821717052.jpg"></a>
      <a href="http://lifehouse-fan.kazeo.com/" target="_blank"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t12.jpg"></a>

      <a href="http://lifehouse-fan.forum-canada.com/" target="_blank"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t13.jpg"></a>

        </marquee></p></div>


La C.S.S:
Spoiler:

Code:
 
/*Le bloc complet sans les partenaires*/
#M14_tout
{
  width:100%;
  height:420px;
  background: #1a1a1a;
  -webkit-border-radius: 6px;
border-radius: 6px;
}
/*Partie 1*/
.M14_tab1 {float:left;margin-left:60px;width:200px;  }
/*Partie 2*/
.M14_tab2 {position:absolute;margin-left:350px; width:200px; }
/*Partie 3*/
.M14_tab3 {float:right;margin-right:60px;width:200px; height: 150px;  }
/*Partie 3 annonces défilantes a droite*/
.annonce_defil {color:#ffffff;font-size:10px;}
/*L image en bas */
.M14_image
{
padding-top:5px;
padding-left:30px;
}
/*Bordures arrondies de l image en bas*/
.M14_image img { -webkit-border-radius: 6px;border-radius: 6px; }

        /* effet de transparence image */
       
        .transparence {
        background-color: transparent;
        border: none;
        opacity: 0.5;
        }
       
        .transparence:hover{
        background-color: transparent;
        border: none;
        opacity: 2;
        }
       
        .transparence2 {
        margin: 3px;
        background-color: transparent;
        border: none;
        opacity: 0.5;
        }
       
        .transparence2:hover{
        background-color: transparent;
        border: none;
        opacity: 2;
        }
       
       
        .titre1{
        position:relative;
        margin-top:15px;
        color: #8F3D3D;
        font-family: georgia;
        text-shadow: 0px 0px 4px red;
        font-size: 20px;
        letter-spacing: -2px;
        text-transform: lowercase;
        text-align: center;
 
        }
       
        .html-marquee2 {height:31px;}
       
        .partenaires {
        background-color: #0E0E0E;
        background-image: url(http://img15.hostingpics.net/pics/874614Partenaires.png);
        background-position: left center;
        background-repeat: no-repeat;
        padding: 1px 10px 1px 250px;
        width: 500px;
        }
        .partenaires p {
        -webkit-border-radius: 20px;
        background-color: #0E0E0E;
        border-bottom: 3px solid #0E0E0E;
        border-left: 3px solid #0E0E0E;
        border-radius: 20px;
        border-right: 3px solid #0E0E0E;
        height: 31px;
        padding: 6px;
        }
        .partenaires img {
          box-shadow: 0px 0px 4px #999; }
       
        .boite1 {
        background-color: #0E0E0E;
        padding: 14px;
        border-radius: 30px;
        -moz-border-radius: 30px;
        -webkit-border-radius: 30px;
        }
       
.boite2
{
background-color:  #0E0E0E;/*couleur de fond*/
height:200px;
overflow:auto;
width: 300px;
padding: 15px 10px 15 px 10px;
color:#ffffff;
font-size:10px;
border-radius: 30px; /*les bordures arrondies pour tout les navigateurs*/
-webkit-border-radius: 30px; /*les bordures arrondies pour google chrome*/
}
       
       
        .chatling {
        color: #111;
        font-size: 13px;
        font-family: trebuchet ms;
        line-height: 13px;
        }

       

       
       



#chatbox_header .cattitle:before { content: "M14"; }
 
#chatbox_header .cattitle strong { visibility: hidden; }
.bloc
{
display: block;
overflow: hidden;
width: 600px;
height: 44px;
transition: 1s all;
-webkit-transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
-ktm-transition: 1s all;
margin: 0px 4px;
cursor: pointer;
}
.bloc_ferme{
background-color:#121212;
display: inline-block;
height:25px;
width:100px;
padding: 2px;
font: smallcaps  13px arial;
text-align: center;
color: #20aec8;
  -webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: none;
border:1px solid #20aec8;
}
.bloc:hover {
height: 210px;
transition: height 1s linear;
-webkit-transition: height 1s linear;
-moz-transition: height 1s linear;
-o-transition: height 1s linear;
-ktm-transition: height 1s linear;
}
.bloc_ouvert{
  background: url(http://r29.imgfast.net/users/2913/73/38/67/smiles/831888.gif)no-repeat center center;
background-color:#141414;
display: inline-block;
width: auto;
font: 12px arial;
text-align: justify;
padding: 4px;
padding-left:5px;
padding-right:5px;
margin-top: 0;
color: #20aec8;
-webkit-border-radius: 8px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 8px;
-moz-border-radius-topleft: 0;
border-radius: 8px;
border-top-left-radius: 0;
border:1px solid #20aec8;
border-top:none;
}
.bloc_open a {color: #ffffff;}
/* fin bloc message*/


a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueuil petite modif d'un code

Message par Gabee le Lun 10 Sep 2012 - 2:12


Salut =)
Encore un mini problème ^^''
L'image est maintenant à sa place,mais là c'est la boite du milieu (la 2 je crois) qui va sur la boite à côté (la 3) comme ça :



je sais pas comment remettre la boite 2 à sa place ^^


Gabee
Nouveau membre

Messages : 17
Inscrit(e) le : 29/07/2012

http://regionofthenight.forum-canada.com
Gabee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueuil petite modif d'un code

Message par Milouze14 le Lun 10 Sep 2012 - 6:43

Salut Gabee,

on a pas la même largeur sur la P.A Wink .

Soit tu tu mets 80% ici:
Général/Configuration/Général/Structure des pages

Largeur du forum (nombre ou %) : 80%

ou alors on revoit tout ton code Wink .
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueuil petite modif d'un code

Message par Gabee le Lun 10 Sep 2012 - 13:28

Je préfère garder ma largeur de page actuelle (40%)
alors on revoit le code s'il te plaît ^^''

Gabee
Nouveau membre

Messages : 17
Inscrit(e) le : 29/07/2012

http://regionofthenight.forum-canada.com
Gabee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueuil petite modif d'un code

Message par Milouze14 le Mar 11 Sep 2012 - 6:03

Salut Gabee,

alors on revoit le code s'il te plaît ^^''

je te tiens informé dans la semaine Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueuil petite modif d'un code

Message par Gabee le Mar 11 Sep 2012 - 12:42

D'accord merci =)

Gabee
Nouveau membre

Messages : 17
Inscrit(e) le : 29/07/2012

http://regionofthenight.forum-canada.com
Gabee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueuil petite modif d'un code

Message par Milouze14 le Mer 12 Sep 2012 - 7:31

Salut Gabee,

bon , c'est plus tôt que prévu Very Happy .
Le code H.T.M.L :
Code:

       
        <div id="M14_tout">
        <div class="M14_tab1"><div class="titre1">Le staff</div><br><div class="boite1">
                  <img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t14.jpg" class="transparence"><br><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t16.jpg" class="transparence"><img src="URL DE L'IMAGE" class="transparence"><img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence">
                  </div>
        </div><div class="M14_tab2"><div class="titre2">Bienvenue sur ROTN</div><br><div class="boite2">
              Tu viens d'arriver dans le monde le plus cruel qui soit avec des créatures dont tu ignorais l'existence avant. Les vampires se sont dévoilés au grand jour inspirant la panique général chez les humains. Les elfes,eux,n'avaient rien à s'inquiéter,car ils bénéficient d'une infaillible protection. Les rois et reines se sont mis d'accord,chacun devraient rester sur son territoire sinon il y aurait des problèmes.
            <img src="http://i31.servimg.com/u/f31/16/91/07/21/61345012.png" border="0" alt="" />
            Ensuite tu as avec toi des anges et des démons dont tous ignorent leur race. Une guerre menace d'éclater dans ce beau ciel bleu qui risque d'être souillé de sang tout comme le sol. Pour couronner le tout,une autre guerre risque d'apparaître entre les elfes et les humains contre les vampires. La tristesse,la joie,le bonheur comme le malheur  sont au rendez-vous.
            <img src="http://i31.servimg.com/u/f31/16/91/07/21/61345012.png" border="0" alt="" />
       
            <br>
                  Tu as une histoire,un passé,un présent et un futur.
            Que feras-tu quand tu mettras les pieds dans ce monde où la guerre le menace ?<br><br>
        </div><div class="M14_image"><img src="http://www.servimg.com/u/f31/16/91/07/21/sans_t10.jpg" border="0" alt="" />
        </div>
       
        </div><div class="M14_tab3">
                  <div class="titre3">Annonces</div><br><div  class="boite1">
                  <span class="annonce_defil"><marquee behavior="scroll" direction="down" scrollamount="1" height="250">
<center>
~ Annonce 1<br>
~ Annonce 2<br>
~ Annonce 3<br>
~ Annonce 4<br>
~ Annonce 5<br>
~ Annonce 6<br>
<img src="http://r24.imgfast.net/users/2913/10/00/00/smiles/2674625213.png"align="absmiddle"><a href="http://www.google.fr/"title="Moteur de recherches, Google est là pour vous.">Une recherche!!!</a><br>
                </marquee></center></span>
                  </div>
        </div>
        </div>
        <div class="partenaires"><p><marquee class="html-marquee2" direction="left" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>
                <a href="http://www.clanofthemoon.forumgratuit.org" target="_blank"><img src="http://nsa27.casimages.com/img/2011/07/16/110716100821717052.jpg"></a>
              <a href="http://lifehouse-fan.kazeo.com/" target="_blank"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t12.jpg"></a>
       
              <a href="http://lifehouse-fan.forum-canada.com/" target="_blank"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t13.jpg"></a>
       
                </marquee></p></div>
       



La C.S.S:
Code:

        /*Le bloc complet sans les partenaires*/
        #M14_tout
        {
          width:100%;
          height:420px;
          background: #1a1a1a;
          -webkit-border-radius: 6px;
        border-radius: 6px;
        }
        /*Tableau à gauche*/
        .M14_tab1 {float:left;margin-left:10px;width:150px;  }
        /*Tableau du centre*/
        .M14_tab2 {position:absolute;margin-left:190px; width:150px; }
        /*Tableau à droite*/
        .M14_tab3 {float:right;margin-right:10px;width:150px; height: 150px;  }
        /*Couleur du texte qui défile */
        .annonce_defil {color:#ffffff;font-size:12px;}
        /*Couleur du lien qui défile */
        .annonce_defil a {color:#20aec8;font-size:12px;}
        /*Couleur du lien au survol qui défile */
        .annonce_defil a:hover {color:#E24911;font-size:12px;}
        /*Espace entre l image et le texte */
        .annonce_defil img {margin-right:5px;}
         
 
        /*L image en dessous du tableau 2 */
        .M14_image
        {
        padding-top:5px;
        padding-left:30px;
        }
        /*Bordures arrondies de l image en dessous du tableau 2*/
        .M14_image img { -webkit-border-radius: 6px;border-radius: 6px; }
       
                /* effet de transparence image */
             
                .transparence {
                background-color: transparent;
                border: none;
                opacity: 0.5;
                }
             
                .transparence:hover{
                background-color: transparent;
                border: none;
                opacity: 2;
                }
             
                .transparence2 {
                margin: 3px;
                background-color: transparent;
                border: none;
                opacity: 0.5;
                }
             
                .transparence2:hover{
                background-color: transparent;
                border: none;
                opacity: 2;
                }
             
              /*Titre du tableau 1 */
                .titre1
                {
                position:relative;
                margin-top:15px;
                width:150px;
                color: #8F3D3D;
                font-family: georgia;
                text-shadow: 0px 0px 4px red;
                font-size: 20px;
                letter-spacing: -2px;
                text-transform: lowercase;
                text-align:center;
                }
                /*Titre du tableau 2*/
                .titre2
                {
                position:relative;
                margin-top:15px;
                width:150px;
                color: #8F3D3D;
                font-family: georgia;
                text-shadow: 0px 0px 4px red;
                font-size: 20px;
                letter-spacing: -2px;
                text-transform: lowercase;
                margin-left:65px;
                }
                /*Titre du tableau 3*/
                .titre3
                {
                position:relative;
                margin-top:15px;
                width:150px;
                color: #8F3D3D;
                font-family: georgia;
                text-shadow: 0px 0px 4px red;
                font-size: 20px;
                letter-spacing: -2px;
                text-transform: lowercase;
                text-align:center;
                }
                .html-marquee2 {height:31px;}
             
                .partenaires {
                background-color: #0E0E0E;
                background-image: url(http://img15.hostingpics.net/pics/874614Partenaires.png);
                background-position: left center;
                background-repeat: no-repeat;
                padding: 1px 10px 1px 250px;
                width: 400px;
                }
                .partenaires p {
                -webkit-border-radius: 20px;
                background-color: #0E0E0E;
                border-bottom: 3px solid #0E0E0E;
                border-left: 3px solid #0E0E0E;
                border-radius: 20px;
                border-right: 3px solid #0E0E0E;
                height: 31px;
                padding: 6px;
                }
                .partenaires img {
                  box-shadow: 0px 0px 4px #999; }
             
                .boite1 {
                background-color: #0E0E0E;
                padding: 14px;
                border-radius: 30px;
                -moz-border-radius: 30px;
                -webkit-border-radius: 30px;
                }
             
        .boite2
        {
        background-color:  #0E0E0E;/*couleur de fond*/
        height:200px;
        overflow:auto;
        width: 300px;
        padding: 15px 10px 15 px 10px;
        color:#ffffff;
        font-size:10px;
        border-radius: 30px; /*les bordures arrondies pour tout les navigateurs*/
        -webkit-border-radius: 30px; /*les bordures arrondies pour google chrome*/
        }

Voilà, espérant t'avoir aidé Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueuil petite modif d'un code

Message par Gabee le Lun 17 Sep 2012 - 2:50

Super merci c'est exactement ce que je voulais.
Il reste encore une mini chose à ajouter ^^ l'écriture de la boite 2 pourrait-elle être de la même taille que la boite 3 ? Quand on lis ça fait pas mal petit.

Après ça je crois que ce sera parfait Smile

Gabee
Nouveau membre

Messages : 17
Inscrit(e) le : 29/07/2012

http://regionofthenight.forum-canada.com
Gabee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueuil petite modif d'un code

Message par Milouze14 le Lun 17 Sep 2012 - 5:55

Salut Gabee,

j'ai modifié le code HTML et la feuille de style,
il faudra donc supprimer les deux parties Wink .
J' ai aussi attribué une class pour la boite 2,
si tu as besoin de changer la police ce sera donc ici:
Code:
.boite2
La valeur 12 px sera a changer Wink
font-size:12px;

Supprimes donc ton code HTML et remplace par celui-ci:
Code:

       
             
                <div id="M14_tout">
                <div class="M14_tab1"><div class="titre1">Le staff</div><br><div class="boite1">
                          <img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t14.jpg" class="transparence"><br><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t16.jpg" class="transparence"><img src="URL DE L'IMAGE" class="transparence"><img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence">
                          </div>
                </div><div class="M14_tab2"><div class="titre2">Bienvenue sur ROTN</div><br><div class="boite2">
                      Tu viens d'arriver dans le monde le plus cruel qui soit avec des créatures dont tu ignorais l'existence avant. Les vampires se sont dévoilés au grand jour inspirant la panique général chez les humains. Les elfes,eux,n'avaient rien à s'inquiéter,car ils bénéficient d'une infaillible protection. Les rois et reines se sont mis d'accord,chacun devraient rester sur son territoire sinon il y aurait des problèmes.
                    <img src="http://i31.servimg.com/u/f31/16/91/07/21/61345012.png" border="0" alt="" />
                    Ensuite tu as avec toi des anges et des démons dont tous ignorent leur race. Une guerre menace d'éclater dans ce beau ciel bleu qui risque d'être souillé de sang tout comme le sol. Pour couronner le tout,une autre guerre risque d'apparaître entre les elfes et les humains contre les vampires. La tristesse,la joie,le bonheur comme le malheur  sont au rendez-vous.
                    <img src="http://i31.servimg.com/u/f31/16/91/07/21/61345012.png" border="0" alt="" />
             
                    <br>
                          Tu as une histoire,un passé,un présent et un futur.
                    Que feras-tu quand tu mettras les pieds dans ce monde où la guerre le menace ?<br><br>
                </div><div class="M14_image"><img src="http://www.servimg.com/u/f31/16/91/07/21/sans_t10.jpg" border="0" alt="" />
                </div>
             
                </div><div class="M14_tab3">
                          <div class="titre3">Annonces</div><br><div  class="boite3">
                          <span class="annonce_defil"><marquee behavior="scroll" direction="down" scrollamount="1" height="250">
        <center>
        ~ Annonce 1<br>
        ~ Annonce 2<br>
        ~ Annonce 3<br>
        ~ Annonce 4<br>
        ~ Annonce 5<br>
        ~ Annonce 6<br>
        <img src="http://r24.imgfast.net/users/2913/10/00/00/smiles/2674625213.png"align="absmiddle"><a href="http://www.google.fr/"title="Moteur de recherches, Google est là pour vous.">Une recherche!!!</a><br>
                        </marquee></center></span>
                          </div>
                </div>
                </div>
                <div class="partenaires"><p><marquee class="html-marquee2" direction="left" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>
                        <a href="http://www.clanofthemoon.forumgratuit.org" target="_blank"><img src="http://nsa27.casimages.com/img/2011/07/16/110716100821717052.jpg"></a>
                      <a href="http://lifehouse-fan.kazeo.com/" target="_blank"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t12.jpg"></a>
             
                      <a href="http://lifehouse-fan.forum-canada.com/" target="_blank"><img src="http://i31.servimg.com/u/f31/16/91/07/21/sans_t13.jpg"></a>
             
                        </marquee></p></div>

Supprimes le contenu dans ta feuille de style qui correspond à ton tableau et remplace par ceci:

Code:

/*Le bloc complet sans les partenaires*/
#M14_tout
{
  width:100%;
  height:420px;
  background: #1a1a1a;
  -webkit-border-radius: 6px;
border-radius: 6px;
}
/*Tableau à gauche*/
.M14_tab1 {float:left;margin-left:10px;width:150px;  }
/*Tableau du centre*/
.M14_tab2 {position:absolute;margin-left:190px; width:150px; }
/*Tableau à droite*/
.M14_tab3 {float:right;margin-right:10px;width:150px; height: 150px;  }
/*Couleur du texte qui défile */
.annonce_defil {color:#ffffff;font-size:12px;}
/*Couleur du lien qui défile */
.annonce_defil a {color:#20aec8;font-size:12px;}
/*Couleur du lien au survol qui défile */
.annonce_defil a:hover {color:#E24911;font-size:12px;}
/*Espace entre l image et le texte */
.annonce_defil img {margin-right:5px;}
 
 
/*L image en dessous du tableau 2 */
.M14_image
{
padding-top:5px;
padding-left:30px;
}
/*Bordures arrondies de l image en dessous du tableau 2*/
.M14_image img { -webkit-border-radius: 6px;border-radius: 6px; }
     
/* effet de transparence image */
   
.transparence {
background-color: transparent;
border: none;
opacity: 0.5;
}
   
.transparence:hover{
background-color: transparent;
border: none;
opacity: 2;
}
   
.transparence2 {
margin: 3px;
background-color: transparent;
border: none;
opacity: 0.5;
}
   
.transparence2:hover{
background-color: transparent;
border: none;
opacity: 2;
}
   
      /*Titre du tableau 1 */
.titre1
{
position:relative;
margin-top:15px;
width:150px;
color: #8F3D3D;
font-family: georgia;
text-shadow: 0px 0px 4px red;
font-size: 20px;
letter-spacing: -2px;
text-transform: lowercase;
text-align:center;
}
/*Titre du tableau 2*/
.titre2
{
position:relative;
margin-top:15px;
width:150px;
color: #8F3D3D;
font-family: georgia;
text-shadow: 0px 0px 4px red;
font-size: 20px;
letter-spacing: -2px;
text-transform: lowercase;
margin-left:65px;
}
/*Titre du tableau 3*/
.titre3
{
position:relative;
margin-top:15px;
width:150px;
color: #8F3D3D;
font-family: georgia;
text-shadow: 0px 0px 4px red;
font-size: 20px;
letter-spacing: -2px;
text-transform: lowercase;
text-align:center;
}
.html-marquee2 {height:31px;}
   
.partenaires {
background-color: #0E0E0E;
background-image: url(http://img15.hostingpics.net/pics/874614Partenaires.png);
background-position: left center;
background-repeat: no-repeat;
padding: 1px 10px 1px 250px;
width: 400px;
}
.partenaires p {
-webkit-border-radius: 20px;
background-color: #0E0E0E;
border-bottom: 3px solid #0E0E0E;
border-left: 3px solid #0E0E0E;
border-radius: 20px;
border-right: 3px solid #0E0E0E;
height: 31px;
padding: 6px;
}
.partenaires img {
  box-shadow: 0px 0px 4px #999; }
   
.boite1 {
background-color: #0E0E0E;
padding: 14px;
border-radius: 30px;
-webkit-border-radius: 30px;
}
   
.boite2
{
background-color:  #0E0E0E;/*couleur de fond*/
height:200px;
overflow:auto;
width: 300px;
padding: 15px 10px 15 px 10px;
color:#ffffff;
font-size:12px;
border-radius: 30px; /*les bordures arrondies pour tout les navigateurs*/
-webkit-border-radius: 30px; /*les bordures arrondies pour google chrome*/
}

 .boite3
{
background-color: #0E0E0E;
padding: 14px;
border-radius: 30px;
-webkit-border-radius: 30px;
}

Penses bien à valider les modifications en cliquant sur le bouton "Valider".

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueuil petite modif d'un code

Message par Gabee le Mer 26 Sep 2012 - 0:02

C'est parfait ! J'ai plus rien à dire (une chance xD) ^-^.

Merci beaucoup !!!

Gabee
Nouveau membre

Messages : 17
Inscrit(e) le : 29/07/2012

http://regionofthenight.forum-canada.com
Gabee 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