Partage
  • Partager sur Facebook
  • Partager sur Twitter

Soucis CSS

RomualdLadwein
    24 mai 2018 à 8:57:12

    Bonjour, je souhaite faire l'activité du cours sur le langage HTML et CSS. Malheuresement, je dois faire un liseret et il ne se met pas. Je vous met un exemple et mon code.

    jJe dois donc faire le liseret noir. ET voici mon code.

    <!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Mon CV</title>
		 <link rel="stylesheet" href="style.css" />
	</head>
	<body>
			<img src="img/moi.jpg" width=150 height=100 alt="MyPhoto" />
		<h1>Romuald Ladwein</h1>
		<h4>Elève sur OpenClassRooms</h4>

		<div id="deco">
			</div>
		<div id="flex">
			<div class="exp">
				<h2>Mon expérience</h2>
					<ul>
						<li><strong>De 2001 à 2012:</strong> Aucune connaissance en informatique et en Web.</li>
						<li><strong>De 2012 à 2017:</strong> Créations de divers projets en local.</li>
						<li><strong>De 2017 à maintenant:</strong> Conception d'un projet d'échange de crypto-monnaie.</li>
					</ul>
			</div>
			
			<div class="comp">
				<h2>Mes compétences</h2>
					<ul>
						<li>HTML et CSS</li>
						<li>PHP en cours d'apprentissage</li>
						<li>Java en cours d'apprentissage</li>
					</ul>
			</div>
			
			<div class="form">	
				<h2>Ma formation</h2>
				<p>J'apprends principalement sur OpenClassRooms. Mais il m'arrive d'apprendre avec des amis connaisseurs.</p>
			</div>	
		</div>	
	</body>
</html>

    Et le css:

                       /* Style de la page */

@font-face {
	font-family: 'SunRise';
	src:url('sunrise.ttf');
}

body {
	background: url(img/fond.png);
}

h2 {
	color: DarkRed;
}

h1{
	font-size: 50px;
	font-family: 'SunRise', serif;
	text-align: center;
}

h4 {
	font-size: 20px;
	font-family: 'SunRise', serif;
	text-align: center;
}

img  {
	float: right;
	border: 2px black solid;
	box-shadow: 2px 2px 0px black;
}

strong {
	font-weight: bold;
}

#flex {
	display: flex;
	margin-left: 100px;

}

.exp, .form, .comp {
	margin: 20px;
}

#deco {
   float: left;
    background-color: black;
}

    Sachant que je les ai vérifié et il n'y a pas d'erreur.


    • Partager sur Facebook
    • Partager sur Twitter
    Ruynix
      24 mai 2018 à 9:05:22

      Au vue de ta page j'aurais organisé ton HTML comme ça 

      <div id="flex">
    <div id="deco"></div>
    <div class="exp"></div>
    <div class="comp"></div>
    <div class="form"></div>
</div>



      • Partager sur Facebook
      • Partager sur Twitter
      Lamecarlate
      • HTML / CSS
        24 mai 2018 à 9:25:55

        Bonjour,

        Manque de recherche

        La question que vous posez est très fréquente, cela démontre un manque de recherche évident. Internet et ce forum fourmillent de ressources répondant à votre besoin.

        Je vous invite à effectuer de vraies recherches qui sont à la base d'un bon apprentissage…

        • Partager sur Facebook
        • Partager sur Twitter

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

        RomualdLadwein
          24 mai 2018 à 9:43:54

          Lamecarlate a écrit:

          Bonjour,

          Manque de recherche

          La question que vous posez est très fréquente, cela démontre un manque de recherche évident. Internet et ce forum fourmillent de ressources répondant à votre besoin.

          Je vous invite à effectuer de vraies recherches qui sont à la base d'un bon apprentissage…

          J'ai déjà plusieurs topic. Mais, les explications  sont peu clair et ça part très vite en désordre avec le nombre de réponses.

          • Partager sur Facebook
          • Partager sur Twitter
          EmmanuelBeziat
          • HTML / CSS
            24 mai 2018 à 11:12:15

            Ce que je conseille à chaque fois : mets juste un border-left sur body.
            • Partager sur Facebook
            • Partager sur Twitter

            Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

            philiga
            • HTML / CSS
              24 mai 2018 à 14:22:55

              Bonjour,

              Ton #deco n'apparaît pas parce qu'il n'a ni contenu, ni largeur, ni hauteur définies...

              • Partager sur Facebook
              • Partager sur Twitter
              "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
              RomualdLadwein
                24 mai 2018 à 14:52:56

                rhooManu a écrit:

                Ce que je conseille à chaque fois : mets juste un border-left sur body.


                Je n'est pas compris. Pourquoi faire cela?

                philiga a écrit:

                Bonjour,

                Ton #deco n'apparaît pas parce qu'il n'a ni contenu, ni largeur, ni hauteur définies...


                Merci, j'ai essayé c'est bon mtn.
                • Partager sur Facebook
                • Partager sur Twitter
                philiga
                • HTML / CSS
                  24 mai 2018 à 17:06:45

                  Je réponds pour rhooManu:

                  le border-left:50px solid blue; (par exemple) te permet de faire ton liseré gauche sans avoir besoin d'une div supplémentaire dans l'html.

                  Et il occupera toute la hauteur, ce qui n'est pas le cas de ta div actuelle qui est sous les h1, h4...

                  • Partager sur Facebook
                  • Partager sur Twitter
                  "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)

                  Soucis CSS

                  × 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.
                  • Editeur ●
                  • Markdown