Foros del Web - Ver Mensaje Individual

Snd234 · #1 (**permalink**) 26/05/2007, 13:54

Estoy haciendo un tema para Wordpress, para un sitio personal, ahora estoy pasando mi diseño a HTML, pero tengo unos problemas con un fondo que quiero que se repita...

El sitio esta estructurado asi:

Código PHP:

  <div class="page"> 
    <div class="header"></div> 
    <div class="main"> 
        <div class="content"></div> 
        <div class="sidebar"></div> 
    </div> 
    <div class="footer"></div> 
</div>

Dentro de main, deberia ir una imagen de fondo, que se repetiria hacia abajo, pero a medida que ingreso algun texto a la capa content y esta va creciendo, el fondo solo se queda arriba, no se repite, de hecho la capa main no crece junto content, pero si lo hace junto a sidebar.

De que forma puedo hacer para que la capa main cresca junto a la del contenido? para asi completar el fondo hasta el footer de la pagina?

PD: Esto solo me ocurre con Firefox (con quien veo todas mis paginas), sin embargo con IE7 el fondo se repite sin problema hasta el final...

Aqui dejo el codigo completo de lo que llevo hasta ahora

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>

<style type="text/css">

body {
	margin: 0px auto;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color:#FF9933
	}

.page {
	width: 780px;
	margin: 0px auto;
	}
	
.header {
	width: 780px;
	height: 150px;
	background-image: url(images/_Desing4_01.png);
	background-repeat: no-repeat;
	background-position: top;
	}
	
.main {
	width: 780px;
	background-image:url(images/_Desing4_07.png);
	background-repeat: repeat-y;
	background-position: top;
	}

.content {
	width: 530px;
	margin-left: 30px;
	float:left;
	padding-top: 10px;
	border: 1px solid #000000;
	}

.sidebar {
	width: 160px;
	margin-right: 30px;
	padding-top: 10px;
	border: 1px solid #000000;
	float: right;
	}

.footer {
	height: 53px;
	width: 780px;
	background-image:url(images/_Desing4_08.png);
	background-position: top;
	background-repeat: no-repeat;
	clear: both;
	padding-top: 10px;
	}

</style>

</head>

<body>
<div class="page">
	<div class="header"> 
	</div>
	<div class="main">
		<div class="content">
			TEXTO<br>
			TEXTO<br>
			TEXTO<br>
			TEXTO<br>
			TEXTO<br>
			TEXTO<br>		
		</div>
		<div class="sidebar">
			menu 1<br>
			menu 2<br>
			menu 3<br>
			menu 4<br>
		</div>
	</div>
	<div class="footer"></div>
</div>
</body>
</html>