Foros del Web » Creando para Internet » CSS »

Pestanas simples en css

Estas en el tema de Pestanas simples en css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/11/2008, 06:33
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
De acuerdo Pestanas simples en css

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.
  #2 (permalink)  
Antiguo 23/11/2008, 09:10
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Pestanas simples en css

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 23/11/2008, 11:11
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: Pestanas simples en css

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...
  #4 (permalink)  
Antiguo 23/11/2008, 12:17
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Pestanas simples en css

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
__________________
Visita la mejor web: http://infoadictos.net
  #5 (permalink)  
Antiguo 23/11/2008, 14:59
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 12 años, 1 mes
Puntos: 14
Respuesta: Pestanas simples en css

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> 
  #6 (permalink)  
Antiguo 23/11/2008, 16:19
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Pestanas simples en css

la verdad no te entendí, explícate mejor.
__________________
Visita la mejor web: http://infoadictos.net
  #7 (permalink)  
Antiguo 24/11/2008, 11:51
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Pestanas simples en css

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

Suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:32.