U
ulises2010
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Estoy creando con angular una app y he puesto tres componente:
Header
content
footer
El caso es que he encontrado este ejemplo que quiero usar como header:
Bootstrap Snippet Header Top using HTML CSS | Bootsnipp.com
que es muy simple y usa estos css:
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
y este html
El caso es que cuando lo pongo el header se superpone sobre el content y el footer, pero en cambio si sólo pongo este html:
se comporta como quiero, el header arriba, luego el content y luego el footer, así que supongo que será por alguna propiedad del css, pero la verdad es que no doy con ello.... sabeis que puede ser? No pongo enlace porque lo tengo en local.
Gracias por la ayuda
Header
content
footer
El caso es que he encontrado este ejemplo que quiero usar como header:
Bootstrap Snippet Header Top using HTML CSS | Bootsnipp.com
que es muy simple y usa estos css:
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
Insertar CODE, HTML o PHP:
.menu
{
background-color: #f33155;
border-bottom: 4px solid #4f5467;
width:100%;
height: auto;
padding: 0 10px;
position: fixed;
margin: 0px;
z-index: 1;
opacity: 0.9;
}
.menu .navbar-nav > .active > a
{
background-color : #4f5467;
color: white;
font-weight: bold;
}
.menu .navbar-nav > li > a
{
font-size: 13px;
color: white;
padding: 10px 35px;
}
.menu .navbar-nav > li > a:hover
{
background-color: #4f5467;
}
.navbar-header {
padding: 10px;
}
.navbar-header > a {
font-family: 'Ubuntu Condensed', sans-serif;
padding: 0px;
margin: 0px;
text-decoration: none;
color: white;
font-size: 13px;
padding: 5px 3px;
}
.navbar-header > a:hover
{
text-decoration: none;
color: #04A3ED;
}y este html
Insertar CODE, HTML o PHP:
<!--header top-->
<div class="menu">
<div class="container-fluid">
<div class="navbar-header">
<a href="#"><span class="glyphicon glyphicon-user"></span> Email: Ravikumar@gmail.com</a>
<a href="#"><span class="glyphicon glyphicon-phone"></span> Mobile: 1234567890</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" ><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</div>
<!--end Header-->El caso es que cuando lo pongo el header se superpone sobre el content y el footer, pero en cambio si sólo pongo este html:
Insertar CODE, HTML o PHP:
<h1 class="header">Header</h1>se comporta como quiero, el header arriba, luego el content y luego el footer, así que supongo que será por alguna propiedad del css, pero la verdad es que no doy con ello.... sabeis que puede ser? No pongo enlace porque lo tengo en local.
Gracias por la ayuda