28114 sujets

CSS et mise en forme, CSS3

Best practice pour une carte de restaurant

Bonjour
j'ai un site avec une carte de restaurant.
https://restaurant-madame.fr/carte-menu-brasserie-four-braise/
je suis en train de remettre au propre avec un meilleur visuel, pour une meilleure navigation client.
je me suis penché sur le bloc "Les Plats" au milieu en utilisant ce qui me semblait être le + adéquat c-a-d un display:grid
résultat responsiv propre
toutefois pour mon utilisation j'ai un problème.
en effet lors de retour à la ligne sur petit écran les pointillés sont "déclenchés" en fin de ligne ; donc pas la première ; et comme il s'agit là de colonne j'ai du coup un espace qui gêne la lisibilité.
conclusion pas sûr que le display grid soit le plus adapté dans mon cas.
comment puis-je avoir mes points de conduite en pointillé IMMEDIATEMENT après chaque plat et JUSQU'AU prix ?
merci pour vos conseils
css utilisé actuellement
.grid {
display: grid;
grid-template-columns: minmax(100px , max-content) minmax(10% , auto) max-content;
grid-template-rows:auto;
padding-bottom:1%;
}
.box1 {
 text-align: left;
}
.box2 {
 border-bottom: 1px dotted #222;
}
.box3 {
 display: flex;
 align-self: flex-end;
}
le html qui avec
<div class="grid">
<div class="box1">Burger Madame: steak haché, cheddar, salade, tomate, oignon rouge, sauce cocktail, pomme de terre grenaille, mayonnaise maison au paprika</div>
<div class="box2"> </div>
<div class="box3">16.50</div>
</div>
<div class="grid">
<div class="box1">Salade de toast de chèvre chaud , lard, mousse de betterave et crudités, vinaigrette au miel</div>
<div class="box2"> </div>
<div class="box3">16.50</div>
</div>
Bonjour,

La page est très complexe, difficile de s'y retrouver.

Dans un premier temps, je dirai de laisser plus d'espace entre chaque plats car ça me semble trop serré.

upload/1699712594-61012-restomadame2.jpg
en résumant un peu ton html (pour l'exercice) on peut travailler sur :



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>test-resto Madame</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	
<div id="aLaCarte">
	
	<h4>A la carte</h4>
	
	<section id="entrees">
		<h5>Les Entrées</h5>
	
		<p class="dot">
			<span class="index">Terrine de campagne au cidre et ses toasts</span> 
			<span class="page">8.00</span>
		</p>
	</section>
	
	<section id="plats">
		<h5>Les Plats</h5>
	
		<div class="grid">
			<div class="box1">Burger Madame: steak haché, cheddar, salade, tomate, oignon rouge, sauce cocktail, pomme de terre grenaille, mayonnaise maison au paprika</div>
			<div class="box2"> </div>
			<div class="box3">16.50</div>
		</div>
	
		<div class="grid">
			<div class="box1">Salade de toast de chèvre chaud , lard, mousse de betterave et crudités, vinaigrette au miel</div>
			<div class="box2"> </div>
			<div class="box3">16.50</div>
		</div>
	
		<div class="grid">
			<div class="box1">Suprême de poulet , sauce normande, écrasé de pomme de terre et champignons sautés</div>
			<div class="box2"> </div>
			<div class="box3">17.50</div>
		</div>

		<div class="grid">
			<div class="box1">Salade de saumon fumé, œufs de truite, avocat, crudités, vinaigrette citron et aneth</div>
			<div class="box2"> </div>
			<div class="box3">17.50</div>
	</div>
	</section>

</div>
</body>
</html>
et avec le CSS : 


body{margin: 0; padding: 0; 
    background-color: #eee;
    font-family: Arial, sans-serif;
    font-size: 14px;}

#aLaCarte{
    padding: 1rem; color: grey; font-size: 0.8rem;}

h4{text-align: center; color: #dca6a3;}


section{margin-bottom: 2rem;}

h5{font-size: 0.7rem; color: rgb(79, 75, 75);
    letter-spacing: 3px; margin-bottom: -0.1rem;}

.grid {
    display: grid;
    grid-template-columns: minmax(100px , max-content) minmax(10% , auto) max-content;
    grid-template-rows:auto;
    padding-bottom:1%;

    margin-top: 0.5rem;}

.box1 {text-align: left;} 
.box2 {border-bottom: 1px dotted #222;}
.box3 {display: flex; align-self: flex-end;}
alain_47 a écrit :
Bonjour,

La page est très complexe, difficile de s'y retrouver.

Dans un premier temps, je dirai de laisser plus d'espace entre chaque plats car ça me semble trop serré.

upload/1699712594-61012-restomadame2.jpg


c'est prévu mais ça c'est facile je souhaite d'abord que la structure soit ok avant de "fignoler"
merci
drphilgood a écrit :
salut
un article du W3C sur les points de conduite / dot leaders

https://www.w3.org/Style/Examples/007/leaders.fr.html


très bonne suggestion, très bon code. c'est d'ailleurs celui que j'utilisai avant ... sauf que depuis une maj lorsque j'enregistre mon code il y a "une sorte de nettoyage de code" ; tous les spans sont virés et il remet la structure <li>blabla</li> à chaque ligne (logique sur le principe mais bousille le code donc le rendu souhaité ...)
je cherche donc une manière alternative
merci
tomg76 a écrit :


très bonne suggestion, très bon code. c'est d'ailleurs celui que j'utilisai avant ... sauf que depuis une maj lorsque j'enregistre mon code il y a "une sorte de nettoyage de code" ; tous les spans sont virés et il remet la structure &lt;li&gt;blabla&lt;/li&gt; à chaque ligne (logique sur le principe mais bousille le code donc le rendu souhaité ...)
je cherche donc une manière alternative
merci


mais tu m'as donné THE idée pour résoudre.
comme ce code est très bien "j'ai triché" en forçant mes balises <span> en leur affectant un attribut <span style="color:black;">
et hop
merci en tout cas

sauf meilleure idée (parceque ça flood un peu quand même beaucoup de code "inutile" et surtout très répété) je pars là-dessus
<h4 style="text-align: center; color: #dca6a3;">A la carte</h4>
<p>[divider height="20"]</p>
<h6 style="letter-spacing: 4px;">Les Entrées</h6>
<p>[divider height="20"]</p>
<ul class="leaders">
<li><span style="color: black;">Terrine de campagne au cidre et ses toasts</span><span style="color: black;">8.00</span></li>
<li><span style="color: black;">Salade de camembert roti, noix, marmelade de pomme , vinaigrette au miel</span><span style="color: black;">8.00</span></li>
<li><span style="color: black;">Tartare de truite et concombre , crème à l'aneth</span><span style="color: black;">8.50</span></li>
<li><span style="color: black;">Œuf parfait bio Bénédictine, saumon fumé, épinard, sauce hollandaise</span><span style="color: black;">8.50</span></li>
<li><span style="color: black;">12 Escargots de bourgogne, beurre à l'ail</span><span style="color: black;">9.00</span></li>
<li><span style="color: black;">Ravioles de langoustines et sa bisque</span><span style="color: black;">9.50</span></li>
<li><span style="color: black;">Royal de foie gras, juste tiédi, magret fumé, mâche, vinaigrette, sésame, brioche toastée</span><span style="color: black;">9.50</span></li>
<li><span style="color: black;">Os à moelle gratiné et sa tartine de campagne à l'ail</span><span style="color: black;">9.50</span></li>
</ul>
Prévenir un modérateur
Répondre au sujet
Aller à