Foros del Web » Creando para Internet » HTML »

Imagen por delante del background general

Estas en el tema de Imagen por delante del background general en el foro de HTML en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 14/08/2008, 17:56
Avatar de kotik330  
Fecha de Ingreso: agosto-2008
Mensajes: 4
Antigüedad: 9 años, 3 meses
Puntos: 0
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.
  #2 (permalink)  
Antiguo 14/08/2008, 18:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 15/08/2008, 07:29
Avatar de kotik330  
Fecha de Ingreso: agosto-2008
Mensajes: 4
Antigüedad: 9 años, 3 meses
Puntos: 0
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:
<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);">&nbsp;</div>
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):

Código:
<!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} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- 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(/&amp;/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(/&amp;/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);">&nbsp;</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">&nbsp;&nbsp;&nbsp;<span class="headw">{SITENAME}</span><br />&nbsp;&nbsp;&nbsp;<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 -->&nbsp;• &nbsp;<a class="genmedw" href="{U_SEARCH}"><b>{L_SEARCH}</b></a><!-- ENDIF -->
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST -->&nbsp;&nbsp;• &nbsp;<a class="genmedw" href="{U_MEMBERLIST}"><b>{L_MEMBERLIST}</b></a><!-- ENDIF -->
					<!-- IF S_USER_LOGGED_IN -->&nbsp;&nbsp;• &nbsp;<a class="genmedw" href="{U_PROFILE}"><b>{L_PROFILE}</b></a><!-- ENDIF -->
				<!-- ENDIF -->&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;<!-- ENDIF -->&nbsp;&nbsp;&nbsp;</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 />
Dejo también un enlace al foro que le quiero hacer esto: http://anime.freeunlimitedweb.com/foro/index.php

Gracias por ayudarme.
  #4 (permalink)  
Antiguo 15/08/2008, 12:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Imagen por delante del background general

Antes de seguir, ¿realmente necesitas todo eso en el estilo del div?

Cita:
<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);">&nbsp;</div>
¿Seguro que quieres que la imagen de la copa tenga 1024px de alto?

A juzgar por tu imagen, los únicos estilos que necesitas son:

Cita:
<div id="capa" style="position:absolute; left:0px; top:0px; width:100%; height:300px; background-image: url(imagenes/fondocapa.gif);"></div>
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.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 15/08/2008, 12:58
Avatar de kotik330  
Fecha de Ingreso: agosto-2008
Mensajes: 4
Antigüedad: 9 años, 3 meses
Puntos: 0
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.
  #6 (permalink)  
Antiguo 15/08/2008, 16:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Imagen por delante del background general

¿Y dónde se te coloca?
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 15/08/2008, 16:45
Avatar de kotik330  
Fecha de Ingreso: agosto-2008
Mensajes: 4
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Imagen por delante del background general

Se me coloca por delante de las tablas, o sea, al frente de todo.
  #8 (permalink)  
Antiguo 15/08/2008, 18:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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;}
__________________
Visita mi nueva web idplus.org
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 21:50.