@GaëlleQuétel

Bonjour.

Je ne veux pas dire de bêtises (je suis débutant) mais il me semble que dans ton cas tu devrais insérer toute la ligne : <a href="image.png">etc...

dans une balise paragraphe comme tu l'as fait la ligne au dessus. Tu dois utiliser une balise de type block. Cela devrait être plus simple par la suite. En espérant t'avoir aidé.

THP17

-
Edité par THP17 28 avril 2017 à 20:05:55

GaëlleQuétel a écrit:

Bonjour,

J'en suis à la partie du cours où nous devons mettre en forme notre CV précédemment créé en HTML5.

Lors de la création en HTML5 nous devions insérer une photo cliquable, que j'aimerais pour cette mise en forme, placer tout en haut à droite de mon CV.

Comme vous le verrez dans mon code j'ai utilisé "float : right" ce qui à positionné l'image à droite mais pas vraiment en haut, et quand j'ai essayé avec "float : top right" elle est revenu à gauche 

Ce qui me laisse penser que ce n'est pas le code que je dois utiliser car cela est fait pour positionner le texte autour de l'image (ou non) et pas pour positionner l'image en elle même, mais c'est la seule "parade" que j'ai trouvée pour me rapprocher de la solution ...

Ci vous avez cette solution, merci d'avance 

Ci dessous les imprims écran du cv et de mes codes en html5 et css3

Salut, deja je pense que tu devrait mettre ton image dans un paragraphe c'est ce que Mathieu recommande même si ce n'est pas une obligation.

Concernant le positionnement de ton image tu as choisis dans le css a qui est de type inline donc tu pourras faire bouger sur la même ligne à droite à gauche au centre. Si tu veux le mettre en haut à droite de ta page tu devrait retirer folat: right, et faire un display:block ensuite tu mettra plus bas position: absolute ensuite top:0px et right 0px ça devrait aller au coin supérieur droit.

a
{

display: block;
position: absolute;
top: 0px;
right: 0px;

}

Bonjour,

Merci à "devnaj" et "THP17" pour vos réponses.

Tes codes ont fonctionné THP17? Je ne les ai pas encore vu dans le cours j'espère en apprendre plus sur ces codes.

Bonne journée!

Salut tout le monde !

Je bloque sur un cas pratique de l'exercice du cupcake en CSS.

Je n'arrive pas a centrer la figure (image) et sa description"

Mon Hover n'a pas l'air de fonctionner non plus  Ou sont mes erreurs  svp? 

@JonathanVidal1quel élément de ton HTML a la classe .class je ne le vois pas dans ton code en plus ce dernier est très mal écrit. Tu peux rassambler les propriétés sur un sélecteur en faisant ça:

h1{
    color: blue;
    font-family:une_famille_ici;
    ........;
}

au lieu d'écrire plusieurs h1 et de les affecter des propriétés je pense que tu devrais bien lire le cours

J'ai trouvé mon erreur ... 

j'ai remonté d'une ligne le class="image"

Ce qui donne maintenant

<figure class="image">
        <img  src="cupcake.jpg" alt="Cupcake" />

-
Edité par John Havok 5 mai 2017 à 1:41:14

Bonjour à tous,

J'en suis à la partie du cours ou nous devons créer un site pas à pas.

Les images que je mets sur mon site ont été créées via Photoshop.

J'ai mis des fonds transparents sur tous mes éléments Photoshop et je les ai bien enregistré en Png.

Cependant même si les fonds sont bien transparents sur mon site, ils prennent un espace qui gêne les autres éléments, et je ne peux les positionner comme je veux.

J'ai cherché sur internet mais tout ce que je trouve c'est comment rendre le fond transparent ce qui n'est pas mon problème...

Quelqu'un a t il déjà rencontré ce problème?

Merci d'avance!

oyo971 a écrit:

coincoin277 a écrit:

Une des questions peut être mal interprétée pour un débutant... 

Quel languages permet de dire "mon menu de navigation est en haut à droite"

Beaucoup peuvent se tromper si la questions est mal interprétée...   à voir pour les futures.

=> Le CSS pour la "forme".

Bonjour!

Le problème est que tu procèdes mal. Tu n'as vraiment besoin de toucher des outils sophistique de traitement d'images, du moins pour l'instant. Comme on t'a dit ci-haut tu as CSS pour ça.

N'hesite pas si tu as d'autres soucis.

Bonjour et merci pour vos réponses.

J'utilise bien CSS pour intégrer et placer les éléments, mais pour la création du site j'ai voulu importer des images personnalisées via Photoshop.

Pour être plus précise j'ai utilisé "a:hover" pour souligner du texte (importé de photoshop) avec un soulignement lui aussi personnalisé (photoshop). Comme ce sont des éléments droit (sur fond transparent) j'ai pu les rogner de manière rectangulaire et précise pour qu'ils se placent bien l'un en dessous de l'autre. ce qui a fonctionné comme on peut le voir sur ma première imprim' écran.

Le problème est que j'ai voulu faire la même chose avec d'autres éléments eux aussi personnalisés via photoshop (texte et soulignement) mais comme ceux ci sont en biais et que je ne peux rogner leur fond en biais, ils ne se positionnent pas l'un en dessous de l'autre comme si le fond pourtant toujours transparent gênait (imprim' écran 2)

J'espère être assez claire, ce n'est pas facile à éxpliquer...

Voulez vous dire que tout doit se faire sur CSS et qu'il est impossible de personnaliser les éléments comme je l'ai fait via un autre logiciel? ou que le problème se résout via CSS? Si oui comment?

Merci d'avance.

Utilise bootstrap pour positionner tes éléements ca te facilitera la tâche il y a un tuto sur openclassrooms

css.je pense

Bonjour à toutes et à tous

J'en suis à Flex, le "pratiquez". Je voudrais mettre un conteneur dans un conteneur, avec des directions principales d'alignements différentes :

niveau 1: une bannière contient horizontalement "logo" et "palette", et un corpus contient horizontalement "côté droit" et "exercice".

niveau 2:

"côté droit" contient verticalement "circonstances", "nav" et "joueursScores" ;

"exercice" contient verticalement "question", "messages" et "réponse".

niveau 3: "messages" contient horizontalement "eOuM", "reportage" et "options".

Eh ben je galère ! Est-ce que c'est possible, ou bien ne peut-on en aucune manière mettre un conteneur dans un autre ? Aucun exemple du cours ne pratique cet emboitage.

J'ai un niveau 0 : "page" contient verticalement "bannière" et "corpus". Et tout se met en vertical.

Qui peut confirmer que c'est impossible, ou m'aider à trouver mes bugs ?

RESOLU

-
Edité par alexhermes 5 juillet 2017 à 21:01:10

Ça y est, tout est réglé. En fait, c'est tout à fait possible. Voici les bugs que j'avais :

1) Confusion entre id et class. Si j'ai bien compris, pour un conteneur, c'est id. Dans le css, il y aura un #.

2) un ou deux ; oubliés.

3) Une fois ces deux points réglés, j'ai vu que ça marchait, mais j'avais des problèmes avec la hauteur de mes blocs. J'ai résolu en passant de % en px. J'aurais préféré garder les %, comme pour la largeur. Mais il est vrai que c'est moins important : le défilement vertical étant plus habituel, si ça déborde en hauteur, c'est pas grave.

Quel est l'intérêt d'utiliser nav, section, etc. ? div convient à chaque fois, et de toutes façons, s'il faut un conteneur, il faut un div. Donc si par exemple le conteneur est une section, il faut faire suivre la balise section par la balise div. Alors, je ne vois pas l'intérêt. À moins que ce ne soit juste pour les moteurs de recherche ?

Bonjour,

Pour l'exercice de la semaine 2 et la semaine 3, il me manque une note à chacune et ça fait déjà 2 jours. Est-ce normal ?

Ne t'inquiètes pas, tout le monde ne travaille pas au même rythme et tout dépend du nombre de personnes sur l'activité. Patience...

Merci pour vos éclairages!

RESOLU

Bonjour

Lors de la soumission d'une activité, je me suis trompé sur le fichier à envoyer. Est il possible de soumettre une 2 ème fois ?

Merci de vos retours.

Cordialement

-
Edité par ThierryPerrin1 13 juillet 2017 à 8:25:43

Bonjour,

Svp quelqu'un peut-il m'envoyer le code CSS qui va avec cette page html? L'exercice était difficile et malgré ma note, je ne sais toujours pas vraiment insérer un liseret.

Merci

Laet_Eno a écrit:

Bonjour,

Svp quelqu'un peut-il m'envoyer le code CSS qui va avec cette page html? L'exercice était difficile et malgré ma note, je ne sais toujours pas vraiment insérer un liseret.

Merci

Voici une proposition de solution.

J'ai utilisé la technique "flexbox" qui se révèle assez puissante. Les bordures sont justes utilisées pour te permettre de bien voir les proportions de l'élément en question.

Remarque: tu aurais pu utiliser le framework CSS "Bootstrap" pour aller un peu plus vite!

Voici le code HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  
  <div class="container">
    
    <div id="liseret">
      liseret
    </div>
    
    <div id="page">
      
      <div class="pageBody">
        <header>
          Hello! i'm the header
        </header>

        <div class="bodySection">

          <section class="bodSec">
            Section 1
          </section>

          <section class="bodSec">
            Section 2
          </section>

          <section class="bodSec">
            Section 3
          </section>
        </div>
      </div>
    
    </div>
  </div>
  
</body>
</html>

Et le code CSS

div.container{
  display: flex;
}

div#liseret{
  width: 15%;
  margin-right: 2%;
  border: 1px solid red;
}

div#page{
  width: 83%;
  border: 1px solid black;
}

div.pageBody{
  margin: 7px;
}

div#page header{
  border: 1px solid cyan;
}

div.bodySection{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

section.bodSec{
  width: 33%;
  margin: 10px 1px;
  padding: 5px;
  border: 1px solid limegreen;
}

ça marche! c'est super.

Merci Assyabbé!

Toutefois, comment faire pour que le liseret occupe toute la hauteur? J'ai essayé avec height: 100% mais ça ne marche pas...

-
Edité par Laet_Eno 14 juillet 2017 à 10:26:11

TP : création d'un site pas à pas

je n'arrive pas à aligner à droite le menu du header (accueil blog cv contact): avec flex seul proposé dans le code du cours cela reste plutôt à gauche de la page, mais pas complètement. J'ai essayé de définir la largeur du flex de l'ul  avec width et ensuite de faire un flex-end mais ça ne change rien, et text-align:right non plus. Comment faire ? Merci

Il faut en dire un peu plus pour qu'on comprenne : peux-tu faire un croquis comme celui de Assyabé ou comme le mien un peu plus haut ?

Pour procéder cela, il y a comme d'habitude plusieurs solutions. Celle que j'ai utilisé ici est tiré du tutoriel

sur Alsacréation.

Voici le code obtenu.

html{
  margin: 0;
  padding: 0;
}

body{
  min-height: 100%;
  margin: 0;
  padding: 0;
}

div.container{
  display: flex;
  margin: 0;
  padding: 0;
}

div#liseret{
  width: 15%;
  min-height: 100vh;
  margin-right: 2%;
  border: 1px solid red;
}

div#page{
  width: 83%;
  border: 1px solid black;
}

div.pageBody{
  margin: 7px;
}

div#page header{
  border: 1px solid cyan;
}

div.bodySection{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

section.bodSec{
  width: 33%;
  margin: 10px 1px;
  padding: 5px;
  border: 1px solid limegreen;
}

Laet_Eno a écrit:

ça marche! c'est super.

Merci Assyabbé!

Toutefois, comment faire pour que le liseret occupe toute la hauteur? J'ai essayé avec height: 100% mais ça ne marche pas...

-
Edité par Laet_Eno 14 juillet 2017 à 10:26:11

Bonjour,

Je viens de me connecter pour commencer à regarder mes 5 vidéos de la semaine mais j'ai déjà un message qui apparaît au-dessus de la vidéo et qui dit que je ne peux visionner que 2 vidéos sur 5 maximum alors que je n'en ai regardé aucune.

Pouvez-vous m'aider ?

@kessodiallo tu as certainement regardé d'autres vidéos pas du même cours certes mais tu as déjà visionné tes 5 vidéos ou sinon tu peux contacter l'équipe d'OC pour plus de précisions.

Merci, je vais contacter l'équipe d'OC pour plus de précisions car je n'ai pas regardé d'autres vidéos cette semaine.

sublime text

je viens de commencer le Mooc.....Et de m'apercevoir que maintenant "sublime text" est payant...et plutôt cher: 70$. Si je ne paie pas, je ne peux pas continuer...

Y a t-il une solution?

Evelyne

EvelyneDelorme a écrit:

sublime text

je viens de ..... m'apercevoir que "sublime text" est payant...et plutôt cher: 70$. Si je ne paie pas, je ne peux pas continuer...
Y a t-il une solution?

Bonjour,

D'après sa doc: https://www.sublimetext.com/3
"There is currently no enforced time limit for the evaluation."

Soit: Actuellement, il n'existe pas de limite de temps pour l'évaluation.