EDIT: Ya arreglé el tema del margen inferior. Ahora me faltan los margenes entre botones. dejo el codigo CSS actualizado ya que el HTML no cambio.
Como están? necesito eliminar los margenes que se ven en la botonera para dejar todos los botones uno pegado al otro y en la parte inferior dejar sin margen entre el nav y la sección id "ordenes"
esta es la imagen no se guíen por los colores y eso es solo para guiarme en la ubicación de las secciones luego cambiaré todo
esto es lo que tengo en html
Código HTML:
Ver original
LOGO
<input type="text" placeholder="Usuario"> <input type="text" placeholder="Contraseña"> <input type="submit" value="Ingresar"> <li><a href="#" id="btn_inicio">INICIO
</a></li> <li><a href="#" id="btn_servicios">SERVICIOS
</a></li> <li><a href="#" id="btn_guias">GUÍAS
</a></li> <li><a href="#" id="btn_contacto">CONTACTO
</a></li>
<input type="text" placeholder="Nro. Orden"> <input type="text" placeholder="Contraseña"> <input type="submit" value="Estado">
Y esto es lo que tengo en la hoja de estilos
Código CSS:
Ver originala
{
text-decoration: none;
}
header
{
background: blue;
position: relative;
margin-bottom: 0;
width: 100%;
}
header figure img
{
max-height: 130px;
}
nav
{
background: red;
position: absolute;
right: 0;
bottom: 0;
}
nav ul
{
list-style: none;
margin: 0;
}
nav ul li
{
display: inline-block;
}
nav ul li a
{
background: green;
color: white;
display: block;
padding: 0.5em;
}
header #inicio_sesion
{
position: absolute;
right: .5em;
top: .5em;
}
#cuerpo
{
margin: auto;
width: 1000px;
}
#ordenes
{
background: #A10C0E;
margin-top: 0;
overflow: hidden;
}
#ordenes form
{
margin: .5em 0 .5em .5em;
}
Bueno la idea es que se vea todo unido todos los botones entre si y la parte inferior unida con la sección ordenes la idea es que parezca un solo bloque con el añadido de los botones en la parte superior.
desde ya muchas gracias por su ayuda!!!