Hola gente, como estan?
Tengo un pequeño problema.
Estoy practicando y aprendiendo el manejo de divs con css y tratando de dejar de lado el maquetado con tablas.
Pero... en esta ocasion me veo en aprietos y no se como solucionarlo (estuve toda la tarde).
Tengo una tabla de 5 columnas donde la cantidad de filas depende de la cantidad de registros de la base de datos. La idea es que al pasar el mouse sobre una fila se cambie su fondo y el del input por un unico color. Eso lo logre, pero el problema es que USO UNA TABLA POR CADA FILA!
Quisiera transformar las tablas por divs UNICAMENTE.
Este es mi codigo:
muestra.php
Código HTML:
<?
while($datos = mysql_fetch_array($con)) {
$cont++;
?>
<div id="programacion">
<table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
<tr align="center">
<td style="background-color:#C4FFB4" width="25px">
<b><?=$cont?></b>
</td>
<td>
<input name="horario[<?=$datos['id']?>]" type="text" id="file" size="10" maxlength="10" value="<?=$datos['horario']?>" onfocus="if (this.value == '<?=$datos['horario']?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?=$datos['horario']?>';}">
</td>
<td>
<input name="titulo[<?=$datos['id']?>]" type="text" id="file" size="30" maxlength="30" value="<?=$datos['titulo']?>" onfocus="if (this.value == '<?=$datos['titulo']?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?=$datos['titulo']?>';}">
</td>
<td>
<input name="tipo[<?=$datos['id']?>]" type="text" id="file" size="15" maxlength="15" value="<?=$datos['tipo']?>" onfocus="if (this.value == '<?=$datos['tipo']?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?=$datos['tipo']?>';}">
</td>
<td><a href="programacion.php?dia=<?=$dia?>&eliminar=<?=$datos['id']?>" onmouseover="show('layer')" onmouseout="show('layer')">Eliminar</a></td>
</tr>
</table>
</div>
<?
}
?> estilo.css
Código HTML:
<!-- SECCION PROGRAMACION -->
#programacion {
width:650px;
margin:auto;
text-align:center;
clear:both;
}
#programacion #file {
background-color:#FFF;
border:solid 0px;
padding:10px;
}
#programacion:hover #file {
background-color:#C4FFB4;
}
#programacion:hover {
background-color:#C4FFB4;
}
Espero que alguien me pueda ayudar, desde ya gracias!
P.D.: se que para poner un div al lado de otro y centrados se puede hacer un div principal con un ancho especifico centrado con clear:both y adentro los divs con float:left pero se me deforma todo y no queda como la tabla....