Partage

création d'un site de téléchargement de musique

avec le graphique du type comme ci dessous !

18 janvier 2020 à 18:34:49

salut salut vraiment a tous je sollicite votre aide pour mon projet d'étude( pas de fin d'année ) mais qui vas compté pour la suite du semaine qui est presque a terme bref je vous épargne les détails je passe au concret.

je dois créer un site de téléchargement de musique attractive responsive , ergonomique sur un tiers et le prof exige qu'on utilise pas de framework ( du moins pour le moment) vu que je suis seulement en 2eme année ni fontawesome ni bulma,ni bootstrap bref vous avez compris. mais j ai un peu tricher en utulisant bulma pour avoir un meilleur rendu . prier de m aider sans

le site doit avoir les caractéristique des ses concourants et prédécesseur pour attirer les ut utilisateur et pour qu'il se sentent familiariser avec le site

on doit utiliser que (3) trois principales couleurs ( *bleu *Noir *blanc). on as deja essayer de bosser sur le sujet et mon projet a été retenu pour la suite alors je dois envoyer du lourd ( mdr ) mais je me perds un peu dans mon code( en essayant de modifier et d’ajouter ce qui manquait mais malheureusement ça a dégrader tout ) pour cela que je sollicite votre aide merci d'avance déjà et j'espère avoir beaucoup de réponse et une suite favorable a ma préoccupation cordialement.

mon code ( dégrader lol )

<html>

<head>

<title>musique gratuite, telechargement mp3</title>

</style>

</head>

<body>

<h4>Musicmatch</h4>

</div>

<nav>

<ul>

<a href="index.html">Les plus telechargés</a>

</li>

<a href="musique-mp3.html">Genre</a>

</li>

<a href="clipvideo.html">Top des écoutes</a>

</li>

<a href="contact.html">Contactez-nous</a>

</li>

</ul>

</div>

</nav>

<ul>

<li>

<a href="#">Les plus telechargés</a>

</li>

<li>

<a href="#">Genre</a>

</li>

<li>

</li>

<li>

<a href="#">A propos</a>

</li>

<li>

<a href="#">Contactez nous</a>

</li>

</ul>

</div>

<h1 class="title is-1">Bienvenue sur MUSICMATCH</h1>

<h2 class="subtitle">Télécharger, Ecouter, Regarder</h2>

<input type="search" id="site-search" name="q"

aria-label="Search through site content">

<button>Rechercher</button>

</div>

</footer>

</body>

</html>

body{

font-family: 'century gothic', colibri, serif;

font-size: 13px;

margin: 0px;

padding: 0px;

}

nav{

width: 100%;

background-color: #424558;

}

nav ul{

margin: 0px;

padding: 0px;

background-color: #424558;

}

nav li {

list-style-type: none;

float: left;

background-color: #424558;

}

nav a{

display: inline-block;

text-decoration: none;

padding: 20px 30px;

color: #FFF;

text-transform: uppercase;

font-size: 15px;

background-color: #424558;

}

.table{

display: table;

margin: 0 auto;

}

.menu-ind{

border-top: 5px solid #4C8;

background-color: rgba(64, 200. 130. 0.15);

}

.menu-exp{

border-top: 5px solid #f1dc4f;

background-color: rgba(241, 211, 79, 0.15);

}

.menu-hob{

border-top: 5px solid #0070BB;

background-color: rgba(000, 112, 192, 0.15);

}

.menu-con{

border-top: 5px solid #e44d26;

background-color: rgba(228, 77, 38, 0.15);

}

.logo{

color: #FFFFFF;

font-family: 'Montserrat', sans-serif;

float: left;

margin-left: 30px;

text-transform: uppercase;

padding: 25px;

}

.con{

color: #FFFFFF;

font-family: 'Montserrat', sans-serif;

float: right;

margin-right: 30px;

text-transform: uppercase;

padding: 25px;

}

.banner {

margin-top: =20px;

}

.banner .banner-image {

position: relative;

}

.banner .banner-content {

position: absolute;

text-align: center;

width: 100%;

text-align: center;

top: 30%;

}

.banner .banner-content h1,

.banner .banner-content h2 {

color: #FFFFFF;

}

label {

display: block;

font: 1rem 'Fira Sans', sans-serif;

}

input,

label {

margin: .4rem 0;

color: #FFF;

}

nav li a{

padding: 15px 38px 20px 30px;

background-color: #424558;

}

footer{

height: 80px;

padding-top: 30px;

text-align: center;

background-color: #C5C5C5;

border-top:2px solid #AAA;

}

audio{

float: left;

}</pre>

-
Edité par JacquesN'Guessan1 20 janvier 2020 à 18:09:18

AbcAbc6

18 janvier 2020 à 18:50:24

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Liens conseillés

Règles générales du forum

Mehddii

18 janvier 2020 à 19:08:59

Bonjour,

Tu nous as fournis ton cahier des charges, ok, mais je ne vois pas où il est le problème ? Quel est la partie où tu bloques ?

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

JacquesN'Guessan1

20 janvier 2020 à 18:19:31

Mehddii a écrit:

Bonjour,

Tu nous as fournis ton cahier des charges, ok, mais je ne vois pas où il est le problème ? Quel est la partie où tu bloques ?

au faite j'arrive pas a réalisé ça correctement je bloque sur la barre de recherche bref; et j'arrive pas a réaliser la bannier comme dans le cahier des charges bref j'arrive pas a positionné la barre conformément au centre et a la fois sur la même ligne que le logo de la page

j'aimerais etre guidé stp merci au plaisir de vous relire

Mehddii

20 janvier 2020 à 18:24:17

> au faite j'arrive pas a réalisé ça correctement je bloque sur la barre de recherche bref; et j'arrive pas a réaliser la bannier comme dans le cahier des charges bref j'arrive pas a positionné la barre conformément au centre et a la fois sur la même ligne que le logo de la page ... j'aimerais etre guidé stp merci au plaisir de vous relire

Ce ne sont que des bases du HTML/CSS, rien de très compliqué avec toutes les ressources disponible sur le web, et un peu de recherche, tu peut faire exactement ce que tu veux !

Sinon, il nous faudrait ton code, voir où tu en est / voir le problème par nous même, pour pouvoir te guider.

-
Edité par Mehddii 20 janvier 2020 à 18:25:00

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

JacquesN'Guessan1

20 janvier 2020 à 18:50:20

Mehddii a écrit:

> au faite j'arrive pas a réalisé ça correctement je bloque sur la barre de recherche bref; et j'arrive pas a réaliser la bannier comme dans le cahier des charges bref j'arrive pas a positionné la barre conformément au centre et a la fois sur la même ligne que le logo de la page ... j'aimerais etre guidé stp merci au plaisir de vous relire

Ce ne sont que des bases du HTML/CSS, rien de très compliqué avec toutes les ressources disponible sur le web, et un peu de recherche, tu peut faire exactement ce que tu veux !

Sinon, il nous faudrait ton code, voir où tu en est / voir le problème par nous même, pour pouvoir te guider.

-
Edité par Mehddii il y a 22 minutes

merci de ta réponse oui c'est vrai il y a un contenu très large sur internet très intéressant mais moi je trouve pas un en particulier qui me satisfait pour ça que je demande de l'aide ici

Mehddii

20 janvier 2020 à 19:55:36

Je ne comprend pas, tu souhaites trouver un contenu tout fait pour ton site ? Si c'est ça, je te conseille de te tourner vers les templates :

Google -> template html/css ou bootstrap sont pas mal aussi

Moi je parlais surtout de prendre par si par là, (menu / barre de recherche / je vois également un header à deux niveaux dans la photo que tu nous as fournis / etc etc ...) et t'a un truc qui tient, un peu comme un lego ou un puzzle.

Sinon, on attends toujours ton code pour pouvoir te donner des pistes à suivre

Edit : Ah tu as déjà mit le code, il était pas dans les balises appropriés donc il m'a échapper. Mais tu nous as toujours pas fourni un problème précis sur ton code. Tu dit avoir toucher quelques chose qui a "dégrader" tout l'affichage, qu'as tu toucher ?

-
Edité par Mehddii 20 janvier 2020 à 20:21:43

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

JacquesN'Guessan1

20 janvier 2020 à 20:55:34

Mehddii a écrit:

Je ne comprend pas, tu souhaites trouver un contenu tout fait pour ton site ? Si c'est ça, je te conseille de te tourner vers les templates :

Google -> template html/css ou bootstrap sont pas mal aussi

Moi je parlais surtout de prendre par si par là, (menu / barre de recherche / je vois également un header à deux niveaux dans la photo que tu nous as fournis / etc etc ...) et t'a un truc qui tient, un peu comme un lego ou un puzzle.

Sinon, on attends toujours ton code pour pouvoir te donner des pistes à suivre

Edit : Ah tu as déjà mit le code, il était pas dans les balises appropriés donc il m'a échapper. Mais tu nous as toujours pas fourni un problème précis sur ton code. Tu dit avoir toucher quelques chose qui a "dégrader" tout l'affichage, qu'as tu toucher ?

-
Edité par Mehddii il y a 15 minutes

au faite j'avais fais un menu a 1 niveau il était bien ensuite j'ai essayer de lui rajouter une barre de recherche ensuite ça a fais bouger tout le bloc et rajouter des zones blanches voila. niveau tuto j'en regarde énormément et j'essaie de copier mais quand j'ai u blocage comme celui ci je suis obligé de ,e tourner vers des personnes plus expérimenté bref j'ai besoin d'aide et d’être guidé.

même actuellement je suis entrain d'essayer de trouver une solution, j'essai de créer une autre page dans le même but en essayer de réaliser tous ce que j'ai pas pu precedement mais malheureusement j'arrive pas a centrer la barre de recherche parfaitement ce qui fais disparaître le lien ( se connecter ) et même l'image de fond est trop grande malgré que je l'ai redimensionné au final elle devient toute petite bref je suis débutant soyer indulgent

AbcAbc6

20 janvier 2020 à 22:56:31

Bonsoir, les balises <pre> c'est dans le cas ou vous utilisez l'éditeur du forum en mode Markdown.

Dans le cas ou vous utiliser l'éditeur du forum en mode html c'est via l'outil d'intégration de code soit le bouton code </> qu'il faut insérer votre code.

en image cela donne :

Passez votre code au validateur https://validator.w3.org/#validate_by_input pour l’ HTML et http://jigsaw.w3.org/css-validator/ pour le CSS. Vous avez des erreurs de syntaxe.

Pour votre code HTML :

Vous ouvrez des <div> que vous ne fermer jamais.

Je vous invite à lire le cours HTML/CSS de ce site, notamment pour les formulaires. Il vous manque la balise <form>, un input de type submit pour l'envoie des données, et un label ne peut être vide (cela n'a aucun sens d'écrire un label vide).

Vous commencer par un <h4> cela devrait être un <h1>. Vous ne devez pas utiliser les titres pour leurs apparence de taille par défaut, c'est comme les chapitres d'un livre, on commence par le premier et on ne saute pas de chapitres (=> idem avec les niveaux de titres.) A lire https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document

Coté CSS :

Vous avez une accolade de trop juste après le sélecteur input, label {}

Pas de width : 100% à un block lire https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

Dans la class .menu-ind c'est des virgules comme séparateur de valeur de rgba();

Corriger déjà cela et on voit après votre problème. Reposter votre code corriger et la description de vos difficultés si il y en a toujours.

-
Edité par AbcAbc6 20 janvier 2020 à 22:59:02

JacquesN'Guessan1

22 janvier 2020 à 17:46:09

 <!DOCTYPE html>
<html lang="fr-FR">
<head>
	<title>musique gratuite, telechargement mp3</title>
	<meta charset="utf-8">
	<meta name="viewpott" content="width=device-width, initial-scale=1.0">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" >
	<meta name="description" content="site de telechargement de musique" >
	<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
	<header>
		<h1 style="float: left">Musik&Me</h1>
        <input type="search" placeholder="rechercher de la musique" class="barre" >
		<label for="barre" ><a class="rbarre" style="color: black">recherche</a></label>
		<a href="#" id="lien">Se connecter</a>
	</header>
	<nav>
	<div class="table">
		<ul>
			<li class="menu-les">
				<a href="#">Les plus telecharges</a>
			</li>
			<li class="menu-genre">
				<a href="#">Genre</a>
			</li>
			<li class="menu-top">
				<a href="#">Top 10</a>
			</li>
			<li class="menu-pro">
				<a href="#">A propos</a>
			</li>
			<li class="menu-con">
				<a href="#">Contactez nous</a>
			</li>
		</ul>
	</div>
	</nav>
	
			<img src="bano.jpg"  width="100%" height="100%">
		    
		
	
	<footer>
		<p>copyright 2019 N'guessan jacques - Toute reproduction interdite</p>
	</footer>
</body>
</html>

body{
	font-family: 'century gothic', colibri, serif;
	font-size: 13px;
	margin: 0px;
	padding: 0px;
}

h1{
	font-size: 40px;
	font-weight: normal;
	text-align: center;
}
#lien{
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
	font-weight: normal;
	color: black;
	font-size: 35px;
	text-align: center;
	padding: 30px;
	position: absolute;
}

header{
	height: 100px;
}

footer{
	height: 80px;
	padding-top: 30px;
	text-align: center;
	background-color: #C5C5C5;
	border-top:2px solid #AAA;
} 


nav{
	width: 100%;
	background-color: #424558;
}

nav ul{
	margin: 0px;
	padding: 0px;

}

nav li {
	list-style-type: none;
	float: left;
}

nav a{
	display: inline-block;
	text-decoration: none;
	padding: ;
	color: #FFF;
	text-transform: uppercase;
	font-size: 15px;
}
.table{
	display: table;
	margin: 0 auto;
}
.menu-les:hover, {
	border-top: 5px solid #4C8;
	background-color: rgba(64, 200. 130. 0.15);
}
.menu-genre:hover, {
	border-top: 5px solid #f1dc4f;
	background-color: rgba(241, 211, 79, 0.15);
}
.menu-top:hover, {
	border-top: 5px solid #0070BB;
	background-color: rgba(000, 112, 192, 0.15);
}
.menu-pro:hover, {
	border-top: 5px solid #e44d26;
	background-color: rgba(228, 77, 38, 0.15);
}
.menu-con:hover, {
	border-top: 5px solid #e44d26;
	background-color: rgba(176,223,215,0.15);}

nav li:hover a{
	padding: 15px 38px 20px 30px;  
}

 
@media screen and (max-width: 780px){
	header{
		height: 50px;
	}
	h1{
		font-size: 28px;
		margin: 20px 0px 0px 0px;
	}
}
nav li a{
	font-size: 22px;
	padding: 10px;
}
nav li:hover a{
	padding: 5px 10px 10px 10px;
}

.barre{
	position: absolute;
	border-color: black;
	top:40px;
	margin-left:25%;
	height: 28.5px;
	
	
}

.rbarre{
	position: absolute;
    height: 25px;
    width: 90px;
	top: 40px;
	margin-left:45%;
	border: 2px solid
}

#lien{
position: absolute;
right: 35px;
}

voici ma nouvelle page conçue grâce a l'aide d'un tuto aider moi a crée une nouvelle bannière en dessous de la première ça me ferait énormément plaisir j'ai vraiment envie de travailler et de devenir un grand codeur mais c'est un peu compliqué j'ai vraiment besoin d'aide je suis motivé et j'a aussi besoin de vos idées et suggestion pour mon site

-
Edité par JacquesN'Guessan1 22 janvier 2020 à 17:51:49

Mehddii

22 janvier 2020 à 18:10:35

Comment ça ? Tu dispose de deux niveaux c'est ce qu'il te faut non ? Le premier pour la barre de recherche et deuxième un nav de menu, c'est ce à quoi fait référence le prof sur le tableau.

Que veux-tu dire par nouvelle bannière en dessous de la première ?

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

AbcAbc6

22 janvier 2020 à 18:26:25

Bonjour, L7 tu as dupliquer la ligne précédente => à supprimer.

Entre la L13 et L14 il te manque la balise <form> puisque tu as des éléments de formulaire qui suivent. => voir le cours pour savoir comment l'écrire. (il te manque un input type submit)

Si tu indiques un attribut for sur le label, il faut indiquer un attribut id de la même valeur sur l'input correspondant. N’hésite pas à te documenter via la doc MDN qui est bien faite et en français, notamment.

Le lien dans le label n'a, à mon sens, rien à y faire.

Ensuite ta liste ce trouve seul dans une <div> pourquoi? Indiques la class directement sur la balise <ul>

Pour l'image qui suit, il lui manque l’attribut alt qui est obligatoire pour la balise <img>, mais si c'est une bannière c'est une image de décoration, elle devrait ce trouver dans la CSS et non pas dans le HTML.

Vu ton édit :

En css l'utilisation des positions absolues n'est pas recommandés pour le positionnement des éléments, c'est une erreur que font beaucoup de débutant. Je te recommande de te documenter sur l'utilisation de flexbox. Voir dans le cours HTML/CSS de ce site mais également https://la-cascade.io/flexbox-guide-complet/

Organise ton fichier CSS, ajoute des commentaires pour t'y retrouver dans 6mois ou 1an, mais surtout place les media queries à la fin.

Pas de virgule après le :hover dans tes sélecteurs cela désactive la règles entière.

JacquesN'Guessan1

23 janvier 2020 à 23:32:36

ok merci j'ai revu et corriger tout ça mais finalement j'ai toujours pas eu d'aide pour mon projet je voudrais être guidé et aider afin d'avoir un meilleurs rendu mais personne n'est décider a m'aider alors je boss tout seul j’enverrais bientôt mon code pour que voyez ce que j'ai pu produit et me donner votre avis la dessus et sur ce qui faut changer et rectifier. merci au plaisir de vous relire a très bientôt

AbcAbc6

24 janvier 2020 à 0:09:44

JacquesN'Guessan1 a écrit:

ok merci j'ai revu et corriger tout ça mais finalement j'ai toujours pas eu d'aide pour mon projet je voudrais être guidé et aider afin d'avoir un meilleurs rendu mais personne n'est décider a m'aider [...]

Bonsoir, alors la je ne suis pas d'accord, vous avez reçu de l'aide par rapport au code que vous avez écrit, et solutions ont étés données.

[...] alors je boss tout seul [...]

Mehddii et moi même avons pris de notre temps pour vous répondre, vous vous attendiez à quoi? Que l'on face le taf pour vous? Que l'on vous écrivent un code tout près?

Vous avez reçu de l'aide, à vous d'en faire ce que vous voulez, la prendre pour évoluer par vous même ou bien la laisser.

Non mais, des réactions de ce genre, j'en tombes de ma chaise. :waw:

Mehddii

24 janvier 2020 à 6:37:46

Tout à fait d'accord avec AbcAbc6. En attendant, tu n'a toujours pas répondu à ma question :

Mehddii a écrit:

Que veux-tu dire par nouvelle bannière en dessous de la première ?

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

JacquesN'Guessan1

27 janvier 2020 à 12:58:34

AbcAbc6 a écrit:

JacquesN'Guessan1 a écrit:

ok merci j'ai revu et corriger tout ça mais finalement j'ai toujours pas eu d'aide pour mon projet je voudrais être guidé et aider afin d'avoir un meilleurs rendu mais personne n'est décider a m'aider [...]

Bonsoir, alors la je ne suis pas d'accord, vous avez reçu de l'aide par rapport au code que vous avez écrit, et solutions ont étés données.

[...] alors je boss tout seul [...]

Mehddii et moi même avons pris de notre temps pour vous répondre, vous vous attendiez à quoi? Que l'on face le taf pour vous? Que l'on vous écrivent un code tout près?

Vous avez reçu de l'aide, à vous d'en faire ce que vous voulez, la prendre pour évoluer par vous même ou bien la laisser.

Non mais, des réactions de ce genre, j'en tombes de ma chaise. :waw:

bref je vous remercie de vôtres aide mais c'est pas a ça que je m'attendais, je m’attendais a être guider du genre les démarche a suivre pour créer un menu comme dans le cahier des charges et des idées pour embellir mon site des chose comme ça mais je suis qu'a même heureux de vos correction apporter a mon code vous m'avez rediriger sur des cours qui mon aider, j'ai pu creer un truc de ce genre merci de faire vos remarque en vue d'

 <!DOCTYPE html>
<html lang="fr-FR">
<head>
	<title>musique gratuite, telechargement mp3</title>
	<meta charset="utf-8">
	<meta name="viewpott" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="site de telechargement de musique" >
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		
		<h1 style="float: left"><a href="monart-1.html" style="text-decoration: none;" ><span id="b" style="font-family: 'Shadows Into Light', cursive;">M</span><span id="b" style="font-family: 'Abril Fatface', cursive;">u</span><span id="n" style="font-family: 'EB Garamond', serif;">s</span><span id="j">i</span><span id="o1">k</span><span id="u">&</span><span id="r" style="font-family: 'Economica', sans-serif;">M</span><span id="r" style="font-family: 'Special Elite', cursive;">e</span></a></h1>

		
		<div id="searchbar">
                
              
			<form action="" class="formulaire">
			<input class="champ" type="text" value="" style="font-family:'Shadows Into Light', cursive; " placeholder="Recherchez des artistes,des groupes,des titres..."  />

			<div class="bouton">
			<button  type="submit"><img src="b.png" alt="image du bouton" style="height: 35px;"></button>
            </div>
            </form>
            </div>

		<a href="#" id="lien">Se connecter</a>
	</header>
	<nav>
	<div>
		<ul class="table">
			<li class="menu-les">
				<a href="#">Les plus telecharges</a>
			</li>
			<li class="menu-genre">
				<a href="#">Genre</a>
			<ul class="sousmenu">
				<li><a href="#">Rap</a></li>
				<li><a href="#">Variété francaise</a></li>
				<li><a href="#">Zouk</a></li>
				<li><a href="#">Slow</a></li>
				<li><a href="#">Pop</a></li>
				<li><a href="#">Rock</a></li>
				<li><a href="#">R&b</a></li>
				<li><a href="#">Punk</a></li>
				<li><a href="#">Metal</a></li>
				<li><a href="#">Jazz</a></li>
				<li><a href="#">Disco</a></li>
			</ul>
			</li>
			<li class="menu-top">
				<a href="#">Top 10</a>
			</li>
			<li class="menu-pro">
				<a href="#">A propos</a>
			</li>
			<li class="menu-con">
				<a href="#">Contactez nous</a>
			</li>
		</ul>
	</div>
	</nav>
	
			<img src="h.jpg"  width="100%" height="100%" alt="image_de_fond">
		    
		
	
	<footer>
		<p>copyright 2019 N'guessan jacques - Toute reproduction interdite</p>
	</footer>
</body>
</html>

body{
	font-family: 'century gothic', colibri, serif;
	font-size: 13px;
	margin: 0px;
	padding: 0px;
}

h1{
	font-size: 40px;
	font-weight: normal;
	text-align: center;
}
#lien{
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
	font-weight: normal;
	color: black;
	font-size: 35px;
	text-align: center;
	padding: 30px;
	position: absolute;
	text-decoration: none;
	font-family: 'EB Garamond', serif;



}
div a{
	display: inline-block;
	text-decoration: none;
}
div li:hover .sousmenu{
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 0px;
	z-index: 1000;
}
.sousmenu li{
	border-bottom: 1px solid #d2dae2;

}
.sousmenu li a{
	padding: 15px 30px;
	font-family: 13px;
	color: #808e9b;
	width: 270px;
}
.sousmenu{
	display: none;
}
div > ul::after{
	content: "";
	display: block;
	clear: both;

}
div > ul{
	margin: 0px;
	padding: 0px;
}
div > ul > li{
	float: left;
	position: relative;
}
div > ul > li a{
	padding: 10px 10px;
	color: #fff;
	
}
.menu-genre .sousmenu{
	background-color: rgba(245, 220, 80);
}
.sousmenu li:hover a{
	color: #EEE;
	font-weight: bold;
}
.menu-genre .sousmenu li:hover{
	background-color: rgba(210, 77, 60);
}

div li{
	list-style-type: none;
}
body{
	margin: 0px;
	padding: 0px;
}
#b{
	color: #eb4d4b;
}
#n{
	color: #c7ecee;
}
#j{
	color: #A3CB38;
}
#o1{
	color: #0652DD;
}
#u{
	color: #9AECDB;
}
#r{
	color: #f1f2f6;
}

header{
	height: 100px;
	background-color: #7ed6df;
}

footer{
	height: 80px;
	padding-top: 30px;
	text-align: center;
	background-color: #3c40c6;
	border-top:2px solid #AAA;
} 


nav{
	width: 100%;
	background-color: #1e272e;
}

nav ul{
	margin: 0px;
	padding: 0px;

}

nav li {
	list-style-type: none;
	float: left;
	text-decoration: none;
}

nav a{
	display: inline-block;
	text-decoration: none;
	padding: ;
	color: #FFF;
	text-transform: uppercase;
	font-size: 15px;
}
.table{
	display: table;
	margin: 0 auto;
}
.menu-les:hover {
	border-top: 5px solid #4C8;
	background-color: rgba(64, 200. 130. 0.15);
}
.menu-genre:hover {
	border-top: 5px solid #f1dc4f;
	background-color: rgba(241, 211, 79, 0.15);
}
.menu-top:hover {
	border-top: 5px solid #0070BB;
	background-color: rgba(000, 112, 192, 0.15);
}
.menu-pro:hover {
	border-top: 5px solid #e44d26;
	background-color: rgba(228, 77, 38, 0.15);
}
.menu-con:hover {
	border-top: 5px solid #BBB;
	background-color: rgba(220,220,220,0.15);}

nav li:hover a{
	padding: 15px 38px 20px 30px;  
}

 


.barre{
	position: absolute;
	border-color: black;
	top:40px;
	margin-left:25%;
	height: 28.5px;
	
	
}
.bouton{
	margin-top: -42px;
	margin-left: 395px;
}

.rbarre{
	position: absolute;
    height: 25px;
    width: 90px;
	top: 40px;
	margin-left:45%;
	border: 2px solid
}

#lien{
position: absolute;
right: 35px;
}


#site-search{
	position:relative;
	width: 300px;
	height:25px;
	top: 20px;
	left: 145px;
}
#search-music{
	bottom: 15px;

}
#searchbar { 
	width: 320px;
	text-align: center;
}
.formulaire { 
	box-shadow: none;
	
}
#bouton{
	margin-top: 5px;
}
#searchbar{
	margin-top: 25px;
	position: absolute;
 	width:1040px;
 	height:auto;
}
.formulaire {
	display:inline-block;
}

.champ {

	width:320px;
 	height:35px;

}

@media screen and (max-width: 780px){
	header{
		height: 50px;
	}
	h1{
		font-size: 28px;
		margin: 20px 0px 0px 0px;
	}
}
nav li a{
	font-size: 22px;
	padding: 10px;
}
nav li:hover a{
	padding: 5px 10px 10px 10px;
}

améliorer mon site

création d'un site de téléchargement de musique

avec le graphique du type comme ci dessous !

Merci de colorer votre code à l'aide du bouton Code

Liens conseillés

Supprimer

Modérer

Signaler le message aux modérateurs