Foros del Web » Creando para Internet » CSS »

Enviar div al frente

Estas en el tema de Enviar div al frente en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 14/01/2011, 04:14
Avatar de MarioAlejandroCR2  
Fecha de Ingreso: mayo-2010
Ubicación: Esparza - Puntarenas
Mensajes: 98
Antigüedad: 7 años, 6 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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Tecnologías de Información | UTN Costa Rica - Puntarenas</title>
  5. <link href="estilo.css" rel="stylesheet" type="text/css">
  6. <script src="prototype.js" type="text/javascript"></script>
  7. <script src="iphpass.js" type="text/javascript"></script>
  8. <script src="iphpassre.js" type="text/javascript"></script>
  9. </head>
  10.  
  11.  
  12. <section><!--Menú-->
  13.   <div class="banner">
  14.     <img src="media/img/banner.png"/>
  15.     <nav>
  16.       <ul class="menu utntip">
  17.         <li class="current"><a href="index.php" title="Página inical de Tecnologías de Información | UTN Costa Rica - Puntarenas">Inicio</a></li>
  18.         <li><a href="carrera.php" title="Información general de la carrera">Carrera</a></li>
  19.         <li><a href="plandestudios.php" title="Plan de estudios para la carrera">Plan de Estudios</a></li>
  20.         <li><a href="laboratorios.php" title="Información de los laboratorios informáticos">Laboratorios</a></li>
  21.         <li><a href="profesores.php" title="Información sobre los profesores de la carrera">Profesores</a></li>
  22.         <li><a href="descargas.php" title="Descarga material informativo y software libre">Descargas</a></li>
  23.         <li><a href="galerias.php" title="Visita nuestra galería de imágenes">Galeria</a></li>
  24.         <li><a href="calendario.php" title="Calendario de actividades y fechas">Calendario</a></li>
  25.         <li><a href="noticias.php" title="Visita nuestra zona de noticias y comenta">Noticias</a></li>
  26.       </ul>
  27.     </nav>
  28.   </div>
  29.  
  30. <div class="divcont">
  31.  
  32. <div class="divizq">
  33.       <div class="barasup"></div>
  34.       <div class="divgral">
  35.         <div class="divadd">
  36.           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.
  37. 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.
  38.         </div>
  39.         </div>
  40.         <div class="barabot"></div>
  41.       </div>
  42.  
  43. </div>

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. }
  #2 (permalink)  
Antiguo 14/01/2011, 04:16
Avatar de MarioAlejandroCR2  
Fecha de Ingreso: mayo-2010
Ubicación: Esparza - Puntarenas
Mensajes: 98
Antigüedad: 7 años, 6 meses
Puntos: 2
Respuesta: Enviar div al frente

Como veran deseo el segundo div que funciona de capa borde debajo de la capa de texto
  #3 (permalink)  
Antiguo 14/01/2011, 09:45
Avatar de MarioAlejandroCR2  
Fecha de Ingreso: mayo-2010
Ubicación: Esparza - Puntarenas
Mensajes: 98
Antigüedad: 7 años, 6 meses
Puntos: 2
Respuesta: Enviar div al frente

Algún consejo?
  #4 (permalink)  
Antiguo 14/01/2011, 22:32
Avatar de MarioAlejandroCR2  
Fecha de Ingreso: mayo-2010
Ubicación: Esparza - Puntarenas
Mensajes: 98
Antigüedad: 7 años, 6 meses
Puntos: 2
Respuesta: Enviar div al frente

alguien por favor?
  #5 (permalink)  
Antiguo 14/01/2011, 22:37
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Enviar div al frente

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.
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #6 (permalink)  
Antiguo 15/01/2011, 13:09
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Enviar div al frente

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.

Etiquetas: enviar
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 16:20.