Foros del Web » Creando para Internet » CSS »

Problema con CSS que actua haciendo de pestaña

Estas en el tema de Problema con CSS que actua haciendo de pestaña en el foro de CSS en Foros del Web. Hola a todos! La verdad es que no controlo mucho sobre CSS y quería que mi web tuviese pestañas. Encontré un código que me pareció ...
  #1 (permalink)  
Antiguo 12/03/2009, 09:40
 
Fecha de Ingreso: febrero-2006
Mensajes: 174
Antigüedad: 11 años, 9 meses
Puntos: 0
Problema con CSS que actua haciendo de pestaña

Hola a todos!

La verdad es que no controlo mucho sobre CSS y quería que mi web tuviese pestañas. Encontré un código que me pareció muy sencillo y consigo que se vean las pestañas y consigo cambiar de una a otra. El problema que tengo es que no puedo poner más divs dentro de lo que es el div principal.

Este es el css:

Código:
body { /*Elementos generales del documento*/
	font-family: "Trebuchet MS", Verdana, Arial, Serif;
	font-size: 12px;
	font-weight: bold;
	background: #FFFFFF;
}

ul {
	width: 750px;
	list-style: none; /*Eliminamos el estilo de lista*/
	padding: 0; /*Evita la indentación que aparece en algunos navegadores*/
	margin: 0;
	display: inline; /*Nos permite integrar con los elementos li y evitar problemas -*/
	float: left;	  /*en algunos navegadores*/
	border-bottom: 1px Solid Black;
}

ul li {
	width: 100px;
	display: block;
	float: left; /*Flota los elementos de la lista*/
	text-align: center;
	margin-right: 10px;
	position: relative; /*Hacemos el ajuste de 1 pixel para simular la integración -*/
	top: 1px;           /*con la capa de contenido*/
}

ul li a {
	width: 100px; /*Fijamos el ancho para que el enlace sea toda la pestaña y no solo el texto*/ /*Pestañas que no están activadas*/
	display: block;
	background: #CD5C5C;
	border: 1px Solid #000;
	text-decoration: none;
}

ul li a:link, ul li a:visited, ul li a:active {
	color: #000;
}

ul li a:hover {
	color: #CEE59F;
}

/*Clase especial que resaltará dependiendo de la sección*/
a.actual { /*Pestaña activada*/
	width: 100px;
	display: block;
	background: #9ACD32;
	border-top: 1px Solid #000;
	border-bottom: 1px Solid #9ACD32;
	text-decoration: none;
}

a.actual:link, a.actual:visited, a.actual:active {
	color: #000;
}

a.actual:hover {
	color: #000;
}

#contenido {
	width: 1000px;
	background: #9ACD32;
	float: left;
	margin: 0;
	border-left: 1px Solid #000;
	border-bottom: 1px Solid #000;
	border-right: 1px Solid #000;
	font-weight: normal;
	
}

#contenido p {
	margin: 15px 20px;
}
y se incluye así:

Código HTML:
<body>

<ul>
	<li><a href="home.php" >Home</a></li>
	<li><a href="editar.php" class="actual" >Editar</a></li>
	<li><a href="crear.php">Crear</a></li>
	
</ul>
<div id="contenido"></div>
</body> 
Lo que quiero es poder poner otro div dentro del div "contenido" y no se puede meter dentro, se visualiza como si estuviera fuera.

¿Alguien sabe por qué?

Muchas gracias y un saludo!
  #2 (permalink)  
Antiguo 12/03/2009, 10:00
 
Fecha de Ingreso: febrero-2005
Mensajes: 105
Antigüedad: 12 años, 9 meses
Puntos: 1
Respuesta: Problema con CSS que actua haciendo de pestaña

No entiendo muy bien tu problema. ¿No puedes hacer esto?:

Código:
<div id="contenido">
    <div id="subContenido01">Texto</div>
    <div id="subContenido02">Texto</div>
    <div id="subContenido03">Texto</div>
</div>
  #3 (permalink)  
Antiguo 12/03/2009, 11:04
 
Fecha de Ingreso: febrero-2006
Mensajes: 174
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Problema con CSS que actua haciendo de pestaña

No, no puedo ponerlo. Es decir, lo pongo y la capa aparece, pero no dentro de la capa "contenido". La capa "contenido" desaparece (bueno, en realidad se hace pequeña, solo una línea ocupa) y el resto de capas se ven, pero fuera.
  #4 (permalink)  
Antiguo 12/03/2009, 11:28
 
Fecha de Ingreso: marzo-2009
Mensajes: 50
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Problema con CSS que actua haciendo de pestaña

Probablemente tu problema se deba a que #contenido no esta especificando una altura
intenta definiendo una altura, yo se que lo logico seria que creciera con sus contenidos, pero cuando hay floats de por medio aveces sucede esto.
  #5 (permalink)  
Antiguo 12/03/2009, 11:30
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problema con CSS que actua haciendo de pestaña

no puedes ponerlo por que el div contenido esta flotando a la izquierda, y no entiendo por que flota si mide 1000px de ancho. quitale eso y dejalo asi, o explica por que lo haces flotar:

Código css:
Ver original
  1. #contenido {
  2.     width: 1000px;
  3.     background: #9ACD32;
  4.     margin: 0 auto;
  5.     border-left: 1px Solid #000;
  6.     border-bottom: 1px Solid #000;
  7.     border-right: 1px Solid #000;
  8.     font-weight: normal;
  9.     min-height:100%;height:auto!important; height:100%;/*o la medida que quieras*/
  10.         overflow:auto;
  11. }
así debería funcionarte lo que dice gazpachoymochil
__________________
WFC
codigo82
  #6 (permalink)  
Antiguo 12/03/2009, 11:34
 
Fecha de Ingreso: febrero-2006
Mensajes: 174
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Problema con CSS que actua haciendo de pestaña

He probado a poner height="auto" y parece que funciona. Igual era eso. Yo pensaba que se aumentaría de tamaño ella sola. De hecho lo hacía cuando dentro de "contenido" no había capas. Pero con las capas no crecía sino que MENGUABA!!

muchas gracias!!!

un saludo!
  #7 (permalink)  
Antiguo 12/03/2009, 11:36
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problema con CSS que actua haciendo de pestaña

no entiendo, te sirvió o no?
__________________
WFC
codigo82
  #8 (permalink)  
Antiguo 12/03/2009, 12:00
 
Fecha de Ingreso: febrero-2006
Mensajes: 174
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Problema con CSS que actua haciendo de pestaña

De todas maneras, sólo consigo que se adapte al tamaño que tienen las capas que están desde el principo dentro. Hay algunas que cambian de tamaño en tiempo de ejecución, y el div "contenido" no se adapta a este nuevo tamaño.

Lo de flotar no sé muy bien qué es (ya digo que el css lo he encontrado en internet, no lo he hecho yo). Si quito el parámetro float, no se ve bien, no queda como una pestaña, si no que queda por encima de las mismas. Probando lo que sugiere willyfc, el div contenido sale a la derecha de la pantalla, todo cortado y movido.

Un saludo!
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 02:25.