como hago que el fondo de una etiqueta llege hasta la proxima que se encuentre

romel_inc · #1 (**permalink**) 27/06/2009, 13:37

como hago que el fondo brg2 llegue hasta el logo nada mas.?

Código:

<div  style="background:url(brg1.JPG) repeat-x;">
<div style="background:url(brg2.JPG) repeat-x ; "> 
<div style="background: url(logo.JPG) no-repeat; margin-left:100px; ">

kseso? · #2 (**permalink**) 27/06/2009, 13:49

Cita:

¿como hago que el fondo de una etiqueta llege hasta la proxima que se encuentre?

cerrando el contenedor antes de abrir el siguiente

Código html:

Ver original<div  style="background:url(brg1.JPG) repeat-x;">
<div style="background:url(brg2.JPG) repeat-x ;"></div>
<div style="background: url(logo.JPG) no-repeat; margin-left:100px;"></div>

romel_inc · #3 (**permalink**) 27/06/2009, 14:19

ve lo siguiente.

<9999999999999999999999999999999999999999999999>
<7777777777777777><11111111111><777777777777777>

los tres fondo están montados uno sobre otro. ok

pero

<div style="background:url(brg1.JPG) repeat-x;"> este es ------- 9
<div style="background:url(brg2.JPG) repeat-x ;"> este es --------7
<div style="background: url(logo.JPG) no-repeat; margin-left:100px;"> este es --- 1

como hago para que el fondo 7 solo llege hasta 1 es decir

<9999999999999999999999999999999999999999999999>
<7777777777777777><11111111111>

en el próximo post monto las imagen. de ejemplo para un mejor entendimiento del problema que planteo

kseso? · #4 (**permalink**) 27/06/2009, 14:47

Prueba este código.
Creo que sólo tienes que cambiar los tamaños de las cajas y el margen derecho de #uno para que coincida con la anchura de #siete

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0; border:0; position: relative;}
#contenedor {width: 600px; margin: 0 auto; background: #900; padding: 10px;}
#nueve {width: 100%; background: #f60;}
#siete {height:102px; width:250px; background: url(http://static.forosdelweb.com/fdwtheme/back-header.png) repeat-x; height: 102px;}   
#uno {background:#cdcdcd none repeat scroll 0 0;
height:102px;
margin-left:250px;
position:absolute;
width:250px;}  
</style>
</head>
<body>
  <div id="contenedor">
    <div id="nueve">este es el div nº 9</div>
    <div id="siete">
        <div id="uno">este es el uno con su fondo gris</div>
    este es el 7       
    </div>
  </div>
</body>
</html>

Un saludo

romel_inc · #5 (**permalink**) 27/06/2009, 15:28

Cita:

Iniciado por kseso?

Prueba este código.
Creo que sólo tienes que cambiar los tamaños de las cajas y el margen derecho de #uno para que coincida con la anchura de #siete

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0; border:0; position: relative;}
#contenedor {width: 600px; margin: 0 auto; background: #900; padding: 10px;}
#nueve {width: 100%; background: #f60;}
#siete {height:102px; width:250px; background: url(http://static.forosdelweb.com/fdwtheme/back-header.png) repeat-x; height: 102px;}   
#uno {background:#cdcdcd none repeat scroll 0 0;
height:102px;
margin-left:250px;
position:absolute;
width:250px;}  
</style>
</head>
<body>
  <div id="contenedor">
    <div id="nueve">este es el div nº 9</div>
    <div id="siete">
        <div id="uno">este es el uno con su fondo gris</div>
    este es el 7       
    </div>
  </div>
</body>
</html>

Un saludo

Gracias amigo ya tengo la idea. saludos.

pd: al finalizar publico. ya que lo complique un pelo mas jeje.

romel_inc · #6 (**permalink**) 27/06/2009, 18:04

ya esta.

esta es la idea. quería que el logo por su la forma continuara desde la izquierda pero el problema se presenta cuando se ve la pagina web en una pantalla ancha
el logo quedaba de un lado y el contenido en el centro. ahora con este código solucione usando hasta 4 fondos y el logo que siempre quedara en el centro.

y el fondo brg corregirá el logo independientemente del tamaño de la pantalla donde se vea

como todavía no e actualizado la web puede ver el error de que hablo.

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=utf-8" />
<title>Untitled Document</title>
</head>

<body style="margin-top:0px; margin-left:0px; margin-right:0px; background:url(brg1.JPG) repeat-x;">
  <div style="background:url(brg.JPG) repeat-x ; float:left; ">
   <div style=" width:900px; margin:0 auto;">
    <div>
     <div style="background: url(brg3.jpg) repeat-x; ">
      <div style="background: url(logo.JPG) no-repeat;">
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
      </div>
     </div>
    </div>
   </div>
  </div>
  <div style="background: url(brg4.jpg) repeat-x;    ">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
  </div> 
</body>
</html>