Foros del Web » Creando para Internet » CSS »

Barras lateares que lleguen hasta el fondo de la pagina

Estas en el tema de Barras lateares que lleguen hasta el fondo de la pagina en el foro de CSS en Foros del Web. Que tal, estoy rediseñando un tracker, ya me costo muchisimo pasarlo de diseño en tablas (ademas las imprimia constantemente con funciones en php) a estandar ...
  #1 (permalink)  
Antiguo 28/06/2006, 20:18
 
Fecha de Ingreso: abril-2006
Mensajes: 32
Antigüedad: 17 años, 11 meses
Puntos: 0
Barras lateares que lleguen hasta el fondo de la pagina

Que tal, estoy rediseñando un tracker, ya me costo muchisimo pasarlo de diseño en tablas (ademas las imprimia constantemente con funciones en php) a estandar 100%. Una ves realizada la limpieza procedi a diseñar y maquetar.

Pero aqui tengo el problema, si el contenido (recent news) es largo, los menu de los costados no se pegan al footer ni a nada, me gustaria que el border ese que tienen siga hasta el final, lo solucione poniendole un gif al contenedor central, pero ahora hay problemas porque eso va a estar en una sola pagina nada mas. Querria que tenga ese border: 5px solid #000 hasta el final.

aca dejo un screen y el codigo.

Desde ya como siempre muchas gracias

Código:
.titulo_menu {

text-align: center;

width: 135px;

	color: #c3ebfe;

	font-family: "Trebuchet MS",Arial, Helvetica, sans-serif;

	font-size: 15px;

	background-color: #a2bedb;

	font-weight: bold;

	padding: 0;

	background-image: url(./images/bgmenu_title.gif);

	background-repeat: repeat-x;

}



#linksList {

	width: 135px;

	float: left;

	margin: 0;

	padding: 0;

text-align: left;

border-right: solid #000 5px;

}

#linksList ul

{

width: 135px;

	margin: 0;

	padding: 0;

	margin-top: 1px;

	list-style-type: none;

}

#linksList li

{

	font-size: 12px;

	font-family: "Trebuchet MS",Arial, Helvetica, sans-serif;

	margin: 0;

	padding: 0;

	border-bottom: 1px solid #dddddd;

	list-style-type: none;
	

	

}

#linksList li a

{

	display:block;



}

#linksList li a:link, #linksList li a:visited

{

	color: #7d7d7d;

	text-decoration: none;

	background-color: #f1f3f5;

}



#linksList li a:hover

{

	color: #3d3d3d;

	text-decoration: none;

	background-color: #d7e0ea;

}

  #2 (permalink)  
Antiguo 28/06/2006, 21:47
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 20 años
Puntos: 20
Si el diseño de tu pagina es estatica, podes usar un "truco" llamado Faux Columns (buscalo en google), ahora, si el diseño es liquido o elastico se te complica.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #3 (permalink)  
Antiguo 29/06/2006, 10:50
Avatar de EdiWorks  
Fecha de Ingreso: marzo-2005
Ubicación: undefined
Mensajes: 64
Antigüedad: 19 años
Puntos: 0
Mira puedes hacer lo siguiente, si por ejemplo tienes un
<div id="contenedor">
aqui va el contenido central de tu pagina blablabla
</div>

suponiendo q tu pagina mide 750px al ancho puedes asignar al #contenedor un estilo de la siguiente forma:

#contenedor {
width:750px:
background-image: url(images/fondocontenedor.png);
background-repeat:repeat-y;
}

Suponiendo entonces que 'fondocontenedor.png' es una imagen de 750px ancho y 1px alto la imagen trazará a lo largo de la página (y mientras esta se haga mas grande) la apariencia de si tuvieras por ejemplo columnas con colores diferentes (depende de la imagen). La imagen puedes obtenerla fácilmente con Fireworks y debe corresponder a lo que necesites. No se si corresponda a la técnica Faux Columns pero es realmente sencillo y se consigue lo que se quiere. Saludos.
__________________
EdiWorks :adios:
=P
  #4 (permalink)  
Antiguo 29/06/2006, 12:06
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 20 años
Puntos: 20
EdiWorks: Si, lo que vos explicaste se llama "Faux Columns" o "Falsas Columnas". Existen formas de hacerlo sin imagenes, para diseños con ancho elastico o liquido, pero en este momento no recuerdo ninguna URL donde lo expliquen.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
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 19:40.