[Ovillo] Ayuda sobre overflow con div en firefox
El problema es que tengo una serie de bloques div, los cuales deben
mostrarse en una sola línea, dentro de un contenedor div sobre el que
quiero hacer un scroll horizontal. El siguiente código me funciona
correctamente en explorer, pero en firefox al limitarle el ancho del
contenedor hace que los div internos se vayan colocando en varias líneas.
Espero alguien sepa como solucionarlo.
style
.contenedor {
width:300px;
height:150px;
overflow-x:scroll;
}
.bloque {
border:1px solid;
width:100px;
height:100px;
float:left;
clear:right;
margin:2px;
}
/style
/head
body
div class=contenedor
div class=bloquebloque/div
div class=bloquebloque/div
div class=bloquebloque/div
div class=bloquebloque/div
/div
/body
Gracias por a todo por anticipado.
Un saludo,
Miguel
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Ayuda sobre overflow con div en firefox
Gracias por la respuesta pero sigo sin solución.
Un saludo,
Miguel Hurtado
BITel S.A.
Webmaster
Tfno. 971 225700
Fax. 971 225701
E-mail. [EMAIL PROTECTED]
http://www.bitel.es
Aviso legal:
El contenido de este mensaje (y de cualquiera de los archivos adjuntos) es
confidencial, y dirigido exclusivamente a los destinatarios especificados.
El mensaje puede contener información privilegiada y/o estar legalmente
protegido. Solamente podrá reproducir o distribuir el material previa
autorización expresa. Si usted no es el receptor previsto, cualquier uso,
acceso o copia de este mensaje está prohibida en virtud de la legislación
vigente.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de Mario Pérez
Enviado el: miércoles, 11 de julio de 2007 11:15
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Ayuda sobre overflow con div en firefox
Puede que me equivoque pero así a primera vista creo que deberías flotar
también el contenedor (el clear del bloque creo que no te hace falta).
Ya te digo que no lo he probado pero espero que te sirva.
Un saludo
MHU escribió:
El problema es que tengo una serie de bloques div, los cuales deben
mostrarse en una sola línea, dentro de un contenedor div sobre el que
quiero hacer un scroll horizontal. El siguiente código me funciona
correctamente en explorer, pero en firefox al limitarle el ancho del
contenedor hace que los div internos se vayan colocando en varias líneas.
Espero alguien sepa como solucionarlo.
style
.contenedor {
width:300px;
height:150px;
overflow-x:scroll;
}
.bloque {
border:1px solid;
width:100px;
height:100px;
float:left;
clear:right;
margin:2px;
}
/style
/head
body
div class=contenedor
div class=bloquebloque/div
div class=bloquebloque/div
div class=bloquebloque/div
div class=bloquebloque/div
/div
/body
Gracias por a todo por anticipado.
Un saludo,
Miguel
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Ayuda sobre overflow con div en firefox
Gracias por todo. Ahora ya funciona perfectamente.
Un saludo,
Miguel
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de Mario Pérez
Enviado el: miércoles, 11 de julio de 2007 12:53
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Ayuda sobre overflow con div en firefox
Mete un contenedor intermedio con ancho mayor que la suma de los bloques
MHU escribió:
Gracias por la respuesta pero sigo sin solución.
Un saludo,
Miguel Hurtado
BITel S.A.
Webmaster
Tfno. 971 225700
Fax. 971 225701
E-mail. [EMAIL PROTECTED]
http://www.bitel.es
Aviso legal:
El contenido de este mensaje (y de cualquiera de los archivos adjuntos) es
confidencial, y dirigido exclusivamente a los destinatarios especificados.
El mensaje puede contener información privilegiada y/o estar legalmente
protegido. Solamente podrá reproducir o distribuir el material previa
autorización expresa. Si usted no es el receptor previsto, cualquier uso,
acceso o copia de este mensaje está prohibida en virtud de la legislación
vigente.
-Mensaje original-
De: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED]
En nombre de Mario Pérez
Enviado el: miércoles, 11 de julio de 2007 11:15
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Ayuda sobre overflow con div en firefox
Puede que me equivoque pero así a primera vista creo que deberías flotar
también el contenedor (el clear del bloque creo que no te hace falta).
Ya te digo que no lo he probado pero espero que te sirva.
Un saludo
MHU escribió:
El problema es que tengo una serie de bloques div, los cuales deben
mostrarse en una sola línea, dentro de un contenedor div sobre el que
quiero hacer un scroll horizontal. El siguiente código me funciona
correctamente en explorer, pero en firefox al limitarle el ancho del
contenedor hace que los div internos se vayan colocando en varias líneas.
Espero alguien sepa como solucionarlo.
style
.contenedor {
width:300px;
height:150px;
overflow-x:scroll;
}
.bloque {
border:1px solid;
width:100px;
height:100px;
float:left;
clear:right;
margin:2px;
}
/style
/head
body
div class=contenedor
div class=bloquebloque/div
div class=bloquebloque/div
div class=bloquebloque/div
div class=bloquebloque/div
/div
/body
Gracias por a todo por anticipado.
Un saludo,
Miguel
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] lista
Bueno por lo que yo se el problema es que firefox al aplicar un marcador de
tipo imagen deja un espacio por defecto entre la imagen y el texto, cosa que
ie no hace. Por tanto para solucionar el problema con el ie se podría hacer
lo siguinte:
Como supongo que estas listas son un menú y por tanto cada elemento deberá
ser un link se podría añadir la etiqueta a/a a cada elemento y añadir
dos entradas en el css
ul li a.menu_ie {
text-decoration:none;
padding-left:10px /*por ejemplo*/
}
ul li a.menu_firefox {
text-decoration:none;
padding-left:0px;
}
la razón de tener dos estilos es que en ie la separación entre el marcador
(imagen) y el texto sería de 10px, pero el inconveniente es que en firefox
estos 10px se sumarían a la distancia por defecto, lo que provocaría una
separación excesiva. La solución pasa por aplicar un poco de javascript y
cargar un estilo diferente para explorer y firefox.
El javascript se cargaría con el onload del bodyu de la página y podría ser
tal como sigue:
script
function iniciar() {
var elementos_menu = document.getElementsByName(menu);
if (navigator.appName == Microsoft Internet Explorer){
for (i=0;ielementos_menu.length;i++){
elementos_menu[i].className = menu_ie;
}
}
else {
for (i=0;ielementos_menu.length;i++){
elementos_menu[i].className = menu_firefox;
}
}
}
/script
El html de ls lista debería ser similar a:
ul
li class=img2Nivel 1 :
div id=llistes1
ul
li class=img1a href= name=menu
class=menu_ieItem/a/li
li class=img1a href= name=menu
class=menu_ieItem/a/li
li class=img1a href= name=menu
class=menu_ieItem/a/li
li class=img1a href= name=menu
class=menu_ieItem/a/li
li class=img1a href= name=menu
class=menu_ieItem/a/li
/ul
/div !-- end div#llistes1 --
/li
Espero haberte servido de ayuda
Un saludo,
Miguel
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de manila lila
Enviado el: lunes, 09 de julio de 2007 14:43
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] lista
Hola gracias por responder, esto es lo que pongo en el css
ul li{
list-style-type:none;
list-style-position: inside;
margin: 0;
padding: 0;
}
li.img1 {
list-style-image: url(imatges/au.gif);
font-weight: normal;
background-position: 2px2%;
margin: 0;
padding: 0;
border-bottom: 1px solid #99;
line-height: 1.5em;
}
li.img2 {
list-style-image: url(imatges/vert.gif);
color: #FF;
font-weight: bold;
background-color: #7F1730;
margin: 0;
padding: 0;
line-height: 1.5em;
list-style: 3px;
}
Se trata de listas anidadas, en las que que he creado unas clases para poner
una imagen distinta en cada nivel, aunque creo que para la separacion entre
la imagen del marcador y el item esto no tiene nada que ver.
Hasta pronto
El día 9/07/07, MHU [EMAIL PROTECTED] escribió:
Podrías adjuntar el css que aplicas en tu lista. Ya que sin aplicar ningún
css tanto firefox como ie dejan un espacio entre el caracter y el texto
del
element de la lista.
Un saludo,
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:
[EMAIL PROTECTED]
En nombre de manila lila
Enviado el: sábado, 07 de julio de 2007 7:11
Para: Ovillo@lists.ovillo.org
Asunto: [Ovillo] lista
Señores:
Después de darle vueltas y mas vueltas...por fin me he decido a preguntar,
...
La cosa es que tengo una lista, el problema esta entre la distancia de
las
imagenes de los marcadores y los items correspondientes, en FireFox
perfecto, pero en uds. ya saben quien, se pegan, como puedo esponjar esa
distancia? algún hack? ...que no encuentro.
FireFox
# ítem
Ese otro
#ítem
Mil gracias por estar ahí
Manila
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] lista
Podrías adjuntar el css que aplicas en tu lista. Ya que sin aplicar ningún css tanto firefox como ie dejan un espacio entre el caracter y el texto del element de la lista. Un saludo, -Mensaje original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de manila lila Enviado el: sábado, 07 de julio de 2007 7:11 Para: Ovillo@lists.ovillo.org Asunto: [Ovillo] lista Señores: Después de darle vueltas y mas vueltas...por fin me he decido a preguntar, ... La cosa es que tengo una lista, el problema esta entre la distancia de las imagenes de los marcadores y los items correspondientes, en FireFox perfecto, pero en uds. ya saben quien, se pegan, como puedo esponjar esa distancia? algún hack? ...que no encuentro. FireFox # ítem Ese otro #ítem Mil gracias por estar ahí Manila ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] no encuentro el fallo
Hola creo que el fallo es el padding:10px que aplicas en el menú. En su
lugar aplica el padding-left y el padding-right. Dejando el menú pegado a la
imagen de arriba.
De todod modos como no veo las imágenes no se si la solución es la correcta.
Un saludo
Miguel Hurtado
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de coso
Enviado el: miércoles, 13 de septiembre de 2006 22:01
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] no encuentro el fallo
Perdonar que os moleste nuevamente:
No encuentro el fallo y llevo varias horas en ello.
En FF, IE7 se ve bien pero en opera me deja un espacio horizontal entre la
imagen de la cabecera y la barra navegadora horizontal
Debe ser algo que desconozco por que ya lo he probado todo y no doy con la
solucion.
HTML
body
div id=contenedor
div id=cabecerah1spanPrimavera/span/h1/div
--aqui me deja un espacio en blanco horizontal
div id=navegador
ul
lia href=# class=enlacenavPrimera /a/li
lia href=# class=enlacenavSegunda | /a/li
lia href=# class=enlacenavTercera | /a/li
lia href=# class=enlacenavCuarta | /a/li
lia href=# class=enlacenav Quinta |
/a/li
/ul
/div
CSS
html,body{
margin:0px;
padding:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
color:#66;
text-align:center;
background-image:url(../imagenes/desarrollo/fondo2.gif);
background-position:top left;
background-repeat:repeat-x;
}
#contenedor{
width:549px;
margin:auto;
text-align:left;
background-color:#FF;
}
#cabecera{
background: transparent url(../imagenes/desarrollo/cabecera2.jpg) no-repeat;
height : 288px;
width: 549px;
margin:0px;
padding:0px;
}
#cabecera h1 span{
display:none;
}
#navegador{
margin:0px;
padding:0px;
background: transparent url(../imagenes/desarrollo/barranav.jpg) no-repeat;
height:29px;
width:549px;
}
#navegador ul{
margin:0px;
padding:0px;
}
#navegador ul li{
margin:0px;
padding:0px;
list-style:none;
float:right;
}
#navegador ul li a{
margin:0px;
padding:10px;
text-decoration:none;
}
--
juan romero cruz
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] DIVs vs JS SCRIPT
Creo que se soluciona lo del espacio añadiendo margin:0px en el #lateral. Y si solo es el lado izquierdo se puede probar con margin-left:0px en el #contenido. Un saludo, Miguel Hurtado -Mensaje original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Mailing Dixital Enviado el: martes, 12 de septiembre de 2006 16:04 Para: 'Ovillo, la lista de CSS en castellano' Asunto: Re: [Ovillo] DIVs vs JS SCRIPT Muchas gracias Sr. Hurtado. :) Ahora sólo hay una pequeña variación de 2 px en la división entre el lateral y el contenido, pero no le daré más vueltas. De nuevo, gracias por tu ayuda. jsk -Mensaje original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de MHU Enviado el: lunes, 11 de septiembre de 2006 11:58 Para: 'Ovillo, la lista de CSS en castellano' Asunto: Re: [Ovillo] DIVs vs JS SCRIPT Hola según algunas pruebas bastaría con cambiar la hoja de estilos. 1) del #principal eliminar el display:table; 2) del #lateral float:left; clear:right; 3) del #contenido float:left; clear:right; Debería verse igual en FF y en IE Un saludo -Mensaje original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Mailing Dixital Enviado el: lunes, 11 de septiembre de 2006 10:14 Para: 'Ovillo, la lista de CSS en castellano' Asunto: [Ovillo] DIVs vs JS SCRIPT Buenos días familia... A ver si a alguien le sucede algo parecido: Tengo una maquetación sencilla con CSS con un lateral y consigo que todo se vea como quiero... en cuanto inserto un Javascript para cargar un SWF en ese lateral, en FF me descoloca la maquetación aunque en IE se sigue viendo correctamente. No es que el SWF cambie el tamaño del lateral y entonces no acepte el FLOAT:LEFT; porque si pongo el OBJET de flash directamente si que me respeta la maquetación... Parece que los JS no le gustan demasiado, ¿puede ser esto cierto? Aquí va la página de la que hablo: http://clientes.dixital.com/LaVoz/Escuela/ Por favor, provad a verla en los diferentes navegadores para ver de qué os hablo. Seguramente os pida tener instalada la última versión del Flash Player... lo siento, pero para este proyecto lo necesitamos. Gracias por vuestra ayuda. Josuke ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] IE: bordes visibles en tabla invisible
Hola mejor utilizas display:none; y solucionado el problema.
Un saludo
Miguel Hurtado
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de Domingo Salesa Ariste
Enviado el: miércoles, 13 de septiembre de 2006 10:35
Para: Ovillo@lists.ovillo.org
Asunto: [Ovillo] IE: bordes visibles en tabla invisible
Hola,
este mi primer mensaje y quiero felicitaros por esta magnifica lista.
Estoy haciendo una pagina emulando pestañas con divs que se muestran y
ocultan.
Dentro de algun div uso tablas y para evitar el 'table cellpading=0
cellspacing=0' puse el 'border-collapse: collapse' en la hoja de estilo.
El problema es que con div padre oculto IE6 me dibuja los bordes de las
celdas!!! (en Firefox perfecto).
Si quito el border-collapse funciona.
Un saludo
Domingo Salesa
Codigo de ejemplo:
!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; xml:lang=es lang=es
head
titleprueba/title
style
#capa{visibility: hidden;}
table{border-collapse: collapse;}
th{border: solid 1px #000;}
td{border: solid 1px red;}
/style
/head
body
div id=capa
table id=tabla
trthtitulo/th/tr
trtddatos/td/tr
/table
/div
/body
/html
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Poner las dimensiones de un object en fun ción de la resolución que tenga el navegador (javascript)
Este javascript te captura la resolución de la pantalla y la aplica a una
capa con el ID que tu quieras. En el caso de un object yo lo que haría sería
aplicar la función al embed del object.
script
function redimensionar(capa,n,m) {
var h = screen.height;
var w = screen.width;
document.getElementById(capa).style.height = h - n;
document.getElementById(capa).style.width = w - m;
/script
las variable n y m las puedes utilizar para modificar el tamaño obtenido
según la resolución.
Espero que te sirva
Un saludo
Miguel
Webmaster
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de }{eRc}{i
Enviado el: viernes, 25 de agosto de 2006 13:30
Para: ovillo@lists.ovillo.org
Asunto: [Ovillo] Poner las dimensiones de un object en función de la
resolución que tenga el navegador (javascript)
hola
me gustaría encontrar un javascript que ponga las dimensiones de un
object en función de la resolución que tenga el navegador.
gracias
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
