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);
$row= mysql_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> ";
}else{
$sql="SELECT * from trabajos order by ID desc";
$res=mysql_query ($sql);
$row= mysql_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> ";
}
}
?>
<!-- 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