Aide pour PA

2 participants

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

Résolu Aide pour PA

Message par LGDC Ephemere Dim 11 Sep 2011 - 13:51

Bonjour, bonjour. J'ai récemment créé mon forum. J'ai regardé quelques tuto pour faire ma PA... Mais je n'en trouve pas qui ressemblent à ce que je voudrais... Je m'y connais un peu en HTML, etc... Mais ce que j'ai fait ne ressemble pas du tout à ce que je veux. Voilà ce que je voudrais :
Spoiler:

Attention, je en demande pas à ce qu'on me donne le code tout prêt mais juste me donner les bases du schéma Smile Je modifierais à ma façon le reste.

Merci d'avance ! ^^

Cordialement.


Dernière édition par LGDC Ephemere le Sam 24 Sep 2011 - 10:26, édité 1 fois
avatar

LGDC Ephemere
Nouveau membre

Messages : 16
Inscrit(e) le : 11/09/2011

http://lgdc-ephemere.forumactif.fr/
LGDC Ephemere a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour PA

Message par Invité Lun 12 Sep 2011 - 9:44

Bonjour,

Il me semble qu'à l'aide d'un tableau, c'est réalisable. Quelque chose qui ressemblerait à ceci au départ:
Code:
<table width="100%">
<tr><td> le staff</td><td rowspan="2">les news</td><td>Song</td></tr>
<tr><td> les partenaires</td><td> les liens </td></tr>
</table>
Il suffit de remplir chaque cellule du tableau avec le code souhaité.

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere Mar 13 Sep 2011 - 6:24

J'ai essayé de les remplir, mais bizarrement, ce que je met se retrouve automatiquement en haut de la page d'accueil....
avatar

LGDC Ephemere
Nouveau membre

Messages : 16
Inscrit(e) le : 11/09/2011

http://lgdc-ephemere.forumactif.fr/
LGDC Ephemere a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour PA

Message par Invité Mar 13 Sep 2011 - 8:31

Bonjour,

Il faudrait me montrer votre code pour que je sache d'où vient le soucis Wink .

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere Mer 14 Sep 2011 - 14:29

Bonjour, voici le code :
Code:
<div style="margin:auto;text-align:center;width:100%"><strong>Bienvenue sur LGDC Ephemere {USER&amp;#8288;NAME}...</strong></div>     
<table width="100%">
      <tr><td> le staff</td>Etoile Ephemere, la fondatrice<td rowspan="2">les news</td>Le forum est tout nouveau, en attente de Staff, et de membres ;p<td>Song</td></tr>
      <tr><td> les partenaires</td>Pas encore de partenaires<td> les liens </td>A venir</tr>
        </table>


Cordialement.
avatar

LGDC Ephemere
Nouveau membre

Messages : 16
Inscrit(e) le : 11/09/2011

http://lgdc-ephemere.forumactif.fr/
LGDC Ephemere a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour PA

Message par Petit Démon rêveur Mer 14 Sep 2011 - 15:12

C'est normal que le texte aille en haut. Vous n'avez pas rempli le tableau en fait.

L'endroit que vous devez remplir doit se trouver entre les balises
Code:
<td>...</td>
sans quoi votre contenu n'est pas considéré comme appartement au tableau.

Donc vous devez faire ceci :

Code:
    <div style="margin:auto;text-align:center;width:100%"><strong>Bienvenue sur LGDC Ephemere {USER&amp;#8288;NAME}...</strong></div>   
        <table width="100%">
              <tr><td> le staff<br />
Etoile Ephemere, la fondatrice</td>

                    <td rowspan="2">les news<br />
Le forum est tout nouveau, en attente de Staff, et de membres ;p</td>

                    <td>Song</td></tr>

              <tr><td> les partenaires<br />
Pas encore de partenaires</td>

                    <td> les liens<br />
A venir </td></tr>
                </table>

Voilà. Normalement, ça devrait fonctionner ^^
Je précise à tout hasard que la balise
Code:
<br />
correspond à un saut de ligne ^^
Petit Démon rêveur

Petit Démon rêveur
**

Messages : 74
Inscrit(e) le : 30/08/2010

http://ecole-kenryoku.forumactif.com/  (forum test)
Petit Démon rêveur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour PA

Message par LGDC Ephemere Lun 19 Sep 2011 - 20:03

Merci, je pensais avoir bien rempli ^^' Par contre y a t-il un code CSS pour les cadres ?

Cordialement.
avatar

LGDC Ephemere
Nouveau membre

Messages : 16
Inscrit(e) le : 11/09/2011

http://lgdc-ephemere.forumactif.fr/
LGDC Ephemere a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour PA

Message par Invité Mar 20 Sep 2011 - 19:54

Bonsoir,

Ce n'etait que la première étapre, la construction de la "structure". Il faut maintenant ajouter du CSS pour les cadres et ajouter la ligne de séparation entre les titres et le texte.

Le code pour la ligne est:
Code:
<hr style=" border:1px solid black;" />

Pour les cadres:
- Ajouter une div avec une class pour chaque cadre:
Code:
<div class="ctac">le contenu</div>
- Puis dans la feuille de style CSS:
Code:
.ctac{
border: 1px solid black;
padding: 5px;
margin: 10px;
}
J'ai choisi un nom de class au hasard, choisissez quelque chose qui vous parle plus Wink .

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere Mer 21 Sep 2011 - 14:41

Bonjour, j'ai inséré la ligne et ça marche très bien, j'ai aussi insérer le code CSS, mais je n'ai pas très bien compris le div, j'ai essayé d'insérer mes contenus à la place de "le contenu", mais le cadre se retrouve en haut avec le cellule vide ...

Cordialement.
avatar

LGDC Ephemere
Nouveau membre

Messages : 16
Inscrit(e) le : 11/09/2011

http://lgdc-ephemere.forumactif.fr/
LGDC Ephemere a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour PA

Message par Invité Mer 21 Sep 2011 - 15:03

Bonjour,
Essayez comme ceci:
Code:
    <div style="margin:auto;text-align:center;width:100%"><strong>Bienvenue sur LGDC Ephemere {USER&amp;#8288;NAME}...</strong></div>   
        <table width="100%">
              <tr><td width="33%"><div class="ctac"> le staff<hr style=" border:1px solid black;" />
Etoile Ephemere, la fondatrice</div></td>
 
                    <td  width="34%" rowspan="2"><div class="ctac">les news<hr style=" border:1px solid black;" />
Le forum est tout nouveau, en attente de Staff, et de membres ;p</div></td>
 
                    <td  width="33%"><div class="ctac">Song</div></td></tr>
 
              <tr><td><div class="ctac"> les partenaires<hr style=" border:1px solid black;" />
Pas encore de partenaires</div></td>
 
                    <td> <div class="ctac">les liens<hr style=" border:1px solid black;" />
A venir </div></td></tr>
                </table>

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere Mer 21 Sep 2011 - 15:21

Super ça marche merci beaucoup. Maintenant j'aimerais juste savoir quels codes il faut que j'installe pour l'infobulle avec une image s'il vous plait.

Cordialement.
avatar

LGDC Ephemere
Nouveau membre

Messages : 16
Inscrit(e) le : 11/09/2011

http://lgdc-ephemere.forumactif.fr/
LGDC Ephemere a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour PA

Message par Invité Mer 21 Sep 2011 - 15:27

Beaucoup de sujets traitent des infobulles:
> Recherche : Infobulle*

Essayez de trouver le code qui vous convient, et si vous rencontrez des difficultés, montrez-nous ce que vous avez essayé pour que l'on vous aide à corriger.

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere Mer 21 Sep 2011 - 17:49

Alors j'ai toruver ce code CSS :
Code:
 .lock  {
        position: relative;
          cursor: pointer;
      }
        .lock .lock-hidden {
          /* center */
          display: none;
        position: absolute;
        padding-left : 1px;
        padding-right : 1px;
        padding-top  : 1px;
        padding-bottom : 1px;
          top: 45px;
          left: 0px;
        /* style du bloc qui apparait */
        border: 2px outset #BECCCC;
        border-radius: 5px;
        background-color: #000000;
        -moz-border-radius: 10px;
        text-align: center;
          visibility: visible;
      }
      .lock:hover .lock-hidden {
        display: block;
      }


Et ce code à rajouter dans la PA :
Code:
<div class="lock">URL DE MON IMAGE <div class="lock-hidden"> Étoile Éphémère la Fonda ;)<br>Fonda un peu fofolle sur les bords, elle adore se goinfrer de miel, eh oui ! Ce n'est pas une fan inconditionnelle de Nutella x) Elle est très bavarde quand elle veut, et à tendance à un peu trop raconter sa vie comme maintenant :D Mais malgré tout elle est gentille, et elle adore aider les gens qui se sentent perdus ici :)
        </div>

Mais si ces deux codes marches mon infobulle est trop haute et pas assez large, j'ai tenter de modifier des valeurs CSS mais sans succès. Merci d'avance pour votre aide.


Cordialement.
avatar

LGDC Ephemere
Nouveau membre

Messages : 16
Inscrit(e) le : 11/09/2011

http://lgdc-ephemere.forumactif.fr/
LGDC Ephemere a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour PA

Message par Invité Ven 23 Sep 2011 - 15:06

Bonjour,

Je n'ai pas de soucis avec ce code sur mon forum test. Pour modifier l'infobulle, on peut lui ajouter les propriétés width et height (largeur et hauteur), top et left permette de positionner la bulle.
J'ai utilisé ce CSS:
Code:
.lock{
position: relative;
cursor: pointer;}

.lock .lock-hidden {
display: none;
position: absolute;
padding: 3px;
top: 45px;
left: 10px;
width: 150px;
height: auto;
border: 2px outset #BECCCC;
background-color: #000000;
color: #fff !important;
-moz-border-radius: 10px;
border-radius: 10px;
text-align: center;
visibility: visible;}
     
.lock:hover .lock-hidden {
display: block;}

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere Ven 23 Sep 2011 - 18:34

Merci ^^ ça marche, j'ai juste une toute dernière question, existe il un code pour aligner mes cadres News, Staff, etc ... ?

Cordialement.
avatar

LGDC Ephemere
Nouveau membre

Messages : 16
Inscrit(e) le : 11/09/2011

http://lgdc-ephemere.forumactif.fr/
LGDC Ephemere a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour PA

Message par Invité Ven 23 Sep 2011 - 18:44

C'est possible, il faut régler l'alignement vertical des cellule du tableau. Pour cela, on ajoute valign="top" dans chaque <td> :
Code:
  <div style="margin:auto;text-align:center;width:100%"><strong>Bienvenue sur LGDC Ephemere {USER&amp;#8288;NAME}...</strong></div>   
        <table width="100%">
              <tr><td width="33%" valign="top"><div class="ctac"> le staff<hr style=" border:1px solid black;" />
Etoile Ephemere, la fondatrice<div class="lock"><img src="http://r24.imgfast.net/users/2913/10/00/00/avatars/110127-82.jpg" /> <div class="lock-hidden"> Étoile Éphémère la Fonda ;)<br>Fonda un peu fofolle sur les bords, elle adore se goinfrer de miel, eh oui ! Ce n'est pas une fan inconditionnelle de Nutella x) Elle est très bavarde quand elle veut, et à tendance à un peu trop raconter sa vie comme maintenant :D Mais malgré tout elle est gentille, et elle adore aider les gens qui se sentent perdus ici :)
        </div></div></div></td>
 
                    <td  width="34%" rowspan="2" valign="top"><div class="ctac">les news<hr style=" border:1px solid black;" />
Le forum est tout nouveau, en attente de Staff, et de membres ;p</div></td>
 
                    <td  width="33%" valign="top"><div class="ctac">Song</div></td></tr>
 
              <tr><td><div class="ctac" valign="top"> les partenaires<hr style=" border:1px solid black;" />
Pas encore de partenaires</div></td>
 
                    <td> <div class="ctac" valign="top">les liens<hr style=" border:1px solid black;" />
A venir </div></td></tr>
                </table>

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere Sam 24 Sep 2011 - 10:25

Tout est bon Smile Je vous remercie beaucoup pour votre aide ! :thanks:

Cordialement.
avatar

LGDC Ephemere
Nouveau membre

Messages : 16
Inscrit(e) le : 11/09/2011

http://lgdc-ephemere.forumactif.fr/
LGDC Ephemere 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