Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: WIитX en 1 Noviembre 2015, 03:26 am


Título: ¿Cómo separar unos botones html & css?
Publicado por: WIитX en 1 Noviembre 2015, 03:26 am
Pues miren los tengo así:

(https://i.gyazo.com/043f12a7e92eb430861f024440d9746b.png)

y quiero que queden así:

(https://i.gyazo.com/1151b497d61b8b82a989209293c12981.png)

Saludos y gracias!

Título: Re: ¿Cómo separar unos botones html & css?
Publicado por: ivancea96 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.

Título: Re: ¿Cómo separar unos botones html & css?
Publicado por: MNicolas 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>

Título: Re: ¿Cómo separar unos botones html & css?
Publicado por: WIитX 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

Título: Re: ¿Cómo separar unos botones html & css?
Publicado por: #!drvy 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

Título: Re: ¿Cómo separar unos botones html & css?
Publicado por: WIитX 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

Título: Re: ¿Cómo separar unos botones html & css?
Publicado por: #!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

Título: Re: ¿Cómo separar unos botones html & css?
Publicado por: WIитX 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

Título: Re: ¿Cómo separar unos botones html & css?
Publicado por: #!drvy 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

Título: Re: ¿Cómo separar unos botones html & css?
Publicado por: WIитX 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

Título: Re: ¿Cómo separar unos botones html & css?
Publicado por: #!drvy en 1 Noviembre 2015, 17:51 pm
Yo miraría mas bien en el footer.php aunque no se como estará estructurado tu theme.

Citar
Ya lo puse pero el diseño entero se movió :l

Quita el margin, el position y el index.... y vuelve a leerte algun manual de CSS  :¬¬


Vale, al parecer el #main no es el wrapper . tendrías que re colocar el div de transparencia. Colocalo justo después de abrir el #wrapper y ciérralo justo antes de cerrar este ultimo.


Saludos

Título: Re: ¿Cómo separar unos botones html & css?
Publicado por: WIитX en 1 Noviembre 2015, 18:12 pm
Muchas gracias, tuve que volver a modificar los botones y listo gracias guapo :*


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines