Page d'Accueil

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

Résolu Page d'Accueil

Message par Sofia. B le Lun 5 Déc 2011 - 19:50

Bonjour, je sais que le forum n'est pas un forum de commande, mais voilà, je voudrais faire une nouvelle PA pour mon forum. Le soucis c'est que je suis nulle en code. J'ai bien essayé à partir de plusieurs tutoriels à la faire seule mais franchement, c'était horrible et pas aligné.... Enfin bref. Je demande ici si quelqu'un pourrait m'aider à la créer. Après pour la remplir ça devrait aller, je sais insérer des images, des liens, mettre les couleurs que je veux. C'est la structure quoi qui gène. Et puis j'ai une idée bien précise de ce que je veux. Voici mon schema.

Spoiler:

Je ne voudrais pas de Cadre pour la barre de navigation rapide, c'était juste pour monter ou elle est, pour les petits cadres ils devront tous faire 250*300 et être alignés. Pour les images du staff et des membres du mois (cadres mauves) les images devront faire du 200*90 et faire une infobulle en faite... et pour les scenarios, les images devons faire du 35*35... Les flèches indiquent des défilements horizontaux ou verticaux.

Si jamais ma demande n'est pas conforme ou dérange, ou autre, je comprendrais, il suffira de le dire poliment. Comme je l'ai dit plus haut je sais que ce n'est pas un forum de création, mais je demande quand même au cas ou.

Et je remercie la personne qui fera attention à ma demande ! ♥


Dernière édition par Sofia. B le Mar 6 Déc 2011 - 18:00, édité 1 fois

Sofia. B
Nouveau membre

Messages : 9
Inscrit(e) le : 05/12/2011

http://sin-city.forumgratuit.org/
Sofia. B a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Final-Blonde le Lun 5 Déc 2011 - 21:42

Bonsoir,

Il est vrai que je ne fais pas dans les commandes, mais t'aider à réaliser ce "plan" est tout de même dans les cordes de ce site...
Surtout que je vais te l'expliquer, te donner la base du basique, et ensuite, à toi de jouer.

Tout d'abord, pour un tel tableau, il s'agit bien d'un seul tableau, ce seront la gestion des fameux :
"colspan" > fusion de plusieurs colonnes (cellules, td) sur une même ligne (row, tr), ou plusieurs
"rowspan" > fusion de plusieurs lignes (row, tr) dans une même colonne, ou plusieurs
A partir de là, tout est une question de bien avoir le schéma de base du dit tableau :
- Il est constitué de 8 lignes et de 9 colonnes
Parce que nous allons fusionner lignes et cellules, il faut compter du plus petit au plus grand élément, et non l'inverse.

Par contre, avant de coder tout ça, qu'entends-tu par "Les flèches indiquent des défilements horizontaux ou verticaux" ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Sofia. B le Lun 5 Déc 2011 - 23:28

Merci vraiment de m'aider... j'ai vraiment essayer, et j'avoue que je dois manquer des étapes ou pas trop suivre.... fin bref c'est un peu dure de faire les choses seules. Je dois pas mettre dans un bon ordre en faite. J'ai encore du mal avec les structures de base.

Pour les défilements tu sais que les partenaires défilent tout seul horizontalement et que le texte défile tout seul verticalement comme là sur notre gauche pour : Derniers sujets

Sofia. B
Nouveau membre

Messages : 9
Inscrit(e) le : 05/12/2011

http://sin-city.forumgratuit.org/
Sofia. B a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Final-Blonde le Mar 6 Déc 2011 - 11:52

Je t'en prie, nous avons tous commencer un jour, et sans ce forum d'entraide (et d'autres), je ne pourrais pas rendre la pareille non plus.

Tout compte fait, nous allons créer un grand tableau qui dans ses colonnes (td) contiendra de plus petits tableaux.
C'est beaucoup plus simple et moins lourd à gérer ensuite par la feuille de style CSS.

Avant tout, nous devons aller supprimer deux identifiants de l'attribut "class" qui posent problème si tu veux un tableau "posé" sur le fond de ton forum, et non un grand cadre et le tableau dedans.
Dans le PA >> Affichage >> Templates > Général > index_body
tout au début, au premier "table", supprime class="forumline"
plus bas, à la seconde ligne (tr), à la cellule (td), supprime class="row1"
Et la partie dédiée au message d'accueil devient alors :
Code:
<!-- BEGIN message_admin_index -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->
Enregistrer et Publier le template
Tu peux aussi tout à fait le faire à la fin, pour voir si avec cela pourrait te convenir, mais j'en doute...

Passons au HTML dans le PA >> Affichage >> Page d'accueil > Généralités > Message d'accueil > HTML activé ainsi : +html
Code:
<table class="patablo" align="center" cellspacing="0" cellpadding="0" border="0"><tr>
<td colspan="3" class="navspeed" align="center"><table class="navspeed"><tr><td align="center">NAVIGATION RAPIDE</td></tr></table>
</td></tr>
<tr><td colspan="3"  class="patitle" align="center"><h3>VIVA LAS VEGAS ! BIENVENUE</h3></td></tr>

<tr><td align="center">
<table class="contexte"><tr><td align="center"><marquee direction="down" scrolldelay="25" height="270" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">CONTEXTE<br />CONTEXTE<br />CONTEXTE<br /></marquee></td></tr></table>
</td>

<td align="center">
<table class="staff"><tr class="staffmdm"><td align="center">STAFF</td></tr>
<tr  class="staffmdm"><td align="center">STAFF</td></tr>
<tr class="staffmdm"><td align="center">STAFF</td></tr></table>
</td>

<td align="center">
<table class="scenario"><tr class="scenariocases"><td align="center"></td><td align="center"></td><td align="center"></td></tr>
<tr class="scenariocases"><td align="center"></td><td align="center"></td><td align="center"></td></tr>
<tr class="scenariocases"><td align="center"></td><td align="center"></td><td align="center"></td></tr></table>
</td></tr>

<tr><td align="center">
<table class="partos"><tr><td align="center"><marquee direction="left" behavior="alternate" scrolldelay="25" width="210" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();"><a href="url_image"><img src="http://..." />PARTENAIRE</a>  <a href="url_image"><img src="http://..." />PARTENAIRE</a>  <a href="url_image"><img src="http://..." />PARTENAIRE</a>  ETC</marquee></td></tr></table>
</td>

<td align="center">
<table class="mdm"><tr class="staffmdm"><td align="center">MEMBRES DM</td></tr>
<tr class="staffmdm"><td align="center">MEMBRES DM</td></tr>
<tr class="staffmdm"><td align="center">MEMBRES DM</td></tr></table>
</td>

<td align="center">
<table class="news"><tr><td align="center"><marquee direction="up" scrolldelay="25" height="270" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">NEWS<br />NEWS<br />NEWS<br /></marquee></td></tr></table>

</td></tr></table>
- Ici, je t'ai mis le code avec des sauts de ligne entre les différents blocs afin que tu comprennes mieux et que tu t'y repères mieux jusqu'à ce que tu aies fini, mais il faut savoir que c'est mieux pour la lisibilité des navigateurs que les codes HTML soient à la suite. Cela dit, dans un post ou à certains endroits, tu ne peux pas le faire parce que les sauts de ligne sont pris en compte.
- Pour ce qui est des défilements, tu peux voir ce que tu voudrais modifier, comme le sens du défilement, le scrolldelay qui est la vitesse de défilement :
Plus la valeur est basse, plus ça défile vite.
- L'espacement latéral, horizontal en HTML c'est &nb sp; (sans espace !) mais il ne le garde pas, même entre les balises ]codepeux le constater, il y a beaucoup d'[color=blue]identifiants et ce sont eux qui vont te permettre de gérer presque tout concernant l'apparence via la feuille de style CSS, de manière indépendante d'une cellule (td) à l'autre, puisque ce sont aussi des tableaux à part entière.

Dans ces identifiants, il y a juste celui placé dans les balises des lignes (tr) sur lequel je vais m'attarder, les autres tu les comprendras certainement avec leur corrélation dans le CSS.
Ce class="staffmdm" se retrouve dans les deux parties identiques du staff et de Membre Du Mois (mdm).
En lieu et place de réinscrire à chaque fois les dimensions, on demande à la ligne (tr) de le commander au cellules (td).
Pareil pour les petites cases (td) de la partie "scénario" et le class="scenariocases"

Dans le PA >> Affichage >> Couleurs > Feuille de style CSS :
Spoiler:
.patablo {
background: #000000;
width: auto;
padding: 7px;
margin: 10px auto;
}
.navspeed {
color: #ffffff;
font-size: 16px;
font-weight: bold;
padding: 7px;
}
.patitle {
color: #ffffff;
font-size: 16px;
padding: 7px;
margin: 7px;
}
.contexte {
background: #dadada;
width: 250px;
height: 300px;
color: #910000;
font-weight: bold;
border: 2px solid magenta;
padding: 4px;
margin: 4px 7px 0 0px;
}
.staff {
width: 250px;
height: 300px;
color: #ffffff;
font-weight: bold;
border: 2px solid magenta;
padding: 4px;
margin: 4px 7px 0 0px;
}
.staffmdm td {
width: 200px;
height: 90px;
border: 2px solid #dadada;
padding: 4px;
margin: 4px;
}
.scenario {
width: 250px;
height: 300px;
color: #ffffff;
font-weight: bold;
border: 2px solid magenta;
padding: 4px;
margin: 4px 7px 0 0px;
}
.scenariocases td {
width: 35px;
height: 35px;
border: 2px solid #dadada;
padding:4px;
margin: 4px;
}
.partos {
background: yellow;
width: 250px;
height: 300px;
color: #ffffff;
font-weight: bold;
border: 2px solid magenta;
padding: 4px;
margin: 4px 7px 0 0px;
}
.mdm {
width: 250px;
height: 300px;
color: #ffffff;
font-weight: bold;
border: 2px solid magenta;
padding: 4px;
margin: 4px 7px 0 0px;
}
.news {
background: #ffffff;
width: 250px;
height: 300px;
color: #000000;
font-weight: bold;
border: 2px solid magenta;
padding: 4px;
margin: 4px 7px 0 0px;
}
Hormis les dimensions qui sont les celles que tu as indiquées, il va de soi, que tu personnalises à ta sauce, car si j'ai mis des couleurs, ect, ce n'est que pour que tu voies où sont les différents blocs et à quoi servent les différents identifiants.

Je pense que dans un premier temps, tu as à faire... Siffleur

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Sofia. B le Mar 6 Déc 2011 - 13:36

Mon cher petit professeur ! Déjà merci beaucoup, c'est vraiment plus simple expliqué comme tu le mets !

Ensuite j'ai bien suivit tout à la lettre en essayant sur mon forum test ! Je te passe le lien histoire que tu vois ça. Je me suis permise de rajouter des border-radius ! J'adore ça Very Happy Fais pas attention aux catégories j'ai pas bidouiller ça, et tu auras un aperçu de la Bann de printemps mouahaha !

Bref ! Voici le lien : http://cabaret-test.forumgratuit.org/

Alors question ! Comme tu peux le voir, j'ai mis un GIF pour le staff dans la première case, comment je peux faire en sorte que l'image et le cadre aillent bien ensemble ? parce que là on voit le décalage.... j'ai juste rajouté ça dans le code HTML :

Code:
<table class="patablo" align="center" cellspacing="0" cellpadding="0" border="0"><tr>
<td colspan="3" class="navspeed" align="center"><table class="navspeed"><tr><td align="center">NAVIGATION RAPIDE</td></tr></table>
</td></tr>
<tr><td colspan="3"  class="patitle" align="center"><h3>VIVA LAS VEGAS ! BIENVENUE</h3></td></tr>
 
<tr><td align="center">
<table class="contexte"><tr><td align="center"><marquee direction="down" scrolldelay="25" height="270" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">De la petite bourgade agricole du XXème siècle à aujourd'hui, il n'y a qu'un pas, ou plutôt, il n'y a que cent cinquante six années, en effet, Las Vegas fut fondée en 1855 et la ville a bien changée depuis...

Las Vegas, la ville de tous les péchés regorge d' effervescence et tient sa première place dans le monde de plus grande ville de jeux et spectacles pour adultes. C' est une communauté fondée sur les terres en friche du désert Mojave dans le Nevada sous forme d' oasis avec des jeux d' argent et des spectacles pour attirer et amuser les adultes après la guerre (surtout les résidents de Los Angeles). Tout a été fait ou surfait à Las Vegas à grande ou même spectaculaire échelle. Le long du boulevard principal de Las Vegas, appelé « le strip », une pyramide en verre noir se dresse sur 100 mètres avec une réplique grandeur nature du Sphinx à son entrée. Tout près se trouve un château grandeur nature avec des tourelles peintes en couleurs criardes. En face se trouve un immeuble grandeur nature de la ville de New York City avec le pont de Brooklyn Bridge et la Statue de la Liberté. Plus loin une réplique, deux fois plus petite, de la tour Eiffel, la place Piazza San Marco de Venice presque grandeur nature et un énorme volcan qui émet une énorme boule de feu toutes les 30 minutes. A Las Vegas vous vous demanderez: "Est-ce vraiment une ville ou est-ce que je me trouve dans un parc d'amusement ?"

N' importe quel soir à Vegas vous trouverez des centaines de divertissements tels que les, spectacles de scène de Las Vegas, des événements sportifs de classe mondiale, des performances de vedettes de musique, danse et comédie dans toutes sortes d' endroits à travers la ville. Cette ville ne dors jamais. La frivolité continue toute la nuit et les joueurs continuent leur poursuite de richesses même une fois le soleil levé à nouveau. La population, il faut bien le dire, est à quatre-vingt pour-cent touristique. Cependant, ces derniers temps, les chiffres s'inversent. La population de son agglomération a été multipliée par trois en 20 ans et compte à présent 1 996 542 habitants. La région de Las Vegas fait face à un accroissement démographique si important que les pages jaunes de l'annuaire sont réactualisées deux fois par an.

A Vegas, vous trouverez tout type de personnalité chacune ayant son propre caractère, plus ou moins bon, l'impatience, la fougue, la vengeance, la négligence, l'usure, la gloire, l'excès, le vice, la lenteur, la vengeance, l'accumulation, la délicatesse, la convoitise... Tous le monde ici, possède des vertus, mais aussi, et surtout, des vices... Certains les ont choisis, d'autres y ont été amené par contrainte, à chacun son histoire, à chacun son péché. La perfection de l’homme est formée de la composition de ces sept péchés, comme la lumière blanche l’est des sept couleurs de l’arc-en-ciel. Un peu de péché nous rapproche de nous, trop de péché nous éloigne des autres… </marquee></td></tr></table>
</td>
 
<td align="center">
<table class="staff"><tr class="staffmdm"><td align="center"><img src="http://s2.noelshack.com/uploads/images/3282187118463_lea2.gif" border="0" alt="" /></td></tr>
<tr  class="staffmdm"><td align="center">STAFF</td></tr>
<tr class="staffmdm"><td align="center">STAFF</td></tr></table>
</td>
 
<td align="center">
<table class="scenario"><tr class="scenariocases"><td align="center"></td><td align="center"></td><td align="center"></td></tr>
<tr class="scenariocases"><td align="center"></td><td align="center"></td><td align="center"></td></tr>
<tr class="scenariocases"><td align="center"></td><td align="center"></td><td align="center"></td></tr></table>
</td></tr>
 
<tr><td align="center">
<table class="partos"><tr><td align="center"><marquee direction="left" behavior="alternate" scrolldelay="25" width="210" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();"><a href="url_image"><img src="http://..." />PARTENAIRE</a>  <a href="url_image"><img src="http://..." />PARTENAIRE</a>  <a href="url_image"><img src="http://..." />PARTENAIRE</a>  ETC</marquee></td></tr></table>
</td>
 
<td align="center">
<table class="mdm"><tr class="staffmdm"><td align="center">MEMBRES DM</td></tr>
<tr class="staffmdm"><td align="center">MEMBRES DM</td></tr>
<tr class="staffmdm"><td align="center">MEMBRES DM</td></tr></table>
</td>
 
<td align="center">
<table class="news"><tr><td align="center"><marquee direction="up" scrolldelay="25" height="270" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();"><font color="mediumseagreen">•</font> IMPORTANT : Sondage intrigue ! Rendez vous dans le Panel Of News ! <br>
<font color="mediumseagreen">•</font> Premier recensement, rendez vous dans le Panel Of News ! <br>
<font color="mediumseagreen">•</font> Lancement du sondage n°6<br>
<font color="mediumseagreen">•</font> Félicitations à Sofia E. Bennett qui est le membre de la semaine du 21 au 28 novembre <br>
<font color="cornflowerblue">•</font> Nouvel design mis en place.<br>
<font color="mediumseagreen">•</font> Deux nouveaux administrateurs dans le Staff ! Félicitations à Kara G. Sullivan & Geoffrey T. Gibson.<br>
<font color="cornflowerblue">•</font> Nouvel design mis en place.<br>
<font color="lightcoral">• </font>Ouverture officielle du forum le 10.10.11.</marquee></td></tr></table>
 
</td></tr></table>

Sofia. B
Nouveau membre

Messages : 9
Inscrit(e) le : 05/12/2011

http://sin-city.forumgratuit.org/
Sofia. B a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Final-Blonde le Mar 6 Déc 2011 - 13:53

Déjà, pour le "contexte" (voire même pour le "news"), je mettrais à ces deux identifiant un text-align: justify; dans le CSS et je supprimirerais dans le HTML les align="center" aux td...

Pour ce qui est du GIF calant complètement avec le cadre... Pas de cadre !
C'est difficile de donner les coins arrondis à une image normale sans passer par un éditeur d'images, mais un GIF de surcroit, je ne saurais te dire comment bidouiller ça.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Final-Blonde le Mar 6 Déc 2011 - 14:08

Il y aurait un moyen, mais ce n'est que du bidouillage et ce n'est pas l'image qui a les coins arrondis, mais les bords qu'on peut lui donner .
Code:
<img src="http://s2.noelshack.com/uploads/images/3282187118463_lea2.gif" style="border: 3px solid #000000; -moz-border-radius: 13px; -webkit-border-radius: 13px; border-radius: 13px; padding: 3px;" border="0" alt="" />
Je ne sais pas ce que tu as mis comme valeur au radius des cadres.
Ensuite,la couleur noire des bordures est pour donner l'illusion que c'est dans l'image.
Enfin, bien sûr, tu peux donner un attribut class="imgradius" à l'image et le gérer dans la feuille de style CSS, surtout si ça doit s'appliquer à d'autres images.


EDIT : Décidément, je fais tout à l'envers ! J'ai voulu éditer et j'ai cité... Gloups

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Sofia. B le Mar 6 Déc 2011 - 14:25

J'ai pris tes remarques en compte chef ! Pour les gif j'ai trouvé comment mettre un petit cadre autour tout mignon. Je ferais ça aussi pour les scenario je pense.

En tout cas vraiment merci pour ton aide... Je n'aurais jamais pensé à aller dans les templates + la feuille de CSS. J'étais du genre à ne bidouiller que le HTML...

http://cabaret-test.forumgratuit.org/

Je te laisse me dire ce que tu en pense pour le moment

Sofia. B
Nouveau membre

Messages : 9
Inscrit(e) le : 05/12/2011

http://sin-city.forumgratuit.org/
Sofia. B a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Final-Blonde le Mar 6 Déc 2011 - 14:36

Oui, je trouve plus lisible quand le texte est aligné en "justify".
Et pour le cadre des images, c'est aussi bien mieux.
J'irais même mettre le "table" principal avec un background: transparent; et juste garder les bordures.

Pour le reste, tant que ça te plait à toi c'est ce qui compte !
Pour moi, ça bouge trop de partout (surtout les gif).
Dans les cellules "contexte" et "news" j'aurais mis une scrollbar plutôt qu'un défilement...

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Sofia. B le Mar 6 Déc 2011 - 14:46

C'est pas bête pour le scrollbar, comme ça on aurait que les gif qui remue.
Les partenaires aussi autant les arrêter.

Mais je voudrais les aligner genre :

Bouton 1 • Bouton 2 • Bonton 3
Bouton 4 • Bouton 5 • Bonton 6

Je dois mettre ou les scrollbar ? et les défilements j'enlève quoi exactement ?

Edit : Tu vas me détester mais je pense que ça serait plus esthétique si c'etait comme ça :
Spoiler:

Du coup le cadre Staff et MDM passerait en... 650*150 et les autres 325*300 ? Pour rester aligné...

Sofia. B
Nouveau membre

Messages : 9
Inscrit(e) le : 05/12/2011

http://sin-city.forumgratuit.org/
Sofia. B a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Final-Blonde le Mar 6 Déc 2011 - 14:52

Pour ce qui est des scrollbar, il suffit de supprimer les balises >marquee< avec la fermeture >/marquee<
Ensuite dans le CSS et leur identifiant respectif, nous ajoutons un :
overflow: auto;
Comme il y a une hauteur fixe attribuée à ces "cases", une fois la hauteur dépassée par le contenu, la scrollbar s'affiche.

Pour ce qui est des boutons, je n'ai pas bien compris...

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Sofia. B le Mar 6 Déc 2011 - 14:58

Oui non en faite pour les partenaires ça ira t'en fait pas ^^

Sinon pour le schema je dois faire comment ?

Edit : Regarde j'ai un gros soucis avec le contexte que je ne comprends ... pourtant j'ai tout fait comme tu as dit.

http://cabaret-test.forumgratuit.org/]http://cabaret-test.forumgratuit.org/

Sofia. B
Nouveau membre

Messages : 9
Inscrit(e) le : 05/12/2011

http://sin-city.forumgratuit.org/
Sofia. B a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Final-Blonde le Mar 6 Déc 2011 - 15:12

@Sofia. B a écrit:Sinon pour le schema je dois faire comment ?
Quel schéma ???

Quant aux scrollbar, j'ai oublié que c'est adapté au bloc "div".
Donc dans le HTML en ce qui concerne "contexte" tu surlignes depuis le grand td et tu remplaces par :
Code:
<tr>
<td align="center"><div class="contexte">
De la petite bourgade agricole du XXème siècle à aujourd'hui, il n'y a qu'un pas, ou plutôt, il n'y a que cent cinquante six années, en effet, Las Vegas fut fondée en 1855 et la ville a bien changée depuis...
 
Las Vegas, la ville de tous les péchés regorge d' effervescence et tient sa première place dans le monde de plus grande ville de jeux et spectacles pour adultes. C' est une communauté fondée sur les terres en friche du désert Mojave dans le Nevada sous forme d' oasis avec des jeux d' argent et des spectacles pour attirer et amuser les adultes après la guerre (surtout les résidents de Los Angeles). Tout a été fait ou surfait à Las Vegas à grande ou même spectaculaire échelle. Le long du boulevard principal de Las Vegas, appelé « le strip », une pyramide en verre noir se dresse sur 100 mètres avec une réplique grandeur nature du Sphinx à son entrée. Tout près se trouve un château grandeur nature avec des tourelles peintes en couleurs criardes. En face se trouve un immeuble grandeur nature de la ville de New York City avec le pont de Brooklyn Bridge et la Statue de la Liberté. Plus loin une réplique, deux fois plus petite, de la tour Eiffel, la place Piazza San Marco de Venice presque grandeur nature et un énorme volcan qui émet une énorme boule de feu toutes les 30 minutes. A Las Vegas vous vous demanderez: "Est-ce vraiment une ville ou est-ce que je me trouve dans un parc d'amusement ?"
 
N' importe quel soir à Vegas vous trouverez des centaines de divertissements tels que les, spectacles de scène de Las Vegas, des événements sportifs de classe mondiale, des performances de vedettes de musique, danse et comédie dans toutes sortes d' endroits à travers la ville. Cette ville ne dors jamais. La frivolité continue toute la nuit et les joueurs continuent leur poursuite de richesses même une fois le soleil levé à nouveau. La population, il faut bien le dire, est à quatre-vingt pour-cent touristique. Cependant, ces derniers temps, les chiffres s'inversent. La population de son agglomération a été multipliée par trois en 20 ans et compte à présent 1 996 542 habitants. La région de Las Vegas fait face à un accroissement démographique si important que les pages jaunes de l'annuaire sont réactualisées deux fois par an.
 
A Vegas, vous trouverez tout type de personnalité chacune ayant son propre caractère, plus ou moins bon, l'impatience, la fougue, la vengeance, la négligence, l'usure, la gloire, l'excès, le vice, la lenteur, la vengeance, l'accumulation, la délicatesse, la convoitise... Tous le monde ici, possède des vertus, mais aussi, et surtout, des vices... Certains les ont choisis, d'autres y ont été amené par contrainte, à chacun son histoire, à chacun son péché. La perfection de l’homme est formée de la composition de ces sept péchés, comme la lumière blanche l’est des sept couleurs de l’arc-en-ciel. Un peu de péché nous rapproche de nous, trop de péché nous éloigne des autres…</div></td>
Nous avons juste remplacé le petit tableau par un div, ce qui revient grosso modo au même.
Dans le CSS, avant le pointcontexte, on ajoute div.contexte, ce qui donne pour cette partie :
div.contexte {
background: #dadada;
width: 250px;
height: 300px;
overflow: auto;
color: #910000;
font-weight: bold;
border: 2px solid magenta;
padding: 4px;
margin: 4px 7px 0 0px;
}
Tu fais pareil pour le "news".

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Sofia. B le Mar 6 Déc 2011 - 15:15

Tu as pas du voir mon Edit en faite XD J'avais mis ça : Edit : Tu vas me détester mais je pense que ça serait plus esthétique si c'etait comme ça :
Spoiler:

Du coup le cadre Staff et MDM passerait en... 650*200 et les autres 325*300 ? Pour rester aligné...

Sofia. B
Nouveau membre

Messages : 9
Inscrit(e) le : 05/12/2011

http://sin-city.forumgratuit.org/
Sofia. B a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Final-Blonde le Mar 6 Déc 2011 - 16:25

Nenni, je n'avais pas vu et je ne vais pas te détester.
Cependant si je t'explique beaucoup, c'est pour que tu y arrives seule, comme par exemple avec le fameux "colspan" que tu retrouves pour la navi-rapide et pour le titre du tableau.
Or avec ton nouveau plan, ce ne sera pas faire fusionner 3 cellules-td ensemble pour n'en faire qu'une seule, mais seulement 2.
En gros voilà comment :
Code:
<table class="patablo" align="center" cellspacing="0" cellpadding="0" border="0"><tr>
<td colspan="2" class="navspeed" align="center"><table class="navspeed"><tr><td align="center">NAVIGATION RAPIDE</td></tr></table></td></tr>
<tr><td colspan="2"  class="patitle" align="center"><h3>VIVA LAS VEGAS ! BIENVENUE</h3></td></tr>

<tr><td colspan="2" align="center"><table class="staff"><tr class="staffmdm"><td align="center"><img src="http://s2.noelshack.com/uploads/images/3282187118463_lea2.gif" style="border: 3px solid #000000; -moz-border-radius: 13px; -webkit-border-radius: 13px; border-radius: 13px;" border="0" alt="" /></td><td align="center">STAFF</td><td align="center">STAFF</td></tr></table></td></tr>

<tr>
<td align="center"><div class="contexte">
De la petite bourgade agricole du XXème siècle à aujourd'hui, il n'y a qu'un pas, ou plutôt, il n'y a que cent cinquante six années, en effet, Las Vegas fut fondée en 1855 et la ville a bien changée depuis...
 
Las Vegas, la ville de tous les péchés regorge d' effervescence et tient sa première place dans le monde de plus grande ville de jeux et spectacles pour adultes. C' est une communauté fondée sur les terres en friche du désert Mojave dans le Nevada sous forme d' oasis avec des jeux d' argent et des spectacles pour attirer et amuser les adultes après la guerre (surtout les résidents de Los Angeles). Tout a été fait ou surfait à Las Vegas à grande ou même spectaculaire échelle. Le long du boulevard principal de Las Vegas, appelé « le strip », une pyramide en verre noir se dresse sur 100 mètres avec une réplique grandeur nature du Sphinx à son entrée. Tout près se trouve un château grandeur nature avec des tourelles peintes en couleurs criardes. En face se trouve un immeuble grandeur nature de la ville de New York City avec le pont de Brooklyn Bridge et la Statue de la Liberté. Plus loin une réplique, deux fois plus petite, de la tour Eiffel, la place Piazza San Marco de Venice presque grandeur nature et un énorme volcan qui émet une énorme boule de feu toutes les 30 minutes. A Las Vegas vous vous demanderez: "Est-ce vraiment une ville ou est-ce que je me trouve dans un parc d'amusement ?"
 
N' importe quel soir à Vegas vous trouverez des centaines de divertissements tels que les, spectacles de scène de Las Vegas, des événements sportifs de classe mondiale, des performances de vedettes de musique, danse et comédie dans toutes sortes d' endroits à travers la ville. Cette ville ne dors jamais. La frivolité continue toute la nuit et les joueurs continuent leur poursuite de richesses même une fois le soleil levé à nouveau. La population, il faut bien le dire, est à quatre-vingt pour-cent touristique. Cependant, ces derniers temps, les chiffres s'inversent. La population de son agglomération a été multipliée par trois en 20 ans et compte à présent 1 996 542 habitants. La région de Las Vegas fait face à un accroissement démographique si important que les pages jaunes de l'annuaire sont réactualisées deux fois par an.
 
A Vegas, vous trouverez tout type de personnalité chacune ayant son propre caractère, plus ou moins bon, l'impatience, la fougue, la vengeance, la négligence, l'usure, la gloire, l'excès, le vice, la lenteur, la vengeance, l'accumulation, la délicatesse, la convoitise... Tous le monde ici, possède des vertus, mais aussi, et surtout, des vices... Certains les ont choisis, d'autres y ont été amené par contrainte, à chacun son histoire, à chacun son péché. La perfection de l’homme est formée de la composition de ces sept péchés, comme la lumière blanche l’est des sept couleurs de l’arc-en-ciel. Un peu de péché nous rapproche de nous, trop de péché nous éloigne des autres…</div></td>

<td align="center"><table class="scenario"><tr class="scenariocases"><td align="center"></td><td align="center"></td><td align="center"></td></tr>
<tr class="scenariocases"><td align="center"></td><td align="center"></td><td align="center"></td></tr>
<tr class="scenariocases"><td align="center"></td><td align="center"></td><td align="center"></td></tr></table></td></tr>

<tr><td colspan="2" align="center"><table class="staff"><tr class="staffmdm"><td align="center"><img src="http://s2.noelshack.com/uploads/images/3282187118463_lea2.gif" style="border: 3px solid #000000; -moz-border-radius: 13px; -webkit-border-radius: 13px; border-radius: 13px;" border="0" alt="" /></td><td align="center">MEMBRE DM</td><td align="center">MEMBRE DM</td></tr></table></td></tr>

<tr>
<td align="center"><table class="partos"><tr><td align="center">
<marquee direction="left" behavior="alternate" scrolldelay="25" width="210" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">
<a href="url_image"><img src="http://..." />PARTENAIRE</a>  <a href="url_image"><img src="http://..." />PARTENAIRE</a>  <a href="url_image"><img src="http://..." />PARTENAIRE</a>  ETC</marquee>
</td></tr></table></td>

<td align="center"><div class="news">
NEWS<br />NEWS<br />NEWS<br /></div>
</td></tr></table>
Les ligne-tr de staff et MDM ont été supprimées.
Il n'y a pas besoin de mettre la largeur et la hauteur de ces deux cellules vu qu'elles fusionnes celles qui sont distinctes, elles prennent automatiquement la largeur, et la hauteur est en fonction des images et du padding (espace entre le contenu et le contenant).

Dans le CSS, j'ai aussi omis de te dire que c'est un overflow-y qu'il faut préciser = pour la hauteur (-x pour la largeur)
Voilà ce que ça donne, remis dans l'ordre (c'est mieux pour s'y retrouver) :
Spoiler:
/*MESSAGE ACCUEIL
----------------------------*/
.patablo {
background: #ffffff;
width: auto;
padding: 7px;
margin: 10px auto;
}
.navspeed {
color: #910000;
font-size: 16px;
font-weight: bold;
padding: 7px;
}
.patitle {
color: #910000;
font-size: 16px;
padding: 7px;
margin: 7px;
}
.staff {
color: #910000;
font-weight: bold;
border: 2px solid magenta;
padding: 4px;
margin: 4px 7px 0 0px;
}
.staffmdm td {
width: 200px;
height: 90px;
border: 2px solid #dadada;
padding: 4px;
margin: 4px;
}
.contexte {
background: #dadada;
width: 325px;
height: 300px;
overflow-y: auto;
color: #910000;
font-weight: bold;
border: 2px solid magenta;
padding: 4px;
margin: 4px 7px 0 0px;
}
.scenario {
width: 325px;
height: 300px;
color: #910000;
font-weight: bold;
border: 2px solid magenta;
padding: 4px;
margin: 4px 7px 0 0px;
}
.scenariocases td {
width: 35px;
height: 35px;
border: 2px solid #dadada;
padding:4px;
margin: 4px;
}
.mdm {
color: #ffffff;
font-weight: bold;
border: 2px solid magenta;
padding: 4px;
margin: 4px 7px 0 0px;
}
.partos {
background: yellow;
width: 325px;
height: 300px;
color: #910000;
font-weight: bold;
border: 2px solid magenta;
padding: 4px;
margin: 4px 7px 0 0px;
}
.news {
background: #910000;
width: 325px;
height: 300px;
overflow-y: auto;
color: #000000;
font-weight: bold;
border: 2px solid magenta;
padding: 4px;
margin: 4px 7px 0 0px;
}
Le CSS et le HTML (un peu moins) est en fonction de la base que je t'ai donnée plus haut.

Dernier point, le saut de ligne en HTML s'écrit :
Code:
<br />
Et pas autrement. Grrr

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Sofia. B le Mar 6 Déc 2011 - 18:00

Ecoute... c'est juste PARFAIT !

J'ai réussi tout est bien beau bien aligné ! et tu es mon nouveau dieu/nouvelle déesse.

Vraiment un grand merci pour ton aide ! ♥

Sofia. B
Nouveau membre

Messages : 9
Inscrit(e) le : 05/12/2011

http://sin-city.forumgratuit.org/
Sofia. B a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Final-Blonde le Mar 6 Déc 2011 - 18:08

En effet, c'est mieux dans ce sens.
Quand tu seras fatiguée de les regarder ainsi, tu pourra toujours les modifier en hauteur (c'est vraiment pas grand chose)... Mr. Green

Bravo à toi, tu as bien travailler, moi je n'ai fait que la base.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil

Message par Sofia. B le Mar 6 Déc 2011 - 18:16

Les membres sont contents sur le forum ^^ grâce à ta base ça ne serait pas si beau ! T'es génial !

Sofia. B
Nouveau membre

Messages : 9
Inscrit(e) le : 05/12/2011

http://sin-city.forumgratuit.org/
Sofia. B 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