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!