Page D'accueil~
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Page D'accueil~
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 :
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.
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 :
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.
Re: Page D'accueil~
Un ptit up :3
Re: Page D'accueil~
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 ?
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).
- 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).
Re: Page D'accueil~
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 ^^
[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 ^^
Re: Page D'accueil~
Bonjour
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.
A noter que : <tr> représente un ligne de même largeur. Il était donc impossible d'avoir ceci
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
Déjà, on a les cadres (que j'ai entièrement décomposés, ).
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>.
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 :
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 ^^
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.
A noter que : <tr> représente un ligne de même largeur. Il était donc impossible d'avoir ceci
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>
- 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>
- Code:
style="width: 380px; height: 405px; border: 4px solid #000000; border-radius: 5px; moz-border-radius: 5px; webkit-border-radius: 5px; padding: 5px 10px;"
Déjà, on a les cadres (que j'ai entièrement décomposés, ).
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>
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>
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 ^^
Re: Page D'accueil~
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 :
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.
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 :
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.
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 :
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>
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.
Re: Page D'accueil~
Bonjour,
Oui il n'y a pas de problème pour les boutons !
Pour le fond vous me semblez avoir raison donc, j'opterais pour celui ci :
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
Oui il n'y a pas de problème pour les boutons !
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
Re: Page D'accueil~
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.
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);
}
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>
- Code:
<img src="http://i49.servimg.com/u/f49/16/99/74/66/sakura11.jpg" style="margin-right: 10px;"/>
- 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>
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;}
.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.
Re: Page D'accueil~
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 ^^ !
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 ^^ !
Sujets similaires
» Affichage des visiteurs sur la page daccueil.
» (#4693) Diriger vers la page "forum" depuis une page d'accueil personnalisée
» Problème entre une page html en page d'accueil et l'adresse de base du forum
» Impossibilité d'utiliser page HTML en tant que page d'accueil AwesomeBB
» cadres de réponses dans les rubriques trop larges
» (#4693) Diriger vers la page "forum" depuis une page d'accueil personnalisée
» Problème entre une page html en page d'accueil et l'adresse de base du forum
» Impossibilité d'utiliser page HTML en tant que page d'accueil AwesomeBB
» cadres de réponses dans les rubriques trop larges
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum