Le deal à ne pas rater :
Pack : Manette Xbox sans fil Carbon Black + 3 Jeux Xbox One
69.99 €
Voir le deal

[Facile] Page d'accueil #5 - Batty


Aller en bas

Batty
Ancien.ne du staff

Bonjour

Voici un schéma de niveau facile. De base, il n'y a pas d'effet, mais je vous invite à en ajouter selon votre inspiration. Cette page d'accueil a pour but de vous faire pratiquer les bases et de réaliser un joli rendu. Afin de réaliser cette page d'accueil voici quelques tutoriels qui vous serons utiles :

Les tableaux
La fusion des cellules d’un tableau  
Un div pour vos textes (également pratique pour tout se qui est visuel donc, les "boite" blanche, le texte, etc.)
Arrondissement des coins

[Facile] Page d'accueil #5 - Batty Hkyz4Hw

Pour la réalisation de cette page d'accueil, un seul tableau devrait être nécessaire. Si vous avez des questions n'hésiter pas à les poser à la suite ainsi qu'a poster votre rendu et votre code.
Batty
Date d'inscription : 05/06/2014
Messages : 3514

Kukka
Newbie

Salut ^-^ J'ai une question... (un peu bête, non très bête...) Il fait faire une fiche ou on insère les tableau c'est sa ?
Kukka
Date d'inscription : 06/02/2016
Messages : 42

Batty
Ancien.ne du staff

tu peux la faire de deux façon. Soit avec un tableau sois avec des positionnement. Si tu débute je te conseille de commencé par les tableaux. J'espère avoir répondu a ta question =)
Batty
Date d'inscription : 05/06/2014
Messages : 3514

Invité
Invité

Bon j'ai essayé, par contre c'est pas .. vraiment ? comme le résultat sur le schéma, mais y'a des trucs j'ai pas trouvé comment faire (le haut du bloc de gauche par exemple). Voilà mon code, en hide :

Anonymous

Cheshire Cat
Vieille admin - Briseuse de nuques

http://sarahdealerevans.deviantart.com/gallery/
Coucou miss !

Globalement, c'est respecté je dirai au niveau du visuel. Tu as juste mis ta petite touche perso quoi ! :D

Du coup, ton code (c'est le plus important) :3
Je trouve que niveau contraintes, c'est respecté. Tu as fais la PA en tableau, tu as fusionné des cellules, arrondi les coins. Par contre, tu n'as pas utilisé de div pour les textes. Temps pis mais en soit c'est pas trop grave !

Du coup, dès le départ je remarque un oubli ici
Code:
<table id="tableau" border="1px" cellSpacing=12 width="650px">

Il manque des "", c'est quand même important, et en plus tu as mis une majuscule au S qui fausse encore cette partie du code. Sinon, moi j'aurai pas mis autant d'id dès le départ. Les id, perso, je les utilise pour rendre mon code plus "visible", dans le sens où je repère tout de suite à quoi correspond telle chose. C'est plus rapide pour corriger des bugs, etc.

Maintenant, je t'avoue ne pas trop comprendre cette partie
Code:
<th id="cellule" rowspan="20"><h2 class="texte">NOTRE STAFF </h2>
<img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/>
<br> <h2 class="texte">NOUVEAUTÉS</h2>
      <h4 id="h4">XX.XX.XX NEWS<br>
      XX.XX.XX NEWS<br>
      XX.XX.XX NEWS<br>
      XX.XX.XX NEWS<br>
      XX.XX.XX NEWS<br>
      XX.XX.XX NEWS<br>
      XX.XX.XX NEWS<br>
      XX.XX.XX NEWS<br>
      XX.XX.XX NEWS</h4>
      </th>

J'utilisais pas trop les TH du temps où je codais en tableau et quand je les vois en template je remarque que c'est surtout utilisé pour les titres de colonne et non pas pour une colonne entière. A ta place, j'aurai mis un td et puis basta.

Sinon, un rowspan à 7 ça suffit, pourquoi mettre 20 ? T'as juste à compter les cellules tu sais x)

Je remarque que dans ton CSS, tu utilises plutôt les id comme tu devrais utiliser des class, ce serait plutôt l'inverse en fait. Sinon, sémantiquement parlant, un id est pour un élément unique tandis qu'une class est un élément qui se répète. Pour cette partie

Code:

      <tr>
<td id="lien"><a href="https://jsfiddle.net/">LIEN</a></td>
<td id="lien"><a href="https://jsfiddle.net/">LIEN</a></td>
<td id="lien"><a href="https://jsfiddle.net/">LIEN</a></td>
  </tr>

Tu aurais faut par exemple dans ta syntaxe. Ensuite, dans cette même partie, tu aurais pu simplement faire ceci

Code:
<tr>
<td>
<a href="https://jsfiddle.net/" class="lien">LIEN</a>
<a href="https://jsfiddle.net/" class="lien">LIEN</a>
<a href="https://jsfiddle.net/" class="lien">LIEN</a>
</td>
  </tr>

Ca évite des colspan que tu n'as pas vraiment l'air de trop maîtriser, surtout que tu as déjà fusionné des cellules juste avant donc te casse pas la tête non plus ^^

Par contre
Code:
<td id="partenaire" cellSpacing=5 cellPadding=5>

Je sais pas depuis quand on applique des cellspacing et cellpadding aux td mais c'est pas bon du tout. Ca sert à rien et en plus tu as encore fais des fautes de syntaxe pour tes attributs HTML. Garde seulement ton id à la limite, mais enlève le reste. Tu as déjà appliqué un cellspacing dans ta balise table en plus ^^

Si tu veux centrer tes images dans #partenaire, applique un text-align:center; qui va les centrer si c'est ce que tu souhaites. Oui c'est étrange mais c'est comme ça XD

Sinon ce que je trouve cool, c'est d'avoir utilisé un p'tit peu les balises de titre. C'est une bonne initiative ici :)

Il te reste pas mal de trucs à revoir cependant, relis bien les tutoriels sur les tableaux et utilise majoritairement des class plutôt en favorisant les id pour les éléments uniques et non répétés. Ca peut être les crédits pas exemple ^^

Après ceci
Code:

  <tr>

  </tr>
      <tr>

  </tr>

Ca sert à rien, vraiment. Supprime ça x)

Bon j'ai encore pas mal de trucs à dire je pense, mais je te laisse déjà regarder un peu ça et on verra une fois ton code corrigé :P
Cheshire Cat
Date d'inscription : 15/12/2012
Messages : 4814

Invité
Invité

Hey :) Alors déjà, merci à toi ^^ ensuite pour les "..." que j'ai pas inscrit, c'est sur le site où j'apprends à coder qu'ils disent que c'est mieux de ne pas en mettre en fait XD Alors je vois que j'ai été induite en erreur *-* Pour le th en fait c'est une erreur de ma part XD je l'avais même pas remarqué en plus u.u Les sellspacing et padding, là encore c'est sur le site que j'apprends à coder qu'ils inscrivent qu'il faut en mettre ... Pour le rowspan="20", erreur de ma part :/ en fait au début je faisais des tests et j'ai oubliée de changer cet attribut >< Bref, voici le code corrigé :P


HTML :
Code:
<table id="tableau" cellSpacing="12" width="650px">
   <tr>
       <td id="cellule" rowspan="7"><h2 class="texte">NOTRE STAFF </h2>
<img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/> <img src="http://screenshots.en.sftcdn.net/en/scrn/69661000/69661923/despicable-me-minion-rush-44-100x100.png" id="image"/>
<br> <h2 class="texte">NOUVEAUTÉS</h2>
       <h4 id="h4">XX.XX.XX NEWS<br>
       XX.XX.XX NEWS<br>
       XX.XX.XX NEWS<br>
       XX.XX.XX NEWS<br>
       XX.XX.XX NEWS<br>
       XX.XX.XX NEWS<br>
       XX.XX.XX NEWS<br>
       XX.XX.XX NEWS<br>
       XX.XX.XX NEWS</h4>
       </td>
       <td id="titre" colspan="5">BIENVENUE</td>
   </tr>
   <tr>
       <td id="cellule_2" colspan="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae mauris id erat imperdiet malesuada. Suspendisse potenti. Curabitur ac dolor leo. In viverra nunc ac neque rutrum, sagittis pharetra magna sollicitudin. In luctus quam molestie lacus auctor, id sagittis neque lacinia. Aliquam erat volutpat. Donec odio est, viverra vel pretium non, cursus eget dui.</td>
   </tr>
      <tr>
       <td id="cellule_2" colspan="3">Vivamus tincidunt ullamcorper sodales. Phasellus vitae venenatis arcu, quis mollis metus. Etiam ipsum orci, blandit non mauris pulvinar, hendrerit lobortis sem. Sed lorem erat, posuere sit amet lobortis a, sollicitudin laoreet sapien. Suspendisse potenti. Suspendisse sed eros facilisis, scelerisque dui quis, ultrices ex.</td>
   </tr>
      <tr><td>
<a href="https://jsfiddle.net/" class="lien">LIEN</a>
<a href="https://jsfiddle.net/" class="lien">LIEN</a>
<a href="https://jsfiddle.net/" class="lien">LIEN</a></td>
   </tr>
      <tr>
<td id="partenaire"><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/"> <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a><a href="http://pokelexya.forumactif.pro/">  <img src="http://nsa37.casimages.com/img/2016/07/24/160724125334938971.png"/></a></td>
   </tr>
  <tr><td id="credit">© by Ecleasya</td></tr>
</table>


CSS :
Code:
#titre {
  color: #808080;
  text-shadow:0px 0px 1px black;
  text-align:center;
  font-size:45px;
  font-weight:bold;
  padding-right:35px;
  font-family:verdana;
  letter-spacing:-2;
}

#tableau {
  background-image:url('http://i.imgur.com/XcDecTI.jpg');
}

#cellule {
  border-radius:10px 10px 10px 10px;
  width:200px;
  background-color:#fff;
  padding:6px;
  margin-top:-20px;
  padding-bottom:30px;
}

#cellule_2 {
  background-color:#fff;
  text-align:justify;
  padding:6px;
  box-shadow: 1px 1px 1px black;
}

.lien {
  display:inline-block;
  width:118px;
  height:30px;
  border-radius:8px;
  background-color:#fff;
  text-align:center;
  color:#808080;
  text-shadow: 0px 0px 1px black;
  box-shadow: 1px 1px 1px black;
}

a {
  text-decoration:none;
}

.texte {
  font-size:23px;
  color:#808080;
  text-shadow:0px 0px 1px black;
}

#h4{
  background-image:url('http://i.imgur.com/XcDecTI.jpg');
  color:#fff;
}

#image{
  max-width:60px;
  max-height:60px;
  border:2px solid black;
  border-radius:15px 15px 15px 15px;
}

#staff{
  visibility:hidden;
}

#image:hover{
  opacity:0.6;
}

#partenaire {
  padding:5px;
}

#credit{
  font-size:15px;
  font-family:verdana;
  color:#fff;
  text-align:center;
}


Et voici le Jsfiddle
Anonymous

Dorea McH
Membre timide

J'ai enfin plus ou moins fini! Bon, le rendu est mins bien, assurément, et j'ai des trucs dans mes codes qui me donnent de l'urticaire à moi même, alors je me doute que d'autres vont avoir des commentaires!


Notre Staff

Nouveautés
XX.XX. XXXX phrase
XX. XX. XXXX phrase
XX. XX. XXXX phrase
XX. XX. XXXX phrase
XX. XX. XXXX phrase
XX. XX. XXXX phrase
XX. XX. XXXX phrase
XX. XX. XXXX phrase
XX. XX. XXXX phrase
Bienvenue
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere tincidunt sodales. Nullam ut pretium elit, eu vestibulum turpis. Nulla viverra lacus est, non aliquet ipsum porta vel. In id pellentesque purus, et dignissim risus. Ut vitae placerat lacus. Nullam non lacinia metus. Nam ut purus tempus, fermentum tellus a, posuere tortor. Quisque pellentesque sagittis ipsum et ultricies. Sed vulputate ullamcorper tellus in egestas.
Lorem2 ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere tincidunt sodales. Nullam ut pretium elit, eu vestibulum turpis. Nulla viverra lacus est, non aliquet ipsum porta vel. In id pellentesque purus, et dignissim risus. Ut vitae placerat lacus. Nullam non lacinia metus. Nam ut purus tempus, fermentum tellus a, posuere tortor. Quisque pellentesque sagittis ipsum et ultricies. Sed vulputate ullamcorper tellus in egestas.  
lien
lien
lien

 


©Dory


Dorea McH
Date d'inscription : 08/01/2017
Messages : 182

xLittleRainbow
Accro au forum

Coucou !

Navrée d'avoir mis du temps à passer par ici ö

Je vais commencer par commenter un petit quelque chose dans ton CSS au niveau de ta div qui contient l'intégralité du code contenant1. Au lieu de mettre margin-left: auto; margin-right: auto tu peux simplifier le tout en mettant margin:auto ^^ Cela te permettra de centrer ton code par rapport à la page et allégera ton code. Il n'est utile de séparer les marges gauche et droite que lorsque tu souhaites mettre deux valeurs différentes.

Ensuite, je voudrais t'alerter sur un petit quelque chose que tu n'as apparemment pas pris en compte ici. Que se passe-t-il si les textes dans "Nouveautés" prennent plus de place que ce n'est actuellement le cas ? Avec ton code dans l'état actuel des choses tu te retrouveras avec du texte qui déborde de tous les cadres x) Face à ça tu as plusieurs solutions :
- utiliser un min-height à la place du simple height. La différence c'est que tu donnes avec la première fonction une hauteur minimale à respecter. Qu'il y ait une hauteur minimale implique qu'une plus grande est possible. Tes cadres s'agrandiront donc en hauteur, respectant la quantité de texte, en fonction de ce qui est tapé.
- mettre un overflow:hidden. Cette solution est très limitante mais je te la présente quand même parce qu'on a parfois besoin de ce genre de chose. Avec cette fonction et cet attribut toute chose qui déborde du cadre est cachée. Donc même si ton texte est trop long aucun changement au niveau du visuel.
Pour moi ce sont les deux solutions qui pourraient s'appliquer ici. Après, peut-être que d'autres verront quelque chose à rajouter (:

Si on veut tatillonner un peu (et je vais le faire parce que ça permet d'apprendre des trucs le tatillonnage) je parlerais un peu du CSS de ta class .lien. On voit que le texte n'est pas très bien centré en hauteur par rapport à la taille du cadre. Pour remédier au problème tu peux utiliser l'astuce du line-height. Cette fonction te permet de déterminer une hauteur de ligne. Si tu donnes à ta ligne la même hauteur que celle donnée à ta div tu places ton texte au centre ^^ Cependant, attention lorsque tu codes des cases pour les liens de cette manière. Avec seulement 4 lettres ça passe très bien mais si tu dois écrire des choses plus longues (Règlement, Annonces, etc) ça ne passera pas. Ce sont des choses à prendre en compte si on ne veut pas se retrouver dans la panade lorsqu'on modifie le code ^.^

Sinon, attention, tu as mis un point-virgule et non pas un point dans ton CSS pour la class concernant le copyright. Aucun CSS ne s'applique donc puisqu'il y a une faute de syntaxe ^^

Je pensais avoir terminé mais c'est vrai que dans la série "tatillonnage" j'avais oublié un petit quelque chose °w° Lorsque tu utilises les liens Google Fonts il est bon de penser à fermer les balises fournies en rajoutant un / comme pour une balise img.

Code:
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet"/>

Globalement je n'ai rien à redire sur la structure du html et même au niveau du CSS je trouve ça très bien que tu aies pu faire un PA comme celle-ci en utilisant les positionnements plutôt qu'un tableau ! Tu peux être contente du travail accompli :D
xLittleRainbow
Date d'inscription : 05/06/2015
Messages : 780

Dorea McH
Membre timide

Merci ! Je dois avouer avoir appris l'astuce du line-height entre temps, et ça va m'être bien utile ! Je ne t'explique même pas comment je me suis arrachée les cheveux sur ces textes qui voulaient pas se centrer verticalement ;) Et pour les nouveautés, j'y avait même pas pensé O.o
Encore merci pour tes conseils/explications
Dorea McH
Date d'inscription : 08/01/2017
Messages : 182

xLittleRainbow
Accro au forum

Contente en tous cas si tu estimes que mon commentaire t'a aidé :D Nous sommes là pour ça.
xLittleRainbow
Date d'inscription : 05/06/2015
Messages : 780

Tigrlion
Fidèle au poste !

C'est la première fois que j'utilise la fusion de cellules de tableau et tout, j'ai trouvé ça hyper compliqué, j'me suis un peu perdue à un moment et j'ai failli abandonné à cause de ça, et j'ai pas mal galéré pour d'autres petits trucs aussi, mais j'en suis arrivé à bout ! Voila mon résultat à moi ~

HTML
Code:
<table id="tableau">
         <td rowspan="5" id="cel-1"><div class="petittitre">Notre staff</div><a href="http://epicode.variousforum.com"><img class="img-opacity img-staff" src="http://zupimages.net/up/17/30/6nbj.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity img-staff" src="http://zupimages.net/up/17/30/6nbj.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity img-staff" src="http://zupimages.net/up/17/30/6nbj.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity img-staff" src="http://zupimages.net/up/17/30/6nbj.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity img-staff" src="http://zupimages.net/up/17/30/6nbj.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity img-staff" src="http://zupimages.net/up/17/30/6nbj.png"/></a><div class="petittitre" style="margin-top:15px;">Nouveautés</div><div class="news1">xx.xx.xx New</div><div class="news2">xx.xx.xx New</div><div class="news1">xx.xx.xx New</div><div class="news2">xx.xx.xx New</div><div class="news1">xx.xx.xx New</div><div class="news2">xx.xx.xx New</div><div class="news1">xx.xx.xx New</div><div class="news2">xx.xx.xx New</div><div class="news1">xx.xx.xx New</div></td>
  <td colspan="3" class="cel-2"><span class="bienvenue">Bienvenue</span></td></tr>
           <tr><td colspan="3"><div class="blocblanc">Texte premier bloc</div></td></tr>
  <tr><td colspan="3"><div class="blocblanc">Texte second bloc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus lectus, dignissim a fermentum vel, dictum id magna. Praesent varius, mi sit amet laoreet gravida, augue eros faucibus urna, hendrerit euismod quam mauris nec purus. Donec sed bibendum tortor. Donec sed luctus mi. Quisque porta felis dui. Pellentesque risus nibh, consequat ac luctus at, tempor tincidunt sem. Vivamus id pulvinar felis.</div></td>
        
       </tr>
       <tr align="center">
         <td class="cel-lien"><a href="http://epicode.variousforum.com">Lien</a></td>
           <td class="cel-lien"><a href="http://epicode.variousforum.com">Lien</a></td>
           <td class="cel-lien"><a href="http://epicode.variousforum.com">Lien</a></td>
       </tr>
       <tr>
           <td colspan="3" class="cel-2"><a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a> <a href="http://epicode.variousforum.com"><img class="img-opacity" src="http://zupimages.net/up/17/30/juzn.png"/></a></td>
  </tr>
  <tr><td colspan="4" align="center"><span class="credits"><a href="http://epicode.variousforum.com" style="color:white;">Tigrlion | Epicode</a></span></td>
       </tr>
    </table>

CSS
Code:
#tableau {
  background-color:#444a73;
  border-spacing: 20px 10px;
}

#cel-1 {
  width:200px; padding:5px;
  background-color:white;
  border-radius: 25px;
  border-top-left-radius: 75px;
  border-top-right-radius: 75px;
  text-align:center;
}

.cel-2 { width:420px; text-align:center; }

.petittitre {
  font-family: 'Times New Roman';
  font-size:25px; text-transform:uppercase;
  color:steelblue;
  text-shadow: 0px 0px 4px black;}

.bienvenue {
  font-family: 'Times New Roman';
  font-size:50px; text-transform:uppercase;
  color:steelblue;
  text-shadow: 0px 0px 4px black;
}

.blocblanc {
  background-color:white;
  color:black; text-align:justify;
  padding:5px; height:90px; width:410px;
  overflow:auto;
  font-family:Verdana; font-size:12px;
}

.news1, .news2 {
  color:white; font-size:11px;
  font-family:'Times New Roman';
  text-align:left;
  padding:2px;;
  text-transform:uppercase;
}
.news1 { background-color:#444a73;}
.news2 { background-color:steelblue;}

.cel-lien {
  background-color:white;
  border-radius:15px;
  font-size:25px;
  text-transform:uppercase;
  font-family: 'Times New Roman';
}

a {
  text-decoration:none;
  color:steelblue;
}
a:hover {  text-shadow: 0px 0px 4px black;
  transition:1s;}

.img-staff { border:3px solid #444a73;
border-radius:15px;}

.img-opacity {opacity:1;}
.img-opacity:hover {opacity:0.7; transition:1s;}

.credits { font-family:Verdana;
font-size:11px; }

Aperçu sur CodePen : https://codepen.io/anon/pen/XzYOPQ

J'attends vos commentaires ! [Facile] Page d'accueil #5 - Batty 3775839356
Tigrlion
Date d'inscription : 22/11/2017
Messages : 303

Batty
Ancien.ne du staff

Hello Tigrlion =)

Alors si tu a eu du mal avec la fusion des cellule ça ne parais pas puisque tout est bon ! Bravo tu semble avoir bien compris ^^ Si tu a du mal a visualiser quel cellule fusionner je te conseille de prendre un papier et un crayon. Dessine un damier tu visualisera mieux quelles cellule fusionner.

Ton tableau est bon aussi. Il manque seulement une balise TR juste après la balise TABLE. Tu là probablement supprimer par m'égard puisque la balise fermante était plus loin. Puis tout le reste est nikel !

Tu semble bien comprendre la différence entre les ID et les class elle sont bien utiliser dans ton code =) Il y à la class "bienvenue" qui aurais pu être un ID mais ce n'est pas mal d'avoir mis une class.

J'aime beaucoup que tu est "fusionner" .news1 et .news2 dans ton CSS ça évite de répété des information inutilement. Bravo c'est une bonne façon de travailler !

Un erreur que je voie c'est ceci :

Code:
a {
  text-decoration:none;
  color:steelblue;
}
a:hover {  text-shadow: 0px 0px 4px black;
  transition:1s;}

Comme tu là expérimenté ce code changera tout les lien de ta page. à ce moment lè il faudrais utiliser un sélecteur. Je te conseille de lire Ce tutoriel . Mais pour faire court avec tes balise lien il aurais été plus judiceux d'écrire ceci :

Code:
.cel-lien a {
  text-decoration:none;
  color:steelblue;
}
.cel-lien a:hover {  text-shadow: 0px 0px 4px black;
  transition:1s;}

Avec ce code on viens spécifier quel lien on ces attributs. Vulgariser, nous disons " Les liens qui ce retrouve dans la class nommé "cel-lien" ne sont pas soulignés et de couleur bleu"

Ça fonctionne avec tout :

#Nom img {}
.nom div {}
.nom pan {}

Tu a plus d'information dans le tuto.

En suivent cette logique tu aurais pue écrire :

Code:
.credits a{
color:white;
}

au lieu de mettre style="color:white;" dans ton HTML.

Finalement, pour le haut arrondi qui n'est pas tout a fait comme le schémas, il existe une astuce qui n'est pas écrit dans le tutoriel (il fraudais l'ajouter d’ailleurs...). Il est possible pour un même sommet lui mettre deux variable pour faire un arrondi spécial:

Code:
#example {
  border-radius: 10px/30px; /* valeurs horizontal / valeurs vertical */
}



Du coup pour faire la même chose, il aurais fallu écrire :

Code:
#example {
   border-radius: 50px 50px 20px 20px/15px 15px 20px 20px;
}



En gros tu te débrouille vraiment bien ! Tout ça c'est des petit plus pour avoir des code plus léger et propre =)
Batty
Date d'inscription : 05/06/2014
Messages : 3514

Tigrlion
Fidèle au poste !

Merci pour les commentaires, Batty ! ♥️

Ouais, c'est au niveau de quelles cellules fusionner que je me perds un peu, ça m'étonne même pas qu'un TR ait disparu tellement j'ai touché aux cellules de ce tableau avant de parvenir au résultat que je voulais XD Je tenterais ta technique du damier, ça devrait aider !

Je connaissais pas du tout les sélecteurs ! Ça a l'air super utile, je vais aller voir ça ! :o

Je me disais bien qu'il devait exister un truc comme ça pour les border-radius, mais ouais, le tuto en parlait pas, j'ai pas cherché plus loin, je commençais à me demander si c'était pas une image qu'il fallait mettre en background pour obtenir ça... C'est un peu rassurant de voir que non, on doit pouvoir faire pleins de trucs cools avec ça, merci pour l'explication ! x'3
Tigrlion
Date d'inscription : 22/11/2017
Messages : 303

Artemis
Admin & serial codeuse

http://hakumei.forumactif.org/
Je n'ai jamais utilisé les tableaux car on m'a toujours dit que sémantiquement parlant c'était incorrect, donc c'est totalement inconnu pour moi :o Je jetterai un oeil aux tutos pour en apprendre davantage et me frotter à cet exercice, eheh. Merci pour l'astuce des border-radius cependant, je savais pas du tout qu'on pouvait faire ça ! xD
Artemis
Date d'inscription : 14/01/2017
Messages : 2673


 

Batty
Ancien.ne du staff

@Shaynee l'utilisation des tableau est en effet une vieille façon de faire qui est préférable de laisser de côté. Normalement les tableaux devrais contenir seulement des informations (du texte) et non servir de structure. Mais cette exercice reste tout de même une bonne pratique pour apprendre les tableaux et la manipulation des div/span.

Même si les tableau ne serve plus pour la structure d'un site internet de nos jour, il est bien de les connaitre puisque les Template de FA sont encore en tableau (du moins si tu utilise le phpBB2) Donc tu pourra te débrouiller à l'intérieur du Template.

Tu peux tout de même faire l'exercice en utilisent les méthode de positionnement qui sont plus a jour.
Batty
Date d'inscription : 05/06/2014
Messages : 3514

Meiywa
Newbie

http://meiywa-world.forumgratuit.be
Hello, j'ai tenté moi aussi [Facile] Page d'accueil #5 - Batty 2691722282
Aperçu du code [Facile] Page d'accueil #5 - Batty 2979024130

HTML:
Code:
<link rel="stylesheet" type="text/css" href="./css/exo1.css">
<link href="https://fonts.googleapis.com/css?family=Supermercado+One" rel="stylesheet">

<div id="pageAcceuil">
    <div id="fond">
        <div class="texteCouleur">Notre staff</div>
        <div id="imgStaff">
            <img class="bouilleStaff" src="http://i.imgur.com/Vo54ZTs.png" />
            <img class="bouilleStaff" src="http://i.imgur.com/Vo54ZTs.png" />
            <img class="bouilleStaff" src="http://i.imgur.com/Vo54ZTs.png" />
            <img class="bouilleStaff" src="http://i.imgur.com/Vo54ZTs.png" />
            <img class="bouilleStaff" src="http://i.imgur.com/Vo54ZTs.png" />
            <img class="bouilleStaff" src="http://i.imgur.com/Vo54ZTs.png" />
        </div>
        <div class="texteCouleur" id="news">Nouveautés</div>
            <div id="nouveautes">
                <div class="couleur1">xx.xx new</div>
                <div class="couleur2">xx.xx new</div>
                <div class="couleur1">xx.xx new</div>
                <div class="couleur2">xx.xx new</div>
                <div class="couleur1">xx.xx new</div>
                <div class="couleur2">xx.xx new</div>
                <div class="couleur1">xx.xx new</div>
                <div class="couleur2">xx.xx new</div>
            </div>
        <div class="texteCouleur" id="bienvenue">Bienvenue</div>
        <div id="blocWelcome">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur placerat nulla dapibus felis accumsan convallis. Fusce velit sapien, laoreet at efficitur vel, tristique a velit. Quisque auctor lacus ac purus efficitur porta. Pellentesque molestie aliquet libero sit amet tristique. Proin sollicitudin, metus non suscipit feugiat, orci odio tempor lorem, convallis condimentum augue purus vel felis. Phasellus non eleifend sapien, quis ultrices libero. Nunc sed molestie augue.
        </div>
        <div id="secondBloc">
            Lorem ipsum dolor sit amet...
        </div>
        <div class="link">
            <a href="google.be">Règlement</a>
            <a href="google.be">Annexe</a>
            <a href="google.be">Bottin</a>
            <a href="google.be">Présentation</a>
        </div>
      <div class="partenariat"> 
            <img class="imgPartenariat" src="https://2img.net/r/hpimg4/pics/704340bouton88x31.jpg" />
            <img class="imgPartenariat" src="https://2img.net/r/hpimg4/pics/704340bouton88x31.jpg" />
            <img class="imgPartenariat" src="https://2img.net/r/hpimg4/pics/704340bouton88x31.jpg" />
            <img class="imgPartenariat" src="https://2img.net/r/hpimg4/pics/704340bouton88x31.jpg" />
            <img class="imgPartenariat" src="https://2img.net/r/hpimg4/pics/704340bouton88x31.jpg" />
            <img class="imgPartenariat" src="https://2img.net/r/hpimg4/pics/704340bouton88x31.jpg" />
            <img class="imgPartenariat" src="https://2img.net/r/hpimg4/pics/704340bouton88x31.jpg" />
            <img class="imgPartenariat" src="https://2img.net/r/hpimg4/pics/704340bouton88x31.jpg" />
      </div>
     
        <p id="copyright">Copyright Meiywa</p>
    </div>
</div>
CSS:
Code:
div#pageAcceuil {
    background-color: #EFECCA;
    width: 450px;
    height: 350px;
    margin: auto;
}

div#fond {
    background-color: white;
    width: 150px;
    height: 300px;
    margin-top: 25px;
    margin-left: 15px;
    float: left;
    border-radius: 150px 150px 10px 10px / 50px 50px 15px 15px;
}

div.texteCouleur {
    text-align: center;
    font-family: 'Supermercado One', cursive;
    margin-top: 20px;
    color: #BD8D46;
    text-shadow: 1px 1px 3px grey;
    font-size: 17px;
}

img.bouilleStaff {
    width: 35px;
    height: auto;
    border: 1px solid #BD8D46;
    border-radius: 10px;
}

div#imgStaff {
    margin-left: 8px;
    margin-top: 10px;
    padding: 5px;
}

div#imgStaff img:hover {
    opacity: 0.5;
    transition: 0.8s;
}

div#nouveautes {
    background-color: #EFECCA;
    height: 120px;
    width: 140px;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 3px;
    overflow: auto;
    font-size: 10px;
    padding: 3px;
}

div.couleur1 {
    background-color: #F7F2B2;
    padding: 3px;
}

div.couleur2 {
    background-color: #F6E497;
    padding: 3px;
}

div#news {
    margin-top: -2px;
}

P#copyright {
    font-size: 8px;
    text-transform: uppercase;
    margin-top: 20px;
    margin-left: 30px;
}

div#bienvenue {
    float: right;
    margin-top: -300px;
    margin-right: -250px;
    font-size: 50px;
}

div#blocWelcome {
    background-color: white;
    width: 250px;
    float: left;
    margin-left: 170px;
    margin-top: -230px;
    height: 100px;
    overflow: auto;
    padding: 5px;
    text-align: justify;
    font-size: 10px;
   
}

div#secondBloc {
    background-color: white;
    width: 250px;
    float: left;
    margin-left: 170px;
    margin-top: -110px;
    height: 30px;
    overflow: auto;
    padding: 5px;
    text-align: justify;
    font-size: 10px; 
}

div.link {
    margin-left: 190px;
    float: left;
    width: 300px;
    margin-top: -55px;
}

div.link a {
    background-color: white;
    padding: 5px;
    text-align: center;
    border-radius: 10px;
    font-size: 10px;
}

div.partenariat {
    width: 250px;
    float: right;
    margin-right: -293px;
    margin-top: -15px;
}

img.imgPartenariat {
    width: 50px;
    height: auto;
}
Meiywa
Date d'inscription : 19/01/2018
Messages : 43

Batty
Ancien.ne du staff

Bonjour miss =)

Premièrement bravo d'avoir relever le défi et ce sans tableaux =)

Alors le premier truck que je remarque dans ton CSS c'est que tu ajoute toujours la balise devant ton nom de ID ou class. Or ce n'est pas pas nécessaire... je ne sais pas comment t'expliquer ça x) mais en fait ton CSS s'en fous que #pageAcceuil soit une DIV il le voie bien. (ok j'ai vulgariser au max ahah) Ensuite ça pourais être contraignent car ta class tu pourais la mettre sur une balise DIV et paragraphe, mais si tu met div avant ton nom de class tu dit : "seul les div avec le nom de class X vont avoir ce CSS". C'est parfois utile, mais dans des cas précis... pas toujours. Tu comprend ? J'ai pas l'impression d'être claire ._.

En contre parti, on aurais pue utiliser le nom des balise dans la section staff pour réduire le nombre de ligne de code. (oui oui les programmeurs ont est lâches xD Moins il y à d'écriture dans un code mieux c'est !) Du coup au lieu de mettre une class à toute tes image tu aurais pue mettre dans ton CSS #imgStaff img qui dit " toute les images qui ce trouve à l'intérieur de imgstaff vont avoir ce CSS. Bon tout ça c'est du chipotage ce que tu a fait n'est pas mal mais t'en qu'à être là pourquoi ne pas te donner cette astuce =) En fait c'est la même chose que tu à fait avec tes liens.

Encore dans tes images de staff au lieu de décaler votre bloc pour centré les images pourquoi ne pas avoir utiliser text-align:center; ? Les images sont des élément inline donc ils peuvent être centré comme le texte.

Ensuite, le positionnement en float c'est bien mais c'est pas la meilleur... normalement on essaie de ne pas trop mettre de marge négative. Je te conseille le positionnement avec relative et absolute ou même avec les display.

Finalement, tu à utiliser une seul fois la balise paragraphe "p", mais il aurais été plus judicieux de l'utiliser pour les bloc blanc que ton copyright. le nom de la balise le dit elle est la pour des paragraphe, or deux mots n'est pas un paragraphe.

Voilà ! J'ai vraiment pointer les "défauts" pour que tu apprenne quelque chose et que tu progresse, mais sache que ton code est vraiment bien =) c'était un bon exercice !
Batty
Date d'inscription : 05/06/2014
Messages : 3514

Meiywa
Newbie

http://meiywa-world.forumgratuit.be
Un grand merci pour tes conseils... J'espère pouvoir les appliquer au mieux dans un prochain défi [Facile] Page d'accueil #5 - Batty 3775839356 J'espère donc arriver à un code plus propre (a)
Meiywa
Date d'inscription : 19/01/2018
Messages : 43

Contenu sponsorisé


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