Page D'accueil~

2 participants

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

Résolu Page D'accueil~

Message par Saki-vampire Jeu 8 Déc 2011 - 18:40

Bonsoir à tou(te)s,

Etant donné que je ne maîtrise pas du tout les templates et code html, je sollicite une nouvelle fois votre aide. Mais, aujourd'hui, il s'agit de ma page d'accueil.

Voici un bref schéma de ce que j'aimerais réaliser :

Page D'accueil~  Fofo10

Si cela ne vous semble pas clair, dites le moi ^^"
Aussi, j'aimerais savoir comment mettre une image de fond pour les cadres :3
Merci d'avance.
Saki-vampire

Saki-vampire
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 05/10/2011

http://shinichi-ngeneration.forumactif.org/
Saki-vampire a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page D'accueil~

Message par Saki-vampire Ven 9 Déc 2011 - 19:10

Un ptit up :3
Saki-vampire

Saki-vampire
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 05/10/2011

http://shinichi-ngeneration.forumactif.org/
Saki-vampire a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page D'accueil~

Message par Saki-vampire Dim 11 Déc 2011 - 20:38

up~
Saki-vampire

Saki-vampire
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 05/10/2011

http://shinichi-ngeneration.forumactif.org/
Saki-vampire a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page D'accueil~

Message par Saki-vampire Lun 12 Déc 2011 - 20:39

Up.
Saki-vampire

Saki-vampire
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 05/10/2011

http://shinichi-ngeneration.forumactif.org/
Saki-vampire a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page D'accueil~

Message par Jump' Lun 12 Déc 2011 - 21:30

Bonjour, pouvez vous fournir des informations plus précises, avec
- la largeur et la hauteur de chacun des cadres, en pixels.
- la couleur et l'épaisseur de la bordure, avec les codes html #...... et l'épaisseur en pixel, ainsi que si vous souhaitez une bordure en pointillés, en tirets, double, ect.
- la forme du titre (taille approximative, police, s'il est en haut à gauche, en haut à droite, en haute au centre, sa couleur, en effet ombré, ect).
- la forme du texte (s'il est justifié, sa couleur, sa taille...).

Pour la page d'accueil, il ne s'agit pas de modifier des templates mais d'aller dans Affichage > Page d'Accueil > Généralités et de là modifier le message de la Page d'accueil, le contenu sera le code html que nous allons élaborer ^^

Ensuite, pour les partenaire, est-ce une liste déroulante ? Des boutons (images du partenaire) menant vers le forum partenaire, donc avec une barre de défilement ou du texte qui défile s'il y en a beaucoup ? Ou encore des petites icônes menant vers le lien du forum ?
Spoiler:

De même pour le Staff, des images menant simplement vers le profil, ou alors des images qui quand on passe la souris dessus affichent des informations ? Quel alignement ? Centré les unes en dessous des autres, alignées de gauche à droite ?

Enfin pour les nouveautés et le concept, si le contenu dépasse le cadre, un texte qui défile ou une barre de défilement ? (sachant que le texte défilant bougera même si le texte prend moins de place que le cadre).


Jump'

Jump'
*

Féminin
Messages : 36
Inscrit(e) le : 01/08/2011

http://illusion-mirage.forumgratuit.org
Jump' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page D'accueil~

Message par Saki-vampire Mar 13 Déc 2011 - 19:17

Bonsoir, merci de m'apportez votre aide ^^ !

[je vais essayer de répondre à vos questions mais avec une gourde comme moi c'est pas gagné ...x)]

Alors: - pour le cadre "actualités, new" 330 pixels de largeur et 300 de hauteur
- pour le cadre "contexte du forum" 380 pixels de largeur et 410 de hauteur
- pour le cadre "staff" 330 pixels de largeur et 190 de hauteur
- pour le cadre "partenaires" 380 pixels de largeur et 90 de hauteur

Pour l'épaisseur de la bordure 4 pixels et pour sa couleur : #000000. (si possible avec des bords arrondis)
Forme du titre : taille 20 , police Harrington, en haut centré, en noir et avec effet ombré ^^
Forme du texte : taille 12, police Georgia,justifié et en noir~
Pour les partenaires j'aimerais avoir une barre de défilement à l'horizontale présentant les différents boutons.
Pour les images du Staff j'aimerais bien la deuxième option "qui quand on passe la souris dessus affichent des informations" et centré, alignées de droite à gauche.
Et pour les nouveautés et le contexte, je préférerais un texte qui défile.

Voilà pour répondre à vos questions~

Merci de bien vouloir m'aider ^^

Saki-vampire

Saki-vampire
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 05/10/2011

http://shinichi-ngeneration.forumactif.org/
Saki-vampire a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page D'accueil~

Message par Jump' Mer 14 Déc 2011 - 17:07

Bonjour Very Happy
Alors, on va y aller dans l'ordre, doucement, et j'ai mis les explications détaillées ^^.

I/ Le Tableau et Les Cadres

Voilà un schéma explicatif.
Page D'accueil~  Image_10

A noter que : <tr> représente un ligne de même largeur. Il était donc impossible d'avoir ceci Page D'accueil~  Image_13

Les deux carrés New et Staff sont donc dans la même colonne séparés par un saut de ligne (</br>). De même pour Contexte et Partenaires.

Les <div> eux même sont indépendants du tableau.

Le code qui correspond est donc
Code:
<table>
    <tr>
        <td>
            <div>News</div>
            </br>
            <div>Staff</div>
        </td>
        <td>
            <div>Contexte</div>
            </br>
            <div>Partenaires</div>
        </td>
    </tr>
</table>
Ce qui ne nous mène pas à grand chose. Parce qu'à présent, il faut mettre les informations sur nos div, hauteur, largeur, bordure...
Code:
<table>
    <tr>
        <td>
            <div style="width: 330px; height: 300px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;">News</div>
            </br>
            <div style="width: 330px; height: 190px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;">Staff</div>
        </td>
        <td>
            <div style="width: 380px; height: 405px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;">Contexte</div>
            </br>
            <div style="width: 380px; height: 85px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;">Partenaires</div>
        </td>
    </tr>
</table>
Ce qui nous intéresse est le
Code:
style="width: 380px; height: 405px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;"
, qui contient dans l'ordre les informations du cadre News : Hauteur; Largeur; Bordure: épaisseur, style, couleur; Cadres arrondis (les trois avec border-radius, le code change en fonction des navigateurs); Marge intérieur : haut&bas, droite&gauche.

Déjà, on a les cadres (que j'ai entièrement décomposés, Cool ).
Mais enfin, ce qui nous intéresse, c'est plutôt ce qu'on va mettre dedans.

II / Les Titres

Prenons le titre New. On va l'encadrer des balises <span> et </span> qui sont à peu près l'équivalent des <div> (je ne sais pas mieux expliquer) ;D On va rajouter un style, parce que le span tout seul ne sert pas à grand chose XD. Et puis on rajoute la balise <center>.
Code:
<span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;"><center>News</center></span>
Dans l'ordre : Police; Taille; Couleur; Ombre: décalage, couleur; Centré.

On rajoute notre titre entre les balises <div> et </div> du premier cadre (on peut effacer le News qui y était. On fait de même pour les autres titres, ce qui nous donnera :
Code:
<table>
    <tr>
        <td>
            <div style="width: 330px; height: 300px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>News</center>
                </span></br>
            </div>
            </br>
            <div style="width: 330px; height: 190px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Staff</center>
                </span></br>
            </div>
        </td>
        <td>
            <div style="width: 380px; height: 405px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Contexte</center>
                </span></br>
            </div>
            </br>
            <div style="width: 380px; height: 85px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Partenaires</center>
                </span></br>
            </div>
        </td>
    </tr>
</table>
J'ai placé une balise </br> après chaque span pour le saut de ligne entre le titre et le texte.


Le code marche à priori parfaitement, je l'ai testé. Je reprendrai plus tard, déjà merci de tester ça. Ensuite, pour les contenus, il me faudrait les images du Staff et et des partenaires ^^
EDIT : je n'avais pas vu l'histoire de l'image de fond pour les cadres. Il faudrait me fournir l'image avec son url ^^
Jump'

Jump'
*

Féminin
Messages : 36
Inscrit(e) le : 01/08/2011

http://illusion-mirage.forumgratuit.org
Jump' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page D'accueil~

Message par Saki-vampire Mer 14 Déc 2011 - 19:47

Bonsoir ^^,

Merci déjà pour cela, c'est exactement ce que je voulais Smile !

Bon pour les images du Staff :

Spoiler:

Pour les partenaires :

Spoiler:

Et pour l'image de fond :

Spoiler:

Voilà tout~ (en espérant que j'ai bien compris ce que vous me demandiez ^^")
Saki-vampire

Saki-vampire
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 05/10/2011

http://shinichi-ngeneration.forumactif.org/
Saki-vampire a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page D'accueil~

Message par Jump' Mer 14 Déc 2011 - 19:58

Pour les boutons des partenaires, je peux faire un redimensionnement ? Je pensais à une taille partagée par tous les boutons, d'environ 120*30...

Sinon, pour l'image de fond, c'est bien l'image de fond des cadres que je viens de faire, avec new contexte et tout ? Parce que écrire la dessus, ça me parait un peu étrange... Généralement, les images de fond sont plus des trucs comme ça :Page D'accueil~  Istock12
Ou alors on s'est mal compris...

Je ne ferai pas le reste ce soir, par manque de temps, mais demain j'en aurai ;D

EDIT. Voila la Suite.

IV / Les Textes Défilants

Pour faire défiler un texte, on utilise la balise marquee.
Code:
<marquee direction="up" scrollamount="2" height="260" width="330" onmouseover="this.stop()" onmouseout="this.start()" style="font-family: Georgia; color: #000000; font-size: 12px;">♣ New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1  New 1 New 1 New 1 New 1 New 1 New 1
                </br>
                </br>♣ New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2  New 2 New 2 New 2 New 2 New 2 New 2
                </marquee>
Dans l'ordre, on a : Direction; Vitesse; Hauteur (un peu moins haut que le cadre, donc); Largeur; Souris dessus, le texte s'arrête de défiler; Souris ailleurs, le défilement reprend; Style : police, couleur, taille ; Texte Justifié. Avec deux </br> entre chaque New, le premier revient à la ligne, le second en passe une. Remarque : en html, les sauts de lignes avec la touche "entrée" ne font rien, il faut obligatoirement utiliser cette balise.

La partie du code se place juste après le </span></br> qui marque la fin du titre et avant le </div> qui marque la fin du cadre. Pour le contexte, on aura le même code, on changera juste légèrement la hauteur et la largeur. Ce qui donnera ce code :
Code:
<table>
    <tr>
        <td>
            <div style="width: 330px; height: 300px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>News</center>
                </span></br>
                <marquee direction="up" scrollamount="2" height="260" width="330" onmouseover="this.stop()" onmouseout="this.start()" style="font-family: Georgia; color: #000000; font-size: 12px;" align="justify">♣ New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1  New 1 New 1 New 1 New 1 New 1 New 1
                </br>
                </br>♣ New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2  New 2 New 2 New 2 New 2 New 2 New 2
                </marquee>
            </div>
            </br>
            <div style="width: 330px; height: 190px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Staff</center>
                </span></br>
            </div>
        </td>
        <td>
            <div style="width: 380px; height: 405px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Contexte</center>
                </span></br>
                              <marquee direction="up" scrollamount="2" height="365" width="380" onmouseover="this.stop()" onmouseout="this.start()" style="font-family: Georgia; color: #000000; font-size: 12px;" align="justify">♣ Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept.
                </marquee>
            </div>
            </br>
            <div style="width: 380px; height: 85px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Partenaires</center>
                </span></br>
               
            </div>
        </td>
    </tr>
</table>

Je fais un remarque en passant, et c'est plus une histoire de goût personnel, mais le concept défilant, ça me semble étrange. C'est un peu compliqué à lire (bon, c'est quand même pas la mer à boire, mais...). Disons que les textes défilant, c'est bien pour les nouveauté et les textes courts, mais pour les textes plus longs personnellement je préfère les barres.
Jump'

Jump'
*

Féminin
Messages : 36
Inscrit(e) le : 01/08/2011

http://illusion-mirage.forumgratuit.org
Jump' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page D'accueil~

Message par Saki-vampire Ven 16 Déc 2011 - 9:32

Bonjour,

Oui il n'y a pas de problème pour les boutons Smile !
Pour le fond vous me semblez avoir raison donc, j'opterais pour celui ci :
Spoiler:

Et pour ce qui est du contexte (j'ai regardé l'effet que cela donnait) et en effet c'est pas très pratique :/. Les barres iraient mieux ^^".

Merci beaucoup de vous occupez de mon cas et de me donner toutes ces explications Smile

Saki-vampire

Saki-vampire
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 05/10/2011

http://shinichi-ngeneration.forumactif.org/
Saki-vampire a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page D'accueil~

Message par Jump' Ven 16 Déc 2011 - 18:39

Tout d'abord je tiens à vous prévenir que je ne suis pas là pendant les vacances de Noël ^^'

Alors je vais faire mon possible aujourd'hui.

V/ Le Fond

Pour ça, je ne vois pas d'autre solution que d'utiliser le css, les autres solutions que j'ai essayées ne marchent pas. On va donc rajouter dans la balise <div> qui caractérise le cadre cette information : class="fond"

Remarque Vous avez peut être remarqué qu'on a <div style="seg: gezr; aztg: atga;" class="qeg"> Dans une balise <div> ou autre, on peut avoir plusieurs éléments. Par exemple, style qui renvoie à la mise en forme, class qui permet de rattacher la balise à des informations contenues dans une feuille de style css, align qui dira la place du cadre (si c'est un cadre) align="right"... ect. Mais bon, je m'écarte du sujet.

Donc après avoir rajouter class="fond" dans la balise <div> du cadre et de tous les cadres, on va s'occuper du css. Dans votre feuille de style, collez ceci:
Code:
.fond {
  background-image: url(http://i41.servimg.com/u/f41/16/51/68/41/i_back10.jpg);
}
. L'url du code est celle de votre image ^^.

Donc je vous donne le code avec les class rajoutées.
Code:
<table>
    <tr>
        <td>
            <div style="width: 330px; height: 300px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;" class="fond">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>News</center>
                </span></br>
                <marquee direction="up" scrollamount="2" height="260" width="330" onmouseover="this.stop()" onmouseout="this.start()" style="font-family: Georgia; color: #000000; font-size: 12px;" align="justify">♣ New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1  New 1 New 1 New 1 New 1 New 1 New 1
                </br>
                </br>♣ New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2  New 2 New 2 New 2 New 2 New 2 New 2
                </marquee></body>
            </div>
            </br>
            <div style="width: 330px; height: 190px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;" class="fond">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Staff</center>
                </span></br>
            </div>
        </td>
        <td>
            <div style="width: 380px; height: 405px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;" class="fond">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Contexte</center>
                </span></br>
                              <marquee direction="up" scrollamount="2" height="365" width="380" onmouseover="this.stop()" onmouseout="this.start()" style="font-family: Georgia; color: #000000; font-size: 12px;" align="justify">♣ Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept.
                </marquee>
            </div>
            </br>
            <div style="width: 380px; height: 85px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;" class="fond">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Partenaires</center>
                </span></br>
               
            </div>
        </td>
    </tr>
</table>

On passe à la barre pour le contexte.

VI/Les barres défilantes

Pour le concept, on va déjà enlever ce qui concerne le texte qui défile. Supprimer la balise marquee (ne pas oublier la balise de fin).

À la place, on va rajouter ceci : <div style="width: 350px; height: 120px; padding-right: 5px; overflow: auto; font-family: Georgia; color: #000000; font-size: 12px;" align="justify"> La largeur et la hauteur ne sont pas forcément ce que je vais mettre. La barre se placera automatiquement à la verticale ou à l'horizontale, en fonction de la direction vers laquelle "déborde" le texte. Le texte restera justifié grâce au dernier élément. Dans l'ordre : largeur, hauteur, une légère marge à droite pour que le texte ne soit pas collé à la barre, la barre, police, couleur, taille du texte, justifié. Ici, la barre défilera à la verticale.

Voila, je n'ai pas le temps de faire plus ce soir ^^ Le résultat final :

Code:
<table>
    <tr>
        <td>
            <div style="width: 330px; height: 300px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;" class="fond">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>News</center>
                </span></br>
                <marquee direction="up" scrollamount="2" height="260" width="330" onmouseover="this.stop()" onmouseout="this.start()" style="font-family: Georgia; color: #000000; font-size: 12px;" align="justify">♣ New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1  New 1 New 1 New 1 New 1 New 1 New 1
                </br>
                </br>♣ New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2  New 2 New 2 New 2 New 2 New 2 New 2
                </marquee></body>
            </div>
            </br>
            <div style="width: 330px; height: 190px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;" class="fond">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Staff</center>
                </span></br>
            </div>
        </td>
        <td>
            <div style="width: 380px; height: 405px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;" class="fond">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Contexte</center>
                </span></br>
                              <div style="width: 380px; height: 365px; padding-right: 5px; overflow: auto; font-family: Georgia; color: #000000; font-size: 12px;" align="justify">♣ Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept.
                </div>
            </div>
            </br>
            <div style="width: 380px; height: 85px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;" class="fond">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Partenaires</center>
                </span></br>
               
            </div>
        </td>
    </tr>
</table>

EDIT : Hop, la suite, la barre pour les partenaires. La barre verticale, j'ai testé... c'est vraiment affreux, et la hauteur du cadre n'est pas assez grande. Alors bah, j'ai mis des images défilantes.

Code:
<marquee direction="left" scrollamount="3" width="380" onmouseover="this.stop()" onmouseout="this.start()">
                <a href="http://URL DU FORUM"><img src="http://i49.servimg.com/u/f49/16/99/74/66/sakura11.jpg" style="margin-right: 10px;"/></a><a href="http://URLDUFORUM"><img src="http://i49.servimg.com/u/f49/16/99/74/66/hikaru12.jpg" style="margin-right: 10px;"/></a>
                </marquee>
La balise marquee, vous connaissez ;D J'ai juste changé la largeur et augmenté légèrement la vitesse de défilement.

Code:
<img src="http://i49.servimg.com/u/f49/16/99/74/66/sakura11.jpg" style="margin-right: 10px;"/>
On prend une image. C'est une balise qui ne se ferme pas, comme </br>, sauf qu'ici, le slash est à la fin au lieu d'être au début. On a toujours plusieurs informations : src="" est pour insérer l'url de l'image. Vous connaissez l'attribut style="". Ici, j'ai juste mis une légère marge droite, pour que les images ne soient pas totalement collées à la suivante.

Code:
<a href="http://URL DU FORUM"><img src="http://i49.servimg.com/u/f49/16/99/74/66/sakura11.jpg" style="margin-right: 10px;"/>IMAGE / TEXTE...</a>
Les liens. Ça peut être une balise qui se ferme, ou qui ne se ferme pas. Si elle se ferme directement, par exemple : <a href="url"/>, le lien s'affichera tel quel. Si par contre on utilise une balise qui se ferme : <a href="">TRUC</a>, ce qui s'affichera sera le truc (un mot, par exemple cliquez, ou une image), qui quand on cliquera dessus mènera à l'adresse du lien. Donc ici, entre les balises <a> et </a>, j'ai mis l'image des partenaires. A vous de mettre l'url des forums correspondants. Pour finir, dans la balise, on a href="URL", là ou on met l'url. On pourrait aussi parfaitement mettre un attribut style="" ou autre. Bon, je ne vais pas faire un cours sur les liens, parce qu'il y a beaucoup de choses à dire et plein de possibilités différentes, donc... Voila What a Face
Le code est à placer après le </span></br> du titre et avant le </div> du cadre.

VII / Images avec affichage de texte

Allez, on garde le plus compliqué pour la fin XDD
Ça s'appelle une infobulle. On utilise pour ça le css.

Le code à coller après le </span></br> du titre et avant le </div> de la fin du cadre :
Code:
<table align="center"><tr><td><div class="bullestaff"><img src="http://i49.servimg.com/u/f49/16/99/74/66/gilles11.jpg"/>
<span><b>Admin</b></br>NOM </br></br>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</br></br><a href="URL VERS LE PROFIL">Profil</a>•<a href="URL VERS CONTACT">Contact</a> </span></div> </td><td>
                      <div class="bullestaff"><img src="http://i49.servimg.com/u/f49/16/99/74/66/sakihi10.jpg"/>
<span><b>Admin</b></br>NOM </br></br>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</br></br><a href="URL VERS LE PROFIL">Profil</a>•<a href="URL VERS CONTACT">Contact</a> </span></div> </td><td>
                        <div class="bullestaff"><img src="http://i49.servimg.com/u/f49/16/99/74/66/wellan10.jpg"/>
<span><b>Admin</b></br>NOM </br></br>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</br></br><a href="URL VERS LE PROFIL">Profil</a>•<a href="URL VERS CONTACT">Contact</a> </span></div> </td></tr></table>

On refait un tableau pour aligner les images, sans ça elles sont les une au dessous des autres. Vous voyez bien le <div class="bullestaff"> qui renvoie au css. Après, on a l'image du staff (je les ai redimensionnées car elles ne rentraient pas dans le cadre). Ensuite, on a le <span>Contenu de la bulle</span>. On est bien d'accord que normalement, un span tout seul, ça ne fait pas un texte "caché". C'est grâce au css.

Code:
.bullestaff {
    position: relative;
    z-index: 0;
    width: 100px;}

.bullestaff:hover{
    background-color: transparent;
    z-index: 50;}

.bullestaff span{
    position: absolute;
    background-image: url(http://i41.servimg.com/u/f41/16/51/68/41/i_back10.jpg);
    padding: 0px 5px;
    visibility: hidden;
    color: #000000;
    font-family: Georgia;
    text-align: center;}

.bullestaff:hover span{
    visibility: visible;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 150px;
    color: #000000;}
Grâce à ça, tout ce qui est à l'intérieur d'une balise <span></span> elle même placée à l'intérieur d'une balise <div class="bullestaff"></div> sera cachée.

.bullestaff span { = ce qui est entre <span> et </span>, sans que la souris soit dessus.
position: absolute;
background-image: url(https://i.servimg.com/u/f41/16/51/68/41/i_back10.jpg); = image de fond, pour se fondre dans le décor
padding: 0px 5px; =les marges, 0 haut et bas, 5 droite et gauche
visibility: hidden; =caché tant que la souris n'est pas dessus
color: #000000; =couleur du texte
font-family: Georgia; =police
text-align: center; = texte centré}

.bullestaff:hover span{ = ce qui est entre <span> et </span>, quand la souris est dessus.
visibility: visible; = visible (trop duuur XD)
top: 0px; = aucun décalage en haut par rapport à l'image
left: 0px; = aucun décalage à gauche par rapport à l'image
width: 100px; = largeur de 100px (la même que l'image)
height: 150px; = hauteur de 100 px (la même que l'image)
color: #000000; =couleur du texte}

Là, j'ai fait en sorte, avec le décalage inexistant, l'image de fond pareille à celle du cadre, l'absence de bordure, les mêmes dimensions que l'image, que l'effet soit comme si on effaçait l'image.

Il y a une deuxième solution, qui donnera un "véritable" infobulle, qu'on voie encore l'image et la bulle qui apparaît à côté. Vous pouvez tester les deux ^^
Code:
.bullestaff {
    position: relative;
    z-index: 0;
    width: 100px;}

.bullestaff:hover{
    background-color: transparent;
    z-index: 50;}

.bullestaff span{
    position: absolute;
    background-image: url(http://i41.servimg.com/u/f41/16/51/68/41/i_back10.jpg);
    padding: 0px 5px;
    visibility: hidden;
    color: #000000;
    font-family: Georgia;
    text-align: center;}

.bullestaff:hover span{
    visibility: visible;
    top: 15px;
    left: 100px;
    width: 150px;
    height: 120px;
    color: #000000;
    border: 4px solid #000000;}

Donc je vous redonne le code complet...
Code:
<table>
    <tr>
        <td>
            <div style="width: 330px; height: 300px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;" class="fond">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>News</center>
                </span></br>
                <marquee direction="up" scrollamount="2" height="260" width="330" onmouseover="this.stop()" onmouseout="this.start()" style="font-family: Georgia; color: #000000; font-size: 12px;" align="justify">♣ New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1 New 1  New 1 New 1 New 1 New 1 New 1 New 1
                </br>
                </br>♣ New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2 New 2  New 2 New 2 New 2 New 2 New 2 New 2
                </marquee></body>
            </div>
            </br>
            <div style="width: 330px; height: 190px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;" class="fond">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Staff</center>
                </span></br>
                      <table align="center"><tr><td><div class="bullestaff"><img src="http://i49.servimg.com/u/f49/16/99/74/66/gilles11.jpg"/>
<span><b>Admin</b></br>NOM </br></br>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</br></br><a href="URL VERS LE PROFIL">Profil</a>•<a href="URL VERS CONTACT">Contact</a> </span></div> </td><td>
                      <div class="bullestaff"><img src="http://i49.servimg.com/u/f49/16/99/74/66/sakihi10.jpg"/>
<span><b>Admin</b></br>NOM </br></br>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</br></br><a href="URL VERS LE PROFIL">Profil</a>•<a href="URL VERS CONTACT">Contact</a> </span></div> </td><td>
                        <div class="bullestaff"><img src="http://i49.servimg.com/u/f49/16/99/74/66/wellan10.jpg"/>
<span><b>Admin</b></br>NOM </br></br>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</br></br><a href="URL VERS LE PROFIL">Profil</a>•<a href="URL VERS CONTACT">Contact</a> </span></div> </td></tr></table>
            </div>
        </td>
        <td>
            <div style="width: 380px; height: 405px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;" class="fond">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Contexte</center>
                </span></br>
                              <div style="width: 380px; height: 365px; padding-right: 5px; overflow: auto; font-family: Georgia; color: #000000; font-size: 12px;" align="justify">♣ Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept Concept.
                </div>
            </div>
            </br>
            <div style="width: 380px; height: 85px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;" class="fond">
                <span style="font-family: Harrington; font-size: 20px; color: #000000; text-shadow: 2px 2px 2px #000000;">
                <center>Partenaires</center>
                </span></br>
                <marquee direction="left" scrollamount="3" width="380" onmouseover="this.stop()" onmouseout="this.start()">
                <a href="http://URL DU FORUM"><img src="http://i49.servimg.com/u/f49/16/99/74/66/sakura11.jpg" style="margin-right: 10px;"/></a><a href="http://URLDUFORUM"><img src="http://i49.servimg.com/u/f49/16/99/74/66/hikaru12.jpg" style="margin-right: 10px;"/></a>
                </marquee>
            </div>
        </td>
    </tr>
</table>

ET JE VOUS ANNONCE QUE C'EST FINIIII ;D J'espère que vous avez appris un peu plus sur le html et le css avec ce sujet, et puis bah... que ça vous plaît quoi.
Jump'

Jump'
*

Féminin
Messages : 36
Inscrit(e) le : 01/08/2011

http://illusion-mirage.forumgratuit.org
Jump' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page D'accueil~

Message par Saki-vampire Dim 18 Déc 2011 - 8:48

Bonjour,

J'ai essayé est l'effet est parfait ! Je vous remercie beaucoup de m'avoir aidé pour cela (et de m'avoir appris toutes ces choses utiles ;D).
Je met le sujet en "résolu" et vous souhaite de bonnes vacances et fêtes de fin d'année :3

Merci encore ^^ !
Saki-vampire

Saki-vampire
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 05/10/2011

http://shinichi-ngeneration.forumactif.org/
Saki-vampire a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum