Foros del Web » Creando para Internet » Diseño web »

[SOLUCIONADO] Barra de desplazamiento

Estas en el tema de Barra de desplazamiento en el foro de Diseño web en Foros del Web. Hola que tal les escribo para ver si me pueden ayudar con un sitio web. Les aclaro que no se casi nada de programación me ...
  #1 (permalink)  
Antiguo 09/06/2013, 18:36
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 14 años
Puntos: 1
Barra de desplazamiento

Hola que tal les escribo para ver si me pueden ayudar con un sitio web.
Les aclaro que no se casi nada de programación me manejo mas que nada con el diseño gráfico.
Estoy trabajando en el diseño de un sitio prearmado que me dieron para modificar y en el cual no aparece la barra desplazadora horizontal al achicar el tamaño en el navegador. La barra desplazadora vertical funciona bien.

He leido algo en el foro de cambiar el código overflow:

overflow-x: hidden; .........POR AUTO
overflow-y: auto;

pero no encuentro el código overflow en el archivo HTML y en el archivo CSS el código aparece en muchas partes del archivo y no se cual modificar.

Les adjunto una muestra de los archivos (HTML Y CSS).

https://skydrive.live.com/redir?resi...P1jNyUJ_ksdfHg

Desde ya muchas gracias



************************************************** **********
  #2 (permalink)  
Antiguo 12/06/2013, 04:09
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Barra de desplazamiento

Yo personalmente no voy a descargar un archivo de Internet para ver el fallo.

Lo suyo sería que publicaras el HTML y CSS correspondiente al error, y si hace falta, el código completo pero focalizado en el error —es decir, omitiendo las cosas que no hacen falta para reproducir el error. Esto es lo común en cualquier foro. Sino vas a estar condenado a que te lea alguien con ganas y valor suficiente de descargar tus archivos.
  #3 (permalink)  
Antiguo 12/06/2013, 13:53
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 14 años
Puntos: 1
Respuesta: Barra de desplazamiento

Perdón mi intención era hacer las cosas claras porque el foro solo permite un máximo de caracteres y no sabría exactamente en que lugar del código se encuentra el error (de todas maneras el link es de facil acceso y en un click se bajan completos los dos archicos). Les envío parte del código CSS haber si me peden ayudar. Desde ya muchas gracias


body {
color:#fefefe;
text-align:left;
font:0.815em "Trebuchet MS", Helvetica, Garuda, sans-serif;
line-height:1.55em;
margin:0;
padding:0;
background-attachment: fixed;
background-image: url(../images/bgs/bg_i_4.jpg);
}

a {
color:#e6e1a8;
text-decoration:none;
outline:none;
cursor:pointer;
}

a:hover {text-decoration:underline;}

p {
margin:0;
padding:0 0 20px;
}

table {
padding:0;
margin:0;
border-collapse:collapse;
}

td, th, tr {
padding:0;
margin:0;
}

ol, ul, li {
padding:0;
margin:0;
}

ol, ul {margin:0 0 20px;}

ol {list-style-position:inside;}

small {
color:#e6e1a8;
font-size:.85em;
line-height:1.7em;
font-style:italic;
display:block;
padding-bottom:20px;
}

img {
background:#fefefe;
padding:4px;
border:1px solid #dadada;
}

a img {border:0;}

div {
text-align:left;
margin:0;
padding:0;
}

blockquote {
padding:0;
margin:0;
position:relative;
overflow:hidden;
}

code {
color:#fefefe;
font-family:"Trebuchet MS", Helvetica, Garuda, sans-serif;
display:block;
padding:17px 20px;
margin:0 0 15px;
background:#212121;
background:rgba(0, 0, 0, .2) url(../images/code_line.jpg) top left repeat-y;
-pie-background:rgba(0, 0, 0, .2) url(../images/code_line.jpg) top left repeat-y;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(css/styles/pie.html);
}

form {
border:none;
margin:0;
padding:0;
}

fieldset {
border:0;
margin:0;
padding:0;
}

label {
display:block;
line-height:2.5em;
margin:0;
padding:0;
}

input[type="text"] {
border:0;
font:1em "Trebuchet MS", Helvetica, Garuda, sans-serif;
line-height:1em;
padding:4px;
background:none;
color:#fefefe;
outline:none;
}

textarea {
border:0;
background:none;
color:#fefefe;
font:1em "Trebuchet MS", Helvetica, Garuda, sans-serif;
line-height:1.4em;
overflow:hidden;
outline:none;
resize:none;
}

h1 {
color:#fefefe;
font-size:1.85em;
font-weight:normal;
line-height:0.83em;
padding:0 0 20px;
margin:0;
text-shadow:1px 1px 1px #010101;
}

h2 {
color:#fefefe;
font-size:1.85em;
font-weight:normal;
line-height:0.83em;
padding:0 0 20px;
margin:0;
text-shadow:1px 1px 1px #010101;
}

h3 {
color:#fefefe;
font-size:1.55em;
font-weight:normal;
line-height:1em;
padding:0 0 20px;
margin:0;
text-shadow:1px 1px 1px #010101;
}

h4 {
color:#fefefe;
font-size:1.4em;
font-weight:normal;
line-height:1.1em;
padding:0 0 20px;
margin:0;
text-shadow:1px 1px 1px #010101;
}

h5 {
color:#fefefe;
font-size:1.4em;
font-weight:normal;
line-height:1.1em;
font-style:italic;
padding:0 0 20px;
margin:0;
text-shadow:1px 1px 1px #010101;
}

h6 {
color:#fefefe;
font-size:1.1em;
font-weight:normal;
line-height:1.18em;
font-style:italic;
padding:0 0 20px;
margin:0;
text-shadow:1px 1px 1px #010101;
}

#page {
width:100%;
position:relative;
overflow:hidden;
background:rgba(0, 0, 0, 0.4);
-pie-background:rgba(0, 0, 0, 0.4);
behavior:url(css/styles/pie.html);
}

#page_patern {
background:url(../images/bgs/bg_i_10.jpg) top center no-repeat fixed;
width:100%;
position:relative;
overflow:hidden;
}

/* ---------------------------------- Header ----------------------------------------------*/

#header {
width:1000px;
height:135px;
margin:0 auto;
position:relative;
z-index:10;
}

#header img {
border:0;
background:none;
padding:0;
}

#header a {color:#fefefe;}

a.logo {
display:block;
width:250px;
height:50px;
position:absolute;
top:70px;
left:20px;
}

.top_line, .search_line {
padding:0 4px 0 0;
overflow:hidden;
position:absolute;
top:25px;
}

.search_line {right:18px;}

.top_line {right:240px;}

.inp_l {
background:url(../images/inp_l.png) top left no-repeat;
display:block;
height:37px;
padding:0 0 0 10px;
}

.inp_r {
background:url(../images/inp_r.png) top right no-repeat;
display:block;
height:37px;
padding:0 10px 0 0;
}

.top_line .inp_l, .search_line .inp_l {
float:left;
margin:0 0 0 11px;
}
  #4 (permalink)  
Antiguo 13/06/2013, 04:40
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Barra de desplazamiento

Por eso decía que focalizando el código en el error. Con sólo el CSS poco hacemos, faltaría el HTML correspondiente.

También puedes usar jsfiddle, codepen.io o cualquier otro sistema para publicar el código.

Tampoco estaría de más que usara highlight o code, así se ve mejor el código.
  #5 (permalink)  
Antiguo 13/06/2013, 19:09
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 14 años
Puntos: 1
Respuesta: Barra de desplazamiento

Hola subí el código HTML - CSS Y JAVASCRIPT a: http://codepen.io
para que se vea claramente

SE PUEDE VER EN:

http://cdpn.io/BsLfp


Si se necesitan otros datos o archivos por favor avisen. Desde ya muchas

gracias.
  #6 (permalink)  
Antiguo 13/06/2013, 21:31
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Barra de desplazamiento

El Overflow al parecer está en un JavaScript hasta abaaaaajo del html.

No entiendo por qué la gente hace ese tipo de cosas.
  #7 (permalink)  
Antiguo 13/06/2013, 22:24
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 14 años
Puntos: 1
Respuesta: Barra de desplazamiento

Esto que quiere decir? Hay alguna forma de corregir el problema?
La barra vertical funciona bien la que no se ve es la horizontal.
Tengo todos los archivos pero la página no la programé yo me la dieron así para corregirla así que no sabría bien que es lo que se quiso hacer.
Si me pueden ayudar les estaría muy agradecido.
  #8 (permalink)  
Antiguo 13/06/2013, 23:47
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Barra de desplazamiento

Repito:
El Overflow al parecer está en un JavaScript hasta abaaaaajo del html.
Trata quitándolo.
  #9 (permalink)  
Antiguo 14/06/2013, 15:02
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 14 años
Puntos: 1
Respuesta: Barra de desplazamiento

Perdoname pero no logro encontrar el termino overflow en el HTML.

Si lo encuentro en el archivo CSS en varios lugares ej:

1)

#content {
width:620px;
float:left;
padding:30px 20px;
margin:0;
position:relative;
overflow:hidden;

2)

.wp-pagenavi {
padding:30px 0 0;
position:relative;
overflow:hidden;

3)

#page {
width:100%;
position:relative;
overflow:hidden;
background:rgba(0, 0, 0, 0.4);
-pie-background:rgba(0, 0, 0, 0.4);
behavior:url(css/styles/pie.html);

4)

#navigation li li a {
background:none;
display:block;
text-align:left;
width:135px;
height:auto;
padding:5px 20px;
position:relative;
overflow:hidden

y en otros segmentos del código CSS por separado


También en el JAVASCRIPT en dos lugares

1)
ht|marginTop|marginBottom|compatMode|BackCompat|fr ameset|transitional|doctype|publicId|projection|li ne|moz|box|overflow|hidden|padding|mrvxe|bezierCurveTo|lineTo|moveTo| closePath|getAttribute|setAttribute|paddingLeft|pa ddingBottom|beginPath|restore|createLinearGradient ||addColorStop'.split('|'),0,{}))

2)
{clearTimeout(d.data('pause'));clearInterval(d.dat a('interval'));pauseTimeout=setTimeout(function(){ clearTimeout(d.data('pause'));playInterval=setInte rval(function(){animate("next",effect)},g.play);d. data('interval',playInterval)},g.pause);d.data('pa use',pauseTimeout)}else{stop()}}if(total<2){return }if(start<0){start=0}if(start>total){start=total-1}if(g.start){current=start}if(g.randomize){contro l.randomize()}$('.'+g.container,d).css({overflow:'hidden',position:'relative'});control.children() .css({position:'absolute',top:0,left:control.child ren().outerWidth(),zIndex:0,display:'none'});contr ol.css({position:'relative',width:(width*3),height :height,left:-width});$('.'+g.container,d).css({display:'block'} );if(g.autoHeight){control.children().css({height: 'auto'});control.animate({height:control.children( ':eq('+start+')').outerHeight()},g.autoHeightSpeed )}if(g.preload&&control.find('img').length)

Me podrias especificar un poco más donde modificar el overflow por favor? Perdón por mi ignorancia y desde ya muchas gracias.
  #10 (permalink)  
Antiguo 14/06/2013, 15:07
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 14 años
Puntos: 1
Respuesta: Barra de desplazamiento

PUEDEN VER LOS CODIGOS HTML CSS Y JAVASCRIPT ONLINE EN:

http://cdpn.io/BsLfp

HAY QUE HACER CLICK EN EL LINK DE ABAJO A LA IZQUIERDA : "Edit this Pen" PARA VER LOS CODIGOS POR SEPARADO

GRACIAS

Última edición por pabloem1972; 14/06/2013 a las 15:13
  #11 (permalink)  
Antiguo 14/06/2013, 16:39
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Barra de desplazamiento

Paso 1. Respalda tu carpeta de archivos. Si rompes algo te regresas.

Paso 2. Los overflow del css no parece que tengan que ver, pero básicamente bórralos uno por uno y mira que se rompió.

Paso 3. Te comento que el Html NO tiene overflows, sino el JavaScript. Lo mismo, bórralo y averigua que hace, o más bien qué deja de hacer.

Ese overflow del JavaScript al parecer afecta el container, por eso trata de borrar ese pedacito.
  #12 (permalink)  
Antiguo 15/06/2013, 13:43
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 14 años
Puntos: 1
Respuesta: Barra de desplazamiento

Hola que tal intenté en las dos partes donde aparecía "overflow" en el archivo javascript (SCRIT.JS) cambiando HIDDEN por AUTO y hasta borrando el código y sólo se modificaba un pequeño slider no tenía nada que ver con la página principal.

Pero logré revisando el archivo CSS encontrar un fragmento del código que modifica la visualización total del sitio y cambiando ciertos parámetros al menos muestra la barra horizontal aunque no cumple del todo su función.
El fragmento es el siguiente:

#page {
width:100%;
position:relative;
overflow:hidden;
background:rgba(0, 0, 0, 0.4);
-pie-background:rgba(0, 0, 0, 0.4);
behavior:url(css/styles/pie.html);
}

Si en este fragmento del CSS cambio el 100% por 101% aparece la barra horizontal (QUE ES LA QUE A MI ME INTERESA). El tema es que aún apareciendo no se adecua al tamaño de la página, es decir: si amplio mas la página la barra vertical se achica y permite ver siempre el contenido del sitio mientras que la horizontal si bien se ve, se mantiene siempre igual y no permite el desplazamiento a lo ancho por lo cual no deja ver el sitio. Así mismo si achico la ventana del navegador en vez de agrandar la visualización la barra horizontal se mantiene igual es decir no se adecua al cambio sigue grande y no permite desplazar la pagina .
Intenté cambiar "overflow-hidden" por "overflow-auto" y no se produce ningún cambio.

SE PODRA HACER ALGUNA MODIFICACION PARA QUE LA BARRA DESPLAZADORA SE ADAPTE AL TAMAÑO DE PAGINA EN EL CSS ?.
SE RELACIONARA ESTE CODIGO CON ALGUNA PARTE DEL HTML?
Yo busqué en el CSS y en el HTML y no encontré que modificar (aclaro que no se mucho de programación). Ojalá me puedan ayudar. Desde ya muchas gracias
  #13 (permalink)  
Antiguo 15/06/2013, 17:35
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 14 años
Puntos: 1
Respuesta: Barra de desplazamiento

Encontré en el archivo javascript (SCRIPT.JS) un fragmernto de código que muestra el término scroll pero no se si tendrá que ver con el scroll de la ventana del navegador

<1){tip.css({opacity:o})}tip.show();a.call()},func tion(a){this.getTip().hide();a.call()}],fade:[function(a){var b=this.getConf();this.getTip().fadeTo(b.fadeInSpee d,b.opacity,a)},function(a){this.getTip().fadeOut( this.getConf().fadeOutSpeed,a)}]};function getPosition(a,b,c){var d=c.relative?a.position().top:a.offset().top,left= c.relative?a.position().left:a.offset().left,pos=c .position[0];d-=b.outerHeight()-c.offset[0];left+=a.outerWidth()+c.offset[1];if(/iPad/i.test(navigator.userAgent)){d-=$(window).scrollTop()}var e=b.outerHeight()+a.outerHeight();if(pos=='center' ){d+=e/2}if(pos=='bottom'){d+=e}pos=c.position[1];var f=b.outerWidth()+a.outerWidth();if(pos=='center'){ left-=f/2}if(pos=='left'){left-=f}return{top:d,left:left}}function Tooltip(c,d){var f=this,fire=c.add(f),tip,timer=0,pretimer=0,title= c.attr("title"),tipAttr=c.attr("data-tooltip"),effect=g[d.effect],shown,isInput=c.is(":input"),isWidget=isInput&&c. is(":checkbox, :radio, select, :button, :submit"),type=c.attr("type"),evt=d.events[type]||d.events[isInput?(isWidget?'widget':'input'):'def'];if(!effect){throw"Nonexistent effect \""+d.effect+"\"";}evt=evt.split(/,\s*/);if(evt.length!=2){throw"Tooltip: bad events configuration for...

TAMBIEN EN:

(function(g){function j(a){var c=g(window),d=c.width()+c.scrollLeft(),h=c.height()+c.scrollTop();return[a.offset().top<=c.scrollTop(),d<=a.offset().left+a .width(),h<=a.offset().top+a.height(),c.scrollLeft ()>=a.offset().left]}function k(a){for(var c=a.length;c--;)if(a[c])return false;return true}var i=g.tools.tooltip;i.dynamic={conf:{classNames:"top right bottom left"}};g.fn.dynamic=function(a){if(typeof a=="number")a={speed:a};a=g.extend({},i.dynamic.co nf,a);var c=a.classNames.split(/\s/),d;this.each(function(){var h=g(this).tooltip().onBeforeShow(function(e,f){e=t his.getTip();var b=this.getConf();d||(d=[b.position[0],b.position[1],b.offset[0],b.offset[1],g.extend({},b)]);g.extend(b,d[4]);b.position=[d[0],d[1]];b.offset=[d[2],d[3]];e.css({visibility:"hidden",position:"absolute",to p:f.top,left:f.left}).show();f=j(e);if(!k(f)){if(f[2]){g.extend(b,a.top);b.position[0]="top";e.addClass(c[0])}if(f[3]){g.extend(b,a.right);b.position[1]="right";e.addClass(c[1])}if(f[0]){g.extend(b,a.bottom);b.position[0]="bottom";e.addClass(c[2])}if(f[1]){g.extend(b,a.left);b.position[1]="left";e.addClass(c[3])}if(f[0]||f[2])b.offset[0]*=-1;if(f[1]||f[3])b.offset[1]*=-1}e.css({visibility:"visible"}).hide()});h.onBefor eShow(function(){var e=this.getConf();this.getTip();setTimeout(function (){e.position=[d[0],d[1]];e.offset=[d[2],d[3]]},0)});h.onHide(function(){var e=this.getTip();e.removeClass(a.classNames)});ret= h});return a.api?ret:this}})(jQuery);
  #14 (permalink)  
Antiguo 16/06/2013, 06:40
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Barra de desplazamiento

Entonces, busca el contenedor que te interesa, width: 100% y agrega un min-width: 756px; digamos.

El problema entonces es que no importa lo flaca que esté la ventana, siempre medirá 100% de esa flacura.

Al agregar min-width, le dirás, no importa que estés gordita, pero si empiezas a bajar de peso onda anorexia, le paras a 756px (o lo que le pongas.

width y min-width se complementan, no se excluyen. La tercera es max-width.
  #15 (permalink)  
Antiguo 24/06/2013, 14:16
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 14 años
Puntos: 1
Respuesta: Barra de desplazamiento

MUCHAS GRACIAS RAFAEL AGREGUE EL min-width EN EL CSS Y SE SOUCIONO EL TEMA. AHORA CUANDO DISMINUYO EL TAMAÑO DE LA VENTANA O AMPLIO EL TAMAÑO DE VISION DEL SITIO (EJ: A 200%) APARECE LA BARRA DESPLAZADORA HORIZONTAL.

MUCHISIMAS GRACIAS

Etiquetas: bar, barra, scroll
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 10:36.