CSS para banner dinámico

trotskid Seguir

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
30 Ene 2009
Mensajes
138
Hola.

Necesito ayuda para crear un código que expanda el header de un foro de manera apropiada.

Mi idea es la de crear dos partes del banner y que la parte de la dcha. colapse a la izq. llegado a un punto, es decir, llegado a un tamaño de pantalla que se vaya acortando hasta un límite establecido (el de la parte izq donde iría el logo).

bannerfinal4recortado2t.jpg


Este es el código de la parte del header, pero no colapsa la parte de la dcha. con la izq:

<td align="left" valign="top"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/head_left2.gif" border="0" alt=""/></a></td>

<td align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/head_right2.gif" alt="" /></td>


Gracias y un saludo


PD: Un ejemplo de lo que me refiero se puede ver en el banner de la página driverheaven.net, aunque en ésta son tres partes y no dos como había planeado, aunque también podría servir ya que el fondo que uso es bastante homogéneo :)
 

Daniel B.

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
25 Abr 2009
Mensajes
188
Hola,

Si comprendo bien, esto te puede ayudar:
Insertar CODE, HTML o PHP:
/* ENCABEZADO */
.encabezado, .encabezado .eizq {
	background: #3E4C59 url("imagen.gif") repeat-x top left;
}
.encabezadoTabla {
	height: 95px;
	border-collapse: collapse;
}
.encabezadoTabla {
	width: 100%;
}
.encabezado .izq{
	padding: 23px 0 0 15px;
	background: transparent url("imagen.gif") no-repeat top left;
}
.encabezado .der {
	vertical-align: bottom;
	width: 171px;
	padding: 0 20px 20px 0;
}
.encabezado .med {
	background: transparent url("imagen.gif") no-repeat top right;
	vertical-align: bottom;
	width: 171px;
	padding: 0 20px 20px 0;
}

El código de por si se entiende, simplemente aplicas class="encabezado" a lo que lo compone, class="med/der o izq" a los patrones, si tal cosa esta en la derecha, pues "der", y tabla se puede aplicar también a "encabezado",

Ese código lo he sacado de un website mio, pero no puedo hacer spam, no sé si puedo ponerlo para darles el ejemplo no más...
 
Arriba