Menu en display avec cellule de taille différentes

**mimigo78** · 14/03/2020, 13h20

Bonjour
je dois faire un menu en display avec des cellules de taille différentes.
la dernière cellule est beaucoup plus longue que les 3 autres.
j'ai essayé plusieurs manip mais les deux du milieu se déforme quand je change la taille de la dernière cellule.
voila mon code html:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta content="text/html" charset="utf-8" http-equiv="Content-Type">
	<title>devoir css</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
<div id="wrapper">
            <!-- header -->
        <header>
                        <h1>Le globule</h1>
						<nav class="main-menu espace-section">
									<ul>
														<li><a href="#">Accueil</a></li>
														<li><a href="#">Tous Nos Choix</a></li>
														<li><a href="#">Nos Triangles Ronds</a></li>
														<li><a href="#">Contacts</a></li>
									</ul>
							</nav>
      </header>
            <!-- fin header  -->
            <!-- bloc article  -->
			<section class="vignettes-container">
					<article class="vignette">
	<div class="boxy">
  <h2>Semi circle</h2>
  <div class="box box-5">
  </div>
</div>
						<h2>Globule globe</h2>
										<p class="italic">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac eros et elit maximus efficitur. Vivamus pharetra vehicula dignissim. Suspendisse at urna venenatis, lobortis justo at, faucibus turpis. Phasellus egestas turpis sit amet mi scelerisque iaculis. Integer dictum suscipit luctus. Integer purus nunc, gravida nec faucibus eu, tempus non tortor. Suspendisse velit est, interdum ac pellentesque quis, dignissim nec odio. Praesent at tellus lectus.
                    Etiam blandit bibendum justo a rutrum. Morbi ac vulputate massa. Sed pharetra, elit eget elementum porttitor, metus nibh bibendum mi, non tempus est nibh id turpis. Sed nec purus sollicitudin, fringilla odio ac, fringilla purus. Nam convallis facilisis iaculis. Phasellus blandit, orci id condimentum cursus, lectus turpis ultricies metus, ut feugiat lacus enim id nunc. Integer et nibh vitae risus laoreet mattis. Ut orci nunc, tempus quis orci vitae, gravida mollis magna.
										</p>
					<h2>Globule pas globe</h2>
										<p>
										 Nullam non risus mauris. Donec eu pulvinar ex. Vestibulum a rutrum libero. Mauris vel leo ipsum. Nam pharetra felis a nunc sagittis ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec at arcu quis nisi convallis vestibulum. Vestibulum auctor, nisl sit amet efficitur dignissim, sapien tellus maximus sapien, non aliquet nisl orci at urna. Donec et tortor non enim volutpat ornare. Donec eget volutpat mi. Fusce ullamcorper augue et massa hendrerit posuere. Nullam molestie neque eros, sit amet ullamcorper lorem interdum quis.</p>
										 <p class="margintop">
                     Praesent eleifend, purus sit amet elementum fermentum, elit orci semper felis, non dignissim dui dui eu arcu. Mauris id euismod tellus. Morbi porttitor, ligula porttitor semper viverra, dolor ipsum eleifend libero, aliquam molestie lorem dolor at velit. Vivamus vitae semper lectus, nec ullamcorper ex. Phasellus id finibus justo. Donec ullamcorper enim at tristique bibendum. Proin laoreet convallis nunc. Nam mollis semper elit, et interdum arcu maximus at. Cras lacinia neque ac ipsum posuere placerat. Pellentesque nec gravida enim, eget varius ex. In finibus nunc et ex mattis ultricies. Donec efficitur dui et pharetra eleifend. Ut dolor urna, convallis in tincidunt in, pulvinar vitae justo. Phasellus auctor nibh quis lobortis ullamcorper. Nulla convallis aliquam leo, at varius massa lobortis vitae. Cras maximus urna purus, sed convallis massa euismod sed.</p>
                     <p class="margintop">
										Fusce quis quam sed elit egestas porta. Etiam ac efficitur odio, at porttitor purus. Phasellus in ex suscipit, convallis sapien sed, vulputate massa. In ornare diam mi, in venenatis sem pellentesque vitae. Nullam cursus elit dui, pulvinar lobortis felis faucibus convallis. Vivamus non arcu turpis. Pellentesque arcu ligula, rutrum id mauris nec, tempus dictum lorem. Phasellus varius aliquam sem at blandit. Proin tristique feugiat tempor. Nunc gravida vel lacus eu pharetra. Etiam quis iaculis enim. Vivamus sit amet tincidunt est. Maecenas vel euismod turpis. Duis condimentum ut urna a sodales.</p>
				<h2>Tip globule au top du blog</h2>
										<p>
										Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin euismod dictum tortor, nec molestie dui. Donec porttitor est magna, non eleifend lorem interdum et. Nunc varius mollis ex ut placerat. Etiam egestas dictum metus, ac porta orci auctor in. Vivamus blandit, lorem ut dignissim gravida, elit neque auctor mi, non semper ligula magna sed nisi. Integer faucibus lorem lectus, quis posuere felis accumsan ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius, tellus fringilla varius ultricies, nibh neque sodales nisl, id iaculis tellus nunc dignissim velit. Vestibulum ac tortor tincidunt ante vestibulum eleifend. Proin viverra, purus nec efficitur tristique, massa dui ornare dolor, sed congue nisi nunc ac metus. Nunc aliquam lorem non dui ullamcorper porta.
										Suspendisse sed congue sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus laoreet suscipit nunc. Ut eu metus eget sem viverra maximus. Duis sit amet porta libero, at convallis felis. Integer blandit a eros vitae tristique. Vestibulum quis est eu lacus sagittis volutpat sit amet ut nibh. Fusce fringilla neque eu enim viverra volutpat. Morbi ante erat, fermentum id mattis congue, faucibus a elit. Etiam posuere congue tristique. Pellentesque sit amet felis accumsan, tempus enim et, dictum lacus. Maecenas vehicula posuere ante, vitae gravida mauris commodo sit amet. Proin vel blandit libero, nec tempus justo. Nulla et ex in lectus ullamcorper faucibus. Aliquam non metus fermentum, ultrices nunc at, fringilla urna. Aliquam dapibus lorem maximus, laoreet quam ac, semper augue.
										</p>
				          </article>
									<article class="vignette">
										<h2>Pas globe</h2>
										<p class="italic">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac eros et elit maximus efficitur. Vivamus pharetra vehicula dignissim. Suspendisse at urna venenatis, lobortis justo at, faucibus turpis. Phasellus egestas turpis sit amet mi scelerisque iaculis. Integer dictum suscipit luctus. Integer purus nunc, gravida nec faucibus eu, tempus non tortor. Suspendisse velit est, interdum ac pellentesque quis, dignissim nec odio. Praesent at tellus lectus.
										</p>
										<h2>Pas blog</h2>
										<p>
										 Nullam non risus mauris. Donec eu pulvinar ex. Vestibulum a rutrum libero. Mauris vel leo ipsum. Nam pharetra felis a nunc sagittis ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec at arcu quis nisi convallis vestibulum. Vestibulum auctor, nisl sit amet efficitur dignissim, sapien tellus maximus sapien, non aliquet nisl orci at urna. Donec et tortor non enim volutpat ornare. Donec eget volutpat mi.
									  </p>
									</article>
					</section>
</div>
 
</body>
</html>

Voici mon code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
* {
    margin: 0;
    padding: 0;
}
body {
    background-image: linear-gradient(to bottom,#000 0%,#ededed 30%);
    background-repeat:no-repeat;
    background-color:#F6F6F6;
    font-family: Arial, sans-serif;
}
#wrapper {
  background-color: #ededed;
  border-radius:12px;
	padding-top: 5px;
	width:1180px;
	margin: 4px auto;
}
h1 {
  margin: 0px auto;
  letter-spacing: 4px;
	font-family: Tahoma, Geneva, sans-serif;
	text-align: center;
	font-size: 50px;
	color:#139c19;
  text-shadow: -2px 3px 2px black;
}
h2 {
  color: #139c19;
  margin: 40px 10px 40px 5px;
  position:relative;
}
/*header*/
header {
	width: 1024px;
	height: 150px;
}
#titre {
  text-shadow: 2px, 3px, 2px, black;
}
.main-menu {
	text-align: left;
  padding:0;
  margin-left: 30px;
  margin-top: 18px;
  list-style: none;
}
.main-menu li{
	display: table-cell;
  width:100px;
}
.main-menu li a {
	color: #f2f2f2;
  width:100px;
  background:linear-gradient(to bottom,#444 0%,#111 30%);
  font-family: Verdana, sans-serif;
  border-style: none;
  text-decoration: none;
  font-weight:bold;
  display:block;
	font-size: 12px;
  padding: 18px 30px 18px 30px ;
  box-shadow: 1px 2px 1px #9c9c9c;
}
.main-menu li:first-child a{
	border-radius:50px 0px 0px 50px;
}
.main-menu li:last-child a{
	border-radius:0px 50px 50px 0px;
  padding-right: 500px;
}
.main-menu a:hover {
	color: #333;
	background: linear-gradient(to bottom, #ddd 0%,#aaa 50%,#ddd 100%);
}
/*fin header*/
/*Bloc article*/
.vignettes-container .vignette{
display:table-cell;
vertical-align: middle;
}
.vignettes-container .vignette:first-child{
  width:70%;
  padding-left:40px;
  padding-right:20px;
}
.vignettes-container .vignette:last-child{
  width:30%;
  padding-left:20px;
  padding-right:40px;
  overflow:hidden;
}
.italic{
	font-style: italic;
}
.margintop{
	margin-top: 40px;
}
 
/*fin bloc 2*/
/*demi cercle*/
.box-5{
  background:#bfd70e;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  width:30px;
  height:40px;
  padding: 5px;
}
/*fin demi cercle*/
/*menu du bas*/
.bottom-menu {
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    background: #295A45;
    z-index:100;
}
.bottom-menu ul {
     margin:0 auto;
     padding: 5px 20px 20px 20px;
     width: 801px;
     text-align:center;
     font-size: 14px;
     color:#B9B9B9;
}
.bottom-menu li {
    display: inline-block;
    padding: 0px 15px 0px 15px;
}
.bottom-menu li:hover {
     color:#F6F6F6;
}

**NoSmoking** · 16/03/2020, 18h10

Bonjour,
pour commencer je pense que tu devrais

mettre le cosmétique, background, border-radius ... sur ton élément <ul> ;
supprimer le padding-right:500px sur le dernier <a> et les fioritures sur tous les <a> ;
mettre ton width:100px sur l'un ou l'autre, mais pas les <li> et les <a> ;
déplacer le :hover sur les <li> ;
mettre un vertical-align:middlesur les <li> ;
... cela ne suffira sûrement pas mais te permettra d'y voir plus clair.

Nota : pourquoi ne pas utiliser le modèle de boîte flexible, flexBox ?

Menu en display avec cellule de taille différentes

Tableau en CSS

Discussions similaires

Partager

Partager