Pestanas simples en css

IMAC/ · #1 (**permalink**) 23/11/2008, 06:33

Buenas

Actualmente tengo un sistema de pestañas diseñado mediante tablas y algún estilo de mouse over.
Ahora me gustaría pasarlo a css y no controlo muy bien como poner 2 imágenes en el borde superior izquiero y derecho.

Esto es lo que tengo. Lo que está contorneado en verde son 2 imágenes para dar aspecto redondeado a los bordes superiores, las imágenes que no se controlar en css para poner en dichas posiciones:

Os dejo el código que tengo de tablas que hace un poco feo por si os vale para algo:

Código HTML:

<table cellpadding="3" cellspacing="0" border="0" align="center" width="369" height="25">
  <tr> 
    <td> 
      <table style=" background-color: #ce3306; " cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" height="28" width="130">
        <tr> 
          <td width="13" height="13"><img src="imgs/upLOver.gif"></td>
          <td height="13"></td>
          <td width="13" height="13"><img src="imgs/upROver.gif"></td>
        </tr>
        <tr> 
          <td width="13"></td>
          <td>s</td>
          <td width="13"></td>
        </tr>
      </table>
    </td>
    <td> 
      <table style=" background-color: #972200;" cellpadding="0" cellspacing="0" border="0" height="28" width="130">
        <tr> 
          <td width="13"><img src="imgs/upL.gif"></td>
          <td height="13"></td>
          <td width="13"><img src="imgs/upR.gif"></td>
        </tr>
        <tr> 
          <td width="13"></td>
          <td>a</td>
          <td width="13"></td>
        </tr>
      </table>
    </td>
    <td> 
      <table style=" background-color: #972200; " cellpadding="0" cellspacing="0" border="0" height="28" width="130">
        <tr> 
          <td width="13"><img src="imgs/upL.gif" width="13" height="13"></td>
          <td height="13"></td>
          <td width="13"><img src="imgs/upR.gif"></td>
        </tr>
        <tr> 
          <td width="13"></td>
          <td>a</td>
          <td width="13"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

imgs/upR.gif, imgs/upL.gif, imgs/upROver.gif, imgs/upLOver.gif son las imágenes de los bordes superior derecha y superior izquierda de cada pestana.

Gracias de antemano.

caricatos · #2 (**permalink**) 23/11/2008, 09:10

Hola:

¡No estoy seguro de que una tabla sea un elemento adecuado para un sistema de pestañas... Hace poco subí una página que combina javascript no intrusivo (creo que así lo define...): Sistema de pestañas... y accesible... lo de los bordes, creo que no se trata de algo sencillo, por los overflows, y esas cosas...

Saludos

IMAC/ · #3 (**permalink**) 23/11/2008, 11:11

Lo único que quiero saber es como poder poner esas 2 imágenes de cada pestaña.

Una en la esquina superior derecha y otar en la esquina superior izquierda.

Supongo que podría tratar a las pestañas como una lista <lu> con sus <li> y poner las imágenes a cada li con su fondo y tal.

No se, acabo de meterme en css y aún no se muy bien como va...

shurshok · #4 (**permalink**) 23/11/2008, 12:17

mira, te explico brevemente, porque me tengo que ir:

le tienes que dar un padding distinto a cada imagen, y meter todo dentro de un div, supongamos:

/*CSS*/
div.pestaña {
/*todas tus propiedades de posicion*/
}

div.esquinasuperiorderecha {
/*margen para que quede arriba a la derecha*/
background: url (tu-imagen.jpg) no-repeat;
margin-right: 0px;
margin-top: 0px;
margin-bottom:auto;
margin-left: auto;
}

div.esquinasuperiorizquierda {
/*margen para que quede arriba a la izquierda*/
background: url (tu-imagen.jpg) no-repeat;
margin-right: auto;
margin-top: 0px;
margin-bottom: auto;
margin-left: 0px;
}

HTML:

<div class="pestaña">
<div class="esquinasuperiorderecha">
<div class="esquinasuperiorizquierda">
Tu contenido
</div>
</div>
</div>

Espero que se entienda, es que no tenia mucho tiempo jajajaja

IMAC/ · #5 (**permalink**) 23/11/2008, 14:59

No funciona tampoco shurshok.

He estado leyendo y he sacado esto, pero tengo un fallito, cuando está en la pestaña actual no se hacer que el color sea otro... ¿donde pongo eso?

Código HTML:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>

  #header {
    float:left;
    width:100%;
    font-size:93%;
    line-height:normal;
    background: #972200;

    }
	
	#header ul {
    margin:0;
    padding:0;
    list-style:none;

    }
  #header li {
    float:left;
	background:url("imgs/upR.gif")
	no-repeat right top;
    margin:0;
    padding:0;
    }
	
  #header a {
	display:block;
	background:url("imgs/upL.gif")
    no-repeat left top;
    padding:5px 15px;
    }
	
/* Commented Backslash Hack hides rule from IE5-Mac \*/
  #header a {float:none;}
  /* End IE5-Mac hack */
	
  #header #current {
    background-image:url("imgs/upROver.gif");
	
    }
  #header #current a {
    background-image:url("imgs/upLOver.gif");
    }


</style>
<body bgcolor="#FFFFFF" text="#000000">
  <div id="header">

    <ul>
      <li><a href="#">Homeaaaaaaaaaaaaa</a></li>
      <li id="current"><a href="#">News</a></li>

      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>

    </ul>
  </div>
</body>
</html>

shurshok · #6 (**permalink**) 23/11/2008, 16:19

la verdad no te entendí, explícate mejor.

daPhyre · #7 (**permalink**) 24/11/2008, 11:51

Prueba este que hice hace tiempo: http://mx.geocities.com/daphyreweb/w...nd-corner.html

Suerte