Enviar div al frente

MarioAlejandroCR2 · #1 (**permalink**) 14/01/2011, 04:14

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tecnologías de Información | UTN Costa Rica - Puntarenas</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
<script src="prototype.js" type="text/javascript"></script>
<script src="iphpass.js" type="text/javascript"></script>
<script src="iphpassre.js" type="text/javascript"></script>
</head>
 
<body>
 
<section><!--Menú-->
  <div class="banner">
    <img src="media/img/banner.png"/>
    <nav>
      <ul class="menu utntip">
        <li class="current"><a href="index.php" title="Página inical de Tecnologías de Información | UTN Costa Rica - Puntarenas">Inicio</a></li>
        <li><a href="carrera.php" title="Información general de la carrera">Carrera</a></li>
        <li><a href="plandestudios.php" title="Plan de estudios para la carrera">Plan de Estudios</a></li>
        <li><a href="laboratorios.php" title="Información de los laboratorios informáticos">Laboratorios</a></li>
        <li><a href="profesores.php" title="Información sobre los profesores de la carrera">Profesores</a></li>
        <li><a href="descargas.php" title="Descarga material informativo y software libre">Descargas</a></li>
        <li><a href="galerias.php" title="Visita nuestra galería de imágenes">Galeria</a></li>
        <li><a href="calendario.php" title="Calendario de actividades y fechas">Calendario</a></li>
        <li><a href="noticias.php" title="Visita nuestra zona de noticias y comenta">Noticias</a></li>
      </ul>
    </nav>
  </div>
</section>
 
<section>
<div class="divcont">
 
<section>
<div class="divizq">
      <div class="barasup"></div>
      <div class="divgral">
        <div class="divadd">
          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.
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. 
        </div>
        </div>
        <div class="barabot"></div>
      </div>
</section>
 
</div>
</section>

CSS

Código CSS:

Ver originalbody {
    /*Estilo visual del body*/
    background-image:url(media/img/relleno.png);
    background-repeat:repeat-x;
    background-color: #001a6e;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #003a50;
}
title{background-color:#f9f9f9;
}
.barasup{
    -moz-border-radius: 5px 5px 0px 0px;
    background: -moz-linear-gradient(top, #CDCDCD, #B7B7B7);
    height:20px;
    width:700px;
    position:relative;
}
.barabot{
    -moz-border-radius: 0px 0px 5px 5px;
    background: -moz-linear-gradient(top, #CDCDCD, #B7B7B7);
    height:20px;
    width:700px;
    z-index:2;
    position:absolute;
}
.banner {
    /*Estilo del div que contendrá el banner y subbanner*/
    width:950px;
    padding-top:10px;
    align:center;
    margin-left: auto;
    margin-right: auto;
    border:solid 0px;
}
.divcont {
    /*Contiene estilo visual de todo el sitio*/
    padding-top:15px;
    width:950px;
    margin-left: auto;
    margin-right: auto;
}
.divgral {
    /*Es uno de los estilos más importantes, es la parte principal izquierda dentro de el ira divadd*/
    width:700px;
    background-color:#f0f0f0;
    float:left;
    font-family:"Century Gothic";
    font-size:14px;
    text-align:left;
    z-index:1;
}

MarioAlejandroCR2 · #2 (**permalink**) 14/01/2011, 04:16

Como veran deseo el segundo div que funciona de capa borde debajo de la capa de texto

MarioAlejandroCR2 · #3 (**permalink**) 14/01/2011, 09:45

Algún consejo?

MarioAlejandroCR2 · #4 (**permalink**) 14/01/2011, 22:32

alguien por favor?

maycolalvarez · #5 (**permalink**) 14/01/2011, 22:37

No re-postees para subir el mensaje, no está permitido en la política de foro.

¿y yo me pregunto: como hacer una pagina en HTML5 con un DOCTYPE XHTML 1.0?: totalmente ilógico (obviamente solo se utilizaría para los tags específicos de html5), además que los borradores de estándares HTML5 y CSS3 no están soportados por completo en la mayoría de los navegadores, y son "borradores" no estándares difundidos, su uso ahora no es recomendado.

sanxuan · #6 (**permalink**) 15/01/2011, 13:09

En esta página http://www.cocemfeweb.zobyhost.com/recuadros.html puedes encontrar un ejemplo bajo el epígrafe "Cabeza, cuerpo y cola: recuadros de tres elementos".
En esa página se usan imágenes para representar las esquinas y los degradados.

Las propiedades que empiezan por -moz sólo se verán en Mozilla. Otros también esperamos que CSS3 se vaya convirtiendo en una realidad.