Comunidad de diseño web y desarrollo en internet online

Añadir imagenes como bordes laterales de un div

Citar            
MensajeEscrito el 04 Mar 2009 12:23 am
Hola a todos,

Acabo de registrarme por primera vez en este foro, aunque sigo el blog con frecuencia desde hace tiempo ya. Un saludo a todos.

Os quiero hacer una consulta sobre algo que en un principio pensé que sería facil de hacer pero que a la hora de la verdad me ha supuesto estancarme y perderme.

Tengo un sitio en el que tengo un div central con todo el contenido del página. Dicho div, ha de tener a los laterales, un borde con sombra y degradado. Para hacer esto he de usar dos imagenes con dicho efecto para ubicar en el lateral izquierdo y el derecho respectivamente.

No sé si estaré complicandome la vida mas de lo necesario pero lo que he hecho hasta ahora ha sido intentar añadir un div a cada lado con cada imagen fondo. pero no consigo ajustarlo bien de ninguna manera.

He subido este experimento a un server prestado donde deberíais poder ver mi picha hecha un lio xDDD

http://www.abaniconetworks.com/desarrollo/kianuevo/

Ahí podeís ver como he conseguido añadirle el lateral izquierdo, pero he perdido el centrado que tenía. El lateral derecho ha quedado descolgado en la parte inferior derecha. Pensaba que una vez colocado el lateral izquierdo podia copiar las css de este y pegarlas en las del derecho y hacer unos pequeños cambios e iría todo perfecto, pero no ha sido así.

Agradecería cualquier información que me abra un poco el camino en mi loco experimento. :oops:

Un saludo a todos

Por Dovernauta

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Mar 2009 02:27 am
pienso que mejor sería utilizar una sola imagen, pero cuanto mide de ancho tu web?, digamos que si mide 800x600, haces una imagen del mismo ancho con las sombras y si quieres con fondo blanco o transparente dependiendo de como se maneje el diseño de tu contenido, haz que solo un div contenga toda la web y se la pones de fondo y haces que se repita en en eje y:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
#contenedor{width:800px; height:auto; background:/*imagen con sombras*/ repeat-y;overflow:auto;}
#cabecera{}
#cuerpo{}
#pie{}
</style>
</head>

<body>
<div id="contenedor">
   <div id="cabecera"></div>
   <div id="cuerpo"></div>
   <div id="pie"></div>
</div>
</body>
</html>

Por willyfc

2 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.