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!
Como no des un poco más de información sobre tu html y css... xD
De todos modos, qué me dices de:
margin: 0 10px 0 10px;
Por ejemplo. Lo dicho, ni idea de lo que tienes xd
Pero mira, una forma posible:
<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ágina 1
</div>
<div class='button' onclick='selectButton(this)'>
Página 2
</div>
<div class='button' onclick='selectButton(this)'>
Página 3
</div>
</div>
<div id='contentContainer'>
Abcd
</div>
</body>
</html>
Mod: No hacer doble post.
¿Cómo está tu HTML?
Si es una lista tienes que dar el estilo a tus etiquetas <li>
Cierto chicos lo siento por no ponerlo pero ya era tarde y iba con prisa os dejo la pagina web
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
Cambia el margin de #access ul li por lo siguiente:
margin: 0px 10px 0px -6px
Te debería quedar así:
#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
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
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
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
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
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!
<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();?>
<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
Yo miraría mas bien en el
footer.php aunque no se como estará estructurado tu theme.
CitarYa 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
Muchas gracias, tuve que volver a modificar los botones y listo gracias guapo :*