Partage

aide TP création du site

5 février 2018 à 22:34:32

Bonsoir tout le monde !!

Je suis en plein dans l'exercice du TP création du site pas à pas... J'avance doucement mais surement et étant une personne avec des idées  et voulant un site d'une certaine manière , j'aurais aimé avoir de l'aide sur pas mal de petites questions sur la continuité de mon travail... Mais par ou commencé... Et pour bien faire il faudrait voir mon travail ou j'en suis et ce que je voudrais au final...

Déjà au niveau de la structure j'ai réussi certaine chose mais c'est pas encore ça...

Comment faire ? :/

merci

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
5 février 2018 à 22:44:51

sans ton code et n'etant pas devin moi comme les autres, si tu ne développe pas un peut on risques d'avoir du mal à t'aider.
Compos sui.
6 février 2018 à 14:53:34

Oui je comprends mais c'est un peu compliqué...
Déjà l'agencement de ma page (maquette) que j'aimerais :

HTML :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="srvh.css">
		<title> Saravah - Ecole de Samba </title>
	</head>

	<body>
		<div id="page">
			<header>
				<div id="logo">
					<div id="logo1">
						<img src="pics/17.jpg" title="saravah head">
					</div>
					<div id="logo2">
						<img src="pics/11.jpg" title="saravah head">
					</div>
				</div>
			</header>

			<nav>
				<ul>
					<li><a href="#">Accueil</a></li>
					<li><a href="#">Photos</a></li>
					<li><a href="#">Vidéo</a></li>
					<li><a href="#">Agenda</a></li>
					<li><a href="#">Recrutement</a></li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">Adhérent</a></li>
				</ul>
			</nav>

			<section id="présentation">
				<article>
					<h1> Présentation </h1>
						<p> Saravah, groupe de samba composé d'une cinquantaine de musiciens et de danseuses, existe depuis 1984. Présent dans de nombreux festivals, carnavals et spectacles de rue en France et en Europe, Saravah vous fait vivre la puissance et l'energie des rythmes brésiliens.</p>
				</article>
			</section>

			<section id="banniere">
				<div id="banniere_image">
					<div id="banniere_description">
						Defile des 30 ans en 2015 à Tours
						<a href="#" class="bouton_vert">Voir la suite <img src="pics/bouton_vert.png"/></a>
					</div>
				</div>
			</section>

			<section id="livre">
				<aside>
					<p>Le livre de Saravah 30 ans de défilé 10€ seulement</p>
						<div id="photo">
							<img src="pics/3.jpg"/>
						</div>
				</aside>
			</section>

			<footer>
				<div id="follow">
					<h2>NOUS SUIVRE</h2>
						<p>
							<a href="https://www.facebook.com/SaravahTours/" target="_blank"><img class="bt" src="pics/fb.jpg"/></a>
							<img class="bt" src="pics/tw.png">
							<img class="bt" src="pics/pin.png">
							<img class="bt" src="pics/ins.png">
						</p>
				</div>
				<div id="apps">
					<h2>APPLICATION</h2>
						<p>
							<img class="ap" src="pics/gp.png">
							<img class="ap" src="pics/ws.png">
							<img class="ap" src="pics/bbw.jpg">
							<img class="ap" src="pics/as.png">
						</p>
				</div>		
				</div>

						
				</div>
			</footer>
			
		</div>

	</body>

CSS :

@font-face {
    font-family: 'karatulanormal';
    src: url('font/KARAN___-webfont.eot');
    src: url('font/KARAN___-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/KARAN___-webfont.woff2') format('woff2'),
         url('font/KARAN___-webfont.woff') format('woff'),
         url('font/KARAN___-webfont.ttf') format('truetype'),
         url('font/KARAN___-webfont.svg#karatulanormal') format('svg');
    font-weight: normal;
    font-style: normal;
  }

body
{
	background: rgb(37 205 65) url('pics/14.jpg') fixed center no-repeat; 
	font-family: 'karatulanormal', Arial, sans-serif;
}

#page
{
	
}

header
{
	background: orange;
	margin: 0px 70px 50px 70px;
	padding: 20px;
}

#logo2
{
	display: flex;
	flex-direction: row;
	align-items: baseline;
	width: 250px;
	
}

#logo
{
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	align-content: center;
	padding: auto;
}

ul
{
	list-style-type: none;
	text-decoration: none;
}

li
{
	text-align: justify;
	text-decoration: none;
}

nav
{
	background: orange;
	width: 200px;
	padding: 10px;
	margin: 0px 0px 50px 70px;
	float: left;
	text-decoration: none;

}

#présentation
{
	background: orange;
	margin: 0px 70px 50px 500px;
}

#livre
{
	margin: 0px 0px 50px 70px;
	width: 500px;
	padding: 20px;
}

#photo
{
	display: flex;
	align-items: baseline;
	width: 300px;
	background: orange;
}

#banniere_description
{
	background: orange
	margin: 0px 70px 50px 500px;
}
.bt
{
	width: 50px;
}
.ap
{
	width: 150px;
}

#apps
{
	background: orange;
	width: 45%;
}

#follow
{
	background: orange;
	width: 45%;

}

footer
{
	display: flex;
	justify-content: space-between;
	margin: 0px 70px 0px 70px;

}
h2
{
	text-align: center;
}




-
Edité par d3LTa7 6 février 2018 à 14:58:15

7 février 2018 à 9:55:41

Bonjour,

Personnellement, j'ajouterais des box :

- une box <main> qui contiendrais : nav, aside, section et div

- une box qui contiendrais : nav et aside

- une box qui contiendrais : section et div

cela permet d'isoler les box alignées en verticale et horizontale

Continu à utiliser des flexbox, c'est bien pratique.

Tu peux aussi mettre id="page" en flexbox.

Je ne comprends pas pourquoi mélanger les id et les class. Perso, je n'utilise que les class.

Je pense que les id sont obligatoire si tu fais du javascript, mais ce n'est pas le cas ici.

Bon courage.

7 février 2018 à 10:50:59

L'utilisation des class et des id est importante en réalité. On ne s'en rend pas forcément compte sur des petits sites.

Sur un gros site, en revanche il est intéressant d'y prêter attention à mon avis pour des raisons de "propreté" du travail. 

Les selecteurs CSS ont un "poid" c'est à dire qu'il y a des règles de priorités. Par exemple : 

<div style="background-color:blue">

<p>La couleur du fond est bleu</p>

</div>


Si on associe cette feuille de style à cette div :

div { 
    background-color:red;
}



Le fond restera BLEU car le style inséré directement dans le HTML est prioritaire.

Egalement, (mais je pense que vous le savez) : 

Une ID est unique alors qu'une classe ne l'est pas. Ca peut-être utile si on est un peu inventif et faciliter l'écriture de certains scripts

Imaginez vous avez à créer un élément qui se retrouve sur toutes les pages de votre site. Vous n'allez pas mettre une ID différente (car elle doit être différente) à chaque fois et recopier à chaque fois le CSS correspondant. 

Donc vous utilisez une classe.

Si vous souhaitez modifier la mise en page de ces mêmes éléments avec du JS par exemple, vous leur attribuez une nouvelle classe et hop ils sont tous changés d'un coup, pas besoin de refaire chacune des id une par une...

voir : https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage

A PART CA, au niveau de ton HTML : 

les <img> doivent avoir un attribut "alt" : https://www.w3schools.com/tags/att_img_alt.asp

https://validator.w3.org/#validate_by_input : Permet de tester la conformité de tes pages et de te sortir ce qu'il ne va pas.

-
Edité par pierreletet 7 février 2018 à 11:04:26

7 février 2018 à 17:30:47

Super merci de vos réponses =)

Oui, donc il faut que je privilégie les class au ID !! Ok c'est noté !!

Pour ce qui est des alt sur les img oui je voulais le faire plus tard, la je suis plus en mode "je fais le plus gros pour voir à quoi ca ressemble"

Je vais essayé en ajoutant des box... Mais c'est vrai que l'utilisation du flex c'est encore assez dur pour moi...


7 février 2018 à 17:40:25

Le flex est très simple ! 

Tiens pour que tu apprennes à le maitriser dans les grandes lignes : http://flexboxfroggy.com/

12 février 2018 à 15:10:18

Bonjour =)
L’idée de plusieurs box est génial merci !!
Mais toujours quelques souci...

Comme vous pouvez voir j'ai du mal à centrer mon texte dans la box "nav"

13 février 2018 à 9:04:20

Bonjour,

Il faudrait poster tout ton code (html+css) en utilisant l'icone </> (ou donner un lien internet)

Néanmoins, j'ai des doutes sur :

.left

{

...

margin: ... 1500px ...

13 février 2018 à 10:02:56

attention, dans ta maquette tu sembles confondre <head> et <header> !

<head> permet de mettre les metadonnées.

<header> va contenir la barre du haut (navbar, banniere logo).

15 février 2018 à 16:15:40

Oui Paul, ça a été enlevé depuis et pas trop de changement, Bref je vais transférer tout mon travail ici pour commencé...


Et donc pour finaliser tout ça, j'aimerais centrer la navigation qui à tendance à partir sur la droite vis a vis du cadre
Faire en sorte que toute la partie de droite ne déborde pas en bas et mettre la bande "défilé des 30ans blabla en bas de la photo" et que cette bande prenne bien toute la largeur de la photo...

Autre souci, quand je réduit le navigateur c'est une catastrophe... Comment bien faire ?

Merci d'avance pour vos réponse =)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="srvh.css">
		<title> Saravah - Ecole de Samba </title>
	</head>

	<body>
		<div id="page">
			<header>
				<div id="logo">
					<div id="logo1">
						<img src="pics/17.jpg" title="saravah head">
					</div>
					<div id="logo2">
						<img src="pics/11.jpg" title="saravah head">
					</div>
				</div>
			</header>
			<main>
				<section class="left">
					<nav class="nav">
						<ul id="liens">
							<li><a href="#">Accueil</a></li>
							<li><a href="#">Photos</a></li>
							<li><a href="#">Vidéo</a></li>
							<li><a href="#">Agenda</a></li>
							<li><a href="#">Recrutement</a></li>
							<li><a href="#">Contact</a></li>
							<li><a href="#">Adhérent</a></li>
						</ul>
					</nav>

					
					<aside class="aside">
						<p>Le livre de Saravah 30 ans de défilé 10€ seulement</p>
							<div class="photo">
								<img src="pics/3.jpg"/>
							</div>
					</aside>
					
				</section>

				<section class="right">
					<section class="présentation">
						<article>
							<h1> Présentation </h1>
								<p> Saravah, groupe de samba composé d'une cinquantaine de musiciens et de danseuses, existe depuis 1984. Présent dans de nombreux festivals, carnavals et spectacles de rue en France et en Europe, Saravah vous fait vivre la puissance et l'energie des rythmes brésiliens.</p>
								<p> Saravah propose des prestations en salle, sur scène, dans la rue. En défilé, les danseuses sont suivies de la "Bateria" (ensemble de percussion). Cette déambulation est un moment festif et puissant.</p>
								<p> Saravah joue du samba de Rio, musique forte en énergie issue des grandes écoles cariocas, du samba funk ainsi que nos propres compositions.</p>
								<p>La danse, partie intégrante du samba, mélange à la fois couleurs, énergie et sensualité.</p>
								<p>Nos prestations sont rythmées tant par des enchainements chorégraphiés que par des solos et improvisations dont seues nos danseuses détiennent le secret.</p>
								<p>Pour certains carnavals, des ballons géants peuvent nous accompagner.</p>
								<p>Nous développons, de plus, un spectacle sur scène mélangeant musique électronique et percussion : Le projet électro</p>
						</article>
					</section>

					<section class="banniere">
						<div id="banniere_image">
							<div id="banniere_description">
								Defile des 30 ans en 2015 à Tours
								<a href="#" class="bouton_vert"><img src="pics/bouton_vert.png"/></a>
							</div>
						</div>
					</section>
				</section>
			</main>
			<footer>
				<div id="follow">
					<h2>NOUS SUIVRE</h2>
						<p id="btm">
							<a href="https://www.facebook.com/SaravahTours/" target="_blank"><img class="bt" src="pics/fb.jpg"/></a>
							<img class="bt" src="pics/tw.png">
							<img class="bt" src="pics/pin.png">
							<img class="bt" src="pics/ins.png">
						</p>
				</div>
				<div id="apps">
					<h2>APPLICATION</h2>
						<p id="apm">
							<img class="ap" src="pics/gp.png">
							<img class="ap" src="pics/ws.png">
							<img class="ap" src="pics/bbw.jpg">
							<img class="ap" src="pics/as.png">
						</p>
				</div>		
				</div>

						
				</div>
			</footer>
			
		</div>

	</body>
@font-face {
    font-family: 'karatulanormal';
    src: url('font/KARAN___-webfont.eot');
    src: url('font/KARAN___-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/KARAN___-webfont.woff2') format('woff2'),
         url('font/KARAN___-webfont.woff') format('woff'),
         url('font/KARAN___-webfont.ttf') format('truetype'),
         url('font/KARAN___-webfont.svg#karatulanormal') format('svg');
    font-weight: normal;
    font-style: normal;
  }

body
{
	background: rgb(37 205 65) url('pics/14.jpg') fixed center no-repeat; 
	font-family: 'karatulanormal', Arial, sans-serif;
}

#page
{
	
}

header
{
	margin: 0px 70px 50px 70px;
	padding: 20px;
	border: solid;
	justify-content: space-around;

}

#logo2
{
	display: flex;
	flex-direction: row;
	align-items: baseline;
	width: 250px;
	
}

#logo
{
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	align-content: center;
	padding: auto;
	justify-content: space-around;
}

.présentation
{
	background: orange;
	margin: 20px;

}


.photo
{
	display: flex;
	align-items: center;
	width: 150px;
	background: orange;
	border: solid rgb(37 205 65);
}
#banniere_description a
{
	text-decoration: none
}

#banniere_description 
{
	color: yellow;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.5);
}
#banniere_image
{
	display: flex;
	align-self: flex-end;
}
.banniere
{
	display: flex;
	border: solid;
	background: url('pics/6.jpg') no-repeat;
	padding: 17%;
	margin: auto;
	align-self: flex-end;


}	
.bt
{
	width: 50px;
	align-self: center;
}
.ap
{
	width: 150px;
}

#apps
{
	background: orange;
	width: 45%;
}

#follow
{
	background: orange;
	width: 45%;
	display: flex;
	flex-direction: column;
}

#btm
{
	display: flex;
	justify-content: space-around;
}
#apm
{
	display: flex;
	justify-content: space-around;
}

footer
{
	display: flex;
	justify-content: space-between;
	margin: 0px 70px 0px 70px;
	border: solid;

}
h2
{
	text-align: center;
}

.left
{
	display: flex;
	flex-direction: column;
	border: solid;
	border-color: red;
	width: 25%;
	justify-content: center;
	align-items: center;
}

.right
{
	display: flex;
	flex-direction: column;
	border: solid;
	width: 70%;
	justify-content: space-between;

}

.aside
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: orange;
	margin: 15px;
	text-align: center;
	padding: 10px;
	border-radius: 10px;
}

.nav
{
	width: 80%;
	margin: 20px;
	border: solid red;
	padding: 10px;
	text-align: center;
	line-height: 35px;
	font-size: 2em;
}
#liens
{
	list-style-type: none;
	text-align: center;
}
#liens li a
{
	text-decoration: none;
	color: yellow;
}

main
{
	border: solid blue;
	margin: 0px 70px 50px 70px;
	padding: 20px;
	display: flex;
	justify-content: space-around;
}

Bon je suis conscient qu'il doit y avoir pas mal d'erreur dans mon codage voir des choses inutiles, n'hésitez pas à m'en faire part =)

Oui je me suis trompé dans la maquette Pierre ;)





-
Edité par d3LTa7 15 février 2018 à 16:29:31

16 février 2018 à 9:04:06

Bonjour, tu peux valider ton code html ici : https://validator.w3.org/

Pour le css, c'est ici : https://jigsaw.w3.org/css-validator/

Corriges toutes les erreurs et continue.

16 février 2018 à 15:12:49

Ha merci pour cette info, effectivement c'est assez pratique mais je ne comprends pas certains choix de ce "correcteur", par exemple il me dit ou conseille de mettre un titre H2 - H6 pour ma partie nav... C'est étrange :/
16 février 2018 à 15:20:28

Bonjour,

C'est en réalité tout à fait normal. Ta nav est dans une section, or d'un point de vue sémantique le rôle de la balise <section> en HTML5 est de rassembler tout ce qui concerne un sujet commun : https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html. Mettre un titre à une section est conseillé et non obligatoire, c'est pourquoi le validateur retourne un warning et non un erreur.

Tu as des soucis plus importants à régler avant cela. En particulier ton footer et les différents éléments à l'intérieur de ce dernier qui sont mal imbriqués, ta balise <html> qui n'est pas fermée, etc etc.

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
16 février 2018 à 15:34:06

Oui j'ai corrigé tout ça... Et le correcteur ne m'affiche plus que les "warning" aux sections.
Par contre heureusement que tu me signale la fermeture du <html>  car il ne m'a rien dit la dessus !! :x

En tout cas merci pour ces 2 liens !! Hop ! Dans les marques pages ^^

Et donc j'ai corrigé toutes les erreurs (il n'y en avait que 3 en css ! C'est plutôt encourageant ^^ )

Par contre je n'ai toujours pas résolu la solution à mes problèmes cité plus haut... Si quelqu'un à une idée ! Merci =)

-
Edité par d3LTa7 16 février 2018 à 15:42:40

aide TP création du site

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