Partage

Activité HTML5

9 août 2017 à 13:56:10

Bonjour aux codeurs !

Voilà j'ai un problème et honnêtement j'ai beau essayer plein de propriétés et rien n'y fait, je suis bloqué.

Pour cet exercice je dois mettre un liseret à gauche sur toute la hauteur du site et du contenu sur la droite.
En gros ça doit faire du 20% et 80%.

Je vous donne les codes HTML et CSS et des screenshots pour que vous puissiez voir de quoi je parle.

https://www.hostingpics.net/viewer.php?id=443310exercicehtml.jpg

CODE HTML

<!DOCTYPE html>
	<html>
	<head>
		<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:400,700" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="style.css">
		<meta charset="utf-8">
		<title>CV Ludovic WEBER</title>
	</head>
	<body>

		<div class="wrapper">
					<img class="bordure" src="back.png" alt="bordure" width="200" height="700">

					<div class="header">
						<h1>Ludovic WEBER</h1>	
						<p>En formation HTML/CSS par l'excellent site<a href="https://openclassrooms.com/" target="blank"><br/>Open class room</a></p>
						<a href="ludo.jpg"><img class="profil" src="ludo-mini.jpg"  alt="Ludo" title="Ludovic"></a>


					<div class="conteneur">
						<h2 class="exp">Mon Expérience</h2>
							<ul>
								<li><strong>De 2009 à 2012</strong> : Guitar SHOP</li>
								<li><strong>De 2012 à 2014</strong> : U Culture</li>
								<li><strong>De 2014 à 2017</strong> : FACILITESS</li>
							</ul>

						<h2 class="comp">Mes compétences</h2>
							<ul>
								<li>HTML5 CSS3, mais j'suis encore bien bien naze.</li>
								<li>Word Excel</li>
								<li>League of Legend PLAT I qui feed un max avec Caitlyn jungle.</li>
								<li>Champion de pétanque en développé couché.</li>
							</ul>			
						<h2 class="forma">Ma formation</h2>
							<ul>
								<li>J'ai tout appris sur Openclassrooms. Enfin je commence à apprendre !</li>
							</ul>
					</div>
				</div>	
		</div>			
	</body>
</html>

CODE CSS

body
{
	margin: 0px;
	padding: 0px;
}

.wrapper
{
	display: flex;
}

.header{
	display: flex;
	border: 7px solid #27AE60;
	justify-content: space-around;
	flex-wrap: wrap;
}

.bordure
{
	width: 15%;
}

.conteneur{
	display: flex;
	align-items: flex-start;	
}

.exp
{
	display: flex;
}

Pour info faut que ça ressemble à ça :

https://www.hostingpics.net/viewer.php?id=669676apercu8.png

Voilà j'en suis rendu là... Y'a plein de choses à dire probablement ... à faire encore plus.
Comme par exemple mettre mon nom collé à gauche dans le bloc et la photo à droite, mais avec les flexbox etc.. je me perds.

Puis les formations/compétences etc... fin bref, je déprime ^^


Je sais qu'il doit y avoir des erreurs grosses comme des maisons, j'apprends le HTML et CSS depuis une semaine. J'en suis rendu à être accroc complet. Mais là ça fait plusieurs jours que je suis bloqué là-dessus et je suis tellement perdu ...

Merci pour vos précieux conseils !

Ludo

-
Edité par HaestanLudo 9 août 2017 à 13:57:48

9 août 2017 à 15:57:12

Salut,

Pour ton liseret, si tu veux quelque chose comme l'exemple de Mathieu, je te conseille de créer une balise que tu modifieras à ton aise. Pour "recopier" une image je te conseille d'essayer de la quadriller pour imaginer sa construction.

Par exemple:

Les deux balises parrents seraient ici le liseret et le corps de la page, se qui donnerait:

<body>
    <div id="liseret"></div>
    <div id="blocPage">
        <!-- Le reste du code -->
    </div>
</body>

Puis avec flex tu pourras mettre tes deux balise cote à cote ;)

Pour le liseret, il faudra lui donner une largeur, arrondir les angles, une couleur de fond...

-
Edité par Mr R0b0t 9 août 2017 à 15:59:42

"Intelligence is the ability to avoid doing work, yet getting the work done." L.T.
9 août 2017 à 17:09:06

Salut,

Mets-juste un border-left sur body, ne te prends pas la tête.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
9 août 2017 à 17:48:39

J'ai pensé à un découpage comme ça.
Mais je pense que mon réel problème c'est que je ne sais pas encore schématiser mon code HTML.

Parce que j'ai essayé ce que vous avez dit et pfffff je galère ...

9 août 2017 à 18:02:34

C'est normal au debut, ça va devenir un reflexe après.

N'hésite pas à englober tes balises par d'autres. 

Par exemple:

Commence par faire les rouges: c'est juste deux balise cote à cote

Puis dans ta seconde rouge tu insères les bleues: c'est trois balises les une en dessous des autres

Puis les vertes...

ps: il n'y a jamais qu'une seule solution en html/css.

"Intelligence is the ability to avoid doing work, yet getting the work done." L.T.
9 août 2017 à 19:51:05

Merci beaucoup !

Je vais essayer de me servir de ça !
Mais en fait je crois que je fais une fixette sur le "display : flex;" J'ai la sensation qu'il faut toujours agencer son site avec ça. Seulement j'ai encore du mal à comprendre comment fonctionne les blocs etc... Bref ça viendra ;)

9 août 2017 à 21:10:52

Flexbox est plutot magique, faut pas en avoir peur :magicien:

N'hésite pas à utiliser le debugger du navigateur pour comprendre la taille et la disposition de tes blocs. Tu peux aussi imposer une couleur temporairement a tes blocs pour voir leur taille. Lis, relis et rerelis le cours sur Flexbox il est très bien expliqué.

Bonne chance ;)

"Intelligence is the ability to avoid doing work, yet getting the work done." L.T.
10 août 2017 à 8:28:44

J'avance petit à petit. J'ai appliqué ce que tu m'as dit Mr Robot et j'arrive à quelque chose comme ça.

Maintenant je n'arrive pas à mettre mon bloc content gris collé au liseré... 
Je suis vraiment désolé de vous déranger avec ça, pourtant je devrais pouvoir y arriver avec les cours ... Mais j'ai encore du mal avec le positionnement des blocs.
Absolute, fixed, relative, display flex, inline-block etc... Tout ça fait beaucoup d'un coup ^^

Voici mes codes HTML

<!doctype html>
<html>
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Mon CV</title>
        <link rel="stylesheet" href="style.css">
        <link rel="author" href="humans.txt">
        <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:400,700" rel="stylesheet">
    </head>
    <body>

		<!-- LISERET EN SIDEBAR LEFT -->
    	<div id="liseret-redblock"></div>
		<!-- END LISERET -->

    	<div id="bloc">
		<!-- BLOCk PAGE -->
    	<div id="blockpage-redblock">

		<!-- HEADER POUR NOM ET PHOTO -->

        	<div class="header-blueblock">
    			<a href="ludo.jpg"><img src="ludo-mini.jpg" alt="Ludo"></a>
    		</div>
    		<h1>Ludovic WEBER</h1>


		<!-- END HEADER -->

		<!-- SECOND HEADER POUR TEXTE -->
    		<div class="second-header-blueblock">
    			<p>En formation HTML5/CSS3</p>
    		</div>
		<!-- END SECOND HEADER -->

		<!-- CONTENT PAGE -->
     		<div class="content-blueblock">
    			<div class="exp-greenblock">
    				<h3>Mes expériences</h3>
    					<ul>
    						<li><strong>2009-2012</strong>: GUITAR SHOP</li>
    						<li><strong>2012-214</strong>: U CULTURE</li>
    						<li><strong>2014-2017</strong>: FACILITESS</li>
    					</ul>
    			</div>

    			<div class="comp-greenblock">
    				<h3>Mes compétences</h3>
    					<ul>
    						<li>HTM5</li>
    						<li>CSS3</li>
    						<li>WORDPRESS</li>
    						<li>WORD EXCEL</li>
    					</ul>
    			</div>

    			<div class="forma-greenblock">
    				<h3>Mes formations</h3>
    					<ul>
    						<li>OpenClassrooms</li>
    					</ul>
    			</div>
    		</div>
			<!-- END CONTENT PAGE -->

    		</div>
    	</div>
			<!-- END BLOCK PAGE -->
    </div>
        <script src="js/main.js"></script>
    </body>
</html>

CODE CSS

body{
	margin: 0;
	padding: 0;
	font-family: 'Saira Extra Condensed', sans-serif;
	background-image: url(back.jpg) repeat;
	width: 80%;
	min-width: 500px;
}

#liseret-redblock{
	background: #2c3e50;
	width: 15%;
	height: 600px;
	border-radius: 15px;
}

.header-blueblock{
	float: right;
	border: 1px solid black;

}

h1
{
	background-color: orange;
	border: 1px solid black;
	text-align: center;
}

.second-header-blueblock{
	font-weight: none;
	font-size: 25px;
	text-align: center;
	background-color: yellow;
	border: 1px solid black;
	align-content: center;
}

.head{
	border: 7px solid #2c3e50;
}

.exp-greenblock{
	background-color: red;
	border: 1px solid black;
}


.comp-greenblock{
	background-color: purple;
	border: 1px solid black;
}

.forma-greenblock{
	background-color: green;
	border: 1px solid black;
}

.content-blueblock{
	display: flex;
	align-items: stretch;
	justify-content: space-around;
	vertical-align: center;
	flex-wrap: wrap;
}

#bloc{
	background: grey;
	width: 90%;
	height: 600px;
}


Je m'attends à ce que la réponse tombe du ciel, j'aimerai essayer de comprendre d'où vient le problème.
Désolé pour le dérangement en tout cas

10 août 2017 à 15:12:37

Salut,

Alors avant le fameux flexbox, quelques petits problèmes/conseils:

  • Tu as une balise </div> en trop entre <!-- END BLOCK PAGE --> et <!-- END CONTENT PAGE -->
  • Ta paire de balise <div id="bloc"></div> ne sert pas car elle est comprise dans la paire <div id="blockpage-redblock"></div>. Qu'une des deux paires est utile ici.
  • Je te conseille de mettre des id plus en rapport avec le contenu que par rapport au schema architectural (si c'est pour coller avec les posts précédent c'est très bien :))

Maintenant le css !

Se que tu veux pour les deux blocs rouges c'est qu'ils aient un comportement "en line". Tu appliques donc la propriété flex au conteneur parent (ici body), et hop les blocs se placent cote à cote:

body{
    display: flex;
}

Ensuite essais de ne pas trop brider tes blocs avec les tailles, laisse leurs de la liberté :)

Par exemple pour ton liseret, n'impose pas de hauteur, par defaut il va prendre toute la hauteur. Par contre il faut lui indiquer une largeur. Ici tu lui imposes 15%, soit 15% de la largeur de la page, donc en fonction de la largeur de la page le liseret va varier. Si c'est se que tu veux, c'est parfait (mais moi je lui indiquerais une valeur fixe :D).

Edit: Le liseret va prendre 15% de la page car son parent est body soit "la page". Quand tu appliques un % à une balise, le % est calculé par rapport au parent. C'est pour ça que les % quand je peux m'en passer je le fais.

Normalement dans 99% des cas, flex suffit pour placer ces blocs. Et dans certains cas exeptionnels tu utilises relative ou absolute. Donc ne te prends pas la tete, et fais tout avec cette page.

-
Edité par Mr R0b0t 17 août 2017 à 18:03:32

"Intelligence is the ability to avoid doing work, yet getting the work done." L.T.
10 août 2017 à 15:20:15

Rolalalala mais merci !!!

C'est vraiment sympa de ta part de m'avoir aidé sur ce coup-là ! J'ai bien compris d'où venait le problème.

Bonne journée à toi :)

11 août 2017 à 1:11:04

Mr R0b0t a écrit:

L'insersion du js se fait plutot après la balise</body>


Non, juste avant. ;) On appelle le JS juste avant de refermer body, mais il ne doit rien y avoir en-dehors.

Pour le reste, je plussoie tout ton commentaire ; mais je continue de dire que ce liseret n'a pas besoin d'être une div vide. Un border-left sur body suffit.

Autre conseil @HaestanLudo : laisse tomber les ID, garde ça pour les ancres. Pour ton CSS, préfère les classes.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
11 août 2017 à 15:34:03

Humm autant pour moi, surement fatigué quand j'ai écris ça  :)

Par contre avec margin-left tu as aucune flexibilité:

  • Comment tu arrondis les 4 angles de ton liseret ?
  • Comment tu changes la couleur ?
  • Comment tu gères l'espace entre ton liseret et ton corps ?
  • ...

Et le jour oú tu veux réutiliser ton liseret c'est pas très pratique. Certe c'est possible mais c'est loin d'etre le plus simple !

"Intelligence is the ability to avoid doing work, yet getting the work done." L.T.
14 août 2017 à 23:47:11

Oui, si tu veux arrondir les angles, c'est sûr ; par contre, à chaque fois que je vois ce liseret avec ces angles arrondis, c'est toujours aussi moche. :)

Pour la couleur, aucun souci on peut changer la couleur, l'épaisseur et le style d'une bordure. Pour l'espace, de façon tout à fait normale, en ajoutant une marge sur le corps. Et pour le réutiliser ben… Il suffit de remettre la propriété ; ça prend une ligne.

Exemples :

https://jsfiddle.net/ktbenk8p/
https://jsfiddle.net/ktbenk8p/1/

https://jsfiddle.net/ktbenk8p/2/
https://jsfiddle.net/ktbenk8p/3/

Et on peut même modulariser le bidule pour l'appliquer sur tout ce qu'on veut (body y compris) : https://jsfiddle.net/ktbenk8p/4/ 

Ou bien s'amuser de diverses façons : https://jsfiddle.net/ktbenk8p/6/ 

-
Edité par rhooManu 15 août 2017 à 0:01:30

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
15 août 2017 à 15:33:02

Mais on ne peut pas réaliser se qui est demandé dans ce sujet c'est à dire ceci; se qui est dommage :D

Sinon je suis effectivement d'accord avec toi sur l'utilisation de border-left. Quand on peut se passer d'une balise vide vaut mieux mais parfois s'en passer c'est se prendre la tete. :euh:

"Intelligence is the ability to avoid doing work, yet getting the work done." L.T.
15 août 2017 à 16:41:04

Quitte à devoir vraiment faire ça, je ferais avec un pseudo-élément plutôt qu'une balise vide ; propreté, propreté. ^^ 

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

Activité HTML5

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