Hola amigos, les cuento que soy nuevo en css, estoy haciendo mi primera web, la cual quiero fijar el header pero no logro hacer que me funcione.
He creado 3 divs.
1 con el div flotando a la iquierda y la imagen flotada a la derecha,
2 un menu de navegacion tambien flotado a la izquierda(el div) y centrado los elementos de la lista.
3 otro div flotado a la izquierda el cual contiene 2 elementos un link y un boton
Todos estos elementos los agregue a un contenedor llamado header, el cual cuando le aplico el atributo positionfixed me borra el header, lo pone abajo de un slider que tengo despues del header, adjunto codigo, ojala me puedan ayudar, saludos..
html:
<body>
<div id="header">
<div id="logo">
<a href="#lll"><div class="logo"><img src="fwl.fw.png"></div></a>
</div>
<div id="navBar">
<nav>
<ul>
<li><a href="#gg">Soporte</a></li>
<li><a href="#tt">Tienda</a></li>
<li><a href="#nn">Contacto</a></li>
<li><a href="#cc">Nosotros</a></li>
<li><a href="#tt">ITimbre</a></li>
<li><a href="#ss">Ammy</a></li>
</ul>
</nav>
</div>
<div id="iniciosesion">
<a href="#re" class="Ingre">Iniciar Sesión</a>
<a href="#" class="button">Registrate</a>
</div>
</div>
<div id="slideshou">
<div class="gallery autoplay items-3">
<div id="item-1" class="control-operator"></div>
<div id="item-2" class="control-operator"></div>
<div id="item-3" class="control-operator"></div>
<figure class="item">
<img src="helsinki.jpg" alt="" />
</figure>
<figure class="item">
<img src="roma.jpg" alt="" />
</figure>
<figure class="item">
<img src="paris.jpg" alt="" />
</figure>
<div class="controls">
<a href="#item-1" class="control-button">•</a>
<a href="#item-2" class="control-button">•</a>
<a href="#item-3" class="control-button">•</a>
</div>
</div>
</div>
css:
* {
margin: 0px;
padding: 0px;
}
#header{
height: 50px;
overflow: hidden;
}
#logo{
float: left;
width: 25%;
margin: 10px;
}
#navBar{
float: left;
width: 45%;
}
#iniciosesion{
float: left;
width: 25%;
margin: 10px;
}
#slideshou{
clear: both;
height: 700px;
}
#caract{
width: 70%;
position: relative;
top: 40px;
margin: 0 auto;
height: 1400px;
}
#contenido{
background-color: orange;
float: none;
clear: both;
display: none;
}
#footer{
background-color: yellow;
float: none;
clear: both;
display: none;
}
.logo img{
height: auto;
width: 210px;
float: right;
}
#navBar ul {
overflow: hidden;
list-style: none;
position: relative;
left: 125px;
}
#navBar ul li {
float: left;
}
#navBar ul li a{
font-family: Segoe UI;
color: gray;
padding: 15px;
text-decoration: none;
display: block;
}
#navBar li a:hover{
color: white;
background-color: #F24F00;
}
.ingre{
color:#6C6C6C;
font-family: Segoe UI;
text-decoration: none;
float: left;
position: relative;
bottom: -5px;
}
.button{
background: #FF6820;
color:#fff;
padding: 5px 15px;
text-align: center;
font-family: Segoe UI;
text-decoration: none;
width: 100px;
position: relative;
left: 20px;
bottom: -5px;
border-radius: 2px;
}
.button:hover{
background: #FF7A2B;
color: white;
}
.item img{
width: 100%;
height: 800px;
}