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...
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...
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>
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 :/
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.
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é.
× 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.
Compos sui.