lisere

lisere/ header

Sujet résolu

FiranaNiu

11 février 2018 à 20:59:47

Bonsoir,

Comment faire pour que le lisere, ne soit pas couper par le "header"?

Merci.

Lamecarlate

11 février 2018 à 22:24:44

Bonsoir,

cela fait plusieurs semaines que tu es là, tu as participé à plusieurs sujets et en as démarré d'autres, tu devrais connaître la règle : montre ton code. Montre ce que tu as fait en CSS et en HTML, en utilisant le bouton </>, et aussi une capture d'écran de ton résultat. Personne n'est devin ici, et il existe de nombreuses solutions pour le TP.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

FiranaNiu

11 février 2018 à 22:59:14

Bonsoir Lamecarlate,

Ah oui, pardon.!

C'est juste que je pensais en terme de balises: header, section,aside etc...et que je n'ai plus pense a mettre le code!Je comprends que ca vous enerve.

Je parle du devoir3, pas du TP :).Le tp s'est comme demande de parle chinois sans un bon traducteur, lacune du cours ( voulu ou pas?).

Alors voila, le code et le screenshot.:)Merci de votre aide.

ps: Petit feedback de ma part, vu que j'ai vu plusieurs fois cette remarque, pourquoi ne pas indiquer le fonctionnement du forum? (comme indiquer son code?- et aussi indiquer que les questions sont visibles sur Google (si on cherche des infos), ce qui pose des problemes de confidentialite pour les apprenants (peut-etre):).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css"/>
        <title>HTMLCV2</title>
    </head>  
    <body>  
    <header>
    	<h2><span>Françoise  Marchand</span></h2>
    	<p>Apprenante @Openclassroom.</p>    
    </header>
    <aside>
    <div id="liseret"></div>
</aside>
<section id="contenu">
    <div class="titre">
    <h3>Mes expériences </h3>
    <ul>
        <li> 2017 blablablablablabla.Saint-Malo </li>
        <li> 2008-2016  blablablabla. Iceland.
        Traductrice Anglais-Francais.</li>
        <li> 2006-2008  blablabla. Londres.
        Traductrice Anglais-Francais.</li>
        <li> 2004-2008  blablabla.Londres.
         Londres Games testeuse </li>
        <li> 1999-2005  blablabla. Londres -
         Superviseuse.</li>
        <li> 1997-1999  blablabla -Londres </li>
    </ul>
</div>
</div>
    <div class="titre">    
    <h3>Mes compétences </h3>
    <ul>
    	<li> Anglais courant.</li>
    	<li> Microsoft Office.</li>
    </ul> 
</div>  
    <div class="titre">
    <h3> Ma formation</h3>
    <ul>
    	<li> BAC L. </li>
    	<li> Diplome en Traduction- Universite de  Westminster, Londres </li> 
        </ul>
</div> 
</section>

    </body>

h2,p,h3
{
	text-align: center;
	color: darkblue
}

header
{
	background-image:url("Niu.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top right;
}
#contenu
{
	display:flex;
	justify-content: space-around;
	position:fixed;
	width:70%;
	top:20%;
	left:20%;
	right:20%;
	bottom:20%;
}
#liseret
{
	background-image:linear-gradient(blue, pink);
	display:inline-block;
	border-radius: 10px;
    width:100px;height:800px;
}
.titre
{
	padding-left:50px;
	padding-right: 40px;
}

-
Edité par FiranaNiu 12 février 2018 à 2:34:50

noopy360

11 février 2018 à 23:11:48

Salut, regarde cette image

https://s3-eu-west-1.amazonaws.com/sdz-upload/prod/upload/Sans%20titre-1174.jpg

Ne tiens pas compte de la taille en pourcentage des blocs car je ne trouve pas ça bon d'utiliser les %.

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

exen

11 février 2018 à 23:11:54

Bonjour,

Peut être que si ton liseré changeait de place dans le html et se trouvait plus haut ca règlerait le problème.

Compos sui.

FiranaNiu

11 février 2018 à 23:54:55

Bonsoir Noopy et Exen,

Merci, c'est le plan auquel je pensais... oui" ca fonctionne" mais maintenant mon <header> se retrouve en bas comme un <footer>...:( et la photo a disparu.:(.

mon lisere se trouve entre <body> et <header>. Je n'ai rien touche au css.

Je vais continuer, merci bcp:)

J'ai demande a mes ami(es) programmeur(ses), j'aime bcp le cours, mais marre de ces enigmes et autres lacunes du cours...parce que parfois on nous demande des choses qui n'ont pas ete explique, et c'est un peu "dommage", vu qu'on apprend...ca sert a rien encore une fois de nous demander de parler une langue que l'on maitrise pas, sans traducteur..c'est une perte de temps et surtout on fait des erreurs que l'on repete...enfin c'est ce que je pense et ma facon d'apprendre aussi.:)

Expliquer dans le detail est apparement un don.

Il faudrait vraiement chaque cours avec le html et le css3 Parce que les basics, ca se comprend en voyant et que le cours ne fait pas cela...d'ou ce forum, d'ou ses frustrations des mentors ( un bon systems qui roule pour lui-meme d'accord) mais dommange pour les apprenants.

-
Edité par FiranaNiu 12 février 2018 à 2:43:16

Lamecarlate

12 février 2018 à 7:05:44

> ps: Petit feedback de ma part, vu que j'ai vu plusieurs fois cette remarque, pourquoi ne pas indiquer le fonctionnement du forum? (comme indiquer son code?- et aussi indiquer que les questions sont visibles sur Google (si on cherche des infos), ce qui pose des problemes de confidentialite pour les apprenants (peut-etre):).

Beeeeen : https://openclassrooms.com/forum/sujet/regles-et-bonnes-pratiques-du-forum (sujet épinglé dans le forum HTML/CSS).

Et "avoir fait des recherches avant", ça me paraît quand même du bon sens, non ?

(je suis en train de suivre le cours HTML/CSS pour comprendre pourquoi tant de gens galèrent… il y a peut-être un problème après tout)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

FiranaNiu

12 février 2018 à 11:27:57

Bonjour,

Je poste ici en dernier recours, je fais des recherches de mon cote:).J'ai un probleme de methodes, c'est tout, mais ca va aller.

Bonne semaine a tous.

xxx

exen

12 février 2018 à 19:00:03

bonjour,

Tiens regarde une base simple basé sur ton cv



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="fichier.css"/>
    <title>test</title>

<style type="text/css">

body{
    background-color: yellow;
    width: 100%;
    height: 100%;
    margin:0px;
}

h1,p,h2
{
    text-align: center;
    color: darkblue
}

#liseret
{
    display: inline-block;
    background-image:linear-gradient(blue, pink);
    border-radius: 0 10px 10px 0;
    width:10vw;
    height:99vh;
}

#container{
    background-color: red;
    display: inline-block;
    vertical-align: top;


}

section{
    background-color: orange;
    display: inline-block;
    vertical-align: top;
}
</style>
</head>

<body>
        <div id="liseret"></div>

<div id="container">        

        <h1><span>Françoise  Marchand</span></h1>
        <p>Apprenante @Openclassroom.</p>   
    

    <section>

            <h2>Mes expériences </h2>
            <ul>
                <li> 2017 blablablablablabla.Saint-Malo </li>
                <li> 2008-2016  blablablabla. Iceland.
                Traductrice Anglais-Francais.</li>
                <li> 2006-2008  blablabla. Londres.
                Traductrice Anglais-Francais.</li>
                <li> 2004-2008  blablabla.Londres.
                 Londres Games testeuse </li>
                <li> 1999-2005  blablabla. Londres -
                 Superviseuse.</li>
                <li> 1997-1999  blablabla -Londres </li>
            </ul>
        </section>

        <section> 
            <h2>Mes compétences </h2>
            <ul>
                <li> Anglais courant.</li>
                <li> Microsoft Office.</li>
            </ul>
        </section> 

        <section>
            <h2> Ma formation</h2>
            <ul>
                <li> BAC L. </li>
                <li> Diplome en Traduction- Universite de  Westminster, Londres </li>
            </ul>
    </section>

</div>

</body>
</html>

-
Edité par exen 12 février 2018 à 19:09:45

Compos sui.

FiranaNiu

12 février 2018 à 19:46:09

Bonsoir Exen,

Je vais noter le vh!:)merci bcp.

J'ai fini mon devoir et j'ai eu 5/6.

L'aventure continue:)

Bonne soiree.

xoxo

lisere

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

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

lisere

lisere/ header

lisere

Supprimer

Modérer

Signaler le message aux modérateurs