Page d'accueil par où commencer ?

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

Résolu Page d'accueil par où commencer ?

Message par Gabee le Lun 6 Aoû 2012 - 23:52

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 !




Dernière édition par Gabee le Sam 11 Aoû 2012 - 18:56, é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'accueil par où commencer ?

Message par Xibition le Mar 7 Aoû 2012 - 1:46

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 Smile

Cordialement.

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

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

Résolu Re: Page d'accueil par où commencer ?

Message par Gabee le Mer 8 Aoû 2012 - 0:19

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

merci de m'aider Very Happy

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'accueil par où commencer ?

Message par Xibition le Mer 8 Aoû 2012 - 1:05

D'accord ^^

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

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

Résolu Re: Page d'accueil par où commencer ?

Message par Gabee le Mer 8 Aoû 2012 - 19:03

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

Spoiler:

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




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'accueil par où commencer ?

Message par Xibition le Mer 8 Aoû 2012 - 22:44

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 ? Smile

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

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

Résolu Re: Page d'accueil par où commencer ?

Message par Gabee le Mer 8 Aoû 2012 - 23:51

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 ?

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'accueil par où commencer ?

Message par Xibition le Jeu 9 Aoû 2012 - 0:40

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>

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

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

Résolu Re: Page d'accueil par où commencer ?

Message par Gabee le Ven 10 Aoû 2012 - 0:21

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 !

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'accueil par où commencer ?

Message par Alex Fowl le Ven 10 Aoû 2012 - 0:34

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>
Smile

Cordialement,

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil par où commencer ?

Message par Xibition le Ven 10 Aoû 2012 - 0:35

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 Very Happy

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

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

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

Résolu Re: Page d'accueil par où commencer ?

Message par Gabee le Ven 10 Aoû 2012 - 18:35


D’accord Wink
Ç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 ! 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'accueil par où commencer ?

Message par Xibition le Sam 11 Aoû 2012 - 13:53

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

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

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

Résolu Re: Page d'accueil par où commencer ?

Message par Chacha le Sam 11 Aoû 2012 - 13:55

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

Bonjour,

Merci de laisser la modération à la... modération !

Je vous invite à lire :

A bientôt sur ForumActif Smile


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 49701
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha 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