Foros del Web » Creando para Internet » CSS »

background top, middle y bottom separados =S

Estas en el tema de background top, middle y bottom separados =S en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/07/2010, 18:35
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
background top, middle y bottom separados =S

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 original
  1. body {
  2. background-image:url('flame.jpg');
  3. background-repeat:no-repeat;
  4. background-position:bottom left;
  5. }
  6.  
  7. .top {
  8. background-image:url("top.png");
  9. background-repeat:no-repeat;
  10. }
  11.  
  12. .middle {
  13. background-image:url("middle.png");
  14. background-repeat:repeat-y;
  15. }
  16.  
  17. .bottom {
  18. background-image:url("bottom.png");
  19. background-repeat:no-repeat;
  20. }
  21.  
  22. #list,p {
  23. padding-left:100px;
  24. color:#FFFFFF;
  25. }

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 &nbsp;

espero os ayuda!!

quiero que queden unidas =D
  #2 (permalink)  
Antiguo 16/07/2010, 19:24
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: background top, middle y bottom separados =S

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <link rel="stylesheet" a href="stile.css" type="text/css" />
  3. </head>
  4. body {
  5. background-image:url('flame.jpg');
  6. background-repeat:no-repeat;
  7. background-position:bottom left;
  8. }
  9.  
  10. .top {
  11. background-image:url("top.png");
  12. background-repeat:no-repeat;
  13. float:left;
  14. width:1224px;
  15. height:32px;
  16. }
  17.  
  18. .middle {
  19. float:left;
  20. width:1224px;min-height:500px;
  21. background-image:url("middle.png");
  22. background-repeat:repeat-y;
  23. }
  24.  
  25. .bottom {
  26. float:left;
  27. background-image:url("bottom.png");
  28. background-repeat:no-repeat;
  29. width:1224px;
  30. height:32px;
  31. }
  32.  
  33. #list,p {
  34. padding-left:100px;
  35. color:#FFFFFF;
  36. }
  37.  
  38.  
  39. <div class="top"><br/></div>
  40. <div class="middle"><p>En este tema, tocaremos todo lo relacionado con la XHTML, HTML y CSS<br/>
  41. aqui os dejo una lista con multiples temas:</p>
  42. <ul compact id="list">
  43. <li>Introduccion</li>
  44. <li>Texto</li>
  45. <li>Links</li>
  46. <li>Anclas</li>
  47. <li>Imagenes</li>
  48.  
  49. <li>Tablas</li>
  50. <li>Listas</li>
  51. <li>Formularios</li>
  52. <li>Mapas</li>
  53. <li><h1>Validacion del Codigo</h1> procura cerrar etiquetas</li>
  54. </ul>
  55. </div><div class="bottom"><br/></div>
  56. </body>
  57. </html>


Saludos
  #3 (permalink)  
Antiguo 16/07/2010, 20:51
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: background top, middle y bottom separados =S

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 original
  1. body {
  2. background-image:url('flame.jpg');
  3. background-repeat:no-repeat;
  4. background-position:bottom left;
  5. }
  6.  
  7. .top {
  8. background-image:url("top.png");
  9. background-repeat:no-repeat;
  10. width:1224px;
  11. height:32px;
  12. }
  13.  
  14. .middle {
  15. background-image:url("middle.png");
  16. background-repeat:repeat-y;
  17. height:280px;
  18. }
  19.  
  20. .bottom {
  21. background-image:url("bottom.png");
  22. background-repeat:no-repeat;
  23. width:1224px;
  24. height:32px;
  25. }
  26.  
  27. #list,#text {
  28. padding-left:100px;
  29. color:#FFFFFF;
  30. }

Saludos!!
  #4 (permalink)  
Antiguo 17/07/2010, 11:37
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: background top, middle y bottom separados =S

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!!

Etiquetas: bottom, top, fondo
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 11:06.