elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía rápida para descarga de herramientas gratuitas de seguridad y desinfección


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ¿Cómo separar unos botones html & css?		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: ¿Cómo separar unos botones html & css?  (Leído 18,278 veces)
WIитX


Desconectado Desconectado

Mensajes: 1.026


WINTX


Ver Perfil WWW
¿Cómo separar unos botones html & css?
« en: 1 Noviembre 2015, 03:26 am »
Pues miren los tengo así:



y quiero que queden así:



Saludos y gracias!
« Última modificación: 1 Noviembre 2015, 15:08 pm por #!drvy » En línea
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
ivancea96


Desconectado Desconectado

Mensajes: 3.412


ASMático


Ver Perfil WWW
Re: ¿Cómo separar unos botones html & css?
« Respuesta #1 en: 1 Noviembre 2015, 13:43 pm »
Como no des un poco más de información sobre tu html y css... xD

De todos modos, qué me dices de:
Código
  1. margin: 0 10px 0 10px;
Por ejemplo. Lo dicho, ni idea de lo que tienes xd


Pero mira, una forma posible:
Código
  1. <html>
  2.     <head>
  3.         <style>
  4.  
  5.             #buttonContainer{
  6.                 margin: 0;
  7.                 padding: 0;
  8.                 background-color: green;
  9.             }
  10.  
  11.             #buttonContainer .button{
  12.                 display: inline-block;
  13.                 border-radius: 10px 10px 0 0;
  14.                 background-color: #eef;
  15.                 padding: 5px;
  16.                 cursor: pointer;
  17.             }
  18.  
  19.             #buttonContainer .button.button-selected{
  20.                 background-color: cyan;
  21.             }
  22.  
  23.             #contentContainer{
  24.                 background-color: cyan;
  25.                 margin: 0;
  26.                 padding: 20px;
  27.             }
  28.  
  29.         </style>
  30.         <script>
  31.  
  32.             function selectButton(elem){
  33.                 var t = document.getElementsByClassName('button-selected');
  34.                 for(var i=0; i<t.length; i++)
  35.                     t[i].className = 'button';
  36.                 elem.className = 'button button-selected';
  37.  
  38.                 // Load content
  39.             }
  40.  
  41.         </script>
  42.     </head>
  43.     <body>
  44.  
  45.         <div id='buttonContainer'>
  46.  
  47.             <div class='button button-selected' onclick='selectButton(this)'>
  48.                 P&aacute;gina 1
  49.             </div>
  50.             <div class='button' onclick='selectButton(this)'>
  51.                 P&aacute;gina 2
  52.             </div>
  53.             <div class='button' onclick='selectButton(this)'>
  54.                 P&aacute;gina 3
  55.             </div>
  56.  
  57.         </div>
  58.         <div id='contentContainer'>
  59.  
  60.             Abcd
  61.  
  62.         </div>
  63.  
  64.     </body>
  65. </html>

Mod: No hacer doble post.
« Última modificación: 1 Noviembre 2015, 15:07 pm por #!drvy » En línea
Code0x66 - Blog de hacking & programación
MNicolas

Desconectado Desconectado

Mensajes: 127


Developer


Ver Perfil WWW
Re: ¿Cómo separar unos botones html & css?
« Respuesta #2 en: 1 Noviembre 2015, 14:07 pm »
¿Cómo está tu HTML?

Si es una lista tienes que dar el estilo a tus etiquetas <li>
En línea
WIитX


Desconectado Desconectado

Mensajes: 1.026


WINTX


Ver Perfil WWW
Re: ¿Cómo separar unos botones html & css?
« Respuesta #3 en: 1 Noviembre 2015, 14:56 pm »
Cierto chicos lo siento por no ponerlo pero ya era tarde y iba con prisa os dejo la pagina web

Código:
http://raulwp.endevsoft.com

Es un theme wordpress que estoy editando estoy estoy un poco liado a ver si lo logro terminar que apenas me quedan 2 cosillas.

Muchísimas gracias a todos
En línea
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: ¿Cómo separar unos botones html & css?
« Respuesta #4 en: 1 Noviembre 2015, 15:07 pm »
Cambia el margin de #access ul li por lo siguiente:

Código
  1. margin: 0px 10px 0px -6px

Te debería quedar así:

Código
  1. #access ul li {
  2.    display:block;
  3.    float:left;
  4.    background:#FAFAFA;
  5.    -webkit-border-radius:7px 7px 0 0;
  6.    -moz-border-radius:7px 7px 0 0;
  7.    border-radius:7px 7px 0 0;
  8.    margin: 0px 10px 0px -6px;
  9.    padding:3px 0;
  10.    -moz-box-shadow:0 -3px 4px rgba(0,0,0,0.1) inset;
  11.    -webkit-box-shadow:0 -3px 4px rgba(0,0,0,0.1) inset;
  12.    box-shadow:0 -3px 4px rgba(0,0,0,0.1) inset;
  13.    white-space: nowrap;
  14. }

Para haber estudiado DAW estas cosas te las deberías saber de memoria  :-\

Saludos
En línea
WIитX


Desconectado Desconectado

Mensajes: 1.026


WINTX


Ver Perfil WWW
Re: ¿Cómo separar unos botones html & css?
« Respuesta #5 en: 1 Noviembre 2015, 15:18 pm »
Juraria que ayer probé eso T.T

Gracias drvy ^^

Otra cosa si te fijas debajo del texto e puesto un div transparente con 900 y pico px de ancho y 1830px de altura pero claro la altura siempre va a ser la misma por que no lo e fijado en % como podría hacerlo para que se adapte automáticamente ya que si pongo 100% se pone de la forma del texto no se si me explico xd

saludos y gracias
En línea
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: ¿Cómo separar unos botones html & css?
« Respuesta #6 en: 1 Noviembre 2015, 17:28 pm »
Lo haces mal... ese div debería ser un container (es decir, contener el resto del contenido) y no estar detrás a libre albedrío con un position:absolute;. Créeme, ponle de container y vas a ver como todo te cuadra sin tener que usar height.

Saludos
En línea
WIитX


Desconectado Desconectado

Mensajes: 1.026


WINTX


Ver Perfil WWW
Re: ¿Cómo separar unos botones html & css?
« Respuesta #7 en: 1 Noviembre 2015, 17:36 pm »
Cita de: #!drvy en  1 Noviembre 2015, 17:28 pm
Lo haces mal... ese div debería ser un container (es decir, contener el resto del contenido) y no estar detrás a libre albedrío con un position:absolute;. Créeme, ponle de container y vas a ver como todo te cuadra sin tener que usar height.

Saludos

Debo cerrarlo después de todos los demás elementos?

Esque es una putada al ser wordpress tengo que ir archivo por archivo buscando los divs y ver donde ir poniendo el código

Gracias drvy
En línea
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: ¿Cómo separar unos botones html & css?
« Respuesta #8 en: 1 Noviembre 2015, 17:39 pm »
Citar
Debo cerrarlo después de todos los demás elementos?

Tienes que abrirlo donde lo abres (dentro de #main), y cerrarlo justo antes de cerrar #main.

Saludos
En línea
WIитX


Desconectado Desconectado

Mensajes: 1.026


WINTX


Ver Perfil WWW
Re: ¿Cómo separar unos botones html & css?
« Respuesta #9 en: 1 Noviembre 2015, 17:47 pm »
Vale gracias drvy

Esque donde lo abro es en header.php

y luego supongo que tendré que ir al archivo main.php que allí será donde se cierra... después de eso quito el heigth?

Saludos y gracias!

Código
  1. <div id="main">
  2. <div id="transparent">
  3. </div>
  4. <img src="http://www.didacticacienciasugr.es/images/stories/template/_diccexp-homebanner.jpg"/>
  5. 	<div  id="forbottom" >
  6. 		<?php cryout_forbottom_hook(); ?>
  7.  
  8. 		<div style="clear:both;"> </div>
  9.  
  10. 		<?php cryout_breadcrumbs_hook();?>

Código
  1. <div id="main">
  2. <div id="transparent">
  3. <img src="http://www.didacticacienciasugr.es/images/stories/template/_diccexp-homebanner.jpg"/>
  4. 	<div  id="forbottom" >
  5. 		<?php cryout_forbottom_hook(); ?>
  6.  
  7. 		<div style="clear:both;"> </div>
  8.  
  9. 		<?php cryout_breadcrumbs_hook();?>

Ya lo puse pero el diseño entero se movió :l
« Última modificación: 1 Noviembre 2015, 17:51 pm por WIитX » En línea
"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Separar partes de un un html code
Programación Visual Basic 		extreme69 8 3,780 Último mensaje 22 Febrero 2011, 16:51 pm
por ignorantev1.1
Condiciones para que aparezcan unos botones o otros (HTML; javascript)
Desarrollo Web 		rolomo 0 2,320 Último mensaje 18 Enero 2012, 04:45 am
por rolomo
[HTML/javascript] Botones que no funcionan.
Desarrollo Web 		Puroguramu 4 5,311 Último mensaje 9 Diciembre 2012, 17:28 pm
por Puroguramu
[HTML] Botones en canvas
Desarrollo Web 		Ori-chan 1 4,418 Último mensaje 17 Noviembre 2013, 02:58 am
por Maurice_Lupin
Botones HTML
Desarrollo Web 		VintageChanel 5 3,071 Último mensaje 3 Julio 2015, 14:16 pm
por eLank0
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines