Partage

Création de site

Sujet résolu

9 décembre 2017 à 16:33:13

Bonjour a tous et a toutes ,

Donc voila j'ai un petit site a réaliser , plutôt facile , mais j'ai un problème au niveau du menu de navigation , et de l'adaptation de l'image pourriez vous m'aider pour cela ? Merci beaucoup voici mon début de code HTML , au niveau du CSS pour le menu de navigation , cela doit ressembler a cette photo, merci .

<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <link rel="stylesheet" href="style2.css">
  <link rel="icon" type="image/png" href="/images/logo.png">
</head>



<body>



 <div class="nav">  <!-- Menu de navigation-->	
				<p> Demo </p>
				<a class="section" href="""><span>Contact </span></a>
				<a class="section" href=""><span>Projets </span></a>
				<a class="section" href=""><span>A propos </span></a>		
				<a class="section" href=""><span>Accueil </span></a>		
	</div>

 <img src="kaws.jpg" alt="image" />


<p> <h1> Main Section </h1>
	Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.
</p>

<p> <h2> Sub-Section </h2>
	Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.
</p>


	
</body>
</html>

FloJDM

9 décembre 2017 à 16:53:22

Salut,

Moi perso j'aurai fait une div qui englobe deux autres div avec d'un coté ton image et de l'autre ton menu, le tout en display flex et ça devrait faire l'affaire.

-> Hébergement GRATUIT <- Parfait pour débuter/dev/test/...

noopy360

9 décembre 2017 à 17:14:45

salut moi j'aurais plus fait un truc du genre

<!DOCTYPE HTML>
<html lang="fr">
	<head>
  		<meta charset="utf-8" />
		<title>YanisAmraoui</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<header>
			<h1>DEMO</h1>
			<nav>
				<a href="#">Accueil</a>
				<a href="#">A propos</a>
				<a href="#">Projets</a>
				<a href="#">Contact</a>
			</nav>
		</header>
		<img src="http://via.placeholder.com/800x600" alt="placeholder" />
		<section>
			<article>
				<h2>Main Section</h2>
				<p>
					Orientis vero limes in longum protentus et rectum ab Euphratis fluminis ripis ad usque supercilia porrigitur Nili, laeva Saracenis conterminans gentibus, dextra pelagi fragoribus patens, quam plagam Nicator Seleucus occupatam auxit magnum in modum, cum post Alexandri Macedonis obitum successorio iure teneret regna Persidis, efficaciae inpetrabilis rex, ut indicat cognomentum.
					Orientis vero limes in longum protentus et rectum ab Euphratis fluminis ripis ad usque supercilia porrigitur Nili, laeva Saracenis conterminans gentibus, dextra pelagi fragoribus patens, quam plagam Nicator Seleucus occupatam auxit magnum in modum, cum post Alexandri Macedonis obitum successorio iure teneret regna Persidis, efficaciae inpetrabilis rex, ut indicat cognomentum.
					Orientis vero limes in longum protentus et rectum ab Euphratis fluminis ripis ad usque supercilia porrigitur Nili, laeva Saracenis conterminans gentibus, dextra pelagi fragoribus patens, quam plagam Nicator Seleucus occupatam auxit magnum in modum, cum post Alexandri Macedonis obitum successorio iure teneret regna Persidis, efficaciae inpetrabilis rex, ut indicat cognomentum.
				</p>
			</article>
			<aside>
				<h3>Sub-section</h3>
				<p>
					Orientis vero limes in longum protentus et rectum ab Euphratis fluminis ripis ad usque supercilia porrigitur Nili, laeva Saracenis conterminans gentibus, dextra pelagi fragoribus patens, quam plagam Nicator Seleucus occupatam auxit magnum in modum, cum post Alexandri Macedonis obitum successorio iure teneret regna Persidis, efficaciae inpetrabilis rex, ut indicat cognomentum.
				</p>
			</aside>
		</section>
	</body>
</html>

body{font-family:arial; margin:0; padding:0;}
a{text-decoration:none; color:inherit;}
header{height:70px; display:flex; justify-content:space-between; align-items:flex-end; padding:0 0 20px 0;}
header h1{margin:0; padding:0;}
header nav{display:flex;}
header nav a{display:block; margin:0 20px;}
header nav a:hover{text-decoration:underline;}
img{width:100%;}
section{display:flex;}
article{width:70%;}
aside{width:30%;}
section h2, section h3{margin:10px 0; padding:0;}
@media screen and (max-width:800px){
	header{display:block; height:auto; padding:0;}
	header nav{display:block; text-align:center;}
	header nav a{height:40px; line-height:40px; font-size:20px; margin:5px 0; background:lightgrey;}
	section{display:block;}
	article, aside{width:100%;}
}

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

GuillaumeBo1

10 décembre 2017 à 12:24:48

FloJDM a écrit:

Salut,

Moi perso j'aurai fait une div qui englobe deux autres div avec d'un coté ton image et de l'autre ton menu, le tout en display flex et ça devrait faire l'affaire.

Faut arrêter avec les div dans des div dans des div c'est inutile à souhait. de plus la balise <div> est à éviter et préconiser les balises <header> <nav> <main> <section> <article> <aside> <footer> et j'en passe qui on un rôle précis. <div> seulement en dernier recours.

Un homme azerty en vaut deux.

Lucky13

10 décembre 2017 à 14:34:13

Hello,

Et des span dans les liens ?

<a class="section" href="""><span>Contact </span></a>

Je ne vois pas l'utilité, une liste à puce dans un <nav> aurait plus de sens; et oui, utiliser flexbox tant qu'à faire comme le propose noopy360

-
Edité par Lucky13 10 décembre 2017 à 14:37:46

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

AntoineDupre

11 décembre 2017 à 12:40:43

Coucou perso j'utilise les col de bootstrap

EmmanuelBeziat

11 décembre 2017 à 13:15:01

GuillaumeBo1 a écrit:

la balise <div> est à éviter et préconiser les balises <header> <nav> <main> <section> <article> <aside> <footer> et j'en passe qui on un rôle précis. <div> seulement en dernier recours.

Je ne suis pas d'accord avec ça. une balise div n'a pas à être plus "évitée" qu'une autre. Chaque balise s'utilise en fonction d'un besoin. Si un élément n'a pas de rôle précis, on lui met une div, et ça ne pose aucun problème. C'est une balise comme une autre, et son rôle est justement de ne pas avoir de rôle, et donc d'être parfaite pour faire de la structure.

Oui, il faut éviter la surenchère, mais c'est également valable pour n'importe quelle autre balise.

Par contre, moi ce que je relève dans le code, ce sont les paragraphes qui contiennent des titres. À corriger !

Lucky13 a écrit:

Hello,

Et des span dans les liens ?
<a class="section" href="""><span>Contact </span></a>
Je ne vois pas l'utilité, une liste à puce dans un <nav> aurait plus de sens; et oui, utiliser flexbox tant qu'à faire comme le propose noopy360

Là je ne pense pas que ce soit le cas, mais un span dans le lien peut être utilisé pour avoir un effet particulier au survol, ou tout simplement pour masquer le texte tout en le gardant présent (accessibilité). Mais en effet, là ça ne semble pas être exploité.

Par contre non, une liste à puce n'a rien d'obligatoire pour un menu. Des liens dans une nav suffisent parfaitement. Une liste va avoir plus d'intérêt quand on va vouloir avoir des sous-menus, pour garder une structure cohérente (toujours pour de l'accessibilité, par exemple).

AntoineDupre a écrit:

Coucou perso j'utilise les col de bootstrap

Alors je vais pas dire que c'est pas une bonne chose, mais franchement c'est pas tip top. Charger Bootstrap, qui est pachydermique, mal foutu, vieillissant et pénible à exploiter pour du design. Alors si c'est juste pour utiliser la grid, et à peine faire deux colonnes, franchement je déconseille fortement à l'OP de s'encombrer de ça ici.

My 2 cents.

Joyeuses fêtes!

-
Edité par EmmanuelBeziat 11 décembre 2017 à 13:26:09

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

Lucky13

11 décembre 2017 à 13:45:51

Hello rhooManu,

Alors :

une liste à puce n'a rien d'obligatoire pour un menu : oui et heureusement, pas de souci la dessus. Néanmoins je propose cette solution vu la demande (croquis), une liste peut simplifier la mise en place vu le contexte.

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

EmmanuelBeziat

11 décembre 2017 à 15:30:05

Ch'pas, je trouve que justement ça serait trop, moi. Pour les deux affichages, je vois pas de besoin de liste

Même pas besoin de flex, d'ailleurs (et ça se fait rare de nos jours!).

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

Ivaalo

11 décembre 2017 à 15:32:10

Pour revenir à ton problème, sur ordi et tablette, garde ton menu en float: right (ou équivalent, comme flex ou même inline-block), puis, dans ton @media, change tes liens (qui sont normalement en inline-block... ou équivalent) en block, et enlève l'effet float du conteneur. Et voilà !

Le secret du SEO. Merci !

Lucky13

11 décembre 2017 à 16:27:43

Oui je comprend ce que tu veux dire

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

YanisAmraoui

11 décembre 2017 à 18:59:40

Tout d'abord je tenait a vous remercier énormément , je ne m'attendais pas a une communauté aussi généreuse envers les autres et qui partage autant son savoir , j'ai tout ce qu'il me faut , j'ai réussi a faire ce que je voulez j'ai du rajouter les fonts , remanier les quelque detail qu'il fallait mais tous vos conseil ont était précieux je vous remercie énormément et vous souhaite de bonnes fêtes de fin d'années .

EmmanuelBeziat

11 décembre 2017 à 19:07:40

On t'en prie !

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