background top, middle y bottom separados =S

XxflezhaxX · #1 (**permalink**) 16/07/2010, 17:35

Hola amigos.
vean este url:
http://html09.freeiz.com/sy/

veran que el too aparece separado del middle por un salto de linea y el bottom igual.

he usado el siguiente code CSS

Código CSS:

Ver originalbody { 
background-image:url('flame.jpg');
background-repeat:no-repeat;
background-position:bottom left;
}
 
.top {
background-image:url("top.png");
background-repeat:no-repeat;
}
 
.middle {
background-image:url("middle.png");
background-repeat:repeat-y;
}
 
.bottom {
background-image:url("bottom.png");
background-repeat:no-repeat;
}
 
#list,p {
padding-left:100px;
color:#FFFFFF;
}

y en el HTML he puesto la lista usando la etiq <p> y para la lista desordenada <ul compact><li></ul>

vean el code:

Código HTML:

<html>
<head>
<link rel="stylesheet" a href="stile.css" type="text/css" />
</head>
<body>

<div class="top"><br/></div>
<div class="middle"><p>En este tema, tocaremos todo lo relacionado con la XHTML, HTML y CSS<br/>
aqui os dejo una lista con multiples temas:</p>
<ul compact id="list">
<li>Introduccion
<li>Texto
<li>Links
<li>Anclas
<li>Imagenes

<li>Tablas
<li>Listas
<li>Formularios
<li>Mapas
<li>Validacion del Codigo
</ul>
</div><div class="bottom"><br/></div>
</body>
</html>

en las class top y bottom si las dejo vacia no me aparecen los background, por lo tanto tengo que poner <br/> o  

espero os ayuda!!

quiero que queden unidas =D

TheDark03 · #2 (**permalink**) 16/07/2010, 18:24

Hola...

mira para q evites usar <br> o &nbsp utiliza la propiedad

min-height:15px;

ahora en tu lista nunca cierras las etiquetas <li></li>

aca te dejo el code:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" a href="stile.css" type="text/css" />
</head>
<style>
body { 
background-image:url('flame.jpg');
background-repeat:no-repeat;
background-position:bottom left;
}
 
.top {
background-image:url("top.png");
background-repeat:no-repeat;
float:left;
width:1224px;
height:32px;
}
 
.middle {
float:left;
width:1224px;min-height:500px;
background-image:url("middle.png");
background-repeat:repeat-y;
}
 
.bottom {
float:left;
background-image:url("bottom.png");
background-repeat:no-repeat;
width:1224px;
height:32px;
}
 
#list,p {
padding-left:100px;
color:#FFFFFF;
}
 
</style>
<body>
 
<div class="top"><br/></div>
<div class="middle"><p>En este tema, tocaremos todo lo relacionado con la XHTML, HTML y CSS<br/>
aqui os dejo una lista con multiples temas:</p>
<ul compact id="list">
<li>Introduccion</li>
<li>Texto</li>
<li>Links</li>
<li>Anclas</li>
<li>Imagenes</li>
 
<li>Tablas</li>
<li>Listas</li>
<li>Formularios</li>
<li>Mapas</li>
<li><h1>Validacion del Codigo</h1> procura cerrar etiquetas</li>
</ul>
</div><div class="bottom"><br/></div>
</body>
</html>

Saludos

XxflezhaxX · #3 (**permalink**) 16/07/2010, 19:51

Bueno al final lo hice diferente.
para arreglar lo del salto de arriba solo quite el <p> y use un div (ya que P me daba salto de linea) a eso se debia ese espacio.

y el de abajo no tuve otra opciones que darle un alto (height) al background del medio para que alcanzara al backgr de abajo y quedaran juntas. El unico problemita es que cuando amplie contenido tendre que estar ampliando el "height" del backgr del medio.

Al final quedo asi el CSS:

Código CSS:

Ver originalbody { 
background-image:url('flame.jpg');
background-repeat:no-repeat;
background-position:bottom left;
}
 
.top {
background-image:url("top.png");
background-repeat:no-repeat;
width:1224px;
height:32px;
}
 
.middle {
background-image:url("middle.png");
background-repeat:repeat-y;
height:280px;
}
 
.bottom {
background-image:url("bottom.png");
background-repeat:no-repeat;
width:1224px;
height:32px;
}
 
#list,#text {
padding-left:100px;
color:#FFFFFF;
}

Saludos!!

XxflezhaxX · #4 (**permalink**) 17/07/2010, 10:37

Bueno volviendo al mismo tema, es que me surgio otro problema, ahi esta el code como lo tengo arriba de este post.

el punto es que el contenido es dinamico, o sea, quitare, pondre, etc etc...
el problema es que tengo que estar ajustando el height al background del medio (middle) y eso como que ya se me hizo una lata.

alguna alternativa?

o sea, que siempre se ajuste al contenido, sea poco o mucho,
Pero antes de... dejenme les explico lo que explique anteriormente, el background de abajo (bottom) me da un salto de linea, es por eso que ajusto el height.

si dejara de ajustar el height me funcionaria dinamicamente, pero el problema es que el backgr de abajo me da ese salto.

espero respuestas.
saludos!!