5129 sujets

Sémantique web et HTML

Bonjour,
Je le sais je bricoles trop, et depuis six mois j'ai repris plusieurs de mes sites pour une sérieuse remise aux techniques actuelles !
Voila juste mon menu, j'ais tout mis dans le html (plus simple pour vous pour me corriger !
Merci d'avance de casser mon code et me guider ver une tout autre solution.

<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<style type='text/css'>
html, body{height:100%;}
body { background-color:#ffffff;font-family :Georgia, "Times New Roman", Times, serif; color :#000000; font-size :18px;} 
* { box-sizing:border-box; }
div.centre2blanc {height : auto;width : 90%;max-width : 1200px;margin : auto;text-align : center;}
a.lemenu {  color:#3F4057;  text-decoration:none;  font-size:24px;}
a.lemenu:link {}
a.lemenu:hover {color:#FF2222;}
a.lemenuA {  color:#aa2222;  text-decoration:none;  font-size:24px;}
</style>
</head><body>
<div class='centre2blanc'>
<br /><img src='imagevide.png' alt='Fox Infographie' class='levide' /><br />   <!-- un vide de 920*96px  -->
<a href='apropos.php' class='lemenu'  >A Propos</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='news.php' class='lemenu' >Les News</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' class='lemenuA' >Le-Blog</a>   <!-- le menu en cours  -->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='wphoto.php' class='lemenu' >Galeries</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='lien.php' class='lemenu' > Coup-de-Coeur </a>
&nbsp;&nbsp;<br /><br clear=both>
</div>
</body></html>

Mille mercis d'avance.
Modifié par Jean-Pierre-Bruneau (23 Nov 2019 - 13:51)
Bonjour,

Voici quelques améliorations que je peux vous proposer :
- mettre des noms de class plus parlant
- mettre des margin ou padding pour gérer les espaces (éviter les $nbsp; et les <br/>)
- l'image vide semble inutile, mettre un espace avec un margin
- si besoin d'un fond, utilser le background image
- éviter de mettre du css pour le plaisir. Quand ce n'est pas utilisé on retire

J'espère que ça vous aidera
Gus a écrit :
Bonjour,
Voici quelques améliorations que je peux vous proposer :
- mettre des noms de class plus parlant
- mettre des margin ou padding pour gérer les espaces (éviter les $nbsp; et les &lt;br/&gt;)
- l'image vide semble inutile, mettre un espace avec un margin
- si besoin d'un fond, utilser le background image
- éviter de mettre du css pour le plaisir. Quand ce n'est pas utilisé on retire J'espère que ça vous aidera

Merci de ta réponse, mais ce n'est pas ma question l'ami Smiley confused
*des noms plus parlant des Class ??
div.centre2blanc mes Div's centrés et à fond blanc c'est pas clair ?
lemenu et lemenuA (pour actif) pour moi c'est clair.
levide pour une image gif transparent !
* L'mage sert lorsque je mets un bandeau le menu arrive avec un espace en dessous
* OUI ok avec toi, pour virer ces vieux $nbsp; par contre que faire pour les retours à la ligne Smiley decu
Ce que j’attends par ma question c'est une clarification pour remplacer ce type de menu avec <LI et comment gérer le responsive ?
Et le top serait de m'aider a mettre ce menu basique en FLEX !
Merci
Salut

https://codepen.io/JUSEN/pen/vYYMmjY

Voila un menu très simple, responsive, flex.

j'ai pas repris le reste de ton css par contre.

bon j'ai mis un min-width: 525px;... mais pas grave.
suffit d'avoir une média quérie qui prend la suite.
Modifié par JENCAL (22 Nov 2019 - 13:46)
Meilleure solution
Genial l'Ami, tu est souvent là, et on aimes bien Smiley cligne
Tout marche mais que dois-je modifier dans la partie CSS
que je n'avais pas mentionnée:

/* __________________________media 640_____________________ */
@media (max-width:640px) {
body, element1, element2 {width : auto;margin : 0;padding : 0;}

img,blockquote, pre, textarea, input, iframe, object, embed, video {max-width : 100%;}
}