Ya lo había probado, se posiciona por encima de la capa right y de otra capa llamada #footer que le sigue. Y he hecho tal como has puesto, en un documento html aparte y funciona. Creo que ya se cual es el problema debe ser por los tamaños de la template, es decir, la suma del contenido es más grande que el contenedor, lo pruebo y te comento.
Gracias por tu temprana respuesta,
un saludo.
P.D.: Aquí está el código completo, los jdoc:include es por la posición de los módulos ya que estoy haciendo un template para joomla.
Código HTML:
<body>
<!-- Comienzo capa de la imagen de fondo -->
<div class="header-background">
<!-- Comienzo capa top -->
<div id="top">
<div class="content-top">
<!-- Comienzo capa traduccion -->
<div id="translate"><jdoc:include type="modules" name="translate" style="xhtml" />TRANSLATE</div>
<!-- Fin capa traduccion -->
<div class="content-top-right">
<!-- Comienzo capa perfil -->
<div id="my_profile"><jdoc:include type="modules" name="profile" style="xhtml" />MY PROFILE</div>
<!-- Fin capa perfil -->
<!-- Comienzo capa topmenu -->
<div id="topmenu"><jdoc:include type="modules" name="topmenu" style="xhtml" />TOPMENU</div>
<!-- Comienzo capa topmenu -->
</div>
</div>
</div>
<!-- Fin capa top -->
<!-- Comienzo capa body -->
<div id="body">
<!-- Comienzo capa header -->
<div id="header">
</div>
<!-- Fin capa header -->
<!-- Comienzo breadcumb -->
<div id="breadcrumb">
<div id="search">
<jdoc:include type="modules" name="search" style="xhtml" />SEARCH
</div>
</div>
<!-- Fin capa breadcumb -->
<!-- Comienzo capa all-content -->
<div class="all-content">
<!-- Comienzo contenedor de contenido -->
<div class="content-pri">
<!-- Comienzo contenido -->
<div id="principal">
<div class="header-content">
</div>
<div id="content">
<jdoc:include type="component" />
</div>
</div>
<!-- final content -->
<!--footer content -->
<div class="content-table">
<div id="notes">
<div class="header-table">
<jdoc:include type="modules" name="footer-content1" style="xhtml" />
</div>
</div>
<div id="last-articles">
<div class="header-table">
<jdoc:include type="modules" name="footer-content2" style="xhtml" />
</div>
</div>
</div>
<!-- fin footer content -->
</div>
<!--Final contenedor de contenido -->
<!-- Comienza columna derecha -->
<div id="right">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<!-- Fin columna derecha -->
</div>
<!-- FIn capa all-content -->
<!-- Comienza footer -->
<div id="footer">
<div class="footer-pri">
<div class="help-support">
<jdoc:include type="modules" name="help-support" style="xhtml" />help-support
</div>
<div class="follow">
<jdoc:include type="modules" name="follow" style="xhtml" />follow
</div>
<div class="partners">
<jdoc:include type="modules" name="partners" style="xhtml" />partners
</div>
<div class="others-links">
<jdoc:include type="modules" name="others-links" style="xhtml" />others-links
</div>
</div>
<div class="footer-copy">
<div class="copyright">
<jdoc:include type="modules" name="copyright" style="xhtml" />COPYRIGHT
</div>
</div>
</div>
<!-- Fin footer -->
</div>
<!-- Fin capa body -->
</div>
<!-- Fin capa de la imagen de fondo -->
</body> CSS:
Código HTML:
* {
padding: 0;
margin: 0;
}
BODY {
background-color: #fff;
background-image: url(../images/background-body.png);
background-repeat: repeat-x;
font-family: LucidaSans Unicode, Lucida Grande, sans-serif;
font-size: 12px;
}
.header-background {
background-image: url(../images/background-head.png);
background-repeat: repeat-x;
z-index: 0;
width: 100%;
height: 279px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#top {
background-image: url(../images/background-top.png);
background-repeat: repeat-x;
width: 100%;
height: 40px;
z-index: 1;
position: relative;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
color: #fff;
}
#body {
background-image: url(../images/backgroundcontent.png);
background-repeat: repeat-y;
width: 940px;
margin: 0 auto;
}
#header {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
width: 900px;
position:relative;
height: 189px;
margin: 0 auto;
}
#breadcrumb {
background-image: url(../images/bg-breadcrumb.png);
background-repeat: no-repeat;
width: 900px;
position:relative;
height: 30px;
margin: 0 auto;
}
.header-content {
background-image: url(../images/headercontent.png);
background-color: #C4B498;
width: 607px;
height: 17px;
position:relative;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
}
#principal {
background-color: #C4B498;
margin: 0px 40px 20px 0px;
width: 607px;
height: 100px;
}
#right {
width: 233px;
height: 100px;
border: solid 1px #fff;
}
.content-pri {
width: 607px;
float: left;
}
.content-table {
margin: 0;
width: 606px;
height: 100px;
}
#notes {
background-color: #C4B498;
width: 293px;
height: 100px;
float: left;
}
#last-articles {
background-color: #C4B498;
width: 293px;
height: 100px;
float: right;
}
.header-table {
background-image: url(../images/headertable.png);
background-color: #C4B498;
width: 293px;
height: 19px;
position:relative;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
}
#translate {
width: 198px;
height: 39px;
float: left;
text-align: center;
padding-top: 10px;
vertical-align: top;
font-size: 12px;
font-weight: bold;
}
.content-top-right {
width: 922px;
height: 39px;
float: right;
}
.content-top {
height: 39px;
width: 1120px;
float: left;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
}
#my_profile {
height: 39px;
float: left;
padding-top: 10px;
margin-left: 77px;
vertical-align: top;
font-size: 12px;
font-weight: bold;
}
#topmenu {
height: 39px;
float: right;
padding-top: 10px;
margin-right: 21px;
vertical-align: top;
font-size: 12px;
font-weight: bold;
}
#search {
height: 30px;
margin-right: 21px;
float: right;
padding-top: 6px;
}
.all-content {
margin: 20px 40px 20px 40px;
width: 860px;
position: relative;
}
#footer {
background-image: url(../images/footer.png);
width: 900px;
height: 209px;
margin: 0 auto;
}
.footer-pri{
width: 900px;
height: 136px;
}
.help-support{
padding: 33px 10px 0 10px;
width: 189px;
height: 136px;
float: left;
}
.follow{
padding-top: 33px;
width: 394px;
height: 136px;
float: left;
}
.partners{
padding-top: 33px;
width: 158px;
height: 169px;
float: left;
}
.others-links{
padding-top: 33px;
width: 139px;
height: 136px;
float: left;
}
.footer-copy{
width: 900px;
height: 40px;
}
.copyright {
margin: 15px 10px 5px 0;
float: right;
color: #C4B498;
font-size: 9px;
font-weight: bold;
}