¿Cómo separar unos botones html & css?

WIитX · 1 Noviembre 2015, 03:26 AM

Pues miren los tengo así:

y quiero que queden así:

Saludos y gracias!

ivancea96 · 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 (css) [Seleccionar]

margin: 0 10px 0 10px;
Por ejemplo. Lo dicho, ni idea de lo que tienes xd

Pero mira, una forma posible:

Código (javascript) [Seleccionar]

<html>
    <head>
        <style>
          
            #buttonContainer{
                margin: 0;
                padding: 0;
                background-color: green;
            }
            
            #buttonContainer .button{
                display: inline-block;
                border-radius: 10px 10px 0 0;
                background-color: #eef;
                padding: 5px;
                cursor: pointer;
            }
            
            #buttonContainer .button.button-selected{
                background-color: cyan;
            }
            
            #contentContainer{
                background-color: cyan;
                margin: 0;
                padding: 20px;
            }
            
        </style>
        <script>
            
            function selectButton(elem){
                var t = document.getElementsByClassName('button-selected');
                for(var i=0; i<t.length; i++)
                    t[i].className = 'button';
                elem.className = 'button button-selected';
                
                // Load content
            }
            
        </script>
    </head>
    <body>
       
        <div id='buttonContainer'>
            
            <div class='button button-selected' onclick='selectButton(this)'>
                P&aacute;gina 1
            </div>
            <div class='button' onclick='selectButton(this)'>
                P&aacute;gina 2
            </div>
            <div class='button' onclick='selectButton(this)'>
                P&aacute;gina 3
            </div>
            
        </div>
        <div id='contentContainer'>
            
            Abcd
            
        </div>
        
    </body>
</html>

Mod: No hacer doble post.

MNicolas · 1 Noviembre 2015, 14:07 PM

¿Cómo está tu HTML?

Si es una lista tienes que dar el estilo a tus etiquetas <li>

WIитX · 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 [Seleccionar]

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

#!drvy · 1 Noviembre 2015, 15:07 PM

Cambia el margin de #access ul li por lo siguiente:

Código (css) [Seleccionar]

margin: 0px 10px 0px -6px

Te debería quedar así:

Código (css) [Seleccionar]

#access ul li {
   display:block;
   float:left;
   background:#FAFAFA;
   -webkit-border-radius:7px 7px 0 0;
   -moz-border-radius:7px 7px 0 0;
   border-radius:7px 7px 0 0;
   margin: 0px 10px 0px -6px;
   padding:3px 0;
   -moz-box-shadow:0 -3px 4px rgba(0,0,0,0.1) inset;
   -webkit-box-shadow:0 -3px 4px rgba(0,0,0,0.1) inset;
   box-shadow:0 -3px 4px rgba(0,0,0,0.1) inset;
   white-space: nowrap;
}

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

Saludos

WIитX · 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

#!drvy · 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

WIитX · 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

#!drvy · 1 Noviembre 2015, 17:39 PM

CitarDebo 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

WIитX · 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 (xml) [Seleccionar]

<div id="main">
<div id="transparent">
</div>
<img src="http://www.didacticacienciasugr.es/images/stories/template/_diccexp-homebanner.jpg"/>
	<div  id="forbottom" >
		<?php cryout_forbottom_hook(); ?>

		<div style="clear:both;"> </div>
		
		<?php cryout_breadcrumbs_hook();?>

Código (xml) [Seleccionar]

<div id="main">
<div id="transparent">
<img src="http://www.didacticacienciasugr.es/images/stories/template/_diccexp-homebanner.jpg"/>
	<div  id="forbottom" >
		<?php cryout_forbottom_hook(); ?>

		<div style="clear:both;"> </div>
		
		<?php cryout_breadcrumbs_hook();?>

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