Ver Mensaje Individual
  #1 (permalink)  
Antiguo 14/06/2014, 14:41
matiD
 
Fecha de Ingreso: octubre-2008
Mensajes: 85
Antigüedad: 16 años, 1 mes
Puntos: 0
[DUDA] Eliminar margenes de botonera

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
  1. <div id="cuerpo">
  2.  
  3.         <header>
  4.             <figure>
  5.                 LOGO
  6.             </figure>
  7.             <div id="inicio_sesion">
  8.                 <form action="">
  9.                     <input type="text" placeholder="Usuario">
  10.                     <input type="text" placeholder="Contraseña">
  11.                     <input type="submit" value="Ingresar">
  12.                 </form>
  13.             </div>
  14.             <nav>
  15.                 <ul>
  16.                     <li><a href="#" id="btn_inicio">INICIO</a></li>
  17.                     <li><a href="#" id="btn_servicios">SERVICIOS</a></li>
  18.                     <li><a href="#" id="btn_guias">GUÍAS</a></li>
  19.                     <li><a href="#" id="btn_contacto">CONTACTO</a></li>
  20.                 </ul>
  21.             </nav>
  22.         </header>
  23.  
  24.         <section id="ordenes">
  25.             <form action="">
  26.                         <input type="text" placeholder="Nro. Orden">
  27.                 <input type="text" placeholder="Contraseña">
  28.                 <input type="submit" value="Estado">
  29.             </form>
  30.         </section>
  31.     </div>

Y esto es lo que tengo en la hoja de estilos

Código CSS:
Ver original
  1. a
  2. {
  3.     text-decoration: none;
  4. }
  5.  
  6. header
  7. {
  8.     background: blue;
  9.     position: relative;
  10.     margin-bottom: 0;
  11.     width: 100%;
  12. }
  13.  
  14. header figure img
  15. {
  16.     max-height: 130px;
  17. }
  18.  
  19. nav
  20. {
  21.     background: red;
  22.     position: absolute;
  23.     right: 0;
  24.     bottom: 0;
  25. }
  26. nav ul
  27. {
  28.     list-style: none;
  29.     margin: 0;
  30.  
  31. }
  32. nav ul li
  33. {
  34.     display: inline-block;
  35. }
  36. nav ul li a
  37. {
  38.     background: green;
  39.     color: white;
  40.     display: block;
  41.     padding: 0.5em;
  42. }
  43.  
  44. header #inicio_sesion
  45. {
  46.     position: absolute;
  47.     right: .5em;
  48.     top: .5em;
  49. }
  50.  
  51. #cuerpo
  52. {
  53.     margin: auto;
  54.     width: 1000px;
  55. }
  56.  
  57. #ordenes
  58. {
  59.     background: #A10C0E;
  60.     margin-top: 0;
  61.     overflow: hidden;
  62. }
  63.  
  64. #ordenes form
  65. {
  66.     margin: .5em 0 .5em .5em;
  67. }

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!!!

Última edición por matiD; 14/06/2014 a las 15:12