Foros del Web » Creando para Internet » CSS »

pestañas

Estas en el tema de pestañas en el foro de CSS en Foros del Web. Código HTML: <script language= "JavaScript" type= "text/javascript" > function init(){ for(var i=2; i <=3; i++){ document.getElementById('contenido'+i).style.display = 'none'; } } function viewSection(id,total){ for (var i=1; ...
  #1 (permalink)  
Antiguo 23/04/2007, 16:11
Avatar de humanista  
Fecha de Ingreso: abril-2005
Mensajes: 876
Antigüedad: 12 años, 8 meses
Puntos: 15
pestañas

Código HTML:
<script language="JavaScript" type="text/javascript">
function init(){
	for(var i=2; i<=3; i++){
		document.getElementById('contenido'+i).style.display = 'none';
	}
}

function viewSection(id,total){
	for (var i=1; i<=3; i++){
		if(i!=id){
			document.getElementById('contenido'+i).style.display = 'none';
		}else{
			document.getElementById('contenido'+i).style.display = 'block';
		}
	}
}
</script>


<style>

/* --- Menú de contenido recuadro--- */


#menu
{
	font-family:Verdana, Arial, helvetica, sans-serif;
	font-size:16px;
	/*clear:right;
	display:inline;
	margin-left:0px;
	padding-left:0px;*/
}

#menu ul
{
	margin:0;padding:0;
}
	
#menu ul li
{
	list-style-type:none;
	display:block;
	float:left;
	margin:3px 3px 0px 0px;
	padding:3px;
	border:solid #cccccc 1px;
	border-left-width:1px;
	border-bottom-width:0px;
}

#menu ul li a
{
	text-decoration:none;
	text-transform:capitelize;
	color:#000000;
}
	
#menu ul li a:hover
{
	color:#000000;
	text-decoration:none
}

#menu ul li a:active
{
	border:solid #FFFFFF 0px;
}

#contenido1, #contenido2, #contenido3, #contenido4
{
	font-family:Arial, helvetica, sans-serif;
	font-size:11px;
	line-height:16px;
	text-align:justify;
	/*float:left;*/
	clear:left;
	/*display:block;*/
	border:solid #CCCCCC 1px;
	width:740px;
	padding:5px;
}


</style>

	<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" link="black" text="black" vlink="black" alink="black" onload="javascript:init();">

<div id="menu">
	<ul>
		<li><a href="#" onclick="viewSection('1');">Lo más leído</a></li>
		<li><a href="#" onclick="viewSection('2');">Lo más comentado</a></li>
		<li><a href="#" onclick="viewSection('3');">Lo más votado</a></li>
	</ul>
</div>

<div id="contenido1">
texto111111
</div>

<div id="contenido2">
texto222222
</div>

<div id="contenido3">
texto333333
</div>

</body> 
_____________________

tengo esto y me funciona. el problema (m estoy volviendo loco) es q no me salen las pestañas como yo quiero.

a ver si consigo explicarlo. tengo 3 pestañas y cada vez q pincho m carga bien los datos pero no sé en q pestaña estoy pq las pestañas no se presentan de diferentes maneras cada vez que está 1 activa.

lo q quiero es lo q se ve comunmente en muchas webs (elpais.com, por ej, los más leídos, los más....), es decir q la pestaña en la q he pinchado cambie su forma.

lo q ahora me aparece son las pestañas con bordes en los 4 costados (arriba, abajo, izq y dcha) y lo q quiero es q cuando se pinche en una pestaña se me borre el borde inferior de tal forma q se muestre como la pestaña activa.

espero haberme explicado
  #2 (permalink)  
Antiguo 23/04/2007, 20:50
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
Re: pestañas

asignale un id a cada boton pinta el borde de color balnco sobreponiendo los elementos (position:absolute) bajandolos un poco para que el borde del menu (blanco) este ensima del borde de la div


Cita:
objeto.style.borderBottom ="1px solid #fff";
__________________
Saludos
FT.
www.fernando.com.mx

Última edición por fer10; 23/04/2007 a las 21:02
  #3 (permalink)  
Antiguo 24/04/2007, 03:09
Avatar de humanista  
Fecha de Ingreso: abril-2005
Mensajes: 876
Antigüedad: 12 años, 8 meses
Puntos: 15
Re: pestañas

buff!..., podría ser un poco más explícito?, mi conocimiento de los css es limitado.

es decir poner:

<li><a ID=BOTON1 href="#" onclick="viewSection('1');">Lo más leído</a></li>

pero cómo hago para que la pestaña se superponga con el recuadro?

con (position:absolute) pero exactamente cómo lo bajo?, tengo que poner posiciones absolutas con top???, dónde lo pongo?, estoy un poco liada
  #4 (permalink)  
Antiguo 24/04/2007, 05:00
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años, 1 mes
Puntos: 2037
Re: pestañas

Creo que la forma más fácil de hacerlo es aplicándole algún estilo a los enlaces. En este tutorial te lo enseñan cómo poner estilo a los enlaces

Por si hay algo que no entiendas este es el paso anterior.
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV

Última edición por RBZ; 24/04/2007 a las 05:17 Razón: Añadir información
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 06:28.