AccueilAccueil  Epic'Top  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

classe 3 - créative attitude
 :: Codage :: Entraînement :: Cours :: Classe Jamy
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2474
Sam 28 Jan 2017 - 11:17
Hello ! Et voici pour toi !

j'espère tu apprécieras que je sois ton mentor ! :D N'hésites surtout pas à m'arrêter quand je vais trop vite/trop loin, ou que j'explique mal, je recommencerai autant de fois qu'il le faut pour transmettre le message ! ;)

alors, juste pour rebondir sur un point du questionnaire, le reste étant parfait ! Lovely

Citation :
Qu'est ce que le BBCode, est ce judicieux de l'utiliser ?:
C'est un autre type de langage similaire au HTML, les balises sont contenues dans des crochets [ ]. est-il juducieux de l'utiliser je ne sais pas vraiment pour ma part je ne l'utilise pas.
c'est un langage ouai, mais bien plus limité que le HTML, d'ailleurs une page HTML n’interprète pas le langage BBCode, donc, non il ne faut pas l'utiliser ! Mais c'est très bien si tu ne le fais pas ! ;)
Je pose cette question, car ici, avec le système pour poster des messages sur FA, bcp de personnes l'utilisent et quand on le mixe avec le HTML/CSS, c'est tout caca ! x)

Et sinon, j'ai regardé ta PA que tu as proposé en LS, et on part sur ça ? :)

Elle est vraiment bien codée ! :) très beau travail sur les sélecteurs ! :)

J'ai noté quelques petites choses à optimiser :

* d'abord, l'utilisation de la balise center, qui n'est plus utilisé à présent ! on fait un margin: 0 auto; via le css pour centrer les éléments ! :)

* ça:
Code:
<span class="news_textenew1">►<em>**/**/**:  </em>**********</span>
et dans css :
.news_textenew1 {
            display: block;
            width: auto;
            background-color: #e3e3e3;
            padding: 3px;
        }

pourquoi utiliser un span si c'est pour le mettre en bloc ? et si un élément est en position block, il prend de base toute la longueur disponible, ici, il y a des simplifications possible ! :)

* aussi,
j'ai vu plusieurs fois que ce soit margin ou padding, des valeurs attribuées à gauche et à droite :
Code:
padding-left: 20px;
padding-right: 20px;
tu peux regrouper non ? en une seule ligne :)

c'est des petits rien, mais ça réduit ton code qui fait déjà 300 lignes actuellement ! ;)

Ensuite, d'un point de vue organisation,
Code:
 @font-face {
            font-weight: normal;
            font-style: normal;
            font-family: 'feathericons';
            src: url('../fonts/feathericons/feathericons.eot?-8is7zf');
            src: url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'), url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'), url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'), url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg')
        }
       
        *,
        *:after,
        *:before {
            box-sizing: border-box;
        }

ça on le déclare tjrs en début de code ...
et tu utilises cette police ? J'ai du mal lire le code, j'ai pas trouvé ...

Et aussi, le fait de mettre un box-sizing... J'adore cette propriété, je l'utilise partout tout le temps ! Lovely
mais ça risque de créer bcp de problème aux utilisateurs ! :/
Car leurs autres codes n'utilisent peut être pas la propriété, et si tu la déclare ici, alors, ça va être valable pour tout leur code, et si ils ont d'autres codes qui utilisent les margin/padding pour caler les éléments... tu vois les bug en perspective ? :/

aussi,
j'ai vu que tu utilisais un media querie ! Pourquoi ? Je ne vois pas trop l'intérêt ici, sachant que le reste n'est pas responsive ...
et tu utilises ça par un moment :
Code:
min-width: 120px;
max-width: 120px;
de même, je ne comprends pas trop l'intérêt ... genre, si au minimum et au maximum elle fait la même taille ton bloc fait juste une simple taille : 120px. non ? :)

et le dernier point et j'arrête pour ce premier poste, on va virer le tableau ! :)

Le table n'est pas utiliser pour positionner :hihi:
je sais, c'est bien plus simple, mais à par quand on écrit des newsletter que c'est autorisé, il vaut mieux utiliser les autres façon de positionner ;)

Du coup, si ça te convient on va optimiser ton code, ça permettra peut être de consolider des notions :) et puis on augmentera le niveau !

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar

Fiche Membre
Lots gagnés:
Membre timide
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 14/04/2015
Messages : 101
Sam 28 Jan 2017 - 11:35
ok ça me va je suis prête on commence quand tu veux !!!!
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2474
Sam 28 Jan 2017 - 11:51
et bien c'est partie, prend les remarques de mon poste et expliques moi tes choix et modifies si il faut modifier pour optimiser ! ;)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar

Fiche Membre
Lots gagnés:
Membre timide
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 14/04/2015
Messages : 101
Sam 28 Jan 2017 - 12:23
alors concernant ta première remarque sur le span je l'avais utiliser pour changer de couleur de fond à chaque date, cette pa je l'ai faîte il y a longtemps je ne me souviens plus exactement de quelle façon je l'avais construite souvent je teste des choses et lorsque j'arrive a avoir un rendu qui me plaît je n'y touche plus !!!! du coup je ne vois comment le simplifier.


pour le padding je peux le simplifier comme ceci

Code:
padding:0px 20px;
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2474
Sam 4 Fév 2017 - 20:07
Citation :
alors concernant ta première remarque sur le span je l'avais utiliser pour changer de couleur de fond à chaque date, cette pa je l'ai faîte il y a longtemps je ne me souviens plus exactement de quelle façon je l'avais construite souvent je teste des choses et lorsque j'arrive a avoir un rendu qui me plaît je n'y touche plus !!!! du coup je ne vois comment le simplifier.

je vois ce que tu veux dire, cela étant dit, je suis ici pour vraiment te faire comprendre la raison du pourquoi, alors si y'a des lignes de codes que tu comprends pas, il faut justement les décortiquer ! ;)
et il faut chercher à comprendre et à optimiser! car on s'en rend pas compte, mais on arrive vite à des lignes et des lignes de codes, pour au final, pas grand chose si dès le début on écrivait le minimaliste !


pour la padding oui, c'est exactement ainsi que tu peux le simplifier ! :D

du coup, relis ton code, reprends mes points et optimisons cette PA avant de passer à la suppression du table pour toucher à d'autres façon plus approprié de positionnement !

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar

Fiche Membre
Lots gagnés:
Membre timide
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 14/04/2015
Messages : 101
Dim 5 Fév 2017 - 10:35
du coup j'ai enlever le span et codé comme ceci:

Code:
<div class="news"><div class="sous_titre">Les News</div><br/>
<em class="news_textenew1">► xx/xx/15:***  </em>
<em class="news_textenew2">► xx/xx/15:***  </em>
<em class="news_textenew1">► xx/xx/15:***  </em>
<em class="news_textenew2">► xx/xx/15:***  </em>
<em class="news_textenew1">► xx/xx/15:***  </em>
<em class="news_textenew2">► xx/xx/15:***  </em></div>
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2474
Dim 5 Fév 2017 - 13:28
ouep ! c'est bien mieux avec les div ! :D

mais du coup, optimise toute ta PA et redonne le code entier ! ;D

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar

Fiche Membre
Lots gagnés:
Membre timide
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 14/04/2015
Messages : 101
Dim 5 Fév 2017 - 15:30
alors je galère un peu pour le moment j'ai codé ceci

Code:
<style>

/*CSS pour le fond PA*/
.fond_de_page {
width:800px;
height:auto;
padding:10px;
border: 1px solid white;
color:#F4B9BB;
background-image: url(http://img11.hostingpics.net/pics/972631fondbody.jpg); }

 /****CSS des titre****/
.titre_forum { /*CSS pour le titre principal*/
 background-image: url("http://img11.hostingpics.net/pics/278365rose.png");background-repeat:no-repeat;
text-align:center; height: 81px; width:800px;
padding-top:10px;font-family:'great vibes';
text-shadow:1px 1px 1px #ffffff; color:#000000;font-size:35px;}

.titre_forum:hover { /*CSS pour le titre principal au passage de la souris*/color:#78102f;}
 
 .sous_titre {/*CSS pour les titres des boîtes*/
  font-family:georgia;
  text-shadow:1px 1px 1px #ffffff;
  color:#000000;
  text-transform:uppercase;
  font-size:15px;
  text-align:left;
  letter-spacing:1px;}
.sous_titre:hover {/*CSS pour les titres des boîtes au passage de la souris*/
 font-family:georgia;
  text-shadow:1px 1px 1px #ffffff;
  color:#78102f;
  text-transform:uppercase;
  font-size:15px;
  text-align:left;
  letter-spacing:-1px;}
  
  .citation {color: white;font-size: 9px; text-transform: uppercase; text-align: center;font-family:helvetica; margin: 0 0 10px 0;}
  
   /*CSS pour le bloc News*/
.news { float: left;width: 40%;height:170px;overflow:auto;background-color:white;}
  
.news_textenew1 {background-color:#78102f;display:block;width:auto;padding:3px;}

.news_textenew1 em .news_textenew2 em { /* Dates */
   color: #d03a40;  /* Couleur du texte */
   text-transform: uppercase; /* Transformation du texte en majuscule */
   font-style: normal; /* Enlève le italic par défaut de la balise em */
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */}

.news_textenew1 .news_textenew2 em:after {
   content: " ►"; }  /* Ajoute la flèche après les dates */
  
/*CSS pour le bloc Contexte*/  
.contexte {background-color:white; border-top-right-radius: 70px; width:58%; height:170px;overflow:auto;margin: 0;float:right;text-align:center;}
  
/****CSS pour le bloc partenaires****/
.partenaires  {background-color:white; color:black;float:left;width: 98%; height: auto;margin: 10px 0 10px 0; padding:5px;text-align:justify;font-size:12px;}
  


</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'></link>
<div class="fond_de_page">
<div class="titre_forum">Nom du forum </div>
<div class="citation">- Ecrire ici une petite phrase ou citation -</div>

<select style="width: 400px;" onchange="location = this.value">
 <option selected="selected">Navigation rapide</option>
 <option value="url1-de-renvoi">Lien 1</option>
 <option value="url2-de-renvoi">Lien 2</option>
 <option value="url3-de-renvoi">Lien 3</option>
 <option value="url4-de-renvoi">Lien 4</option>
 <option value="url1-de-renvoi">Lien 5</option>
 <option value="url2-de-renvoi">Lien 6</option>
 <option value="url3-de-renvoi">Lien 7</option>
 <option value="url4-de-renvoi">Lien 8</option>
</select><br/><br/>

<div class="news"><div class="sous_titre">Les News</div><br/>
<em class="news_textenew1">► xx/xx/15:***  </em>
<em class="news_textenew2">► xx/xx/15:***  </em>
<em class="news_textenew1">► xx/xx/15:***  </em>
<em class="news_textenew2">► xx/xx/15:***  </em>
<em class="news_textenew1">► xx/xx/15:***  </em>
<em class="news_textenew2">► xx/xx/15:***  </em>
<em class="news_textenew1">► xx/xx/15:***  </em>
<em class="news_textenew2">► xx/xx/15:***  </em></div>

<div class="contexte"><div class="sous_titre">Contexte</div><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id tellus est. Nunc urna lorem, ultrices eu urna
viverra, feugiat posuere ante. Integer quis diam condimentum, porttitor diam vehicula, cursus ante. Proin quis pharetra turpis, a aliquet enim. Etiam in convallis
felis. Aliquam pulvinar vulputate libero, non elementum ante interdum eget. Duis ac ipsum at velit tincidunt sodales in nec eros. Cras semper non arcu id pulvinar.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam venenatis tempus tellus, vel dictum eros ornare at. Integer pretium facilisis lacus. Etiam convallis
lacus vel nunc luctus, quis vulputate nibh euismod. In malesuada interdum tincidunt. Nullam quis lacinia nisl. Nulla facilisi.</div>

<div class="partenaires">Nos Partenaires <br/>
<marquee direction="left" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>
<a href="http://epicode.bbactif.com"><img src="http://www.zupimages.net/up/14/48/scan.png"/></a>
<a href="http://epicode.bbactif.com"><img src="http://www.zupimages.net/up/14/48/scan.png"/></a>
<a href="http://epicode.bbactif.com"><img src="http://www.zupimages.net/up/14/48/scan.png"/></a>
<a href="http://epicode.bbactif.com"><img src="http://www.zupimages.net/up/14/48/scan.png"/></a>
<a href="http://epicode.bbactif.com"><img src="http://www.zupimages.net/up/14/48/scan.png"/></a>
<a href="http://epicode.bbactif.com"><img src="http://www.zupimages.net/up/14/48/scan.png"/></a></marquee></div>

</div>

mais ça cloche !!!!
mon fond ne va plus jusqu'en bas là j'ai besoin d'un coup de pouce je ne vois pas mon erreur !!!!

aperçu:
 
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2474
Ven 10 Fév 2017 - 19:37
Euh je comprends plus là ... c'est une autre PA ça ?
Tu abandonnes la première ?
Si tu ne veux pas optimiser ton premier code, je vais devoir archiver ta proposition de LS (ici), car dans l'état, ton code n'est pas parfait ... :/


Et aussi, je comprends pas trop en quoi je te suis utile si tu ne suis pas mes recommandations / demande ...

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar

Fiche Membre
Lots gagnés:
Membre timide
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 14/04/2015
Messages : 101
Ven 10 Fév 2017 - 20:12
désolée jamy je crois que je suis partie sur le mauvais code depuis le début ... on ne devais pas être sur le même PA .

du coup c'est laquelle PA ?



Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2474
Ven 10 Fév 2017 - 20:14
bah la tienne, la première ... celle que tu as proposé en LS ...

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar

Fiche Membre
Lots gagnés:
Membre timide
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 14/04/2015
Messages : 101
Ven 10 Fév 2017 - 20:18
je croyais que c'étais celle que je t'avais mis dans ma demande d'inscription du coup c'est la dernière que j'ai proposée

-- > PA#CRÉATIVEATTITUDE N°4
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2474
Ven 10 Fév 2017 - 20:20
Mais oui c'est de celle là dont je parle ^^ Et que je t'ai écris plusieurs points qui n'allait pas et à optimiser il y a quelques messages (remonte dans le fil ...)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar

Fiche Membre
Lots gagnés:
Membre timide
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 14/04/2015
Messages : 101
Ven 10 Fév 2017 - 20:24
Ok pourtant je ne suis pas blonde !!!!! du coup je vais tout reprendre !!!
avatar

Fiche Membre
Lots gagnés:
Membre timide
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 14/04/2015
Messages : 101
Sam 11 Fév 2017 - 15:37
ça y je suis sur la bonne PA !!!

j'ai commencé a optimiser j'ai enlever le span , la balise center et recodé les padding.
et enlever les choses inutiles .

le css
Code:
/****PA*****/
#fondpa{background-color:#e3e3e3;width:800px;height:auto;}

/*****Les Titres****/
#titre1{color:#4f4f56;width:400px;font-family:arial black;font-size:50px;}

.titre2{width:200px;font-family:arial black;font-size:16px;color:#4f4f56;padding:2px;}
 
.titre3{width:250px;font-family:arial black;font-size:20px;color:#4f4f56;padding-left:8px;}

/****image****/

#img-pen{position:absolute;margin-left:326px;margin-top:-85px;}

/* Rotation et dézoome */
#img-icon {-webkit-transform: rotate(-15deg);transform: rotate(-15deg);}

#img-icon:hover  {-webkit-transition: all 0.5s ease;transition: all 0.5s ease;-webkit-transform: rotate(15deg);transform: rotate(15deg);}

/***paragraphe****/
.p1{width:620px;height:150px;overflow:auto;padding:0px 20px;background-color:#4f4f56;color:white;}

.p1:first-letter{text-shadow:1px 1px 2px #313e3e;font-size:40px;font-family:Reenie Beanie;padding-left:15px;color:#a2b7b7;}

.p2{width:140px;height:160px;overflow:auto;padding:0px 20px;background-color:none;color:white;}

/***bloc lien, staff et nouveauté***/

#tableau1{width:800px;height:280px;margin: 0 auto;}
#tableau0{width:800px;height:200px;}

.bloc1{
padding:2px;width:200px;height:150px;color:white;background-color:#4f4f56;}

.bloc{padding:2px;width:300px;height:200px;color:white;background-color:#4f4f56;}

.bloc3{padding:2px;width:220px;height:240px;color:white;background-color:#4f4f56;}

a.lien-pa{text-decoration:none;color:white;font-weight:bold;}

a.lien-pa:hover{font-variant:small-caps;color:#e3e3e3;}

.news_textenew1{display:block;width:auto;background-color:#e3e3e3;padding:3px;}

.news_textenew2{display:block;width:auto;padding:3px;}

.news_textenew1 em .news_textenew2 em { /* Dates */
   color: #d03a40;  /* Couleur du texte */
   text-transform: uppercase; /* Transformation du texte en majuscule */
   font-style: normal; /* Enlève le italic par défaut de la balise em */
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */}

.news_textenew1 .news_textenew2 em:after {content: " ►"; }  /* Ajoute la flèche après les dates */

/****breakingnews****/

 .breakingnews{
 width: 780px;
 padding:2px;
 margin-left:auto;
 margin-right:auto;
background-color:#4f4f56;
 font-size: 12px;
 color: #f8f4ef;
 text-align:center;}
 
 /***staff effet sadie***/
 

*, *:after, *:before {box-sizing: border-box;}
.grid{position:relative;margin:0 auto;padding:1em 0 4em;max-width:120px;list-style:none;text-align:center}
.grid figure{position:relative;float:left;overflow:hidden;margin:5px 1%;min-width:120px;max-width:120px;max-height:90px;width:48%;background:#3085a3;text-align:center;cursor:pointer}
.grid figure img{position:relative;display:block;min-height:100%;max-width:100%;opacity:.8}
.grid figure figcaption{padding:2em;color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.grid figure figcaption::before,.grid figure figcaption::after{pointer-events:none}
.grid figure figcaption,.grid figure figcaption>a{position:absolute;top:0;left:0;width:100%;height:100%}
.grid figure figcaption>a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}
.grid figure p{letter-spacing:1px;font-size:12px;}
@media screen and (max-width:50em){
.grid figure{display:inline-block;float:none;margin:10px auto;width:100%}
}

figure.effect-sadie figcaption::before{position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-linear-gradient(top,rgba(72,76,97,0) 0,rgba(72,76,97,0.8) 75%);
background:linear-gradient(to bottom,rgba(72,76,97,0) 0,rgba(72,76,97,0.8) 75%);content:'';opacity:0;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}
 figure.effect-sadie figcaption::before,figure.effect-sadie p{-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
 figure.effect-sadie p{position:absolute;bottom:0;left:0;padding:2em;width:50%;opacity:0;-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
figure.effect-sadie:hover figcaption::before,figure.effect-sadie:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

 /***partenaires***/
 
 .partenaire{width: 800px; height: auto;background-color:#4f4f56;color:white;text-align:center;}
 
 /******crédits*********/
 
 .crédits{color:#4f4f56;font-size:10px;text-align:center;padding-bottom:2px;}

Le HTML

Code:
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<div id="fondpa"><table id="tableau0"><tr><td>  
<div id="titre1">BIENVENUE</div><img src="http://icons.iconarchive.com/icons/designcontest/vintage/72/Ink-Pen-2-icon.png" id="img-pen"/>
  <div class="p1">Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum,
  fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita. Qui ut huic virilem togam deditšnihil dicam hoc loco de me;
  tantum sit, quantum vos existimatis; hoc dicam, hunc a patre continuo ad me esse deductum; nemo hunc M.
  Caelium in illo aetatis flore vidit nisi aut cum patre aut mecum aut in M. Crassi castissima domo, cum artibus honestissimis erudiretur.
  Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum,
  fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita. Qui ut huic virilem togam deditšnihil dicam hoc loco de me;
  tantum sit, quantum vos existimatis; hoc dicam, hunc a patre continuo ad me esse deductum; nemo hunc M.
  Caelium in illo aetatis flore vidit nisi aut cum patre aut mecum aut in M. Crassi castissima domo, cum artibus honestissimis erudiretur.</div></td><td><br/><br/><br/>

<div class="p2"><br/><a href="#"><img src="http://icons.iconarchive.com/icons/designbolts/free-retro-style-social/64/Facebook-icon.png" id="img-icon"/></a>
<br/><a href="#"><img src="http://icons.iconarchive.com/icons/designbolts/free-retro-style-social/64/Twitter-icon.png" id="img-icon"/></a></div></td></tr></table>

<table id="tableau1"><tr><td>  <div class="titre2">Navigation Rapide</div><div class="bloc1">
<ul><li><a href="" class="lien-pa">Règlement</a></li><li><a href="" class="lien-pa">Section 1</a></li><li><a href="" class="lien-pa">Section 2</a></li>
<li><a href="" class="lien-pa">Section 3</a></li><li><a href="" class="lien-pa">Section 4</a></li>
<li><a href="" class="lien-pa">Section 5</a></li><li><a href="" class="lien-pa">Section 6</a></li></ul></div></td>

<td><div class="titre2">Nouveautés</div><div class="bloc">
<em class="news_textenew1">► xx/xx/15:***  </em><em class="news_textenew2">► xx/xx/15:***  </em><em class="news_textenew1">► xx/xx/15:***  </em>
<em class="news_textenew2">► xx/xx/15:***  </em><em class="news_textenew1">► xx/xx/15:***  </em><em class="news_textenew2">► xx/xx/15:***  </em>
<em class="news_textenew1">► xx/xx/15:***  </em><em class="news_textenew2">► xx/xx/15:***  </em></div></td>

<td><div class="titre2">La Team </div><div class="bloc3"><div class="grid"><figure class="effect-sadie">
<img src="http://img11.hostingpics.net/pics/606807801.jpg" alt="img02"/><figcaption><p><a href="#"class="lien-pa">name</a> rang </p></figcaption></figure></div>
<div class="grid"><figure class="effect-sadie"><img src="http://img11.hostingpics.net/pics/606807801.jpg" alt="img02"/>
<figcaption><p><a href="#"class="lien-pa">name</a> rang </p></figcaption></figure></div></div></td></tr></table>

<div class="titre3">BREAKING NEWS</div><div class="breakingnews">
<marquee direction="left" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>En Ce Moment : *********************************** - </marquee></div><br/>

<div class="partenaire"> - Logos De Nos Partenaires -
<marquee><a href="http://epicode.bbactif.com"><img src="http://www.zupimages.net/up/14/48/scan.png"/></a>
<a href="http://epicode.bbactif.com"><img src="http://www.zupimages.net/up/14/48/scan.png"/></a><a href="http://epicode.bbactif.com"><img src="http://www.zupimages.net/up/14/48/scan.png"/></a>    
<a href="http://epicode.bbactif.com"><img src="http://www.zupimages.net/up/14/48/scan.png"/></a></marquee></div><br/>

<div class="crédits">Forum Ouvert Depuis Le: **/**/**** - Design By **** - PA By <a href="http://creativeattitude.wix.com/creativeattitude"style="color: #ab0d1d;">&nbsp;© Créative Attitude</a> -
Le contexte, l'apparence, les idées sont à la propriété du staff - Tout Droit Réservé. -</div></div>

sinon pour le code "Effet Sadie" c'est un code que j'ai trouvé sur le net je trouvais cet effet sympa et j'ai voulu l'intégrer dans cette PA, je l'ai modifier  .

le code d'origine est celui ci

css:

Code:
/*---------------*/
/***** Sadie *****/
/*---------------*/

/* *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } // required */
@font-face {
 font-weight: normal;
 font-style: normal;
 font-family: 'feathericons';
 src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
 src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
 url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
 url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
 url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
}

.grid {
 position: relative;
 margin: 0 auto;
 padding: 1em 0 4em;
 max-width: 1000px;
 list-style: none;
 text-align: center;
}

/* Common style */
.grid figure {
 position: relative;
 float: left;
 overflow: hidden;
 margin: 10px 1%;
 min-width: 320px;
 max-width: 480px;
 max-height: 360px;
 width: 48%;
 background: #3085a3;
 text-align: center;
 cursor: pointer;
}

.grid figure img {
 position: relative;
 display: block;
 min-height: 100%;
 max-width: 100%;
 opacity: 0.8;
}

.grid figure figcaption {
 padding: 2em;
 color: #fff;
 text-transform: uppercase;
 font-size: 1.25em;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
 pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

/* Anchor will cover the whole item by default */
.grid figure figcaption > a {
 z-index: 1000;
 text-indent: 200%;
 white-space: nowrap;
 font-size: 0;
 opacity: 0;
}

.grid figure h2 {
 word-spacing: -0.15em;
 font-weight: 300;
}

.grid figure h2 span {
 font-weight: 800;
}

.grid figure h2,
.grid figure p {
 margin: 0;
}

.grid figure p {
 letter-spacing: 1px;
 font-size: 68.5%;
}

figure.effect-sadie figcaption::before {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
 background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
 content: '';
 opacity: 0;
 -webkit-transform: translate3d(0,50%,0);
 transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 color: #484c61;
 -webkit-transition: -webkit-transform 0.35s, color 0.35s;
 transition: transform 0.35s, color 0.35s;
 -webkit-transform: translate3d(0,-50%,0);
 transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
 position: absolute;
 bottom: 0;
 left: 0;
 padding: 2em;
 width: 100%;
 opacity: 0;
 -webkit-transform: translate3d(0,10px,0);
 transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
 color: #fff;
 -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
 transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
 opacity: 1;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

HTML

Code:
<h2>Sadie</h2>
 <div class="grid">
 <figure class="effect-sadie">
 <img src="img/2.jpg" alt="img02"/>
 <figcaption>
 <h2>Holy <span>Sadie</span></h2>
 <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
 <a href="#">View more</a>
 </figcaption>
 </figure>
 </div>
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2474
Lun 27 Fév 2017 - 17:05
C'est très bien comme ça ! :D

Tu as juste beaucoup de br dans ton code, et je pense tu aurais pu utiliser des margin et padding à la place ^^ mais sinon, c'est bien plus propre ! du coup, tu peux éditer ton LS, en ajoutant un crédit vers épicode aussi s'il te plait :)
et on pourra valider la PA.

Du coup, tu veux qu'on bosse sur quoi à présent ? :) tu as une notion que tu veux apprendre ?

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar

Fiche Membre
Lots gagnés:
Membre timide
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 14/04/2015
Messages : 101
Lun 27 Fév 2017 - 17:45
Hello Jamy,

d'accord je ça fais tout de suite.

On pourrait bosser sur les margin et padding justement je confond souvent les deux.
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2474
Mer 1 Mar 2017 - 18:28
Hey ! :)

Et bien c'est tout simple, le MARGIN : fait des marges externes. C'est pas inclus dans les blocs. Le PADDING fait des marges internes soit à l'intérieur des blocs !


Exo :
3 blocs alignés les uns à côté des autres (width 200), de fond de couleurs différents. Ces blocs doivent être espacés de 25px pour les 2 premiers, de 50px pour le deuxième-derniers.
dans ces blocs, tu mets 2 lignes de lorem, et dans le premier: pas d'espacement interne. Dans le 2em un décallement interne en haut et bas de 10px, et dans le derniers, 15 de décollement partout ! :)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar

Fiche Membre
Lots gagnés:
Membre timide
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 14/04/2015
Messages : 101
Mer 1 Mar 2017 - 21:09
Couou Jamy;

j'ai commencé ton exo j'ai essayé de ne pas mettre de tableau comme je fais d'habitude du coup j'ai plus de mal a coder l'espace entre les blocs .

le css:
Code:
div#gauche {
   float: left;
   width: 200px;
   background: lightblue;
   
}

div#droit {
   float: right;
   width: 200px;
   background: purple;
   margin-right: 870px;
   padding:15px ;
}

div#centre {
    width: 200px;
   background: beige;
   margin-left: 225px;
   padding:10px 0px 10px 0px;
}


le html:

Code:
<div id="gauche">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. </div>
<div id="droit">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. </div>
<div id="centre">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. </div>
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2474
Ven 3 Mar 2017 - 18:57
Coucou ! :)

Alors, le float est une possibilité. Mais pas la plus simple.
Le problème du float, c'est que ça fait sortir les éléments du flux, et du coup, tu dois rétablir le flux après ces éléments qui sortent. Différents techniques existent. ce tuto regroupent différentes façon de positionner des éléments et est plutôt bien fait.

Ici, je te recommande chaudement d'utiliser le display. Un élément peut présenter différent display. La balise div est par défaut en block, le span est par défaut en inline. Et il existe un intermédiaire magique : le display:inline-block;

Je te laisse l'essayer sur tes éléments ! :D

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar

Fiche Membre
Lots gagnés:
Membre timide
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 14/04/2015
Messages : 101
Dim 5 Mar 2017 - 12:35
salut jamy;

voilà je crois que c'est mieux

Code:
.container {
   width: 900px;
}
.container div {
   display: inline-block;
   width: 200px;
   vertical-align:top;
}

div#gauche {
  background: lightblue;
  MARGIN-right:25px;
}

div#droit {
  background: purple;
  padding:15px ;
  margin-right:50px;
}

div#centre {
  background: beige;
  padding:10px 0px 10px 0px;
 
}

Code:
<div class="container">
   <div id="gauche">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div>
   <div id="droit">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div>
   <div id="centre">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div>
</div>
Administratrice - Maxi-codeuse
avatar

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2474
Sam 11 Mar 2017 - 23:24
Coucou ! :D
C'est parfait ! tu as bien compris comment on s'en sert du coup ? :D
Je te conseil d'utiliser cette technique à l'avenir, c'est bcp utilisé car très propre d'utilisation ! :)
et pour le padding/margin, c'est parfait aussi !

tu veux apprendre quoi à présent ? :)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >

avatar

Fiche Membre
Lots gagnés:
Membre timide
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 14/04/2015
Messages : 101
Ven 24 Mar 2017 - 17:22
coucou jamy,

Pour le moment ça va aller tu peux clôturer merci pour tes conseils .
Contenu sponsorisé
Page 1 sur 1

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