Foros del Web » Creando para Internet » CSS »

No me "estira" un <div> y se ve la imagen de fondo

Estas en el tema de No me "estira" un <div> y se ve la imagen de fondo en el foro de CSS en Foros del Web. Hola todos. El problema que tengo es el siguiente. Tengo una web creada con el CSS de plantillas Dreamveaver. La página es PHP, con lo ...
  #1 (permalink)  
Antiguo 27/12/2009, 19:32
 
Fecha de Ingreso: octubre-2007
Mensajes: 91
Antigüedad: 17 años, 1 mes
Puntos: 1
No me "estira" un <div> y se ve la imagen de fondo

Hola todos.

El problema que tengo es el siguiente. Tengo una web creada con el CSS de plantillas Dreamveaver. La página es PHP, con lo cual el "height" del <div> de contenido es variable, de esta manera se estira el contenido pero no la barra lateral donde tengo los links, dejando ver la imagen de fondo de la web.

El código que tengo es el siguiente

Código PHP:
...

<body class="twoColFixLt">

<div id="container">
<div id="sidebar1">
 código php ...links    
</div><!--cierro sidebar -->

<div id="mainContent">
<?
if (isset($_GET["id"])){
$id$_GET["id"];

$sql"SELECT * from trabajos where ID=$id";
$res=mysql_query ($sql);
$rowmysql_fetch_array ($res);
//convierto a variables
$foto1$row ["foto1"];
    
//Título - (link en la base de datos)
    
echo "<h1>";
    echo 
$row["link"];
    echo 
"</h1><br><br>";
    
//foto grande
    
echo "<div class='flotaleft'>";
    echo 
"<img src='Images/".$row ["foto1"]."'>";
    echo 
"</div>";
    echo 
$row["texto"];
    echo 
"<div class='clearfloat'></div>";
    echo 
"<br><br>";
    
// miniaturas
    
if ($row["foto2"]!=".jpg"){
        
$foto2$row["foto2"];
        echo 
"<a href='Images/$foto2' class='lightwindow'><img src='pictures.php?foto=$foto2' class='floatleft'></a>&nbsp; &nbsp; ";
        }else{
$sql="SELECT * from trabajos order by ID desc";
$res=mysql_query ($sql);
$rowmysql_fetch_array ($res);
//convierto a variables
$foto1$row ["foto1"];
    
//Título - (link en la base de datos)
    
echo "<h1>";
    echo 
$row["link"];
    echo 
"</h1><br><br>";
    
//foto grande
    
echo "<div class='flotaleft'>";
    echo 
"<img src='Images/".$row ["foto1"]."'>";
    echo 
"</div>";
    echo 
$row["texto"];
    echo 
"<div class='clearfloat'></div>";
    echo 
"<br><br>";
    
// miniaturas
    
if ($row["foto2"]!=".jpg"){
        
$foto2$row["foto2"];
        echo 
"<a href='Images/$foto2' class='lightwindow'><img src='pictures.php?foto=$foto2' class='floatleft'></a>&nbsp; &nbsp; ";
        }
                    
}

?> 

 
      

        <!-- Este elemento de eliminación siempre debe ir inmediatamente después del div #mainContent para forzar al div #container a que contenga todos los elementos flotantes hijos --><br class="clearfloat" /></div>
    <!-- end #container--> </div>
y el CSS involucrado sería este:

Código:
    .twoColFixLt #container { 
    	width: 1004px;  /* el uso de 20px menos que un ancho completo de 800px da cabida a los bordes del navegador y evita la aparici�n de una barra de desplazamiento horizontal */
    	margin: 20px auto; /* los m�rgenes autom�ticos (conjuntamente con un ancho) centran la p�gina */
    	border: 1px dotted #333333;
    	text-align: left; /* esto anula text-align: center en el elemento body. */
    }
    .twoColFixLt #sidebar1 {
    	float: left; /* dado que este elemento es flotante, debe asignarse un ancho */
    	width: 250px; /* el ancho real de este div, en navegadores que cumplen los est�ndares, o el modo de est�ndares de Internet Explorer, incluir� el relleno y el borde adem�s del ancho */
    	padding: 15px 15px 25px 15px;
		background-color:#FFFFFF;
		/*		border-right: 1px dotted #333333;*/
    }
    .twoColFixLt #mainContent { 
    	margin: 0 0 0 280px; /* el margen izquierdo de este elemento div crea la columna situada a lo largo del lado izquierdo de la p�gina (con independencia de la cantidad de contenido que tenga el div sidebar1, se mantendr� el espacio de la columna). Puede quitar este margen si desea que el texto del div #mainContent llene el espacio de #sidebar1 cuando termine el contenido de #sidebar1. */
    	padding: 15px 15px 25px 55px; /* recuerde que el relleno es el espacio situado dentro del cuadro div y que el margen es el espacio situado fuera del cuadro div */
		background-color:#FFFFFF;
    } 
    .flotaright { /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la p�gina. El elemento flotante debe preceder al elemento junto al que debe aparecer en la p�gina. */
    	float: right;
    	margin-left: 8px;
    }
    .flotaleft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la p�gina. */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* esta clase debe colocarse en un elemento div o break y debe ser el �ltimo elemento antes del cierre de un contenedor que incluya completamente a un elemento flotante */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
Los comentarios los pone Dreamweaver ya en el código.
Creo que en el mismo está la explicación de cómo hacerlo, pero no consigo verlo.

He probado cambiar la posición del .clearfloat e inclusive darle a la barra de Navegación un height del 100% pero nada...

Alguien consigue verlo?

Desde ya, muchas gracias
  #2 (permalink)  
Antiguo 27/12/2009, 20:28
Avatar de jackson666  
Fecha de Ingreso: noviembre-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 1.971
Antigüedad: 15 años
Puntos: 65
Respuesta: No me "estira" un <div> y se ve la imagen de fondo

Yo ni entiendo cual es el problema...
Decis que no te estira un div y se ve la imagen de fondo?? No entiendo muy bien que quiere decir eso....
__________________
HV Studio
Diseño y desarrollo web
  #3 (permalink)  
Antiguo 28/12/2009, 11:11
 
Fecha de Ingreso: octubre-2007
Mensajes: 91
Antigüedad: 17 años, 1 mes
Puntos: 1
Respuesta: No me "estira" un <div> y se ve la imagen de fondo

Lo siento. Me expliqué mal. El fondo de página tiene una imagen de fondo, y el fondo de los cuadros <div> de la página son blancos. El tema es que el cuadro principal termina siendo más "alto" que el otro; al no "estirarse" el otro se termina viendo el fondo de página (la imagen) dentro de lo que sería el cuerpo de la web.

Tengo entendido que se soluciona con un clear:both; pero no pude...
  #4 (permalink)  
Antiguo 28/12/2009, 11:48
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años, 8 meses
Puntos: 1329
Respuesta: No me "estira" un <div> y se ve la imagen de fondo

Ponle overflow: auto o hidden a mainContent, eso debería corregir tu problema.

Saludos
__________________
Grupo Telegram Docker en Español
  #5 (permalink)  
Antiguo 28/12/2009, 14:27
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 15 años, 11 meses
Puntos: 6
Respuesta: No me "estira" un <div> y se ve la imagen de fondo

Hola,

Dejame ver si te entendi, tienes dos columnas y quieres que la izquierda se estire mientras la del contenido crece.

Pues te cuento que con css no hay manera de hacer que dos columnas flotantes se estiren igual... lo que tienes que hacer es juntar el fondo de las dos columnas en una misma imagen y aplicarsela al fondo de las mismas, y despues agregarle overflow:auto como dice Carlangueitor

Espero que te sirva
  #6 (permalink)  
Antiguo 28/12/2009, 18:53
 
Fecha de Ingreso: octubre-2007
Mensajes: 91
Antigüedad: 17 años, 1 mes
Puntos: 1
Respuesta: No me "estira" un <div> y se ve la imagen de fondo

Pues no, no me lo solucionó. De todas maneras opté por otra solución. Separé los <div> ampliando el margin-left y le quité el border al cuadro contenedor #container.
Quedo bien!
Les dejo un par de screenshots para que vean a lo que me refería:
El problema que tenía y que quería explicar lo pueden ver en

...anibalparada.com/Img/screenshot_2.jpg

Y la solución que elegí en:

...anibalparada.com/Img/screenshot_1.jpg

Es para un artista. Espero que valore mi arte, ja, ja.

Si no me acepta el diseño volveré a molestarlos, mil gracias.

Ah, otra cosa. Los dos cuadros no son flotantes, solo el de la izquierda
  #7 (permalink)  
Antiguo 29/12/2009, 16:05
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 4 meses
Puntos: 361
Respuesta: No me "estira" un <div> y se ve la imagen de fondo

Hola:

Si quieres busca información sobre columnas equilibradas, pero te doy un consejo, viendo las dos imágenes me gusta más como queda la segunda (screenshot_1).

Saludos.

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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 22:45.