Tema: Enviar div al frente
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 14/01/2011, 04:14
Avatar de MarioAlejandroCR2
MarioAlejandroCR2
 
Fecha de Ingreso: mayo-2010
Ubicación: Esparza - Puntarenas
Mensajes: 98
Antigüedad: 13 años, 10 meses
Puntos: 2
Busqueda Enviar div al frente
Tengo una página de la universidad, un proyecto. Ya la hice pero deseo mejorar el código y estilo, y pasar a l html5 y css3.

El problema se da es que cree una capa con un borde, otra con un ancho y otra con un ancho menor centrada que contendra la información, hasta acá todo va de maravilla, pero para acabar la capa div que va debajo se oculta o queda debajo de la cpa que hace por borde superio, acá una captura:



Segido el código html y el css (con los elementos usados, es mayor y no viene al caso si no intervienen por ahora)

HTML
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Tecnologías de Información | UTN Costa Rica - Puntarenas</title>
  6. <link href="estilo.css" rel="stylesheet" type="text/css">
  7. <script src="prototype.js" type="text/javascript"></script>
  8. <script src="iphpass.js" type="text/javascript"></script>
  9. <script src="iphpassre.js" type="text/javascript"></script>
  10. </head>
  11.  
  12. <body>
  13.  
  14. <section><!--Menú-->
  15.   <div class="banner">
  16.     <img src="media/img/banner.png"/>
  17.     <nav>
  18.       <ul class="menu utntip">
  19.         <li class="current"><a href="index.php" title="Página inical de Tecnologías de Información | UTN Costa Rica - Puntarenas">Inicio</a></li>
  20.         <li><a href="carrera.php" title="Información general de la carrera">Carrera</a></li>
  21.         <li><a href="plandestudios.php" title="Plan de estudios para la carrera">Plan de Estudios</a></li>
  22.         <li><a href="laboratorios.php" title="Información de los laboratorios informáticos">Laboratorios</a></li>
  23.         <li><a href="profesores.php" title="Información sobre los profesores de la carrera">Profesores</a></li>
  24.         <li><a href="descargas.php" title="Descarga material informativo y software libre">Descargas</a></li>
  25.         <li><a href="galerias.php" title="Visita nuestra galería de imágenes">Galeria</a></li>
  26.         <li><a href="calendario.php" title="Calendario de actividades y fechas">Calendario</a></li>
  27.         <li><a href="noticias.php" title="Visita nuestra zona de noticias y comenta">Noticias</a></li>
  28.       </ul>
  29.     </nav>
  30.   </div>
  31. </section>
  32.  
  33. <section>
  34. <div class="divcont">
  35.  
  36. <section>
  37. <div class="divizq">
  38.       <div class="barasup"></div>
  39.       <div class="divgral">
  40.         <div class="divadd">
  41.           Hemos visto en el capítulo anterior qué son las capas y algunas pequeñas muestras sobre cómo crearlas y darle algún estilo. Ahora vamos a ver en detenimiento los atributos específicos para aplicar posicionamiento a una capa y otros estilos.
  42. Antes que nada cabe decir que una capa puede tener cualquier atributo de estilos de los que hemos visto en el manual de CSS. Así, el atributo color indica el color del texto de la capa, el atributo font-size indica el tamaño del texto y así con todos los atributos ya vistos. 
  43.         </div>
  44.         </div>
  45.         <div class="barabot"></div>
  46.       </div>
  47. </section>
  48.  
  49. </div>
  50. </section>

CSS
Código CSS: 
Ver original
  1. body {
  2.     /*Estilo visual del body*/
  3.     background-image:url(media/img/relleno.png);
  4.     background-repeat:repeat-x;
  5.     background-color: #001a6e;
  6.     font-family: Verdana, Helvetica, Arial, sans-serif;
  7.     color: #003a50;
  8. }
  9. title{background-color:#f9f9f9;
  10. }
  11. .barasup{
  12.     -moz-border-radius: 5px 5px 0px 0px;
  13.     background: -moz-linear-gradient(top, #CDCDCD, #B7B7B7);
  14.     height:20px;
  15.     width:700px;
  16.     position:relative;
  17. }
  18. .barabot{
  19.     -moz-border-radius: 0px 0px 5px 5px;
  20.     background: -moz-linear-gradient(top, #CDCDCD, #B7B7B7);
  21.     height:20px;
  22.     width:700px;
  23.     z-index:2;
  24.     position:absolute;
  25. }
  26. .banner {
  27.     /*Estilo del div que contendrá el banner y subbanner*/
  28.     width:950px;
  29.     padding-top:10px;
  30.     align:center;
  31.     margin-left: auto;
  32.     margin-right: auto;
  33.     border:solid 0px;
  34. }
  35. .divcont {
  36.     /*Contiene estilo visual de todo el sitio*/
  37.     padding-top:15px;
  38.     width:950px;
  39.     margin-left: auto;
  40.     margin-right: auto;
  41. }
  42. .divgral {
  43.     /*Es uno de los estilos más importantes, es la parte principal izquierda dentro de el ira divadd*/
  44.     width:700px;
  45.     background-color:#f0f0f0;
  46.     float:left;
  47.     font-family:"Century Gothic";
  48.     font-size:14px;
  49.     text-align:left;
  50.     z-index:1;
  51. }