css y jqury en mac

[herzbazi]

www.esdisa.com.gt

esta pagina la estoy haciendo a un cliente, aun falta pero el problema es que yo tengo un jquery y css y en todos los navegadores de windows se ve bien, el problema es que mi cliente usa mac y dice que no se ve bien, sera que me pueden apoyar con eso alguien que tenga mac darme un print de su pantalla para que pueda ver cual es el problema y si tiene problema que me den la posible solucion

gracias

[Sirius381]

Se que esto sera difícil de creer jejejee y lo resolveré pronto, pero no he podido pasarte una captura de lo que CREO es el error que ve tu cliente, abrí la pagina en Linux (Ubuntu 10.04), no tengo nada con que capturar la pantalla, solo pude hacer un PDF pero no se imprimió la parte del menu, solo los textos (Inicio, donde le duele?, plantillas, etc...)

El error que vi o mas bien, la diferencia que he visto es que en Windows+Google Chrome los menús se ven correctamente, en el Linux las letras se ven mas grandes y por ejemplo los enlaces "Donde le duele?" "Plantillas ortopedicas" se van a dos lineas, se ven asi:

Plantillas
Ortopedicas

y no asi:

Plantillas ortopedicas

Se pierde como la mitad del texto de abajo y cuando paso el cursor por arriba se pone negro el texto y ya se ve completo, la parte azul del menu (me imagino) estara definida con dimensiones fijas no? por que se pierde el texto y la aprte azul se queda tal cual.

Esto trabajando en capturarte la pantalla, mientras tanto espero te ayude al menos para ir viendo que esta pasando, igual podrias bajarte una distro linux "live" para que sin instalar nada puedas ver el error.

Saludos!!

EDIT:::::::::::::::::::::::::::::::::::::::::::::: :;

Oye he notado otra diferencia en el Linux, lo que me imagino es el header se separa del carrusel de abajo por aprox 10px, en windows se ven pegados y el degradado se ve correctamente, en Linux se separan y se ve una franja blanca entre los dos, sigo viendo como capturarte la pantalla.

[herzbazi]

ok gracias
espero me puedas colcar la imagen o el pdf

gracis

lo que tengo que descargar es

distro linux

crees que si cambio las dimensiones se repara el problema

[Sirius381]

Ya tengo la captura, el problema era que no tenia las "gnome-utils" ya que trabajo con Ubuntu server y tengo todo al minimo, ok, te dejo la imagen, se aprecian los dos errores que te comente, si quieres descargar la distro para verlo (y probarlo) no estaria mal, te recomiendo algun ubuntu live, lo que hace eso es que se instala el SO en tu RAM y no hay necesidad de hacer particiones ni instalar nada, con reiniciar sacando el disco ya regresas a tu SO nativo sin cambios y sin afectar nada.

De si cambias las dimensiones creo yo (soy novato aun) que solo parchearia el problema, ya que no es una solucion de fondo, ahora el problema seria que en windows se verian unos botones muy grandes y en mac/linux (supongo que es lo mismo) se veria bien, creo que mas bien hay que trabajar con el CSS para que se adapte el contenido al contenedor (texto al botón) y funcione bien siempre.

Oye por curiosidad, con que esta hecho el carrusel que tienes ahi? me gustaria implementar algo asi y ni idea de por donde empezar, te dejo la imagen.

Saludos!

[alivan]

No has definido ninguna fuente como predefinida para el sitio en general. Por ende se escoge la fuente, y el tamaño de la misma, según la configuración del navegador.

Intenta escoger alguna que aparezca en todos los sistemas operativos.


PD: ¿Se puede preguntar cuánto le vas a cobrar a tu cliente?

[herzbazi]

Iniciado por alivan

No has definido ninguna fuente como predefinida para el sitio en general. Por ende se escoge la fuente, y el tamaño de la misma, según la configuración del navegador.

Intenta escoger alguna que aparezca en todos los sistemas operativos.


PD: ¿Se puede preguntar cuánto le vas a cobrar a tu cliente?

la verdad te digo, no estoy haciendo la web yo , yo le estoy cobrando mantenimiento y le cobro 60 dolares al mes

[herzbazi]

Iniciado por Sirius381

Ya tengo la captura, el problema era que no tenia las "gnome-utils" ya que trabajo con Ubuntu server y tengo todo al minimo, ok, te dejo la imagen, se aprecian los dos errores que te comente, si quieres descargar la distro para verlo (y probarlo) no estaria mal, te recomiendo algun ubuntu live, lo que hace eso es que se instala el SO en tu RAM y no hay necesidad de hacer particiones ni instalar nada, con reiniciar sacando el disco ya regresas a tu SO nativo sin cambios y sin afectar nada.

De si cambias las dimensiones creo yo (soy novato aun) que solo parchearia el problema, ya que no es una solucion de fondo, ahora el problema seria que en windows se verian unos botones muy grandes y en mac/linux (supongo que es lo mismo) se veria bien, creo que mas bien hay que trabajar con el CSS para que se adapte el contenido al contenedor (texto al botón) y funcione bien siempre.

Oye por curiosidad, con que esta hecho el carrusel que tienes ahi? me gustaria implementar algo asi y ni idea de por donde empezar, te dejo la imagen.

Saludos!

colocas este codigo en tu html

<script type="text/javascript">

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}



function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

</script>


luego vinculas este a tu html

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

creas esto en otro documento y lo vinculas


/ / Simple JavaScript Banner rotativo Usando jQuery
/ / Www.mclelun.com
var jqb_vCurrent = 0;
var jqb_vTotal = 0;
var jqb_vDuration = 5000;
var jqb_intInterval = 0;
var jqb_vGo = 1;
var jqb_vIsPause = false;
var jqb_tmp = 20;
var jqb_title;
var jqb_imgW = 764;
var jqb_imgH = 277;

jQuery (document). ready (function () {
jqb_vTotal = $ ("jqb_slides.") niños () el tamaño () -1..;
$ ("Jqb_info.") De texto. ($ ("Jqb_slide"). Attr ("title").);
jqb_intInterval = setInterval (jqb_fnLoop, jqb_vDuration);

/ / Horizontal
$ ("# Jqb_object"). Find (". Jqb_slide"). Cada uno (función (i) {
jqb_tmp = ((i - 1) * jqb_imgW) - ((jqb_vCurrent -1) * jqb_imgW);
$ (This) animate ({"izquierda": jqb_tmp + "px"}, 500).;
});

/ *
/ / Vertical
$ ("# Jqb_object"). Find (". Jqb_slide"). Cada uno (función (i) {
jqb_tmp = ((i - 1) * jqb_imgH) - ((jqb_vCurrent -1) * jqb_imgH);
$ (This) animate ({"top": jqb_tmp + "px"}, 500).;
});
* /

$ ("# Btn_pauseplay"). Click (function () {
if (jqb_vIsPause) {
jqb_fnChange ();
jqb_vIsPause = false;
$ ("# Btn_pauseplay") removeClass ("jqb_btn_play").;
$ ("# Btn_pauseplay") AddClass ("jqb_btn_pause").;
Else {}
clearInterval (jqb_intInterval);
jqb_vIsPause = true;
$ ("# Btn_pauseplay") removeClass ("jqb_btn_pause").;
$ ("# Btn_pauseplay") AddClass ("jqb_btn_play").;
}
});
$ ("# Btn_prev"). Click (function () {
jqb_vGo = -1;
jqb_fnChange ();
});

$ ("# Btn_next"). Click (function () {
jqb_vGo = 1;
jqb_fnChange ();
});
});

jqb_fnChange function () {
clearInterval (jqb_intInterval);
jqb_intInterval = setInterval (jqb_fnLoop, jqb_vDuration);
jqb_fnLoop ();
}

jqb_fnLoop function () {
if (jqb_vGo == 1) {
jqb_vCurrent == jqb_vTotal? jqb_vCurrent = 0: jqb_vCurrent + +;
Else {}
jqb_vCurrent == 0? jqb_vCurrent = jqb_vTotal: jqb_vCurrent -;
}


$ ("# Jqb_object"). Find (". Jqb_slide"). Cada uno (función (i) {
if (i == jqb_vCurrent) {
jqb_title = $ (this) attr ("title").;
. $ (". Jqb_info") animate ({opacity: "esconder", "izquierda": "-50px"}, 250, function () {
$ ("Jqb_info.") Texto (jqb_title) animate ({opacity: "show", "izquierda": "0px"}, 500)..;
});
}


/ / Desplazamiento Horizontal
jqb_tmp = ((i - 1) * jqb_imgW) - ((jqb_vCurrent -1) * jqb_imgW);
$ (This) animate ({"izquierda": jqb_tmp + "px"}, 500).;


/ *
/ / Desplazamiento vertical
jqb_tmp = ((i - 1) * jqb_imgH) - ((jqb_vCurrent -1) * jqb_imgH);
$ (This) animate ({"top": jqb_tmp + "px"}, 500).;
* /

/ *
/ / Fade In y Fade Out
if (i == jqb_vCurrent) {
. $ (". Jqb_info") de texto (. $ (This) attr ("title"));
. $ (This) animate ({opacity: 'show', altura: "show"}, 500);
Else {}
. $ (This) animate ({opacity: 'esconder', altura: 'hide'}, 500);
}
* /

});


}



luego tu css y lo vinculas



#jqb_object img{
border: none;
}

#jqb_object {
position:relative;
width:764px; height:277px;
overflow:hidden;
}


#jqb_object .jqb_bar{
position:absolute;
width:764px; height: 30px;
left:0px;
bottom:0px;
background:#000000;
opacity:0.7;
filter:alpha(opacity=50);

color: #ffffff;
font-family: Arial, Verdana, Sans-Serif;
font-weight: bold;
font-size: 18px;
letter-spacing: -1px;
}

#jqb_object .jqb_slide{
position:absolute;
width:764px; height:277px;
font-family: Arial, Verdana, Sans-Serif;
font-weight: bold;
font-size: 18px;
letter-spacing: -1px;
text-align: left;
}

#jqb_object .jqb_info{
position:absolute;
padding: 2px 10px 2px 10px;
float: left;
}

#jqb_object .jqb_btn{
width: 15px; height: 14px;
margin: 10px 5px 2px 2px;
float: right;
}
#jqb_object .jqb_btn_next{
background-image:url(img/btn_next.gif);

}
#jqb_object .jqb_btn_prev{
background-image:url(img/btn_prev.gif);

}
#jqb_object .jqb_btn_pause{
background-image:url(img/btn_stop.gif);

}
#jqb_object .jqb_btn_play{
background-image:url(img/btn_play.gif);

}


por ultimo haces esto en tu html


<div id="jqb_object">



<div class="jqb_slides">





<div class="jqb_slide" title="Ver catálogo de productos" >

<a href="http://issuu.com/jzirion/docs/catalogo_para_caballero_dr_comfort_esdisa?mode=win dow&pageNumber=1" target="_new">

<img src="img/1.png" title="" alt=""/></a></div>





<div class="jqb_slide" title="Ver catálogo de productos" >

<a href="http://issuu.com/jzirion/docs/catalogo_sandalias_aetrex?mode=window&pageNumber=1 " target="_new">

<img src="img/2.png" title="" alt=""/></a></div>





<div class="jqb_slide" title="">

<img src="img/3.png" title="" alt=""/></a></div>



<div class="jqb_slide" title="Ver catálogo de productos">

<a href="http://issuu.com/jzirion/docs/catalogo_tacones_aetrex?mode=window&pageNumber=1" target="_new">

<img src="img/4.png" title="" alt=""/></a></div>



<div class="jqb_slide" title="">

<img src="img/5.png" title="" alt=""/></div>



<div class="jqb_slide" title="Ver catálogo de productos" >

<a href="http://issuu.com/jzirion/docs/catalogo_para_dama_dr_comfort?mode=window&pageNumb er=1" target="_new">

<img src="img/6.png" title="" alt=""/></a></div>



<div class="jqb_slide" title="">

<img src="img/7.png" title="" alt=""/></a></div>



<div class="jqb_slide" title="">

<img src="img/8.png" title="" alt=""/></a></div>



<div class="jqb_slide" title="">

<img src="img/9.png" title="" alt=""/></a></div>



<div class="jqb_slide" title="">

<img src="img/10.png" title="" alt=""/></a></div>







<div class="jqb_bar">

<div class="jqb_info"></div>

<div id="btn_next" class="jqb_btn jqb_btn_next"></div>

<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>

<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>



</div>

<img src="img/11.png" title="" alt=""/>

</div>

la lista ahi esta .. me dices si me entiendes por que aveces me cuesta explicar

[Sirius381]

Muchisimas gracias! Con ese codigo tengo sufuciente para lo que necesito implementar, de verdad gracias!

Saludos!

[herzbazi]

si te ayude , creo que estamos a mano...

por que me ayudaste mucho...

cuando quieras ya sabes que estoy para ayudar

[Sirius381]

Igualmente amigo, en lo que pueda aquí ando, te reitero mi agradecimiento ;)

Saludos!

[herzbazi]

Iniciado por alivan

No has definido ninguna fuente como predefinida para el sitio en general. Por ende se escoge la fuente, y el tamaño de la misma, según la configuración del navegador.

Intenta escoger alguna que aparezca en todos los sistemas operativos.


PD: ¿Se puede preguntar cuánto le vas a cobrar a tu cliente?

sos master amigo creo que era la solucion..

[Sirius381]

@herzbazi por que no nos comentas cuando lo implementes en el sitio publicado y te confirmo si ya se ven iguales, yo el sitio en linux lo sigo viendo con los espacios y eso.

Saludos!

[herzbazi]

ok listo lo hare hoy mismo

[herzbazi]

listo por si queres verlo

creo que ya esta

[herzbazi]

Iniciado por Sirius381

Muchisimas gracias! Con ese codigo tengo sufuciente para lo que necesito implementar, de verdad gracias!

Saludos!

si quieres tengo codigos y jquerys que he realizado y voy guardando

[Sirius381]

Hola, recien voy llegando y vi la respuesta, sigo viendo un espacio entre el header y el carrusel, asi como el menu "Plantillas Ortopedicas" se sigue pasando a dos lineas, se ve cortado de abajo, el de "Donde le duele?" que tambien se iba a dos lineas no lo hace mas, ese ya se ve en una sola linea.

De los codigos claro, todo es bienvenido :D yo mientras mas mejor jejeje uno nunca sabe cuando va a necesitar esto o aquello.

Saludos!!

[herzbazi]

Iniciado por Sirius381

Hola, recien voy llegando y vi la respuesta, sigo viendo un espacio entre el header y el carrusel, asi como el menu "Plantillas Ortopedicas" se sigue pasando a dos lineas, se ve cortado de abajo, el de "Donde le duele?" que tambien se iba a dos lineas no lo hace mas, ese ya se ve en una sola linea.

De los codigos claro, todo es bienvenido :D yo mientras mas mejor jejeje uno nunca sabe cuando va a necesitar esto o aquello.

Saludos!!

me puedes hacer favor de dar un refresh a tu explorador , es qeu en teoria todo esta modificado ya , y segun un amigo que tiene mac se ve bien, pero no le creo del todo, jajaja por que es muy bromista

[Sirius381]

Limpie el historial, cache, cookies, todo amigo y no :( se ve igual, una franja blanca entre el header y el carrusel y el menu "Plantillas ortopedicas" en dos lineas, sigo aqui para las pruebas todavia una hora aprox.

Saludos!

[herzbazi]

listo voy intento de nuevo

[herzbazi]

me podes hacer el favor ,, gracias creo que ahora si

[Sirius381]

Se ve igual :( te mando la captura dejame me logeo en linux.

EDIT:::::::::::::: te dejo la imagen de como lo veo actualmente