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"> </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>
