Foros del Web » Creando para Internet » CSS »

Problemas de ajuste con divs(Firefox)

Estas en el tema de Problemas de ajuste con divs(Firefox) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/08/2008, 05:33
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Problemas de ajuste con divs(Firefox)

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">&nbsp;</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">&nbsp;</div>
<div class="fondoverde">
<!-- TemplateBeginEditable name="Editable" -->
<div class="menu3"> &nbsp; </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">&nbsp;</div>
<div class="menu4">
Búsqueda por décadas
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
60
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
70
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
80
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
90
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
00
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu4">
Foro
<div class="decoracion2">&nbsp;</div>
</div>
<div class="espacio">&nbsp;</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.
  #2 (permalink)  
Antiguo 06/08/2008, 05:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de ajuste con divs(Firefox)

Antes de mirar otra cosa te diré que </br> no está bien, es <br/>, porque no es una etiqueta de cierre sino una etiqueta sin parear, por lo que se cierra en sí misma con la barra al final.

También debes quitarle el espacio en blanco a div del corte:

<div class="espacio">&nbsp;</div>. Si sólo está para hacer un corte no necesita el &nbsp;
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 07/08/2008, 02:50
 
Fecha de Ingreso: abril-2008
Mensajes: 38
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Problemas de ajuste con divs(Firefox)

Tambien te recomiendo que al css incorpores lo primero de todo:
*{
margin:0;
padding:0;
}

* (todo)

Última edición por Bernix; 07/08/2008 a las 03:06
  #4 (permalink)  
Antiguo 07/08/2008, 12:30
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problemas de ajuste con divs(Firefox)

Gracias a ambos por responder,

Mikel,
Tenías razón ya he cambiado las cosas que me dijiste y con ajustar los css el ancho y ponerlo en % ya está ok.

Bernix,
Gracias por el consejo, en este caso lo he probado y se me desajusta una capa de arriba, pero en otros casos lo tendré en cuenta.

Sólo una duda más a la hora de testear la web, ¿qué navegadores usuariáis? Tenía pensado probarla en Firefox 2 y 3 y en Explorer 7, lo probariáis también en el Explorer 6 o estando relativamente cerca el 8 no merece la pena?

Última edición por haga41; 07/08/2008 a las 12:33 Razón: Añadir información
  #5 (permalink)  
Antiguo 07/08/2008, 12:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de ajuste con divs(Firefox)

Personalmente también en IE6 (muy extendido todavía en ordenaores de más de 3 años) y en Opera 9.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 08/08/2008, 04:39
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problemas de ajuste con divs(Firefox)

Muchas gracias, intentaré que funcione en Firefox 2 y 3, Explorer 6 y 7 y Opera 9 entonces. ¿Para probarlo en diferentes versiones del explorer tendré que instalar el Windows en otra partición o en sistema operativo virtual no? Lo digo porque se que con el Firefox puedo tener las 2 versiones en el mismo sistema operativo (distinas carpetas) pero con el Explorer me imagino que no.

Y bueno, si no es mucho pedir...como diseñeráis/arreglariáis la estructura de la parte editable de esta web, el problema que tengo es que si en el buscador me salen sólo 1 o 2 resultados la parte derecha (donde pone búsqueda por décadas, usuario, etc) se me descuadra completamente. La cosa sería que parte sería siempre fija de tamaño (anchura y altura) y otra parte de relleno, la que haría que siempre midiese un mínimo para que no se me descuadrase pero creciese en altura, el relleno, en función de los resultados. Ahora sólo funciona bien cuando hay muchos resultados.

Os pongo uno de los archivos de busqueda y los estilos a ver que os parece, quizá lo suyo sería hacer la parte de derecha con listas en vez con capas para que sea más limpio no lo se.

[ASP]
<%@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"><!-- InstanceBegin template="Templates/plantillaVC.dwt.asp" codeOutsideHTMLIsLocked="false" -->
<head>
<link rel="stylesheet" type="text/css" href="estilovideoclub.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<!--#include file="includes/AbrirBD.asp"-->

<body>
<div class="titulo"><h1 class="titular">VIDEOCLUB ONLINE</h1></div>
<div class="decoracion">&nbsp;</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 name="tmultiple" type="text" id="tmultiple" style="height:17px;border:none;padding-top:0px;margin-top:0px;" size="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>
<option value="4" >Todas</option>
</select>
<label>
<input type="submit" name="button3" id="button3" value="Buscar" />
</label>
</form>
</div>

<div class="decoracion">&nbsp;</div>
<div class="fondoverde">
<!-- InstanceBeginEditable name="Editable" -->
<div class="menu31">

<% letra=request("letra")

sql = "Select * from PELICULAS where Titulo like '" &letra& "%'"

tabla.open sql,conexion
if tabla.eof then
%>
No se han encontrado resultados
<% else
while not tabla.eof
%>
<div class="fila">
<div class="lista1">
<a href="detalle.asp?id=<%=tabla.fields("id")%>" title="Detalle" target="_self"><img src="caratulas/<%=tabla.fields("foto")%>" class="imagen" /></a>
</div>
<div class="lista">
<ul>
<li><span class="negrita"><a href="detalle.asp?id=<%=tabla.fields("id")%>" title="Detalle" target="_self"><%=tabla.fields("Titulo")%></a></span> <a href="buscaranio.asp?anio=<%=tabla.fields("Anio")% >" target="_self">(<%=tabla.fields("Anio")%>)</a></li>
<li class="verde"><a href="buscarpais.asp?pais=<%=tabla.fields("Pais")% >" target="_self"><%=tabla.fields("Pais")%></a></li>
<li><a href="buscardirector.asp?director=<%=tabla.fields( "Director")%>" target="_self"><%=tabla.fields("Director")%></a></li>
<li><%=tabla.fields("Interpretes")%></li>
</ul>
</div>
</div>

<% tabla.movenext
if not tabla.eof then
%>

<div class="fila">
<div class="lista1">
<a href="detalle.asp?id=<%=tabla.fields("id")%>" title="Detalle" target="_self"><img src="caratulas/<%=tabla.fields("foto")%>" class="imagen" /></a>
</div>
<div class="lista">
<ul>
<li><span class="negrita"><a href="detalle.asp?id=<%=tabla.fields("id")%>" title="Detalle" target="_self"><%=tabla.fields("Titulo")%></a></span> <a href="buscaranio.asp?anio=<%=tabla.fields("Anio")% >" target="_self">(<%=tabla.fields("Anio")%>)</a></li>
<li class="verde"><a href="buscarpais.asp?pais=<%=tabla.fields("Pais")% >" target="_self"><%=tabla.fields("Pais")%></a></li>
<li><a href="buscardirector.asp?director=<%=tabla.fields( "Director")%>" target="_self"><%=tabla.fields("Director")%></a></li>
<li><%=tabla.fields("Interpretes")%></li>
</ul>
</div>
</div>

<% tabla.movenext
end if%>
</tr>
<%wend
end if%>
<% tabla.close %>

</div>
<!-- InstanceEndEditable -->
<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" style="margin-bottom:5px;" /><br/>
<input type="submit" name="button4" id="button4" value="Acceder" />
</form>
<div class="decoracion2">&nbsp;</div>
<div class="menu4">
Búsqueda por décadas
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
60
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
70
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
80
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
90
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
00
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu4">
Foro
<div class="decoracion2">&nbsp;</div>
</div>
<div class="espacio"></div>
</div>
<div class="decoracion"></div>
<div class="fondonegro2">
<% for aux = 48 to 57 %>
<a href="buscarletra.asp?letra=<%=Chr(aux)%>"><%=Chr( aux)%></a>
<%next%>
<% for aux = 65 to 90 %>
<a href="buscarletra.asp?letra=<%=Chr(aux)%>"><%=Chr( aux)%></a>
<%next%>
</div>
<div class="decoracion"></div>
</body>
<!-- InstanceEnd --></html>
[/ASP]

Última edición por haga41; 08/08/2008 a las 06:34
  #7 (permalink)  
Antiguo 08/08/2008, 04:41
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problemas de ajuste con divs(Firefox)

Pongo aquí la hoja de estilos porque no me entraba en el mensaje anterior.

estilovideoclub.css
[css]
@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;
padding:0px;
background-image:url(caratulas/fondo.jpg);
float:left;
width:80%;
}
.menu31{
height:394px;
margin: 0px;
padding:0px;
float:left;
background-color:#FFFFFF;
height:100%;
/*width:656px;*/
width:80%;
height:auto;
}
.menu4{
float:left;
color:#000000;
text-align:center;
font-size:13px;
background-color:#CCCCCC;
font-weight:bold;
background-color:#add18f;
width:20%;
height:auto;
}
.menu5{
float:left;
color:#000000;
text-align:center;
font-size:13px;
background-color:#FFFFFF;
font-weight:bold;
width:20%;
height:auto;
}
.fondonegro{
width:80%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align:center;
background-color: #000000;
}
.fondonegro2{
width:80%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align:center;
padding-top: 5px;
padding-bottom: 5px;
background-color: #FFFFFF;
}
div.fondonegro2 a{
font-size:15px;
color:#000000;
text-decoration:none;
font-weight:bold;
}
div.fondonegro2 a:hover{
font-size:15px;
color:#000000;
text-decoration:none;
font-weight:bold;
}
div.fondonegro2 a:link{
font-size:15px;
color:#000000;
text-decoration:none;
font-weight:bold;
}
.fondoverde{
width:820px;
height:100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align:center;
background-color: #add18f;
width:80%;
height:auto;
}
.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:#000000;
padding-top:2px;
padding-bottom:2px;
font-weight:bold;
}
.espacio{
height:auto;
clear:both;
/*background-color:#000000;*/
}
.fila{
text-align:left;
margin:0px;
float:left;
width:100%;
border-top: 1px gray solid;
}
.lista{
float:left;
margin:0px;
padding-left:5px;
padding-right:0px;
padding-top:5px;
width:87%;
}
.lista1{
width:10%;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:5px;
padding-right:3px;
float:left;
}
.lista ul{
width:100%;
text-align:left;
margin:0px;
padding:0px;
}
.lista ul li{
width:100%;
text-align:left;
list-style:none;
}
.imagen{
width:56px;
height:76px;
border:0px;
padding-left:5px;
padding-top:5px;
}
.negrita{
font-weight:bold;
}
.verde{
color:#64c216;
font-weight:bold;
}
[css]

Última edición por haga41; 08/08/2008 a las 06:33 Razón: aclarar conceptos
  #8 (permalink)  
Antiguo 08/08/2008, 05:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de ajuste con divs(Firefox)

Si pones código en el foro de css siempre es mejor que pongas el código interpretado en html, porque si no, quien no sepa casi nada de programación (como yo) se puede liar.

Antes de mirarlo, te diré que para el bloque que comentas que tenga una altura mínima, lo que puedes hacer es darle un min-height (y height para IE6, que funciona igual), más o menos así:

.boque {min-height: 100px;
height: auto!important;
height: 100px;
}

En cuianto a las versioines de IE, puedes intalar un programa llamado "multiIE" o algo así (no sé el nombre), que te permite tener varis versiones de IE en tu ordenador.
También puedes instalar una extensión de FF que se llama "Total Validator", que te ofrece pantallazos de muchos navegadores en poco tiempo.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 08/08/2008, 07:08
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problemas de ajuste con divs(Firefox)

Muchas gracias por recomendarme esos programas, del Total Validator me habían comentado algo pero ya no me acordaba.
Siento lo del código, no sabía como se hacía lo de ponerlo en html, he mirado ahora las opciones al escribir mensaje y creo que lo he encontrado.

He probado lo de min-height pero todavía no consigo que me haga lo que quiero creo que el problema es que el formulario de la derecha no lo tengo metido en una capa y la siguiente capa que tengo, la de decoración no se queda donde debe si le pongo el "float:left" creo que intentaré retocar la estructura porque hasta que me quede bien porque parece que si no siempre me dará problemas.

ASP
Código HTML:
<%@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"><!-- InstanceBegin template="Templates/plantillaVC.dwt.asp" codeOutsideHTMLIsLocked="false" -->
<head>
<link rel="stylesheet" type="text/css" href="estilovideoclub.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<!--#include file="includes/AbrirBD.asp"-->

<body>
<div class="titulo"><h1 class="titular">VIDEOCLUB ONLINE</h1></div>
<div class="decoracion">&nbsp;</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 name="tmultiple" type="text" id="tmultiple" style="height:17px;border:none;padding-top:0px;margin-top:0px;" size="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>
<option value="4" >Todas</option>
</select>
<label>
<input type="submit" name="button3" id="button3" value="Buscar" />
</label>
</form>
</div>

<div class="decoracion">&nbsp;</div>
<div class="fondoverde">
<!-- InstanceBeginEditable name="Editable" -->
<div class="menu31">

<% letra=request("letra")

sql = "Select * from PELICULAS where Titulo like '" &letra& "%'"

tabla.open sql,conexion
if tabla.eof then
%>
No se han encontrado resultados
<% else
while not tabla.eof
%>
<div class="fila">
<div class="lista1">
<a href="detalle.asp?id=<%=tabla.fields("id")%>" title="Detalle" target="_self"><img src="caratulas/<%=tabla.fields("foto")%>" class="imagen" /></a>
</div>
<div class="lista">
<ul>
<li><span class="negrita"><a href="detalle.asp?id=<%=tabla.fields("id")%>" title="Detalle" target="_self"><%=tabla.fields("Titulo")%></a></span> <a href="buscaranio.asp?anio=<%=tabla.fields("Anio")% >" target="_self">(<%=tabla.fields("Anio")%>)</a></li>
<li class="verde"><a href="buscarpais.asp?pais=<%=tabla.fields("Pais")% >" target="_self"><%=tabla.fields("Pais")%></a></li>
<li><a href="buscardirector.asp?director=<%=tabla.fields( "Director")%>" target="_self"><%=tabla.fields("Director")%></a></li>
<li><%=tabla.fields("Interpretes")%></li>
</ul>
</div>
</div>

<% tabla.movenext
if not tabla.eof then
%>

<div class="fila">
<div class="lista1">
<a href="detalle.asp?id=<%=tabla.fields("id")%>" title="Detalle" target="_self"><img src="caratulas/<%=tabla.fields("foto")%>" class="imagen" /></a>
</div>
<div class="lista">
<ul>
<li><span class="negrita"><a href="detalle.asp?id=<%=tabla.fields("id")%>" title="Detalle" target="_self"><%=tabla.fields("Titulo")%></a></span> <a href="buscaranio.asp?anio=<%=tabla.fields("Anio")% >" target="_self">(<%=tabla.fields("Anio")%>)</a></li>
<li class="verde"><a href="buscarpais.asp?pais=<%=tabla.fields("Pais")% >" target="_self"><%=tabla.fields("Pais")%></a></li>
<li><a href="buscardirector.asp?director=<%=tabla.fields( "Director")%>" target="_self"><%=tabla.fields("Director")%></a></li>
<li><%=tabla.fields("Interpretes")%></li>
</ul>
</div>
</div>

<% tabla.movenext
end if%>
</tr>
<%wend
end if%>
<% tabla.close %>

</div>
<!-- InstanceEndEditable -->
<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" style="margin-bottom:5px;" /><br/>
<input type="submit" name="button4" id="button4" value="Acceder" />
</form>
<div class="decoracion2">&nbsp;</div>
<div class="menu4">
Búsqueda por décadas
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
60
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
70
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
80
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
90
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu5">
00
<div class="decoracion2">&nbsp;</div>
</div>
<div class="menu4">
Foro
<div class="decoracion2">&nbsp;</div>
</div>
<div class="espacio"></div>
</div>
<div class="decoracion"></div>
<div class="fondonegro2">
<% for aux = 48 to 57 %>
<a href="buscarletra.asp?letra=<%=Chr(aux)%>"><%=Chr( aux)%></a>
<%next%>
<% for aux = 65 to 90 %>
<a href="buscarletra.asp?letra=<%=Chr(aux)%>"><%=Chr( aux)%></a>
<%next%>
</div>
<div class="decoracion"></div>
</body>
<!-- InstanceEnd --></html> 
  #10 (permalink)  
Antiguo 08/08/2008, 17:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de ajuste con divs(Firefox)

Cita:
Iniciado por haga41 Ver Mensaje
no sabía como se hacía lo de ponerlo en html, he mirado ahora las opciones al escribir mensaje y creo que lo he encontrado.
Perdona, no me he explicado bien. Me refería al código interpretado por el servidor en lugar del código fuente del ASP.

Si ves tu página en un navegador y miras en ver/código, lo que se ve es el resultado en html de la interpretación de tu código de programación en el servidor. Al estar en el foro de css, cómo haces en ASP para conseguir sacar ese código html no es demasiado importante, sino lo importante es cómo ve el navegador el resultado y cómo afecta el código css a los elementos html. A eso me refería.

Visto así sería más fácil encontrar cómo afecta, pudiendo entre otras cosas copiar el html para poder verlo con diversos navegadores en el propio ordenador.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 09/08/2008, 10:16
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problemas de ajuste con divs(Firefox)

No pasa nada, te entendí mal, voy a ponerte el código fuente que me da Firefox 3 de una de las páginas, son todas del mismo estilo mostrando resultados de búsquedas y cosas así, a ver si puedes ayudarme a ver donde falla, tiene todo excepto los textos de búsqueda alfabética que funciona ok. El problema que tengo es con los divs, te pongo links a unas capturas que he hecho para que se vea mejor.


Código HTML:
<!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"><!-- InstanceBegin template="Templates/plantillaVC.dwt.asp" codeOutsideHTMLIsLocked="false" -->
<head>
<link rel="stylesheet" type="text/css" href="estilovideoclub.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>

<body>
<div class="titulo"><h1 class="titular">VIDEOCLUB ONLINE</h1></div>

<div class="decoracion">&nbsp;</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 name="tmultiple" type="text" id="tmultiple" style="height:17px;border:none;padding-top:0px;margin-top:0px;" size="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>
        <option value="4" >Todas</option>
       </select>
    <label>
    <input  type="submit"  name="button3" id="button3" value="Buscar" />
    </label>
  </form>
</div>

<div class="decoracion">&nbsp;</div>
<div class="fondoverde">

<div class="fondoblanco">
<!-- InstanceBeginEditable name="Editable" -->
<div class="menu31">   
			
 		<div class="fila">
            	<div class="lista1">
                <a href="detalle.asp?id=7" title="Detalle" target="_self"><img class="imagen" style="border: 1px solid #0000;"  src="miniaturas/07.jpg" /></a>
                </div>          
                    <div class="lista">
                        <ul>
                            <li><span class="negrita">Akira</span> <a href="buscaranio.asp?anio=1988" target="_self">(1988)</a></li>
                            <li class="verde"><a href="buscarpais.asp?pais=Japón" target="_self">Japón</a></li>
                            <li><a href="buscardirector.asp?director=Katushiro Otomo" target="_self">Katushiro Otomo</a></li>
                            <li>Animación</li>
                        </ul>
                    </div>
                </div>
                <div class="fila">
            	<div class="lista1">

                <a href="detalle.asp?id=15" title="Detalle" target="_self"><img class="imagen" style="border: 1px solid #0000;"  src="miniaturas/15.jpg" /></a>
                </div>          
                    <div class="lista">
                        <ul>
                           <li><span class="negrita">Animatrix</span> <a href="buscaranio.asp?anio=2003" target="_self">(2003)</a></li>
                            <li class="verde"><a href="buscarpais.asp?pais=USA/Japón" target="_self">USA/Japón</a></li>
                            <li><a href="buscardirector.asp?director=Varios" target="_self">Varios</a></li>

                            <li>Animación</li>
                        </ul>
                    </div>
                </div>			
 		<div class="fila">
            	<div class="lista1">
                <a href="detalle.asp?id=18" title="Detalle" target="_self"><img class="imagen" style="border: 1px solid #0000;"  src="miniaturas/18.jpg" /></a>
                </div>          
                    <div class="lista">

                        <ul>
                            <li><span class="negrita">Appleseed</span> <a href="buscaranio.asp?anio=2004" target="_self">(2004)</a></li>
                            <li class="verde"><a href="buscarpais.asp?pais=Japón" target="_self">Japón</a></li>
                            <li><a href="buscardirector.asp?director=Shinji Aramaki" target="_self">Shinji Aramaki</a></li>
                            <li>Animación</li>
                        </ul>
                    </div>
                </div>
               <div class="fila">
            	<div class="lista1">
                <a href="detalle.asp?id=93" title="Detalle" target="_self"><img class="imagen" style="border: 1px solid #0000;"  src="miniaturas/93.jpg" /></a>
                </div>          
                    <div class="lista">
                        <ul>
                           <li><span class="negrita">Final Fantasy VII: Advent Children</span> <a href="buscaranio.asp?anio=2005" target="_self">(2005)</a></li>
                            <li class="verde"><a href="buscarpais.asp?pais=Japón" target="_self">Japón</a></li>
                            <li><a href="buscardirector.asp?director=Tetsuya Nomura, Takeshi Nozue" target="_self">Tetsuya Nomura, Takeshi Nozue</a></li>
                            <li>Animación</li>
                        </ul>
                    </div>
                </div>    
</div>
  <!-- InstanceEndEditable -->

</div>
  <div class="menu4">
    Búsqueda por décadas
    <div class="decoracion2">&nbsp;</div>
  </div>
      <div class="menu5">
        <a href="buscardecada.asp?decada=1">60</a>
        <div class="decoracion2">&nbsp;</div>
      </div>

      <div class="menu5">
       <a href="buscardecada.asp?decada=2">70</a>
        <div class="decoracion2">&nbsp;</div>
      </div>
      <div class="menu5">
        <a href="buscardecada.asp?decada=3">80</a>
        <div class="decoracion2">&nbsp;</div>
      </div>

      <div class="menu5">
        <a href="buscardecada.asp?decada=4">90</a>
        <div class="decoracion2">&nbsp;</div>
      </div>
      <div class="menu5">
        <a href="buscardecada.asp?decada=5">00</a>
        <div class="decoracion2">&nbsp;</div>
      </div>

      <div class="menu4">
        Foro
        <div class="decoracion2">&nbsp;</div>
     </div>
     <div class="menu4">
          	<form class="formulario" action="" method="post" target="_self">
    Usuario
      <input name="usuario" type="text" id="usuario" size="13" />
     Contraseña
      <input name="pwd" type="text" id="pwd" size="13" style="margin-bottom:5px;" />

      <input  type="submit"  name="button4" id="button4" value="Acceder" />
      </form>
    </div>
    
            <div class="decoracion2">&nbsp;</div>
       <div class="espacio"></div>
    </div>
    
<div class="decoracion"></div>
<div class="fondonegro2">
BUSQUEDA ALFABETICA: 
    </div>  

<div class="decoracion"></div>
</body>
<!-- InstanceEnd --></html> 
Está es una captura de como quedan algunas y como quiero que queden todas:
<a href="http://i524.photobucket.com/albums/cc328/s7474/1.jpg">imagen1</a>

Estas 2 fallan por diferentes cosas, en una se desajusta un borde y en la otra las capas.
<a href="http://i524.photobucket.com/albums/cc328/s7474/2.jpg">imagen2</a>
<a href="http://i524.photobucket.com/albums/cc328/s7474/3.jpg">imagen3</a>

Gracias por tener tanta paciencia, seguro que el fallo es una tontería pero no consigo verlo.

Si quieres, te pongo en otro mensaje los css ya que han cambiado un poco respecto a los que he puesto antes.

Última edición por haga41; 09/08/2008 a las 10:21 Razón: Hacerlo más accesible
  #12 (permalink)  
Antiguo 09/08/2008, 11:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de ajuste con divs(Firefox)

Sí, mejor que pongas la nueva hoja de estilo, aunque te voy a decir cuál creo que es el problema:

por la imagen veo que tienes la parte central con las fotos y eso flotada a la izquierda. Entonces, cuando hay poco contenido, la caja de la derecha, después de ocupar el espacio que le queda disponible continua con el siguiente sitio que encuentra en el flujo del documento, que es debajo de la central.

Esto lo puedes solucionar de dos maneras: o bien le pones un ancho fijo a la caja de la derecha para que aunque el contenido de la central sea corto no vaya debajo suya, sino que siga confinado en su propia caja en vertical, o bien le das a la caja derecha un margen izquierdo igual al ancho de la caja central, lo que igualmente le impide ir debajo de ella aunque encuentre hueco.

A ver si con una de esas dos cosas puedes solucionar.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 09/08/2008, 13:46
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problemas de ajuste con divs(Firefox)

Muchas gracias, he hecho lo que me has dicho poner la columna derecha dentro de una capa con anchura fija y ese problema se ha solucionado, también he conseguido que la parte izquierda tenga un fondo blanco fijo pero esto me ha creado otro problema, me desplaza los divs de la parte derecha.

Dejo la última versión de la hoja de estilos y un par de imágenes para que veas l o que digo.

http://i524.photobucket.com/albums/cc328/s7474/4.jpg
http://i524.photobucket.com/albums/cc328/s7474/5.jpg

Código HTML:
@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;
	padding:0px;
	background-image:url(caratulas/fondo.jpg);
	float:left;
	width:80%;	
}
.menu31{
	height:394px;
	margin: 0px;
	padding:0px;
	float:left;
	background-color:#FFFFFF;
	height:100%;
	/*width:656px;*/
	width:80%;	
	height:auto;
}
.menu4{
	float:left;
	color:#000000;
	text-align:center;
	font-size:13px;
	background-color:#CCCCCC;
	font-weight:bold;
	background-color:#add18f;
	width:20%;
	width:100%;
	height:auto;
}
.menu5{
	float:left;
	color::#6dbb2c;
	color:#FFFFFF;	
	text-align:center;
	font-size:13px;
	background-color:#FFFFFF;
	font-weight:bold;
	width:20%;
	height:auto;
	background-color:#000000;
}
div.menu5 a{
	text-decoration:none;
	font-weight:bold;
	color:#FFFFFF;	
}
div.menu5 a:hover{
	text-decoration:none;
	font-weight:bold;
	color:#FFFFFF;	
}
div.menu5 a:link{
	text-decoration:none;
	font-weight:bold;
	color:#FFFFFF;	
}
.fondonegro{
	width:80%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align:center;
	background-color: #000000;
}
.fondonegro2{
	width:80%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align:center;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #FFFFFF;
	font-weight:bold;
	font-size:15px;
	color:#5fb914;
}
div.fondonegro2 a{
	font-size:15px;
	color:#000000;
	text-decoration:none;
	font-weight:bold;
}
div.fondonegro2 a:hover{
	
	color:#000000;
	text-decoration:none;
	font-weight:bold;
}
div.fondonegro2 a:link{
	font-size:15px;
	color:#000000;
	text-decoration:none;
	font-weight:bold;
}
.fondoverde{
	width:820px;
	height:100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align:center;
	background-color: #add18f;
	width:80%;	
	min-height:347px;
	height: auto!important;
	height: 347px;
}
.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;
}
.decoracion3{
	background-image: url(caratulas/tira.gif);
	background-repeat: repeat-x;
	width:100%;
	margin:0px;	
	height:8px;
	float:left;
}
.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;
}
.fondovertical{
	background-image:url(caratulas/fndv.gif);
	float:left;
}
.formulario{
	border-color:#000000;
	margin-left:8px;
	color:#000000;
	padding-top:2px;
	padding-bottom:2px;
	font-weight:bold;
}
.espacio{
	/*height:auto;*/
	clear:both;	
	/*background-color:#000000;*/
}
.espacio2{
	/*height:auto;*/
	float:left;
	width:100%;
	clear:both;	
	/*background-color:#000000;*/
}
.fila{
	text-align:left;
	margin:0px;
	float:left;
	width:639px;
	border-top: 1px gray solid;
	padding-top:5px;
	padding-left:5px;
}
.lista1{
	width:10%;
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:5px;
	float:left;
}
.lista2{
	width:28%;
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:5px;
	float:left;
}
.titular{
	text-align:center;
	margin-bottom:0px;
}
.titular2 ul li{
	color:#000000;
	font-size:20px;
}
.lista{
	float:left;
	margin:0px;
	padding-left:0px;
	padding-right:0px;
	width:87%;
}
.lista ul{
	width:100%;
	text-align:left;
	margin:0px;
	padding:0px;
}
.lista ul li{
	width:100%;
	text-align:left;
	list-style:none;
}
.listadetalle{
	float:left;
	margin:0px;
	padding-left:0px;
	padding-right:0px;
	width:50%;
}
.listadetalle ul{
	width:100%;
	text-align:left;
	margin:0px;
	padding:0px;
}
.listadetalle ul li{
	width:100%;
	text-align:left;
	list-style:none;
}
.imagen{
	width:57px;
	height:83px;
	border:1px solid #000000;
	/*padding-left:5px;
	padding-top:5px;*/
}
.imagen2{
	width:162px;
	height:240px;
	border:1px solid #000000;
	float:left;
	/*padding-left:5px;
	padding-top:5px;*/
}
.negrita{
	font-weight:bold;
}
.verde{
	color:#64c216;
	font-weight:bold;
}
.frm{
	float:left;
	width:auto;
	height:auto;
}
.blanco{
	background-color:#FFFFFF;
	min-height:348px;
	width:80%;
}
.fondoblanco{
	width:20%;
	float:left;/*
	min-height:348px;*/
	/*width:100%;*/	
}
.lista2{
	list-style:none;
}
  #14 (permalink)  
Antiguo 09/08/2008, 16:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de ajuste con divs(Firefox)

Tienes muchos errores en la hoja de estilo y necesitas limpiarla:

Cita:
.menu31{
height:394px;
margin: 0px;
padding:0px;
float:left;
background-color:#FFFFFF;
height:100%;
/*width:656px;*/
width:80%;
height:auto;
}
.menu4{
float:left;
color:#000000;
text-align:center;
font-size:13px;
background-color:#CCCCCC;
font-weight:bold;
background-color:#add18f;
width:20%;
width:100%;

height:auto;
}
La columna central la pones en porcentaje, sin embargo luego un bloque dentro de ésta lo pones en pixels:

Cita:
.fila{
text-align:left;
margin:0px;
float:left;
width:639px;
border-top: 1px gray solid;
padding-top:5px;
padding-left:5px;
}
En fin, hay muchas muchas cosas. Repasa y limpia todo y después miramos.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 10/08/2008, 12:27
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problemas de ajuste con divs(Firefox)

Tenías razón la mezcla de porcentajes con píxels era lo que me estaba descolocando todo.

Después de pegarle una buena limpieza he conseguido que todo este ok, el único problema que he arreglado de forma quizás un poco chapucera es que cuando había muchos resultados (películas) los margenes automáticos de la izquierda y la derecha encogen 8 píxels, al menos en Firefox 3, en Explorer 6 no me pasaba, lo he arreglado poniendo margenes fijos del tamaño que quería pero claro esto está bien para una resolución de 1024x768 para resoluciones mayores o menores no se que tal quedará.

Este es el fallo:
http://i524.photobucket.com/albums/cc328/s7474/06.jpg
http://i524.photobucket.com/albums/cc328/s7474/07.jpg

Tengo otra duda, ya bastante tonta que es si usar un <br/> para que usuario y la caja de texto del formulario no esten en la misma línea es poco accesible y/o usable. Lo digo porque ahora mismo el formulario no está centrado del todo y si lo centro la única forma que se me ocurre de separarlos es un br.

Dejo la hoja de estilos.

Código HTML:
@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;
	background-color:#faf8c9;
	margin-top:0px;
	margin-bottom: 0px;
	/*margin-right: auto;	
	margin-left: auto;*/
	margin-right: 106px;	
	margin-left: 106px;
	margin-right: 106px;	
	margin-left: 106px;
	background-color:#FFFFFF;
	width:816px;
}
.centrar{
	text-align:center;
	margin-bottom:0px;
}
.menu3{
	width:656px;
	height:394px;
	margin: 0px;
	padding:0px;
	background-image:url(caratulas/fondo.jpg);
	float:left;
}
.menu31{
	margin: 0px;
	padding:0px;
	float:left;
	background-color:#FFFFFF;
	width:656px;	
	height:auto;
}
.menu4{
	float:left;
	color:#000000;
	text-align:center;
	font-size:13px;
	background-color:#CCCCCC;
	font-weight:bold;
	background-color:#add18f;
	width:160px;
	height:auto;
}
.menu5{
	float:left;
	color::#6dbb2c;
	color:#FFFFFF;	
	text-align:center;
	font-size:13px;
	background-color:#FFFFFF;
	font-weight:bold;
	width:32px;
	height:auto;
	background-color:#000000;
}
div.menu5 a{
	text-decoration:none;
	font-weight:bold;
	color:#FFFFFF;	
}
div.menu5 a:hover{
	text-decoration:none;
	font-weight:bold;
	color:#FFFFFF;	
}
div.menu5 a:link{
	text-decoration:none;
	font-weight:bold;
	color:#FFFFFF;	
}
.fondonegro{
	margin-top: 0px;
	margin-bottom: 0px;
	/*margin-left: auto;
	margin-right: auto;*/	
	margin-left: 106px;
	margin-right: 106px;
	text-align:center;
	background-color: #000000;
	width:816px;
}
.fondonegro2{
	margin-top: 0px;
	margin-bottom: 0px;
	/*margin-right: auto;	
	margin-left: auto;*/
	margin-right: 106px;	
	margin-left: 106px;	
	text-align:center;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #FFFFFF;
	font-weight:bold;
	font-size:15px;
	color:#5fb914;
	width:816px;
}
div.fondonegro2 a{
	font-size:15px;
	color:#000000;
	text-decoration:none;
	font-weight:bold;
}
div.fondonegro2 a:hover{	
	color:#000000;
	text-decoration:none;
	font-weight:bold;
}
div.fondonegro2 a:link{
	font-size:15px;
	color:#000000;
	text-decoration:none;
	font-weight:bold;
}
.fondoverde{
	width:816px;
	margin-top: 0px;
	margin-bottom: 0px;
	/*margin-right: auto;	
	margin-left: auto;*/
	margin-right: 106px;	
	margin-left: 106px;
	text-align:center;
	background-color: #add18f;
	min-height:347px;
	height: auto!important;
	height: 347px;
}
.decoracion{
	background-image: url(caratulas/tira.gif);
	background-repeat: repeat-x;
	/*margin-left: auto;
	margin-right: auto;*/	
	margin-left: 106px;
	margin-right: 106px;
	height:8px;
	width:816px;
}
.decoracion2{
	background-image: url(caratulas/tira.gif);
	background-repeat: repeat-x;
	width:160px;
	margin:0px;	
	height:8px;
}
.decoracion3{
	background-image: url(caratulas/tira.gif);
	background-repeat: repeat-x;
	width:160px;
	margin:0px;	
	height:8px;
	float:left;
}
.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;
}
.fondovertical{
	background-image:url(caratulas/fndv.gif);
	float:left;
}
.formulario{
	border-color:#000000;
	margin-left:8px;
	color:#000000;
	padding-top:2px;
	padding-bottom:2px;
	font-weight:bold;
	text-align:center;
}
.espacio{
	clear:both;
}
.espacio2{
	float:left;
	clear:both;	
}
.fila{
	text-align:left;
	margin:0px;
	float:left;	
	border-top: 1px gray solid;
	padding-top:5px;
	padding-left:5px;
	width:651px;
}
.lista1{	
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:5px;
	float:left;
	width:56px;
}
.lista2{	
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:5px;
	float:left;
}
.titular{
	text-align:center;
	margin-top:0px;
	margin-bottom:0px;
}
.titular2 ul li{
	color:#000000;
	font-size:20px;
}
.lista{
	float:left;
	margin:0px;
	padding-left:5px;
	padding-right:0px;
	width:588px;
}
.lista ul{
	width:588px;
	text-align:left;
	margin:0px;
	padding:0px;
}
.lista ul li{
	width:588px;
	text-align:left;
	list-style:none;
}
.listadetalle{
	float:left;
	margin:0px;
	padding-left:5px;
	padding-right:0px;
	width:482px;
}
.listadetalle ul{
	width:482px;
	text-align:left;
	margin:0px;
	padding:0px;
}
.listadetalle ul li{
	width:482px;
	text-align:left;
	list-style:none;
}
.imagen{
	width:56px;
	height:83px;
	border:1px solid #000000;
}
.imagen2{
	width:162px;
	height:240px;
	border:1px solid #000000;
	float:left;
}
.negrita{
	font-weight:bold;
}
.verde{
	color:#64c216;
	font-weight:bold;
}
.frm{
	float:left;
	width:auto;
	height:auto;
}
.blanco{
	background-color:#FFFFFF;
	min-height:348px;	
	width:656px;
}
.fondoblanco{	
	float:left;
	width:160px;
}
.lista2{
	list-style:none;
}
  #16 (permalink)  
Antiguo 11/08/2008, 01:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de ajuste con divs(Firefox)

Cita:
Iniciado por haga41 Ver Mensaje
Después de pegarle una buena limpieza he conseguido que todo este ok, el único problema que he arreglado de forma quizás un poco chapucera es que cuando había muchos resultados (películas) los margenes automáticos de la izquierda y la derecha encogen 8 píxels, al menos en Firefox 3, en Explorer 6 no me pasaba, lo he arreglado poniendo margenes fijos del tamaño que quería pero claro esto está bien para una resolución de 1024x768 para resoluciones mayores o menores no se que tal quedará.
Esto te pasa porque en FF la barra de scroll sólo aparece cuando se necesita, mientras que en IE siempre está ahi aunque esté deshabilitada, por eso, al tener más contenido, aparece la barra y empuja todo hacia la izquierda.

Lo del br no tiene ningún problema, se puede usar sin problema.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 11/08/2008, 06:04
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problemas de ajuste con divs(Firefox)

Ok, ya entiendo lo de esos pixels ahora la única duda que me surge es ¿está bien arreglarlo como lo he hecho yo o es mejor dejarlo en auto y que sea un "mal" asumible? Lo digo porque creo recordar que en algun curro que estuve les comente sobre eso y no me dijeron que hiciera nada, vaya que parecía que me estaban diciendo "dejalo así que si no la vayas a liar más".

Lo del br ya está hecho, lo he puesto y he cambiado el estilo de formulario y queda perfecto.

Última edición por haga41; 11/08/2008 a las 06:10
  #18 (permalink)  
Antiguo 11/08/2008, 11:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de ajuste con divs(Firefox)

Al poner márgenes fijos tienes el riesgo de que todo se descuadre al verla en otras resoluciones. Una solución posible sería que toda ella estuviera contenida en una caja que fuera un porcentaje de la pantalla, y poner márgenes en porcentajes, pero puede ser en tu caso más problema que solución.

Yo personalmente dejaría que se desplace al aparecer el scroll, porque como al hacer una búsqueda cargará la página de nuevo, no veo problema en que al aparecer el scroll todo se desplace un poquillo a la izquierda y al haber poco contenido vaya hacia la derecha.

La solución realmente es poner un scroll fijo a la página con:

html {overflow: scroll;}

pero el problema es que eso saca también el scroll horizontal, así que puede ser peor el remedio que la enfermedad.

Para mi que es una cosa de gustos.
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 11/08/2008, 14:37
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problemas de ajuste con divs(Firefox)

La verdad es que tienes razón, lo que arreglas con una cosa lo acabas estropeando con otra, supongo que al final puede que ponga margenes automáticos y el scroll, total como abajo está deshabilitado tampoco molesta demasiado.

Me ha surgido ahora un problema adaptando la web a Explorer 6, el TotalValidator no acabo de hacerlo funcionar bien, ¿puedo usarlo offline? así que ando con el Ie Developer Toolbar, el caso es que 2 estilos prácticamente idénticos en un sitio me funcionan y en otro me creo que unos pixels vacíos de altura que no consigo quitar de ninguna forma.
El primero estilo es para una foto de fondo de tamaño 656x394 y la cuadra perfectamente en su div, no me deja ningun espacio, el otro estilo es para una tira de 6x8 pixels, que repito hasta que ocupe 160 de ancho, he probado a quitar la repeticion, a poner o no poner el !important a encoger la anchura(funciona) a encoger la altura(no reacciona) y ya no se que hacer, cualquier idea sería bien recibida ya que no se que más probar.

Este es el estilo que funciona con la foto de fondo:

.menu3{
width:656px;
height:394px;
margin: 0px;
padding:0px;
background-image:url(caratulas/fondo.jpg);
float:left;
}

Y este el que me falla con la tira, la altura que me coge es de 15 pixels, 8 de la tira y 7 vacios. Pongo las fotos para que se vea mejor, En Firefox funciona perfectamente.


http://i524.photobucket.com/albums/cc328/s7474/8.jpg
http://i524.photobucket.com/albums/cc328/s7474/8-1.jpg

.decoracion2{
width:160px;
height:8px!important;
margin:0px;
padding:0px;
background-image:url(caratulas/tira.gif);
float:left;
}
  #20 (permalink)  
Antiguo 19/08/2008, 09:41
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problemas de ajuste con divs(Firefox)

Hola de nuevo,

Ya he conseguido arreglar casi todo para que se vea bien en Explorer, juraría que son cosas que ya ha había probado antes pero bueno supongo que puede ser el overflow.

El problema que tengo ahora es que quiero que una capa tenga una altura mínima en 386px, pero que tengo la altura máxima automática en función de los resultados que salgan.

El código en el estilo para Firefox es este:
Código HTML:
.blanco{
	background-color:#FFFFFF;
	min-height:348px;	
	width:656px;
}
Y en el estilo exclusivo para Explorer es:
Código HTML:
.blanco{
	overflow:hidden;
	clear:both;
	height: 348px ;
	max-height: auto;
}
El problema es que Explorer no me acepta el max-height por lo que la única forma de "arreglarlo" que se me ocurre es por programación, es decir que si salen los resultados suficientes como para que no se vea el fallo de Explorer use el estilo de Firefox y si salen menos resultados use este que he puesto aquí, se llamaría diferente y según cual fuera el caso elegiría entre el estilo antiguo o este pero vaya sería algo así.

Sólo quería saber si hay alguna forma más sencilla de hacerlo, he probado con el !important en el estilo de Explorer pero creo que no lo he usado bien. Si sabéis alguna forma de arreglar esto sólo con css os lo agradecería mucho.
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




La zona horaria es GMT -6. Ahora son las 17:19.