« Partie cours de LadyErria »

Tu as un code à me montrer avec ce problème de . et # ?

en faite j'en ai jamais fait car j'ai jamais compris comment les utiliser d'ou des énorme bloc que je fais (comme le code que je t'ai mis)

Je viens de regarder ton code et effectivement, j'en ai mal aux yeux ahaha, mais ne t'inquiète pas, je suis passé par là et donc, je sais comment on peut remédier à ça.

Pour ma part, je n'utilise le CSS dans les balises que pour les images, le reste, je passe par une feuille CSS ou par la propriété , le problème est qu'il faut savoir quand mettre le . ou #. Avant tout, je vais corriger le plus choquant de ton code qui est cette partie :

Code:: <div style = "background-color: #FF0040; /* tu peux changer la couleur du fond */
   width: 600px; /* tu peux changer la largeur */
   height: 350px; /* tu peux changer la hauteur */
   padding: auto;
   border: 4px #8A0829 dotted; /* tu peux changer la couleur de la bordure ici */
   border-radius: 25px 25px 50px 50px;
   opacity: 0.8;
   margin: auto; ">

   <div style="width: 600px; height: 40px;
   background-color: #FE2E64;
   border-radius : 25px;
   margin-top: 1px;
   font-family: 'Palatino';
   cursive;
   font-size:30px;
   color:#F5D0A9;
   text-align:center;">
   Signature

   <div style="width: 582px; height : 290px;
   background-color: #FF0040;
   border-radius : 25px;
   margin-top: 10px;
   overflow: auto; ">

Voilà, donc, je te montrerais un code structuré, mais avant, pour le CSS, on se sert du , pour y placer cette balise style :

Code:: <html>
<head>
<title>Bonjour, j'apprends</title>
<meta charset="utf-8" >

[b]<style>TON CODE CSS</style>[/b]
</head>
<body>
TON CODE DE JE NE SAIS PAS QUOI</body>
</html>

Voilà, donc, je te donne la structure générale d'un code, maintenant, pourquoi comme ça c'est mieux et pas comme toi ? Parce que déjà dans mon exemple, ce sera plus facile de modifier les couleurs, le fond...tu vois le truc ?

Ensuite pour ta question: Quand est-ce qu'on met . ou # ! Dans mes codes de site web à moi, je ne réfléchis pas vraiment quand j'en mets un : Je mets le # pour la première propriété que j'appelle en principe #principale, et .autre quand c'est les autres !

On utilise # quand on voit ça dans le body :

Code:: <div ID="principale">Tu te mets ton texte</div>

Tu ne mets que le # seulement si tu vois id après le div, donc, comme, c'est id, dans ton CSS, tu mettras ceci :

Code:: #principale
{
Ton code CSS
}

Et voilà !

On utilise le . quand on voit ça dans le body :

Code:: <div CLASS="autre">Ton texte</div>

Tu ne mets que le . seulement si tu vois le class après le div, donc comme, c'est class, dans ton CSS, tu mettras ceci :

Code:: .autre
{
Ton code CSS
}

Et voilà !

Je te fais un exemple global :

Code:: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Apprentissage Lady</title>
<style>
[i]Ici, je mettrais le code CSS (Je sais que l'italique marchera pas)[/i]
#principale
{
color: red; /*Je mets ici le texte en rouge*/
background-color: blue; /*Je mets ici le fond bleu*/
}
.autre
{
color: green; /*Je mets la couleur de ce texte en vert*/
font-size: 42px; /*Je mets la taille du texte en
}*/
</style>
</head>
<body>
[i]On prend les exemples : [/i]
<div id="principale">Bonjour, je mets mon texte, j'aimerais bien le voir apparaître rouge, je viens de mettre ID dans ma div, donc, ce sera #principale, on essaye pour que le texte s'affiche rouge ?
<div class="autre">Ah, j'ouvre une div dans la principale, ben oui, puisque je veux que ça reste sur le fond bleu, donc, comme c'est ma deuxième div, je viens de mettre class, donc, ce sera .autre, et je peux faire ce que je veux ! </div>
</div>
</body>
</html>

Voilà, on aura plus de facilité à se retrouver dans ma structure que dans la tienne parce que moi, j'ai donné une propriété à ma div, ce qui fait que je peux mettre mon CSS comme je le souhaite, alors que toi, tu le mets directement dans ton code HTML, ce qui est moins joli et moins pratique !

Tu as compris ou je te la refais ?

Sujet: Partie cours de Lady Erria 2 Ven 23 Juin 2017, 11:10

Voilà le nouveau code de ma signature modifiée avec ton cours :

Code:: <!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

#Body {
background-color: #FF0040; /* tu peux changer la couleur du fond */
width: 600px; /* tu peux changer la largeur */
height: 350px; /* tu peux changer la hauteur */
padding: auto;
border: 4px #8A0829 dotted; /* tu peux changer la couleur de la bordure ici */
border-radius: 25px 25px 50px 50px;
opacity: 0.8;
margin: auto; }

.Texte {
width: 600px;
height: 40px;
background-color: #FE2E64;
border-radius : 25px;
margin-top: 1px;
font-family: 'Palatino';
font-size:30px;
color:#F5D0A9;
text-align:center; }

.Images {
width: 582px;
height : 290px;
border-radius : 25px;
margin-top: 10px;
overflow: auto; }

.img {
max-width: 90%; /*
height: auto%; }

</style>
</head>
<body>
<div id= "Body">
<div class= "Texte">Signature </div>

<div class= "Images">

<center>
<img src= "https://img15.hostingpics.net/pics/11422314335803084louveaileesigna.png" />
<img src= "https://img15.hostingpics.net/pics/89114114335803095misatosigna.png" />
<img src= "https://img15.hostingpics.net/pics/97603114335803096zexallovesigna.png" />
</center>
</div>
</div>

</body>
<center>
<Footer> <span style="font-family: Times New Roman; font-size: 11px; color: #354454; letter-spacing: 3px; font-weight: bold;"> Codage par LadyErria sur <span style="color: #FAAC58">Cocktail Graph</span></span>
</Footer>
</center>
</html>

Oki, le rendu est correct, sans fautes, donc, tu vois, ce n'est pas plus simple, seulement deux trucs qui me perturbent, moi, mais seulement moi :
-> Les espaces avant l'image, l'id ou le class
-> La majuscule à footer !

Donc, on vient de voir les deux choses suivantes : Ce qui veut dire : 2 objectifs réussis pour toi :
-> Apprendre à faire un code organisé avec le CSS à part
-> Savoir mettre le # ou / et e . selon ce que comporte ta div

Je ferais quelques graph de récompenses donc, t'inquiète pas !

Y'a autre chose qui te pose problèmes ?

Voilà se que j'avais fait en code pour essayer un des cadeaux je met en hide

Oui, c'est un code correct, je ne vois pas grand chose à dire, il y a encore des choses qui te perturbe ou on peut passer au premier TP ?

on peut passer au 1er tp j'ai hâte ^^

Coucou sa fait presque 10 jours et toujours rien pour ma partie Fouet

Coucou, alors désolé, je t'ai complètement oublié, je m'en excuse, pour me rattraper, je t'ai fais un petit shéma tout moche; voici les instructions :

» L'image et le background te sont libre, fait juste en sorte que ce soit agréable aux yeux, pas comme moi
» Tu fais le code de la manière qui t'arrange
» Je suis là au besoin !
» Dimensions du code : 600*300

Shéma:

Et voilà j'ai finis :

Ouais, donc, je vois les avantages et les inconvénients, on dirait moi quand j'ai commencé le codage : Les négatifs x)

Alors, pour te dire, j'ai corrigé ton code, en y ajoutant des choses pour que ce soit plus joli, et je te dis ce qui m'a plu et moins plu :

Avantages :
» Tu connais à peu près les principales balises à insérer dans un banal code en CSS/HTML.
» Le head, c'est ok, l'unicode c'est ok, le css c'est ok, niveau des positions de code, on est ok !

Désavantages :
» Les margins négatifs !
» Manque de marge entre les bords et le texte
» Footer mal positionné
» Certaines balises inutiles !

Je te souligne les erreurs dans tes codes ! Sache que malgré tout, je ne m'attendais pas à avoir le bon rendu, mais il y a une autre balise qui peut te faire le taf : float

Code:: margin-left: -400px;

Ca j'en veux pas ! On évite les négatifs au maximum ! Surtout des grands nombres :/

Code:: margin-top: -300px;

Même remarque

Code:: </body>
   <center>
   <footer> ©Codage par LadyErria </footer> </center>
   </html>

Le footer, il reste dans le body et le center, on le met dans le CSS comme ça :

Code:: footer
{
text-align; center;
}

Et enfin :

Code:: overflow: auto;

Ca existe pas, c'est comme ça :

Code:: overflow-y: auto;

Je te laisse un screen de mon rendu :

Image:

Voilà j'ai terminé :

Nouveau rendu :

Nouveau code

Et ben c'est rare les gens qui de suite, arrivent à corriger un code et me faire quelque chose de normal, juste :

Code:: float: top;

Ca n'existe pas !

Je te donne mon code de correction que j'avais fait à l'aide du premier pour toi :

Code:: <!DOCTYPE html>
<html>
<head>
<title>TP 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">
#body {
height: 300px;
width: 600px;
border: black 2px solid;
}

.image {
width:200px;
height:300px;
float: left;
}

.texte {
background: url('https://img4.hostingpics.net/pics/274612bois074.jpg');
height: 300px;
max-height: 300px;
padding-left: 10px;
padding-right: 10px;
font-family : 'palatino';
font-size : 18px;
color: black;
text-align: justify;
overflow-y: auto;
}
footer
{
font-size: 12px;
text-align: center;
}
</style>
<body>
<center>
<div id="body">
<div class="image">
<img src="https://img11.hostingpics.net/pics/503204lukaavakit.png" />
</div>

<div class="texte">
<p>Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis,
non nulli velariis umbraculorum theatralium latent,
quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus;
aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes;
aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis,
per minutias aurigarum equorumque praecipua vel delicta scrutantes. </p>

</div>
</div>
</center>
<footer><i> ©Codage par LadyErria / Corrigé par ©Zekarant</i></footer>
</body>

</html>

Quand on met pas de . ou de # dans le css sa prend le mot en faite, si je comprend bien la logique.
Car quand tu as mis footer il c'est modifier.

Pour le nom des balises, on met rien : footer / body sont les deux seuls en principe !

Ok j'ai aussi img qui fonctionne pareille car j'aime bien rétrécir mes images. On fait quoi maintenant?

Actuellement voilà mon résultat de ma galerie, les rectangles rose c'est se que je dois encore faire mais je pense faut que tu me donnes des astuces pour que je puisse les placer. (ceux sur le côté serviront pour le javascript)

C'est mon code actuelle tu pourras me dire s'il y a des erreurs

J'ai rien compris ><

En faite dans l'image que je t'ai mise tu as des rectangles roses. Se sont les parties que je n'ai pas faite car je n'arrive pas à les placer ni meme à créer quelque chose à chaque fois sa me fait une sorte de ligne blanche.

Ah ouais mais te sens pas pousser des ailes en voulant directement passer au JS :D

c'est pas le javascript que je veux faire mais juste les rectangles pour plus tard. Je suis très loin d'avoir le niveau pour le faire. Il y a pleins d'autres choses à faire avant.

Je part en vacances demain pour 1 semaines ^^

A plus tard

Tu es notée en vacances c'est oki ! Bonne semaine à toi !

Coucou @Zekarant je suis rentrée et prete à reprendre ^^

Coucou,

Excuse moi du retard de la réponse, j'étais assez occupé ces derniers temps à cause du concours et de mes occupations personnels, je t'enlève le fait que tu étais en vacances et je suis prêt à reprendre avec toi !

Sujet: Re: Partie cours de LadyErria

» Partie cours : LadyErria
» Partie cours de M&M's
» Partie cours : Liiloux
» Partie cours : Ines
» Partie cours : Undead

« Partie cours de LadyErria »

Partie cours de LadyErria

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Recherche avancée

Page 1 sur 3	Aller à la page : 1, 2, 3