1486 sujets

Web Mobile et responsive web design

Responsive design avec media query

Bonjour à tous,
J'ai écouté plusieurs vidéos sur la façon de coder en media query. Je n'ai pas réussi à trouver cependant le bon codage en vue de donner un design responsive à mon site. Je sollicite donc l'aide d'un développeur averti. Voici l'organisation de mon site:
- Une page index avec un logo, une barre de menu (déroulant), une image (photo), une colonne gauche qui contient une fb-page (page déroulante facebook), un petit logo facebook qui renvoie sur ma page facebook, un titre h1, un contenu et un footer. Les autres pages ont la même structure, sauf celle qui présente mes livres.
La page qui présente mes livres contient, outre les div et autres de la page index, une image pour les ebook (avec à l'intérieur un lien qui renvoie vers Amazon), une image pour la version papier (avec à l'intérieur un lien également) et un lien pour l'extrait du livre.
Il y a aussi une page contact qui contient un formulaire avec un label prénom, un label email, un textarea message et un "input submit".

Merci d'avance pour votre aide.

Voici ci-après ma page index:


<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Accueil</title>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="fichier-css/page-menu.css">
		<link rel="stylesheet" href="fichier-css/index.css">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="auteur" content="François de Calielli">
		<meta name="description" content="page de bienvenue du site"/>
		<meta name="reply-to" content="decalielli@gmail.com">
		<meta name="robots" content="index, follow">
		<link rel="stylesheet" type="text/css" href="fichier-medias-queries.css">
	
		</head>
		
		<div id="logo">
			<img src="fichier-images/logo_atypic.jpg" alt= Le logo de mon site d'auteur class=”full-width-img”/>
			<img src="fichier-images/Atypical_autoedition.jpg" alt= L'entête du site class=”full-width-img”/>
		</div>
	<body>
		<div id="barre-menu">
			<nav>
			
				<label for="menu-mobile" class="menu-mobile">Menu</label>
				<input type="checkbox" id="menu-mobile" role="button">
				
				<ul>
				<li class="menu-index"><a href="index.html">Accueil</a></li>
				<li class="menu-a_propos"><a href="a_propos.html">A propos de moi</a></li>
				<li class="menu-livres"><a href="livres.html">Mes livres</a>
					<ul class="submenu">
						<li><a href="romans.html">Les romans</a></li>
						<li><a href="essais.html">Les essais</a></li>
						<li><a href="poesies.html">Les poésies</a></li>
						<li><a href="theatre.html">Les pièces de théâtre</a></li>
				
					</ul>
					</li>
					
				<li class="menu-contact"><a href="contact.html">Contact</a></li>
				<li class="menu-merci"><a href="merci.html">Merci!</a></li>
				
					</ul>
				</li>
			</nav>
		</div>
	</body>
</html>
<html>
<body>
		<div id="colonne-gauche">
				<ul>
		
				<div id="fb-root"></div>
			
			<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v12.0" nonce="oFaS9Zcl"></script>
		<div class="fb-page" data-href="https://www.facebook.com/decalielli/atypical.autoedition" style="margin-top: 40px" data-tabs="timeline,events,messages" data-width="340" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/decalielli/atypical.autoedition" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/decalielli/atypical.autoedition">Tribune d&#039;auteurs</a></blockquote></div>
		<div style="height:33px; width:98px; display: block; margin-right: auto; margin-left: auto; margin-top: 30px" id="link">
		<a href="http://facebook.com/francois.decalielli.902" title="Suivez-moi sur facebook!"><img src="fichier-images/suivez-moi_facebook.png" /></a>		
		
				</div>
			
				</ul>
			</div>
			
			<h1 style="color: #875c1a; text-shadow: 1.5px 1.5px 1.5px black">Bienvenue sur le site Atypical Autoédition</h1>
		
		
		
		<p><img src="fichier-images/photo_color.jpg" style="margin-left:-25px" alt="ma photo"><h3><em>François de Calielli</em></h3></p> 
		
		
		
		<div id="contenu">
			
			<p style="font-size: 20px">Il s'agit de mon site d'auteur</p>
			<p>J'ai choisi de créer une marque, en l'occurrence <em><span style="color: #634009">Atypical Autoédition</em></span> pour mes livres./p>
			<p>J'espère que vous poursuivrez la visite de ce site avec le désir de découvrir mes oeuvres.</p>

			
		</div>		
		
		<div id="footer">

		</div>
	</body>
	</html>


modération : edit -> fermeture balise code
Modifié par niuxe (04 Feb 2022 - 20:48)
Bonjour,
dans un premier temps, ce serait bien que tu utilises les balises situées en bas du forum et qui permettent de présenter les différents codes; et ne pas laisser un bandeau noir non occupé... C'est plus facile pour lire le code.
Je ne suis pas un développeur averti, mais en gros :

- la première balise body doit être avant tout le reste, juste après </head>. Tes logos sont en dehors de body.
- un fichier css externe juste pour le menu ?
- à moins d'un site expérimental, title a un autre nom que Accueil.
- inverser la fermeture d'un li et ul (question de validité).
- il y a un </ul> qui ne ferme pas un <ul>, qui est absent.
- et on ne voit pas de css, mis à part du style qui se glisse à la fin dans le html ?
- Idem, si tu appelles les @medias dans un fichier css extérieur, on ne les voit pas non plus.
- un lien aiderait beaucoup, mais le site n'est peut-être pas encore accessible.
Il y a d'autres incohérences, je n'ai pas tout noté, c'est un peu confus.
Franchement, il y a des beaucoup de templates; il suffit de taper "template de sites web responsives" dans un moteur et tu en auras des centaines. Et reprendre un peu les bases en repartant du début - en-tête correcte, logos, menus = test pour voir, y compris en responsive. Ensuite, continuer avec le main, tester de nouveau, ensuite le footer.
Bonjour Bongota,
Merci pour tes remarques judicieuses.
Le lien avec le fichier @media queries est bien noté en haut de la page html, mais cela ne fonctionne pas.
Concernant les tutos sur les medias queries, entre autres, j'ai essayé d'appliquer leurs codages, mais rien ne fonctionne. C'est pourquoi, je cherche une aide dans ce forum.
Mon site n'est pas encore chez un hébergeur, car il n'est pas terminé et je préfère qu'il le soit avant cela.
Cordialement.
Il y a deux blocs <html> avec chacun leur bloc <body> ! (et effectivement des choses en dehors)

Il faudrait que l'on voit le contenu de fichier-medias-queries.css
@François29
Ce que je te conseille en tout premier, c'est de nous donner, bien formaté dans les balises du bas du forum, et ton html et ton css complet (pas des liens style.css que l'on ne peut atteindre).
Seulement à partir de là, des personnes pourront t'aider ici.
Modérateur
Et l'eau,

@François29 :
Bienvenue sur le forum, Smiley smile

Je t'ai édité ton post afin que les membres et moi-même puissent lire correctement ton code. Je t'invite à regarder comment j'ai fait. J'ai bien vu ton intention de le faire. Smiley smile

En ce qui concerne ton problème (je t'avoue avoir lu le code en Z). En un seul fichier tu veux afficher 2 pages HTML. Ça n'a pas de sens. Je t'invite à utiliser un validateur de code HTML. Ainsi, tu éviteras des bugs graphiques.

@bongota : +1
Allez, je dégrossi un peu le html. J'en ai sûrement oublié. Sans le css, c'est un peu difficile de savoir où aller. Et l'indentation du html n'est pas facile à lire sur une page étroite comme celle du forum. Merci niuxe, mais il faut jongler avec l'ascenseur horizontal...

- je ne vois pas trop l'intérêt de mettre les @medias dans une balise META. Ils vont dans le css, normalement. Idem pour le css du menu, à mettre dans le css général.
- une <meta charset="utf-8"> ne fera pas de mal.
- <body> tout de suite après </head> et bien sûr enlever celui qui est cinq lignes plus bas.
- dans le premier menu, il faut fermer avec </ul> avant de poursuivre avec le sous-menu, mais ça dépend de ce que tu veux ici.
- et plus loin ouvrir de nouveau avec <ul> (avant <li class="menu-contact"....), li doit être entouré de ul.
- à ce stade, tu peux laisser les deux balises fermantes html et body, la page est terminée et, comme le dit niuxe, tu dois faire une nouvelle page. En remettant le head et les balises META, comme sur la première, et avec un nouveau <title> correspondant à la page.
- sur cette seconde page, je ne vois pas bien ce que vient faire un ul qui entoure une div.
- après, c'est du style au milieu du html. On peut en mettre parfois un peu, pour des cas particuliers, mais en principe, le style doit aller dans le css.
- quand ton site sera prêt à être mis en ligne, mets un vrai titre (title), d'au moins 60 caractères, décrivant précisément ta page. C'est la balise la plus importante en référencement.

Il est tard, je laisse le soin à d'autres de continuer Smiley baille
Modifié par Bongota (04 Feb 2022 - 23:37)
Sujet clos
Aller à