HTML - Header sencillo

   
Vista:
Imágen de perfil de ermitoba

Header sencillo

Publicado por ermitoba (5 intervenciones) el 17/01/2018 14:40:13
Es una pregunta sencilla pero no encuentro respuesta, así que espero que me puedan ayudar.
Veran, el caso es que estoy empezando a darle forma a mi web, es una web sencilla, no quiero lucrarme ni nada, simplemente para poner mis cosillas y darlas a conocer al mundo.
El caso es que quería una cabecera 1 así, osea, que llegue de extremo a extremo, sin que me deje marcos blancos. La solución que encontré era poner position: fixed al header, pero así, me tapa el texto de debajo, y tengo que dejar varios saltos de línea para que se vea.
Hay alguna posibilidad de que se quede así, pero el texto vaya justo debajo de cuadro rojo?
Gracias

El código relevante es:
HTML
1
2
3
4
<header id="main-header">
        		<h1>ermitoba</h1>
		</header>
		<p>esto no se ve<br /><br /><br />pero esto sí</p>
CSS
1
2
3
4
5
6
7
8
9
#main-header {
background: red;
    width: 100%;
    left: 0;
    top: 0;
position: fixed;
font-family: 'Supermercado One';
text-align: center;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez

Header sencillo

Publicado por Lopez (195 intervenciones) el 17/01/2018 16:04:00
Hola ermitoba,

Mira este ejemplo, y copiate el código.
Creo es lo que necesitas, y no complicarte con mas :
https://codepen.io/lowpez/pen/ZvRXwO

Ahora, entiendo quizás deseas dejar la cabecera siempre visible,
por eso estas usando la posición fixed,

Lo ordenado y correcto, seria asignar un alto al header
1
header {height:3em;}

Seguido, donde va tu contenido (párrafo), crear un elemento los contenga, así también el resto del contenido:

HTML

1
2
3
<main>
		<p>esto no se ve<br /><br /><br />pero esto sí</p>
</main>

CSS

1
main { margin: 3.5em auto;}

Cuéntanos que tal,
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de ermitoba

Header sencillo

Publicado por ermitoba (5 intervenciones) el 17/01/2018 16:42:42
Perfecto Lopez, muchas gracias. Me ha valido el link que me has pasado. No lo quería que se quedara fijo, pero aún así te lo agradezco y lo tendré en cuenta para una próxima web.
Quizás tenga que abrir un nuevo hilo, pero a ver si me puedes ayudar en una última cosa.
He cogido una barra de navegación que ya tenía hecha antes de otra web, pero quería saber como puedo quitar lo "sobrante" del header. Con sobrante me refiero a la parte verde debajo de lo negro.
Gracias

2
Casi se me olvida, el código:
HTML
1
2
3
4
5
<ul class="nav">
	<li><a href="#">INICIO</a></li>
	<li><a href="#">BLOG</a></li>
	<li><a href="#">RECOMENDACIONES</a></li>
</ul>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.nav a{
font-family: Raleway;
color: white;
font-size: 140%;
letter-spacing: 5px;
}
.nav{
width: 100%;
background: black;
list-style: none;
margin-left: 0;
padding: 0;
}
.nav li a:hover{
background-color: #BDBDBD;
display: block;
}
.nav li a{
padding: 10px 20px;
display: inline-block;
}
.nav li{
display: inline-block;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez

Header sencillo

Publicado por Lopez (195 intervenciones) el 17/01/2018 17:40:40
Hola ermitoba,

No hay problema colega :)
Sobre el mismo código que te presente antes, los ajustes que necesitas.
Creo podrías estar olvidando "resetear" los valores CSS.
https://codepen.io/lowpez/pen/JMmzXK

Esto lo resuelves declarando al tope de tu CSS:
1
2
3
4
5
6
body,html{
height:100%;
  width:100%;
  padding:0;
  margin:0;
}

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ermitoba

Header sencillo

Publicado por ermitoba (5 intervenciones) el 17/01/2018 21:14:52
Pues no sé, pero no me ha valido.
Tampoco le des mucha más importancia porque realmente me gusta cómo queda.
Gracias otra vez Lopez!
PD: No te obligo, pero voy a abrir un nuevo tema sobre cómo ir dejando la web para posteriormente insertarle anuncios. Espero que si puedes, le eches un vistazo.
Gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad