problema al colocar encabezado en una pagina
Publicado por zendi (22 intervenciones) el 08/06/2019 18:29:47
Porfavor necesito una ayuda con una pagina que estoy desarrollando. La idea es colocar la franja de color azul debajo del logo, he intentado y estoy bastante confundido.
Lo demas funciona de maravillas.
Por favor si alguien pudiera ayudarme,me estan pidiendo esto con prontitud.
estte es el codigo HTML:
estos son los estilos:
Lo demas funciona de maravillas.
Por favor si alguien pudiera ayudarme,me estan pidiendo esto con prontitud.
estte es el codigo HTML:
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<link rel="stylesheet" href="fonts.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="main.js"></script>
</head>
<body>
<header class="header2">
<div class="menu_bar" title="Presione para Traer o Retirar el Menú">
<a href="#menu" class="bt-menu"><span class="icon-menu"></span>Menú</a>
</div>
<nav>
<div>
<img src="imagenes/m1.png" WIDTH="500" height="200"/>
<h1 class="color" align="center" >INVERSIONES MAAPE</h1>
</div>
<ul>
<li class="submenu">
<a href="#"><span class="icon-home3"></span>Inicio<span class="caret icon-circle-down"></span></a>
<ul class="children">
<li><a href="#Quienes">Quienes Somos<span class="icon-dot"></span></a></li>
<li><a href="#Vision">Nuestra Vision<span class="icon-dot"></span></a></li>
<li><a href="#Mision">Nuestra Mision<span class="icon-dot"></span></a></li>
<li><a href="#Objetivos">Objetivos<span class="icon-dot"></span></a></li>
</ul>
</li>
<li><a href="#"><span class="icon-suitcase"></span>Que es MAAPE?</a></li>
<li class="submenu">
<a href="#"><span class="icon-rocket"></span>Modulos<span class="caret icon-circle-down"></span></a>
<ul class="children">
<li><a href="#">Limpieza General<span class="icon-dot"></span></a></li>
<li><a href="#">Plomeria<span class="icon-dot"></span></a></li>
<li><a href="#">Mantenimiento General <span class="icon-dot"></span></a></li>
<li><a href="#">Electricidad <span class="icon-dot"></span></a></li>
<li><a href="#">Seguridad y Salud Laboral <span class="icon-dot"></span></a></li>
</ul>
</li>
<li><a href="correomail.php"><span class="icon-earth"></span>Consultas en Linea</a></li>
<li><a href="#"><span class="icon-mail"></span>Contacto</a></li>
<li><a href="#"><span class="icon-mail"></span>Galeria</a></li>
<li><a href="#"><span class="icon-mail"></span>Login</a></li>
</ul>
</nav>
</header>
<section>
<p class="mappe">
<a name="Quienes">Mappe es una empresa de mantenimiento especializada</a></p>
<p class="pquienessomos">
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</a></p>
<p class="mappe">
<a name="Vision">La Visión</a></p>
<p class="pquienessomos">
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. </a></p>
<p class="mappe">
<a name="Mision">Misión</a></p>
<p class="pquienessomos">
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
</a></p>
<p class="mappe">
<a name="Objetivos">Objetivos</a></p> <a href="index.html">Volver al Menú<img src="imagenes/attach.jpg" title="Volver al Menú" /></a>
<p class="pquienessomos">
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.
</a></p>
</section>
</body>
</html>
estos son los estilos:
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
* {
padding:0; margin:0;-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator
{display: inline-block;
}body {background:#FEFEFE;
}.menu_bar {
display:none;}header {width: 100%;
background:#023859;
margin-bottom: 20px;
}.mappe{
font-weight: bold;
font-size: 20px;
}.pquienessomos{
text-align: justify;
text-indent: 50px;
}.pvision{
text-align: justify;
text-indent: 50px;
}header nav {background:#023859;
z-index:1000;
/*max-width: 1000px;*/width:95%;
margin:20pxauto;
}header nav h1 {color: #ff0000;
}header nav ul {list-style:none;
}header nav ul li {display:inline-block;
position: relative;}header nav ul li:hover {
background:#ff0000;
}header nav ul li a {color:#fff;
display:block;text-decoration:none;
padding: 20px;}header nav ul li a span {margin-right:10px;
}header nav ul li:hover .children {
display:block;}header nav ul li .children {
display: none;background:#011826;
position: absolute;width: 150%;
z-index:1000;
}header nav ul li .children li {
display:block; overflow: hidden;border-bottom: 1px solid rgba(255,255,255,.5);
}header nav ul li .children li a {
display: block;}header nav ul li .children li a span {
float: right; position: relative; top:3px;margin-right:0;
margin-left:10px;
}header nav ul li .caret {
position: relative; top:3px;margin-left:10px;
margin-right:0px;
} form { margin: 1em auto;text-align: center;
} span{color: #F60;
font-size: 1.5 em;
}@media screen and (max-width: 800px) {
body {padding-top:80px;
}.menu_bar {
display:block;width:500%;
position: fixed; top:0;background:#3837E6; /*se diseñó con el color rojo#E6344A;*/
}.menu_bar .bt-menu {
display: block; padding: 50px;color: #fff;
overflow: hidden;font-size: 80px;
font-weight: bold;
text-decoration: none;
max-width: 800px;
}.menu_bar span {
float: right;font-size: 80px;
} header nav {width: 80%;
height: calc(100% - 80px);
position: fixed;right:100%;
margin: 0; overflow: scroll;/* transition: 0.1s;
*/ }
header nav ul li { display: block;border-bottom:1px solid rgba(255,255,255,.5);
} header nav ul li a { display: block; }header nav ul li:hover .children {
display: none; }header nav ul li .children {
width: 100%;
position: relative; }header nav ul li .children li a {
margin-left:20px;
}header nav ul li .caret {
float: right; }}- cabeceraymenu.rar(217,0 KB)
Valora esta pregunta
0
