Aligner un intitulé et un sprite type hamburger/cross

**CCACC02** · 30/11/2018, 12h31

Bonjour,

Après plusieurs tentatives, je n'arrive pas à aligné le mot menu avec mon sprite...

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
<header>
      <div id="top">
        <a href="#main-menu">menu<span class="ham"></span></a> 
      </div> 
      <nav class="menu-plein-ecran" id="main-menu">  
        <div class="menu-icon">
          <a href="#top">menu<span class="cross"></span></a> 
        </div>
        <div class="menu">
          <ul class="item-menu">
            <li class="item"><a href="#">Item 1</a></li>
            <li class="item"><a href="#">Item 2</a></li>
            <li class="item"><a href="#">Item 3</a></li>
            <li class="item"><a href="#">Item 4</a></li>
          </ul>
        </div>
      </nav>
    </header>

Code css :

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
header{
	background: url("img/bkg.jpg") top center fixed;
	background-size: cover;
	min-height: 1929px;
	position: relative;	
}
.ham{
	width: 31px;
	height: 31px;
	background-image: url("img/burg.png");
	background-repeat: no-repeat;
	background-position: top;
	position: absolute;
	top: 20px;
	right: 20px;
}
.cross{
	width: 31px;
	height: 31px;
	background-image: url("img/burg.png");
	background-repeat: no-repeat;
	background-position: bottom;
	position: absolute;
	top: 20px;
	right: 20px;
 
}
.menu-plein-ecran{
	background-color: hsl(163,27.7%,32%);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: none;
}
.menu-plein-ecran:target{
	display: block;
}

La background-img du sprite jointe en pièce attachée.

Pourriez-vous m'orienter? <a> et <span> sont des balises inline mais même dans une seule div, le tout s'empile

**psychadelic** · 30/11/2018, 15h57

mauvaise méthode, il faut utiliser le même élément (et non 2 disctincts comma actuellement )

Code HTML :

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

1
2
3
4
<header>
      <div id="top">
        <a href="#main-menu">menu<span id="IconMenu" class=""></span></a> 
<!-- ...     -->

a faire basculer en:

Code HTML :

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

1
2
3
4
<header>
      <div id="top">
        <a href="#main-menu">menu<span id="IconMenu" class="cross"></span></a> 
<!-- ...     -->

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
span#IconMenu {
	width: 31px;
	height: 31px;
	background-image: url("img/burg.png");
	background-repeat: no-repeat;
	background-position: top;
	position: absolute;
	top: 20px;
	right: 20px;
}
span#IconMenu.cross {
  background-image: url("img/burg.png");
}

le mieux serait, surtout pour une image aussi petite c'est d'en passer par un sprite.

mais pour ce genre de chose, on n'a pas vraiment besoin d'utiliser une image, il existe des centaines de codes css pour réaliser ce que tu désires
https://www.google.fr/search?q=css+b...=u&source=univ

https://codepen.io/tag/burger/#

**NoSmoking** · 01/12/2018, 17h47

Bonjour,
on peut également souligner qu'il existe des caractères qui font cela très bien.

≡ -> &equiv;
× -> ×

≡ -> ≡
╳ -> ╳

☰ -> ☰
⛌ -> ⛌

✕ -> ✕
✖ -> ✖

**CCACC02** · 20/12/2018, 15h46

Code html :

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

1
2
3
4
5
6
7
8
9
10
<header>
  			<div class="menu-icon" id="top">
        		<a href="#main-menu">menu<span class="ham"></span></a> 
      		</div> 
      		<nav class="menu-plein-ecran" id="main-menu">  
        		<div class="menu-icon">
         			<a href="#top">menu<span class="cross"></span></a> 
        		</div>
</nav>
</header>

Code css :

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
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
@fontface{
	font-family: "Ubuntu";
	src: url("https://fonts.googleapis.com/css?family=Ubuntu");
}
 
body{
	margin: 0 auto;
	font-family: "Ubuntu", sans-serif;
	line-height: 1.25;
 
}
#wrapper{
  width: 740px;
  margin: 0 auto;
}
header{
	background: url("img/bkg.jpg") top center fixed;
	background-size: cover;
	/*min-height: 1929px;*/
	position: relative;	
}
#top {
	min-height: 50px;
}
 
.menu-icon > a{
	text-decoration: none;
	color: black;
	font-size: 1.5em;
	position: static;
 
}
.ham{
	width: 31px;
	height: 31px;
	background-image: url("img/burg.png");
	background-repeat: no-repeat;
	background-position: top;
	position: absolute;
	top: 10px;
	right: -40px;
}
.cross{
	width: 31px;
	height: 31px;
	background-image: url("img/burg.png");
	background-repeat: no-repeat;
	background-position: bottom;
	position: absolute;
	top: 0;
	right: -40px;
 
}
.menu-icon a{
	position: absolute;
	top: 0.5em;
	right: 2.5em;
}
.menu-plein-ecran{
	background-color: hsl(163,27.7%,32%);
	position: fixed;
	top: 0;
	bottom: 0;
	display: none;
}
.menu-plein-ecran:target{
	display: block;
}

bon j'ai allégé un peu le contenu et il faut imaginer le sprite mais cela fonctionne

Aligner un intitulé et un sprite type hamburger/cross

Positionnement en CSS

Discussions similaires

Partager

Partager