Foros del Web » Creando para Internet » CSS »

3 capas (divs) con scroll

Estas en el tema de 3 capas (divs) con scroll en el foro de CSS en Foros del Web. Buen dia a Todos! Me considero Novato en Web (y solo por que no hay menos :P) pero gracias al Foro voy encontrando soluciones a ...
  #1 (permalink)  
Antiguo 20/08/2010, 11:26
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 7 años, 5 meses
Puntos: 0
Pregunta 3 capas (divs) con scroll

Buen dia a Todos!

Me considero Novato en Web (y solo por que no hay menos :P) pero gracias al Foro voy encontrando soluciones a mis problemas...

En esta ocacion, no he encontrado la manera de resolver este problema; expongo:

Utilizando la base de araudi.net de 3 capas con scroll (www.araudi.net/ejemplos/3_capas_con_scroll.html) y el template rhuk_milkyway para joomla...

En mi div superior tengo un menu desplegable que el div central tapa... es decir, el menu queda detras del div central y por lo tanto no puedo acceder a todas las opciones.

Desde ya, Muchas Gracias!!!

*Otra duda: Mi div central no tiene los "bordes" del background... solo aparecen si le quito la propiedad de position: absolute. Por que?

Mi CSS:

html {
height: 100%;
margin-bottom: 0px;
}

body {
font-size:0.75em;
font-family: Helvetica,Arial,sans-serif;
text-align:center;
color: #333;
margin:0;
padding:0;
height:100%;
overflow: hidden;
scrollbar-3dlight-color: #f79953;
scrollbar-darkshadow-color : #f79953;
scrollbar-highlight-color : #f79953;
scrollbar-shadow-color : #f79953;
scrollbar-arrow-color : #105a99;
scrollbar-face-color : #f79953;
scrollbar-track-color : #e6e6e6;
}

#page_bg {
padding: 0;
margin-bottom: 1px;
}

div.center {
text-align: center;
}

div#wrapper {
margin-left: auto;
margin-right: auto;
overflow:hidden;
height:100%;
background:#fff;
}

body.width_medium div#wrapper {
width: 924px;
}

div#header_l {
position: relative;
background: url(../images/backHeader.png) 0 0 repeat-x;
index-z:1;
}

div#header_r {
height: 60px;
padding-left: 500px;
padding-right: 30px;
padding-top: 25px;
overflow: hidden;
text-align: left;
background: url(../images/backHeader.png) 0 0 repeat-x;
}

div#logo {
position: absolute;
left: 0;
top: 0;
width: 460px;
height: 80px;
background: url(../images/logoATeng.png) 0 0 no-repeat;
margin-left: 11px;
margin-top: 5px;
}

#search {
float: left;
width: 125px;
margin-top: -33px;
margin-right: 0px;
margin-left: 175px;
height: 40px;
overflow: hidden;
text-align:right;
}


#menu{
margin: 29px 0 0 -15px;
padding: 0;
width:427px;
height:20px;
float:left;
overflow:hidden;
index-z:1;
}

div#footer {
width: 924px;
position: absolute;
bottom: 0;
background: url(../images/mw_footer_b.png) 0 0 repeat-x;
}

div#footer_l {
height: 115px;
overflow: hidden;
font-weight:bold;
text-aling:center;
font-size:9px;
color: #fff !important;
}

div#footer_r {
left:10px;
height: 115px;
overflow: hidden;
font-weight:bold;
text-aling:center;
font-size:9px;
color: #fff !important;
position:absolute;
bottom:0;
width:914px;
}

div#footer_r a:link, div#footer_r a:visited {
color: #fff;
}

div#footertopleft {
color: #0f5a94 !important;
width: 468px;
height: 60px;
margin: 15px 0 0 10px;
background: #fff;
padding: 0px;
text-align:left;
float:left;
overflow:hidden;
}

div#footertopright {
width: 300px;
height: 60px;
margin: -8px 20px 0 0;
padding: 0px;
text-align:right;
font-weight:bold;
float:right;
}

div#footercopy {
width: 100%;
margin: 10px 0 0 10px;
padding: 0px;
text-align:center;
}

#area {
overflow:hidden;
position:relative;
padding: 0;
height:100%;
margin-left: auto;
margin-right: auto;
top:0px;
}

#whitebox {
overflow:hidden;
position:absolute;
index-z:-1;
width:902px;
margin-left: auto;
margin-right: auto;
top:85px;
bottom:120px;
margin: 0 11px;
background: #fff;
}

#whitebox div {
text-align: justify;
}

#leftcolumn {
width:475px;
height:500px;
padding: 0;
margin: 0;
float:left;
background: url(../images/backSide1.png) 0 0 repeat-x;
overflow:hidden;
}

#maincolumn {
float:left;
padding: 10px;
overflow:auto;
overflow-x:hidden;
background: #fff url(../images/backMain.png) 0 0 no-repeat;
width:407px;
height:100%;
bottom:120px;
}


.
.
.

Mi HTML:

<body id="page_bg" class="color_<?php echo $this->params->get('colorVariation'); ?> bg_<?php echo $this->params->get('backgroundVariation'); ?> width_<?php echo $this->params->get('widthStyle'); ?>">
<a name="up" id="up"></a>
<div class="center" align="center">

<div id="wrapper">
<div id="wrapper_r">
<div id="header">
<div id="header_l">
<div id="header_r">
<div id="logo">
</div>

<div id="search">
<jdoc:include type="modules" name="user4" style="xhtml" />
</div>

<div id="menu">
<jdoc:include type="modules" name="top" style="xhtml"/>
</div>

</div>
</div>
</div>

<div class="clr"></div>


<div id="whitebox">

<div id="leftcolumn">
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left"/>
<?php endif; ?>

</div>

<div id="maincolumn">
<table class="nopad">
<tr valign="top">
<td>
<jdoc:include type="component" />
</td>
<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
<td class="greyline">&nbsp;</td>
<td width="170">
<jdoc:include type="modules" name="right" style="xhtml"/>
</td>
<?php endif; ?>
</tr>
</table>
</div>

<div class="clr"></div>

</div>


<div id="footer">
<div id="footer_l">
<div id="footer_r">
<div id="footertopleft">
<jdoc:include type="modules" name="user3" style="xhtml"/>
</div>

<div id="footertopright">
<p>Follow us <br />
<img src="/images/new/mainIMG/fbttn.png" width="13" height="13" /> <img src="/images/new/mainIMG/tbttn.png" width="13" height="13" /></p>
<p><jdoc:include type="modules" name="syndicate" /></p>
</div>
<div id="footercopy">
<jdoc:include type="modules" name="footer" style="xhtml"/>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>

<jdoc:include type="modules" name="debug" />

</body>
</html>
  #2 (permalink)  
Antiguo 20/08/2010, 14:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: 3 capas (divs) con scroll

¿Ha intentado ya a utilizar la propiedad z-index para su problema de posicionar en el eje z el menú?

En los "bordes del background" me he perdido. No se qué quiso usted decir. Pero compare el código original de Mikmoro (dueño de Araudi.net) y el suyo. Pues en el original, sí se ve si se indica un borde.

Debería usted tener presente el modelo de caja estandar. Pues en ese ejemplo, tendría que compensar cialquier variación del tamaño de la caja central con los valores de top y bottom.

Atentamente
  #3 (permalink)  
Antiguo 24/08/2010, 15:29
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: 3 capas (divs) con scroll

Muchas Gracias Kseso? !!!

Trabajando en tu sugerencia.

Saludos

Etiquetas: capas, scroll
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 03:04.