Créer un Message d'accueil personnalisé

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

Résolu Créer un Message d'accueil personnalisé

Message par may-sakura le Mer 1 Déc 2010 - 21:15

Bonjour,

Je ne sais pas si j'ai vraiment bien cherché ou pas, mais rien de suffisamment abouti pour m'aider.
En fait voilà, on m'a demandé de faire le design d'un forum forumactif, chose que je sais faire, mais ces adorables noobs ne codent pas plus que moi qui bidouille juste de quoi changer deux ou trois broutilles...

Donc j'aimerais savoir comment font tous ces forums au niveau code et où ils vont pour créer ces grosses zones d'information assez stylisées, avec des liens one again bistoufly des fondas qui apparaissent dans des p'tits pop-up quand on survole avec la souris, tout ça... Parce que j'aimerais bien faire ce genre de choses aussi, mais vu que je suis vraiment débutante en code... Je ne suis pas sûre de savoir faire toute seule et surtout de trouver où mettre quoi...

Je vous montre la maquette si ma demande n'est pas claire.
Spoiler:

J'aimerais savoir s'il y a des tutoriels pour débutants, des petits morceaux de code à piquer par-ci par-là pour commencer, parce que je ne sais vraiment ni où le mettre, ni comment déclarer les css (enfin si je sais, mais pour des éléments qui existent déjà), ni créer de tableau... Enfin vraiment une dinde, quoi x).


Don si quelqu'un aurait l'amabilité de m'aider, de m'indiquer des liens avec explications de base, etc., je lui en serais grandement reconnaissante, parce que je suis un peu perdue.

Voilà, merci de m'avoir lue.


Dernière édition par may-sakura le Jeu 2 Déc 2010 - 19:28, édité 2 fois

may-sakura
Nouveau membre

Messages : 12
Inscrit(e) le : 29/11/2010

http://syberian.bb-fr.com
may-sakura a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un Message d'accueil personnalisé

Message par Pentacle le Jeu 2 Déc 2010 - 0:26

Tout d'abord il faut se munir de notepad, qui vous permettras si on vous fournis un code de le modifiez facilement. Notepad c'est comme un bloc note, mes pour les codes, il met de la couleur et à le ligne pour se repéré plus facilement.

Je suis pas expert comme tu peu le constatez sur mon forum, mes on apprend vite en testant.

J'éditerais ce post avec un peu plus d'information dès que possible.


1er édition
Le code ainsi que le texte, les liens d'images, et url se mettront dans l'en tête,
Le style (css) se mettra dans affichage> couleur > feuille de style css
Maintenant n'étant pas expert mes souhaitant progressé dans le domaine du css je vais tenter de vous faire un code, avant tout j'ai quelques questions.
Je viens de refaire la maquette comme l'image, j'aimerais savoir si c'est ce que vous souhaitez ou non. Grosso modo sa doit ressembler à sa ? 3 zones pour y mettre du texte ou des images et/ou liens

Dans l'attente de votre réponse Wink
[ps: pour apprendre les bases en html et css il y as le site du zéro qui propose divers tutoriaux sur ce sujet, puis d'autre site aussi le propose, une recherche sur google suffiras]

Pentacle
*

Masculin
Messages : 33
Inscrit(e) le : 26/10/2010

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

Résolu Re: Créer un Message d'accueil personnalisé

Message par may-sakura le Jeu 2 Déc 2010 - 9:58

Salut ! Merci pour ta réponse,
Oui en gros c'est ça.
Attend je vais ouvrir ma maquette sous toshop et te trouver les largeurs. Je sais que pour le premier tableau qui contiendra mon image, il aura les propriétés width : 800px; et height: 300px; (après je sais pas comment "déclarer" ça, je sais pas comment appeler le css, tout ça, j'suis vraiment une bille en création, je ne peux que modifier et trouver des petits bugs par-ci par là).


Donc voilà en gros sommairement le découpage, je sais que je devrais l'améliorer mais c'est pour faire écho à ta maquette en gros.

Spoiler:

J'ai réussi à inclure une zone de la taille que je veux :
Spoiler:
<table cellpadding="2" class="transparent" width="800px" height="300px">
<tbody>
<tr>
<script src=""></script><div id="mes_onglets">
<td width="25%"><div id="mes_onglets">
<ul>
<li id="william">Onglet 1</li>
<li id="louison">Onglet 2</li>
<li id="lowell" >Onglet 3</li>
<li id="ferial"">Onglet 4</li>
</ul>

</td>

<td width="50%">
Colonne du milieu.
</td>

<td width="25%">
Colonne droite
</td>
</tr>
</tbody>
</table>

J'arrive même pas à faire les liens, déjà... Mais je trouverai, mais surtout, comment faire les images avec survol un peu comme sur ce forum : http://final-harmony.forumactif.com/forum.htm
Comment designer uniquement par le css mes onglets bleus avec liens vers parties...
En fait je pars vraiment du début, quoi...

Et sinon je connais le site du zéro, mais là j'ai vraiment l'impression que forumactif c'est un autre monde, y'a des javascript, je sais pas comment le modifier, bref c'est trop l'horreur je m'en sors pas xD

may-sakura
Nouveau membre

Messages : 12
Inscrit(e) le : 29/11/2010

http://syberian.bb-fr.com
may-sakura a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un Message d'accueil personnalisé

Message par Pentacle le Jeu 2 Déc 2010 - 15:50

Code:
Faire un texte qui est aussi un lien :
<a href="Adresse URL"> NOM DU TEXTE </a>
Faite une iage sui est aussi un lien :
<a href="Adresse UR"><img src="URLIMAGEHERBERGER"></a>

Plus d'information un peu plus tard dans la journée si possible.



Pentacle
*

Masculin
Messages : 33
Inscrit(e) le : 26/10/2010

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

Résolu Re: Créer un Message d'accueil personnalisé

Message par may-sakura le Jeu 2 Déc 2010 - 15:54

C'est bon j'avais trouvé déjà Smile j'ai fouiné sur le net, je m'en rappelais plus xD j'ai même mis un petit target blank, tout ça.
Je te remercie en tout cas !

may-sakura
Nouveau membre

Messages : 12
Inscrit(e) le : 29/11/2010

http://syberian.bb-fr.com
may-sakura a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un Message d'accueil personnalisé

Message par Pentacle le Jeu 2 Déc 2010 - 16:34

Pour l'image qui en affiche une autre sur son passage,
Explication du rollover. Le système que tu souhaite et l'exemple avec la main. Pour ton en tête le mieux serait finalement de n'afficher que les zones ou écrire, et de mettre en background une image circulaire.

Pentacle
*

Masculin
Messages : 33
Inscrit(e) le : 26/10/2010

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

Résolu Re: Créer un Message d'accueil personnalisé

Message par may-sakura le Jeu 2 Déc 2010 - 16:47

HAaaaaaa super merci Very Happy
Je vais essayer ça ce soir !!

J'en suis là, actuellement :
http://syberian.bb-fr.com/forum.htm
C'est encore vide mais j'ai au moins réussi à mettre les petites images et à gérer les largeurs des cellules et tout, mais j'arrive pas à mettre l'image en fond... -_-'...

may-sakura
Nouveau membre

Messages : 12
Inscrit(e) le : 29/11/2010

http://syberian.bb-fr.com
may-sakura a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un Message d'accueil personnalisé

Message par Pentacle le Jeu 2 Déc 2010 - 17:05

Je viens de passer sur le forum, il semblerait que l'image soit mise. Je pense que vous avez presque terminé et seule en plus. Félicitation, pour la partie de droite, je pense que mettre un rollover avec lien serais le top pour faire un effet sur l'écriture ou la cellule.

Bonne soirée et bonne chance.

Pentacle
*

Masculin
Messages : 33
Inscrit(e) le : 26/10/2010

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

Résolu Re: Créer un Message d'accueil personnalisé

Message par may-sakura le Jeu 2 Déc 2010 - 19:27

Oui l'image est mise mais par contre je n'ai pas réussi à rendre les cellules transparentes, si quelqu'un pouvait m'aider, j'ai beau avoir cherché sur le net, les tests ne sont pas concluant...

Voici le code html du message d'accueil
Spoiler:
<table cellpadding="2" width="800px" height="350px" background="http://i62.servimg.com/u/f62/15/92/58/73/maq12.png">

<tr><td width="25%">
<ul>
<li id="william"><a href="http://syberian.bb-fr.com/le-personnage-principal-f7/" target="_blank"><img src="http://i62.servimg.com/u/f62/15/92/58/73/willia10.png"></a></li>
<li id="louison"><a href="http://syberian.bb-fr.com/le-personnage-principal-f16/" target="_blank"><img src="http://i62.servimg.com/u/f62/15/92/58/73/louiso10.png"></li>
<li id="lowell"><a href="http://syberian.bb-fr.com/le-personnage-principal-f4/" target="_blank"><img src="http://i62.servimg.com/u/f62/15/92/58/73/lowell10.png"></a></li>
<li id="ferial""><a href="http://syberian.bb-fr.com/le-personnage-principal-f10/" target="_blank"><img src="http://i62.servimg.com/u/f62/15/92/58/73/ferial10.png"></a></li>
</ul>

</td>

<td width="50%"><div id="textecentre">
Colonne du milieu.
</div>
</td>

<td width="25%"><div id="mon_menu">
<ul>
<li id="genese"><a href="http://syberian.bb-fr.com/genese-f1/" target="_blank">Genèse</a></li>
<li id="pays"><a href="http://syberian.bb-fr.com/pays-etats-nations-f2/" target="_blank">Pays, États, Nations</li>
<li id="races"><a href="http://syberian.bb-fr.com/castes-races-ethnies-f3/" target="_blank" img src="">Castes, Races, Ethnies</a></li>
</ul>

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

</table>

Et les pauvres css qui correspondent à ma cellule

Spoiler:
table. transparent{
width: expres​sion( Math.min(parseInt(this.offsetWidth), 800) );

}

#mes_onglets
{
width: 120px;
margin-left: 50px;
}

#mon_menu
{
width: 200px;
margin-right: 30px;
}

ul{
list-style-type: none;
}

Pour info à ceux qui ne comprendraient pas le - width: expres​sion( Math.min(parseInt(this.offsetWidth), 800) ); - c'est l'astuce pour qu'internet explorer accepte un "max-width" comme dans firefox.
J'ai trouvé ça sur le net, en choppant des bouts de code par-ci par là j'ai réussi à faire mon début de message d'accueil mais là pour cette fichue transparence de cellule je sèche, ça ne fonctionne pas si je met ça dans une div, ça ne fonctionne pas dans ma table, etc... Ou si je l'applique au td. row1 ben ça m'enlève toutes les cellules...
Je pense clore et mettre tout ça en résolu grâce à votre aide et ouvrir un nouveau topic pour rendre les cellules transparentes.

Merci à tous !

may-sakura
Nouveau membre

Messages : 12
Inscrit(e) le : 29/11/2010

http://syberian.bb-fr.com
may-sakura 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