Page d'accueil par où commencer ?

[Gabee]

Bonjour,
voilà mon problème ; J'aimerais faire une belle page d'acceuil de ce type : http://sorbet-citron.forumactif.org/ ,mais je n'y connais que très peu en code html et css et avec moi il y a toujours un problème qui fait en sorte que quelque chose ne marche pas.
Du coup je ne sais pas par où commencer.

Version du ofrum : PhpBB2
Naviguateur : Internet Explorer

Merci d'avance !

[Xibition]

Coucou, déjà je te recommande de télécharger un autre navigateur, soit Chrome ou Mozilla. Parce que sur Internet Explorer pleins d'effets n'apparaissent pas.

Sinon pour le codage, je me ferais un plaisir de t'aider à créer ta page d’accueil. J'ai besoin que tu me fasse un schéma de ce que tu veux exactement

Cordialement.

[Gabee]

D'accord merci je vais télécharger mozilla ce soir pour commencer et faire le schéma également.

merci de m'aider

[Xibition]

D'accord ^^

[Gabee]

Je viens d'installer Mozilla sur mon ordi et voici le schéma :

Spoiler:

Je sais pas si c'est réalisable ^^'

[Xibition]

Coucou d'accord je te fais ca. Par contre pour l'image en bas, elle sera placé seule en bas ou c'est l'image de fond de la PA ?
Et pour les "liens importants" ils ne seront pas affichés normalement ? jusqu'à ce que l'on passe la souris dessus ou juste qu'ils changent de couleur au survol ?

Et est ce que je pourrais avoir les images ? pour prendre en compte les dimensions ?

[Gabee]

Finalement je laisse tomber l'image du dessous donc il en reste une seule,celle en bas du contexte :



Pour les liens ce que je veux dire c'est avec l'image pour aider :

Spoiler:

Ce qui est entourer en bleu (par exemple le "pour commencer") quand la souris passe dessus il y a des liens qui apparaissent. (par exemple contexte,règlement,intrigue.)

Tu vois ce que je veux dire ?

[Xibition]

Coucou, voilà s'il y'a quelques choses à modifier je suis là.

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: #DA9191;
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: #E4E4E4;
border-bottom: 3px solid #C57B4A;
border-left: 3px solid #C57B4A;
border-radius: 20px;
border-right: 3px solid #C57B4A;
height: 31px;
padding: 6px;
}
.partenaires img {
  box-shadow: 0px 0px 4px #999; }

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

.boite2 {
background-color: #FFFDFD;
width: 310px;
margin-left: 30px;
}


.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: #ff9;
    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: #aaf;
    }
 
/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #aaf;
}
 
.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;
    }

Le html :

Code:

<table width="800px">
    <tr>
  <td rowspan="3" width="300px">
  <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://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence"><img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence"><br><img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence"><img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" 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">Bienvenue sur ROTN</div><br><div class="boite2">
  <div style="height:200px;overflow:auto;width: 300px;
padding: 10px;">
  Omne igitur hoc, (quidquid est) cui mundi coelique nomen indidimus,
  unum id est, et uno ambitu se cunctaque amplectitur. Partibus differt: unde sol oritur, oriens nuncupatur, aut ortus; quo demergitur,
  occidens, vel occasus; qua decurrit, meridies; ab adversa parte, septentrio. Hujus medio terra sublimis cingitur undique mari: eodemque in duo
  latera, quae hemisphaeria nominantur, ab oriente divisa ad occasum, zonis quinque distinguitur.[2] Mediam aestus infestat, frigus ultimas: reliquae
  habitabiles paria agunt anni tempora, verum non pariter. Antichthones alteram,[3] nos alteram incolimus. Illius situs, ob ardorem intercedentis plagae, incognitus;
  hujus dicendus est. Haec ergo, ab ortu porrecta ad occasum, et, quia sic jacet, aliquanto, quam ubi latissima est, longior, ambitur omnis oceano, quatuorque ex eo
  Maria recipit; unum a septentrione, a meridie duo, quartum ab occasu. Suis locis illa referentur. Hoc primum angustum, nec amplius decem millibus passuum patens,
  terras aperit, atque intrat. Tum, longe lateque diffusum, abigit vaste cedentia litora; iisdemque ex diverso prope coeuntibus, adeo in arctum agitur, ut minus mille
  passibus pateat. Inde se rursus, sed modice admodum, laxat; rursusque etiam, quam fuit, arctius exit in spatium. Quo cum est acceptum, ingens iterum, et magnae paludi,
  cao ad ea flumina, ab altero latere Africam vocamus; ab altero, Europen: ad Nilum, Africam; ad Tanain, Europen. <br>
  Ultra quidquid est, Asia est.
  </div></div></td>
    <td rowspan="3" width="300px; height: 150px;">
  <div class="titre1">Annonces</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">Liens utiles</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">menu 1</a>
        <ul>
            <li><a href="#">élément 1</a></li>
 
            <li><a href="#">élément 2</a>
                <ul>
                    <li><a href="#">élément 1</a></li>
                    <li><a href="#">élément 2</a></li>
                    <li><a href="#">élément 3</a>
                        <ul>
                            <li><a href="#">élément 1</a></li>
 
                            <li><a href="#">élément 2</a></li>
                            <li><a href="#">élément 3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">élément 1</a></li>
 
            <li><a href="#">élément 3</a>
                <ul>
                    <li><a href="#">élément 1</a></li>
                    <li><a href="#">élément 2</a></li>
                    <li><a href="#">élément 3</a></li>
                </ul>
            </li>
 
        </ul>
    </li>
    <li><a href="#menu2" >menu 2</a> 
        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</a></li>
 
        </ul>
    </li>
    <li><a href="#menu3" >menu 3</a> 
        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</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://graph-forum.forumactif.com" target="_blank"><img src="http://img15.hostingpics.net/pics/8685298831.png"></a>

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

[Gabee]

Le fond blanc où le texte du contexte est écrit, on pourrais le mettre du même rose que le fond des autres ?

Sinon c'est super merci !

[Alex Fowl]

Bonsoir,

Comme cela ?

Code:

<table width="800px">
    <tr>
  <td rowspan="3" width="300px">
  <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://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence"><img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence"><br><img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" class="transparence"><img src="http://i49.servimg.com/u/f49/14/89/95/82/no_new15.png" 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">Bienvenue sur ROTN</div><br><div class="boite2">
  <div style="background-color:#DA9191;height:200px;overflow:auto;width: 300px;
padding: 10px;">
  Omne igitur hoc, (quidquid est) cui mundi coelique nomen indidimus,
  unum id est, et uno ambitu se cunctaque amplectitur. Partibus differt: unde sol oritur, oriens nuncupatur, aut ortus; quo demergitur,
  occidens, vel occasus; qua decurrit, meridies; ab adversa parte, septentrio. Hujus medio terra sublimis cingitur undique mari: eodemque in duo
  latera, quae hemisphaeria nominantur, ab oriente divisa ad occasum, zonis quinque distinguitur.[2] Mediam aestus infestat, frigus ultimas: reliquae
  habitabiles paria agunt anni tempora, verum non pariter. Antichthones alteram,[3] nos alteram incolimus. Illius situs, ob ardorem intercedentis plagae, incognitus;
  hujus dicendus est. Haec ergo, ab ortu porrecta ad occasum, et, quia sic jacet, aliquanto, quam ubi latissima est, longior, ambitur omnis oceano, quatuorque ex eo
  Maria recipit; unum a septentrione, a meridie duo, quartum ab occasu. Suis locis illa referentur. Hoc primum angustum, nec amplius decem millibus passuum patens,
  terras aperit, atque intrat. Tum, longe lateque diffusum, abigit vaste cedentia litora; iisdemque ex diverso prope coeuntibus, adeo in arctum agitur, ut minus mille
  passibus pateat. Inde se rursus, sed modice admodum, laxat; rursusque etiam, quam fuit, arctius exit in spatium. Quo cum est acceptum, ingens iterum, et magnae paludi,
  cao ad ea flumina, ab altero latere Africam vocamus; ab altero, Europen: ad Nilum, Africam; ad Tanain, Europen. <br>
  Ultra quidquid est, Asia est.
  </div></div></td>
    <td rowspan="3" width="300px; height: 150px;">
  <div class="titre1">Annonces</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">Liens utiles</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">menu 1</a>
        <ul>
            <li><a href="#">élément 1</a></li>
 
            <li><a href="#">élément 2</a>
                <ul>
                    <li><a href="#">élément 1</a></li>
                    <li><a href="#">élément 2</a></li>
                    <li><a href="#">élément 3</a>
                        <ul>
                            <li><a href="#">élément 1</a></li>
 
                            <li><a href="#">élément 2</a></li>
                            <li><a href="#">élément 3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">élément 1</a></li>
 
            <li><a href="#">élément 3</a>
                <ul>
                    <li><a href="#">élément 1</a></li>
                    <li><a href="#">élément 2</a></li>
                    <li><a href="#">élément 3</a></li>
                </ul>
            </li>
 
        </ul>
    </li>
    <li><a href="#menu2" >menu 2</a> 
        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</a></li>
 
        </ul>
    </li>
    <li><a href="#menu3" >menu 3</a> 
        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</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://graph-forum.forumactif.com" target="_blank"><img src="http://img15.hostingpics.net/pics/8685298831.png"></a>

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

Cordialement,

[Xibition]

Oui bien sur, remplace la partie 'Boite2' dans le css par :

Code:

.boite2 {
background-color: #DA9191; /*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*/
}

La pa est simple pour le moment, à toi de la personnaliser selon les couleurs que tu veux

EDIT : ou utiliser le code d'Alex, toutefois je préfère passer par le css

[Gabee]

D’accord
Ça marche très bien des deux façon,mais je préfère le css aussi ^^

Je crois que c'est tout pour la pa.

Merci beaucoup encore une fois !

[Xibition]

Derien, si le sujet est résolu, pensez à éditer votre premier message et cocher le bouton

[Chacha]

Derien, si le sujet est résolu, pensez à éditer votre premier message et cocher le bouton

Bonjour, Merci de laisser la modération à la... modération ! Je vous invite à lire : - Règles générales du forum - Charte de ce forum A bientôt sur ForumActif