¿Cómo hacer una banda de color en la parte superior de la página?
Resuelto
Mr Ripley
-
Noah -
Noah -
Hola,
Estoy buscando hacer una franja en la parte superior de la página como la del sitio commentça marche.com: una franja de color sin borde con la parte superior y los lados de la página.
He intentado con divs/collpase, pero no logro quitar el espacio blanco que se crea entre el div y la página web.
He encontrado otro ejemplo en este sitio: https://www.leetchi.com/
¿Cómo también puedo incorporar el logo "cortando" la franja de color, colocando el logo encima de la franja?
¡Eso es todo! ;)
Espero que alguien pueda ayudarme.
¡Muchas gracias de antemano!
Mr Ripley
Estoy buscando hacer una franja en la parte superior de la página como la del sitio commentça marche.com: una franja de color sin borde con la parte superior y los lados de la página.
He intentado con divs/collpase, pero no logro quitar el espacio blanco que se crea entre el div y la página web.
He encontrado otro ejemplo en este sitio: https://www.leetchi.com/
¿Cómo también puedo incorporar el logo "cortando" la franja de color, colocando el logo encima de la franja?
¡Eso es todo! ;)
Espero que alguien pueda ayudarme.
¡Muchas gracias de antemano!
Mr Ripley
Configuración: Mac OS X Safari 531.9
2 respuestas
-
Hola,
Un simple div es suficiente para hacer tu "banda" de color.
Para ello, solo necesitas asignar un color de fondo a tu div en CSS, así como una altura si tu div no contiene ningún elemento.
Para que se "adhiera" bien en la parte superior de tu página, debes eliminar el margen por defecto en el elemento "body".
Así, el siguiente código debería responder a tus preguntas:
HTML
<div id="header"></div>
CSS
body{
margin:0px;
}
#header{
height:120px;
background:#2F2F2E;
}-
¡Genial, gracias, eso es exactamente! Para luego hacer menús como el pie de página de "cómo funciona", ¿podemos añadir clases div, verdad?
En cuanto al logo que "corta" la línea de color como en el ejemplo del otro sitio, ¿sabes cómo hacerlo?
Bueno, pero de todos modos, ¡muchas gracias por tu ayuda!
Sr. Ripley -
-
-