Problema con CSS que actua haciendo de pestaña

xayide · #1 (**permalink**) 12/03/2009, 08:40

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!

gazpachoymochil · #2 (**permalink**) 12/03/2009, 09:00

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>

xayide · #3 (**permalink**) 12/03/2009, 10:04

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.

Hocker · #4 (**permalink**) 12/03/2009, 10:28

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.

willyfc · #5 (**permalink**) 12/03/2009, 10:30

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#contenido {
    width: 1000px;
    background: #9ACD32;
    margin: 0 auto;
    border-left: 1px Solid #000;
    border-bottom: 1px Solid #000;
    border-right: 1px Solid #000;
    font-weight: normal;
    min-height:100%;height:auto!important; height:100%;/*o la medida que quieras*/
        overflow:auto;
}

así debería funcionarte lo que dice gazpachoymochil

xayide · #6 (**permalink**) 12/03/2009, 10:34

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!

willyfc · #7 (**permalink**) 12/03/2009, 10:36

no entiendo, te sirvió o no?

xayide · #8 (**permalink**) 12/03/2009, 11:00

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!