Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] [DUDA] Eliminar margenes de botonera

Estas en el tema de [DUDA] Eliminar margenes de botonera en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/06/2014, 14:41
 
Fecha de Ingreso: octubre-2008
Mensajes: 85
Antigüedad: 16 años, 2 meses
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
  #2 (permalink)  
Antiguo 15/06/2014, 13:19
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: [DUDA] Eliminar margenes de botonera

Supongo que con botones te refieres a lo verde.

Simplemente flótalos en lugar de usar ese display:

Código CSS:
Ver original
  1. nav li {
  2.   /* display: inline-block; No se usa */
  3.   float: left;
  4. }

Con eso deberían de solucionarse ambos problemas.
  #3 (permalink)  
Antiguo 23/06/2014, 14:23
 
Fecha de Ingreso: octubre-2008
Mensajes: 85
Antigüedad: 16 años, 2 meses
Puntos: 0
Respuesta: [DUDA] Eliminar margenes de botonera

mas que agradecido!!!!!!!

Etiquetas: background, botonera, color, html, margenes, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:24.