14/08/2008, 16:56
| ||||
| ||||
| Imagen por delante del background general Hola a todos, os comento el problema que tengo y del cual no encuentro solución. Tengo un foro al cual le he asignado un background. Lo que quiero hacer es poner una imagen entre el background y lo que son las tablas del foro. O sea, que esta imagen quede como un bocadillo, el background y las tablas del foro serían el pan y la imagen sería la carne (si, es un ejemplo un poco tonto, pero no se me ha ocurrido nada mejor, XD) Yo se crear un DIV con la propiedad z-index para la imagen que queda situada por delante del background. EL problema viene ahora. ¿Cómo defino a todo el foro que la imagen o DIV ha de quedar entre el backgrund y las tablas? He probado introduciendo la propiedad z-index a las demás divisiones pero...para poder poner esta propiedad primero he de definir style="position:absolute; y esto me lo descuadra todo. Yo quiero que todas las tablas del foro se queden en el centro pero no se como hacerlo. Bueno, no se si me he explicado muy bien, si no es así decírmelo he intento explicarme mejor. Gracias de antemano y un saludo. |
|
14/08/2008, 17:45
| ||||
| ||||
| Respuesta: Imagen por delante del background general No es imprescindible que sea position:absolute para que acepte el z-index; también podría ser relative, que te descuadrará mucho menos las cosas. Las capas se van superponiendo conforme aparecen en el flujo del documento, debajo las primeras y encima las últimas, de manera que el sitio adecuado para colocar esa capa sería después del background y antes de las tablas, es decir, casi seguro en un primer envoltorio general, porque imagino que el fondo se lo has puesto al body, y de esa manera se colocaría en su sitio de forma natural. Si muestras el sitio y lo que estás intentando será más posible dar en el clavo con la respuesta.
__________________ No esperes que nadie haga más esfuerzo en responderte que el que hagas tú en preguntar. |
|
15/08/2008, 06:29
| ||||
| ||||
| Respuesta: Imagen por delante del background general El foro lo estoy preparando en un servidor virtual en mi pc por lo que va a ser difícil que puedas verlo. Lo que voy a hacer es explicarme al detalle intentando poner los datos máximos posibles (pero útiles) para que puedas hacerte una idea. A continuación pongo un esquema en colores de la disposición del las capas del foro, tal como las quiero poner:  En rosa está lo que sería el background del Body, que sería un bucle de una imagen simulando un tronco de árbol. En verde seria la imagen que quiero poner entre el rosa y el negro, sería la copa de un árbol. En negro todas las tablas del foro (foros, posts, header, etc) Como ya he comentado el verde quedaría entre el rosa y el negro, para hacer esta función utilizo este código:
Código:
Y puesto con todo el código del foro, o sea, en la parte que corresponde, en mi caso en el overall_header (Por cierto y si sirve de ayuda el foro es phpbb3):<div id="capa" style="position:absolute; left:0px; top:0px; width:100%; height:1024px; z-index:3; visibility: visible; background-color: #ff0000; background-color: #ff0000; background-image: url(imagenes/fondocapa.gif); background-image: url(imagenes/fondocapa.gif); clip: rect(1 auto auto 3);"> </div>
Código:
Dejo también un enlace al foro que le quiero hacer esto: http://anime.freeunlimitedweb.com/foro/index.php<!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" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2002-2006 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} • <!-- IF S_IN_MCP -->{L_MCP} • <!-- ELSEIF S_IN_UCP -->{L_UCP} • <!-- ENDIF -->{PAGE_TITLE}</title>
<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />
<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP -->
if ({S_NEW_PM})
{
popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
}
<!-- ENDIF -->
function popup(url, width, height, name)
{
if (!name)
{
name = '_popup';
}
window.open(url.replace(/&/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
return false;
}
function jumpto()
{
var page = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
var perpage = '{PER_PAGE}';
var base_url = '{A_BASE_URL}';
if (page !== null && !isNaN(page) && page > 0)
{
document.location.href = base_url.replace(/&/g, '&') + '&start=' + ((page - 1) * perpage);
}
}
/**
* Find a member
*/
function find_username(url)
{
popup(url, 760, 570, '_usersearch');
return false;
}
/**
* Mark/unmark checklist
* id = ID of parent container, name = name prefix, state = state [true/false]
*/
function marklist(id, name, state)
{
var parent = document.getElementById(id);
if (!parent)
{
eval('parent = document.' + id);
}
if (!parent)
{
return;
}
var rb = parent.getElementsByTagName('input');
for (var r = 0; r < rb.length; r++)
{
if (rb[r].name.substr(0, name.length) == name)
{
rb[r].checked = state;
}
}
}
<!-- IF ._file -->
/**
* Play quicktime file by determining it's width/height
* from the displayed rectangle area
*
* Only defined if there is a file block present.
*/
function play_qt_file(obj)
{
var rectangle = obj.GetRectangle();
if (rectangle)
{
rectangle = rectangle.split(',')
var x1 = parseInt(rectangle[0]);
var x2 = parseInt(rectangle[2]);
var y1 = parseInt(rectangle[1]);
var y2 = parseInt(rectangle[3]);
var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
}
else
{
var width = 200;
var height = 0;
}
obj.width = width;
obj.height = height + 16;
obj.SetControllerVisible(true);
obj.Play();
}
<!-- ENDIF -->
// ]]>
</script>
</head>
<body class="{S_CONTENT_DIRECTION}">
<div id="capa" style="position:absolute; left:0px; top:0px; width:100%; height:1024px; z-index:3; visibility: visible; background-color: #ff0000; background-color: #ff0000; background-image: url(imagenes/fondocapa.gif); background-image: url(imagenes/fondocapa.gif); clip: rect(1 auto auto 3);"> </div>
<a name="top"></a>
<div id="wrapheader">
<table width="100%" height="200" border="0" align="center" cellpadding="0" cellspacing="0" style="background:url('{T_THEME_PATH}/images/mid.gif')">
<tr>
<td height="79"> <span class="headw">{SITENAME}</span><br /> <span class="genmedw">{SITE_DESCRIPTION}</span></td>
<td height="79" align="right">
</td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:url('{T_THEME_PATH}/images/top.gif');">
<tr>
<td height="32" width="20%" align="center"><span class="genmedw">
<!-- IF not S_IS_BOT -->
<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_DISPLAY_PM --><a class="genmedw" href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a><!-- ENDIF -->
<!-- ENDIF -->
<!-- ENDIF --></span></td>
<td width="50%" align="center"><span class="genmedw">
<a class="genmedw" href="{U_FAQ}"><b>{L_FAQ}</b></a>
<!-- IF S_DISPLAY_SEARCH --> • <a class="genmedw" href="{U_SEARCH}"><b>{L_SEARCH}</b></a><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --> • <a class="genmedw" href="{U_MEMBERLIST}"><b>{L_MEMBERLIST}</b></a><!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN --> • <a class="genmedw" href="{U_PROFILE}"><b>{L_PROFILE}</b></a><!-- ENDIF -->
<!-- ENDIF --> </span></td>
<td width="30%" align="right"><span class="genmedw">
<!-- IF not S_IS_BOT --><a class="genmedw" href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a> <!-- ENDIF --> </span> </td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="7" height="6" align="right"><img src="{T_THEME_PATH}/images/bl.gif" width="7" height="6" alt="" /></td>
<td width="100%" height="6" style="background:url('{T_THEME_PATH}/images/bm.gif');"></td>
<td width="7" height="6"><img src="{T_THEME_PATH}/images/br.gif" width="7" height="6" alt="" /></td>
</tr>
</table>
<div id="datebar">
<table width="100%" cellspacing="0">
<tr>
<td class="gensmall"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ENDIF --></td>
<td class="gensmall" align="center"><!-- IF U_RESTORE_PERMISSIONS --> <a class="genmedw" href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a><!-- ENDIF -->
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> <span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_USER_LOGGED_IN -->
<!-- ELSE --> <a class="genmedw" href="{U_REGISTER}"><b>{L_REGISTER}</b></a>
<!-- ENDIF -->
<!-- ENDIF --></td>
<td class="gensmall" align="{S_CONTENT_FLOW_END}">{CURRENT_TIME}<br /></td>
</tr>
</table>
</div>
</div>
<div id="wrapcentre">
<!-- IF S_DISPLAY_SEARCH -->
<p class="searchbar">
<span style="float: {S_CONTENT_FLOW_BEGIN};"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></span>
<!-- IF S_USER_LOGGED_IN -->
<span style="float: {S_CONTENT_FLOW_END};"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span>
<!-- ENDIF -->
</p>
<!-- ENDIF -->
<br style="clear: both;" />
<!-- INCLUDE breadcrumbs.html -->
<br />
Gracias por ayudarme. |
|
15/08/2008, 11:01
| ||||
| ||||
| Respuesta: Imagen por delante del background general Antes de seguir, ¿realmente necesitas todo eso en el estilo del div? Cita: ¿Seguro que quieres que la imagen de la copa tenga 1024px de alto?<div id="capa" style="position:absolute; left:0px; top:0px; width:100%; height:1024px; z-index:3; visibility: visible; background-color: #ff0000; background-color: #ff0000; background-image: url(imagenes/fondocapa.gif); background-image: url(imagenes/fondocapa.gif); clip: rect(1 auto auto 3);"> </div> A juzgar por tu imagen, los únicos estilos que necesitas son: Cita: Ahora coloca ese div justo después del body, y debería ir al sitio que te interesa en profundidad automáticamente. Si no va habrá que ver el resto de elementos de la css. <div id="capa" style="position:absolute; left:0px; top:0px; width:100%; height:300px; background-image: url(imagenes/fondocapa.gif);"></div>
__________________ No esperes que nadie haga más esfuerzo en responderte que el que hagas tú en preguntar. |
|
15/08/2008, 11:58
| ||||
| ||||
| Respuesta: Imagen por delante del background general Como bien dices, hay algunos elementos del Div que son innecesarios, y he colocado como dices el div después del body pero sigue sin colocarse donde yo quiero. Te pongo el css del foro, haber si deducimos donde puede estar la solución. http://www.megaupload.com/?d=XCGXCBS5 Lo he tenido que subir a un server porque el foro tiene un límite de 10000 caracteres por post. |
|
15/08/2008, 17:26
| ||||
| ||||
| Respuesta: Imagen por delante del background general Uggg, lo siento: he olvidado decirte que como ese div tiene posición absoluta, las tablas deberán tener posición relativa para que se respete la profundidad con el flujo de documento. table {position:relative;}
__________________ No esperes que nadie haga más esfuerzo en responderte que el que hagas tú en preguntar. |
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.
