Saludos a todos:
Bueno en mi diseño quiero colocar unos pestañas que he creado en un lugar concreto. Para ser mas exactos encima de un cuadro. Ese cuadro, su codigo CSS es este:
.cuadro_derecho { position:absolute;
background-color:#e70f05;
color: #000000;
top: 5.7cm;
left: 8.3cm;
border: 0mm double #990100;
padding: 10cm 0cm 10cm 15.4cm;
border-width: 0mm 0mm 0mm 0mm;
}
Las pestañas que quiero poner, me salen aliadas arriba y a la esquina superior izquierda. He estado dandole vueltas y llegue a la conclusion que lo que debo de modificar es mi index.html es decir lo que sta en el <body>. es decir esto:
<span id="boton_1">
<a href="#2">REGLA</a><!--código para cada uno de las pestañas-->
<div class="contenido">
<div class="cuadro_izquierdo"></div>
<div class="cuadro_derecho"></div>
<div class="cuadro_superior"></div>
</div>
Pero no hace lo que quiero. Si coloco la etiqueta <br> pues bajo el boton cosa que bueno no esta mal pues tiene que bajar un poco pero si pongo la etiqueta (unas cuantas) no se me desplaza a lña derecha que es lo que quiero. Mi pregunta es: ¿como alineo las pestañas a la derecha o en un lugar determinado?
Os mando el codigo de las pestañas por si veis que me falto algo. Como vereis lo que no se lo apunto para futuras rectificaciones:
#boton_1 { /* Aqui le decimos que no queremos margenes, y que nos alinee el texto*/
border: 0 0 0 0;
padding: 0;
text-align: center;
}
#boton_1 a{
background-image:url(../imagenes/pest.jpg); /*enlace a la imagen*/
background-position: center top; /*la posicion es centrada y arriba*/
height:26px; /*altura de la imagen o pestaña*/
width:88px; /*ancho de la imagen o pestaña*/
display: block; /*nos mantendra siempre un cuadro con las medidas que puse arriba*/
color: #000000; /*el texto de lo que escribamos en el botos o pestaña*/
text-decoration: none; /* para que no aparezca nada decorativo al pulsar. Ejemplo el subrayado*/
padding-top: 5px;/*para que el texto escrito en el boton no este muy arriba dentro de la pestaña*/
background-repeat: no-repeat;/* para que no nos este repitiendo todo constantemente*/
font-weight: bold; /* que no shaga la letra en negrita*/
}
#boton_1 a:hover{
background-image:url(../imagenes/pest_1.jpg);
}
#boton_1 a:focus{
background-image:url(../imagenes/pest_2.jpg);
}
