Partage

Questions MOOC

4 mars 2018 à 13:56:42

Bonjour,

Merci pour votre avis !

Alors en fait j'ai mis un fond de couleur au liseré. Il n'était pas précisé si il fallait mettre une image ou un fond de couleur, mais le résultat est le même il me semble ?

Dans mon navigateur le liseré s'affiche à gauche et j'ai mes "compétence" "expérience" etc alignés dans le sens horizontal avec la fonction flexbox. Mais peut-être que mon code fonctionne bien avec mon navigateur et mal avec d'autres ? c'est possible ça ? (j'utilise firefox).

Re-voici le code complet du coup :

<!DOCTYPE html>

<html lang="fr">

    <head>

        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>CV</title>

    </head>



    <body id="tst">
        
<!--liseré -->
        <div id="lisere">
        </div>


        <div id="total">

<!--en tête-->
            <header id="titre">
                <h1>Alea Delavie</h1>
                <h3><em>Alea Jacta Est, telle est la question</em></h3> <!--commentaire à la noix-->
    
                <figure>
                    <a href="images/alea_maxi.jpg" title="Cliquez pour agrandir" target="_blank"><img src="images/alea_mini.jpg" alt="Photo d'Alea"/></a>
                </figure>
            </header>

<!--CORPS DU CV-->
            <section id="conteneur">

                <div class="element">
                <p>                      
                    <h4>Mon expérience</h4>
                    <ul>
                        <li class="t"><strong>20/01/2015 au 10/08/2017 : </strong>Dresseuse de licornes</li>
                        <li class="t"><strong>30/02/2013 au 20/08/2015 : </strong>Photographe de dragons</li>
                        <li class="t"><strong>01/03/2011 au 30/08/2013 : </strong>Manager des chats de Tokyo </li>
                    </ul>
                    <br/>
                </p>
                </div>

                <div class="element">
                <p>                      
                    <h4>Mes compétences</h4>
                    <ul>
                        <li class="t">Management des animaux</li>
                        <li class="t">Photographie animalière</li>
                        <li class="t">Psychologie de la licorne</li>
                    </ul>
                    <br/>
                </p>
                </div> 

                <div class="element">
                <p>                      
                    <h4>Ma formation</h4>
                    <ul>
                        <li class="t">Ecole professionnelle de dressage d'animaux ailés</li>
                        <li class="t">Baccalauréat en psychologie des licornes</li>
                        <li class="t">CAP management de félins</li>
                        <li class="t">OpenClassRoom - spécialisation fantastique</li>
                    </ul>
                    <br/>
                </p>
                </div> 

            </section>   



<!--Pied de page-->
            <footer id="footer">

                <p>
                    <br/><br/>Copyright Alea - Tous droits réservés 
                    <br/><a href="mailto:alea_delavie@gmail.com">Me contacter</a>
                </p>
   
            </footer>              
   
        </div>

    </body>

</html>
/*police personnalisée*/
@font-face {
    font-family: 'anagramregular';
    src: url('fonts/Anagram-webfont.eot');
    src: url('fonts/Anagram-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Anagram-webfont.woff2') format('woff2'),
         url('fonts/Anagram-webfont.woff') format('woff'),
         url('fonts/Anagram-webfont.ttf') format('truetype'),
         url('fonts/Anagram-webfont.svg#anagramregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*image de fond*/
body
{
	background: url("images/fond.jpg") no-repeat top right;
}

/*titres*/
h1, h2
{
	font-family: 'anagramregular', georgia, verdana, sans-serif;
	font-size: 4em;
	text-align: center;
	text-shadow: 6px 6px 2px #C390D4;
	text-decoration-line: overline underline;
}
h3
{
	font-family: times new roman, verdana, georgia, arial, sans-serif;
	font-size: 1.5em;
	text-align: center;
	text-shadow: 6px 6px 6px black;
	color: #460980;
	font-style: italic;
}
h4
{
	font-family: 'anagramregular', georgia, verdana, sans-serif;
	font-size: 1.2em;
	text-align: center;
	border: 3px black groove;
	border-radius: 10px;
	color: #460980;
}

/* photo*/
figure
{
	text-align: center;
}

/*paragraphes*/
p
{
	color: black;
	font-family: times new roman, verdana, georgia, arial, sans-serif;
	font-size: 1em;
}
.t
{
	text-align: left;
}

/* dynamique*/
h4:hover
{
	color: #C390D4;
	background-color: black;
}
li:hover
{
	color:  #460980; 
}

/*pied de page*/
#footer
{
    text-align: center;
}
 
/*LISERE*/
#lisere
{
    position: absolute;
    float: left;
     
    width: 10%;
    height: 1200px;
 
    background-color: #460980;
    border-radius: 5px;
}
 
/*titre+contenu*/
#total
{
    position: absolute;
    top:0%;
    bottom:0%;
    left:10%;
    right:0%;
    margin: auto;
}
/*titre+contenu+footer*/
#tst
{
    position: relative;
    margin: 1.5px;
    text-align: center;
}
 
 
/*FLEXBOX CONTENU*/
#conteneur
{
    display: flex;
    justify-content: center;
}
 
.element
{
    padding: 6px;
    margin: 6px;
    background-color: #BFAFE3;
}


Enfin dans tous les cas vous avez raison, dorénavant si je ne suis pas sûre de moi je posterai sur le forum, ne serais-ce que pour m'assurer que j'ai bien compris la consigne.

Merci à vous en tout cas ! Si vous avez d'autres commentaires à ajouter, n'hésitez pas ! Ce qui compte de toute façon n'est pas tant la note, mais la réussite concrète de ce type de structure.

-
Edité par AleaSarah 4 mars 2018 à 14:02:46

4 mars 2018 à 18:40:13

J'ai testé le code complet.

Je n'avais pas vu que la largeur du liseré était définie (c'est moi qui suit allé un peu vite pour le coup :-° ).

J'ai bien le liseré qui s'affiche et les sections affichées côte à côte.

Comme quoi, la réalisation est bonne et le code est bien écrit.

Il peut y avoir des différences d'affichage d'un navigateur à l'autre mais pas de cette ampleur sur un site aussi "basique".

D'ailleurs, vous pouvez essayer vos sites sur différents navigateurs si vous avez des doutes sur des projets plus complexes avec des propriétés css avancées par exemple.

Pour revenir à la question de départ, le site est bien réalisé donc si tout le monde vous a dit que rien ne fonctionnait vous vous êtes probablement trompé de .zip (ce qui est fort dommage), pensez à bien vérifier les prochains ;) .

-
Edité par DheryoLeblanc 4 mars 2018 à 18:41:26

4 mars 2018 à 19:54:27

Merci beaucoup ! Bon ça me rassure, au moins j'ai pas tout compris de travers, c'est déjà ça^^.

5 mars 2018 à 10:26:11

Bonjour je voudrais savoir comment on fait un formulaire de la page facebook?
9 mars 2018 à 14:13:23

J'ai beau me concentrée je comprend rien du tout, peut être que cette formation est pas faite pour moi?
10 mars 2018 à 5:19:53

Bonjour,

tu ne comprends pas quoi?

Bénédicte
13 mars 2018 à 11:13:11

Tu en es à l'activité 1.?
Bénédicte
13 mars 2018 à 13:43:22

Bonjour,

Si tu as des problèmes de compréhension il ne faut pas hésiter à en parler à expliquer ce que tu ne comprends pas, à demander des précisions, etc etc.

Si tu dis juste "je n'ai pas compris" il nous sera impossible de t'aider car nous ne sommes pas dans ta tête... ;)

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
15 mars 2018 à 22:20:09

Bonjour,

En fait je suis niveau dans ce groupe. Depuis incertaine j'y travail développement web tout seul et j'ai un problème comment on peut imbriqués le balise en HTML et css? Donc j'ai besoin de vos aides, svp

Merci, cordialement!

19 mars 2018 à 15:53:46

bonjour a tous 

je n arrive pas a 

Deux pages situées dans un même dossier pour les lien 

20 mars 2018 à 9:23:30

Bonjour,

Il suffit de créer un dossier sur le bureau (écran d'accueil) de ton ordinateur, que tu nommeras comme tu veux, et dans lequel tu enregistreras tes différentes pages. Du coup, si tu as deux pages (avec, dans la première, des liens vers la seconde, et inversement), il faut que les deux fichiers soient enregistrés dans le même dossier.

Questions MOOC

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown