Buenos días,
Estoy intentando hacer una plantilla en asp para una web de un videoclub y hay un par de sitios en el que se me desajustan un poco los divs y no consigo averiguar porque. Os dejo el código a ver si me podéis ayudar.
Esta es la plantilla
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!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>
<link rel="stylesheet" type="text/css" href="../estilovideoclub.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div class="titulo"><h1 class="titular">VIDEOCLUB ONLINE</h1></div>
<div class="decoracion"> </div>
<div class="fondonegro">
<div class="genero"><a href="listado.asp?id=1">Accion</a></div>
<div class="genero"><a href="listado.asp?id=2">Animacion</a></div>
<div class="genero"><a href="listado.asp?id=4">Ciencia Ficcion</a></div>
<div class="genero"><a href="listado.asp?id=5">Comedia</a></div>
<div class="genero"><a href="listado.asp?id=6">Drama</a></div>
<div class="genero"><a href="listado.asp?id=3">Suspense - Terror</a></div>
<form action="buscarmultiple.asp?tmultiple=tmultiple" method="get">
<input style="height:17px;border:none;padding-top:0px;margin-top:0px;" name="tmultiple" type="text" id="tmultiple" size="15" maxlength="15" />
<select style="height:18px;border:none;padding-top:0px;margin-top:0px;" name="multiple" id="multiple">
<option value="1" selected="selected">Interprete</option>
<option value="2" >Director</option>
<option value="3" >Titulo</option>
</select>
<label>
<input type="submit" name="button3" id="button3" value="Buscar" />
</label>
</form>
</div>
<div class="decoracion"> </div>
<div class="fondoverde">
<!-- TemplateBeginEditable name="Editable" -->
<div class="menu3"> </div>
<!-- TemplateEndEditable -->
<form class="formulario" action="" method="post" target="_self">
Usuario</br>
<input name="usuario" type="text" id="usuario" size="13" />
Contraseña
<input name="pwd" type="text" id="pwd" size="13" /></br>
<input type="submit" name="button4" id="button4" value="Acceder" />
</form>
<div class="decoracion2"> </div>
<div class="menu4">
Búsqueda por décadas
<div class="decoracion2"> </div>
</div>
<div class="menu5">
60
<div class="decoracion2"> </div>
</div>
<div class="menu5">
70
<div class="decoracion2"> </div>
</div>
<div class="menu5">
80
<div class="decoracion2"> </div>
</div>
<div class="menu5">
90
<div class="decoracion2"> </div>
</div>
<div class="menu5">
00
<div class="decoracion2"> </div>
</div>
<div class="menu4">
Foro
<div class="decoracion2"> </div>
</div>
<div class="espacio"> </div>
</div>
</body>
</html>
Esta es la hoja de estilos
@charset "utf-8";
/* CSS Document */
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: normal;
margin: 0px;
/*background-color:#f9f8eb;*/
background-color:#FFFFFF;
background-color:#ddead2;
}
.titulo{
text-align:center;
color: #000000;
width:80%;
background-color:#faf8c9;
margin-top: -16px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color:#FFFFFF;
}
.centrar{
text-align:center;
margin-bottom:0px;
}
.menu{
width:80%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.menu3{
width:656px;
height:394px;
margin: 0px;
background-image:url(caratulas/fondo.jpg);
float:left;
}
.menu4{
width:163px;
float:left;
color:#000000;
text-align:center;
font-size:13px;
background-color:#CCCCCC;
font-weight:bold;
background-color:#add18f;
}
.menu5{
width:163px;
float:left;
color:#000000;
text-align:center;
font-size:13px;
background-color:#FFFFFF;
font-weight:bold;
}
.fondonegro{
width:80%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align:center;
background-color: #000000;
}
.fondoverde{
width:80%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align:center;
background-color: #add18f;
}
.decoracion{
background-image: url(caratulas/tira.gif);
background-repeat: repeat-x;
width:80%;
margin-left:auto;
margin-right:auto;
height:8px;
}
.decoracion2{
background-image: url(caratulas/tira.gif);
background-repeat: repeat-x;
width:100%;
margin:0px;
height:8px;
}
.busqueda{
background-color: #000000;
float:left;
padding:5px;
}
.negro{
float:left;
background-color:#000000;
width:59px;
height:26px;
}
.negro2{
float:left;
background-color:#000000;
width:6px;
height:26px;
}
.decadas{
color:#000000;
float:left;
font-size:16px;
font-weight:bold;
padding-left: 5px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
border:solid 2px #000000;
background-color:#FFFFFF;
}
.genero{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
float:left;
text-transform: uppercase;
padding:1px;
background-color:#FFFFFF;
border:solid 2px #000000;
font-weight:bold;
margin-top:2px;
}
.genero2{
float:left;
}
div.genero:hover{
color: #FF0000;
text-decoration: none;
}
div.genero a:link{
color: #000000;
text-decoration: none;
}
div.genero a:visited{
color: #000000;
text-decoration: none;
}
div.genero a:hover{
color: #FF0000;
text-decoration: none;
}
.centrar{
text-align:center;
}
.titular{
text-align:center;
margin-bottom:0px;
}
.fondovertical{
background-image:url(caratulas/fndv.gif);
float:left;
}
.formulario{
padding-left:3px;
border-color:#000000;
margin-left:15px;
color:#FFFFFF;
padding-top:2px;
padding-bottom:2px;
}
.espacio{
clear:both;
/*background-color:#000000;*/
}
El problema que tengo es sobre todo, que la capa con el estilo "fondoverde" se expande más de lo que debería, es decir que el clear:both del estilo "espacio" me crea un bloque de más que me ocupe el ancho total de "fondoverde" justo debajo de todo lo demás, en vez de terminar donde debería rellenando de verde la parte que falta por debajo del menú de la derecha. También me falla el formulario de usuario y contraseña ya que usuario y su campo de texto me los pone a la misma a la altura a pesar de que use un</br> para separarlos y en cambio contraseña y su campo de texto si los pone bien. La última cosa que me falla es un pixel que se me queda de l color de la capa de fondo a la derecha de Búsqueda por décadas, etc que no consigo quitar.
No se si me he explicado muy bien pero si me podéis ayudar os lo agradecería mucho.
Ah, se me olvidaba esto pasa probandolo en Firefox 3, en Explorer 6 da muchos más problemas pero primero quiero hacerlo bien en Firefox y luego arreglarlo para Explorer.
