Aide pour PA

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

Résolu Aide pour PA

Message par LGDC Ephemere le Dim 11 Sep - 11: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 - 8:26, édité 1 fois

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é le Lun 12 Sep - 7: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.

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere le Mar 13 Sep - 4:24

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

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é le Mar 13 Sep - 6:31

Bonjour,

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

Cordialement.

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere le Mer 14 Sep - 12: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.

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 le Mer 14 Sep - 13: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
**

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 le Lun 19 Sep - 18:03

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

Cordialement.

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é le Mar 20 Sep - 17: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.

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere le Mer 21 Sep - 12: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.

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é le Mer 21 Sep - 13: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.

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere le Mer 21 Sep - 13: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.

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é le Mer 21 Sep - 13: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.

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere le Mer 21 Sep - 15: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.

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é le Ven 23 Sep - 13: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.

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere le Ven 23 Sep - 16:34

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

Cordialement.

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é le Ven 23 Sep - 16: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.

Invité
Invité


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

Résolu Re: Aide pour PA

Message par LGDC Ephemere le Sam 24 Sep - 8:25

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

Cordialement.

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