Volver al Foro de Diseño de páginas Web

Desplegarlos texto en DIV

  • andrushok
  • Novice
  • Novice
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 24
  • Status: Offline

Nota Mayo 21st, 2004, 12:51 pm

Hi All,
Tengo el problema follwing en mi página HTML. Me gustaría mostrar un texto bastante oferta en una mesa con altura fija y anchura flexible. Barra de desplazamiento vertical se ha aparecido - no hay problema. Sin embargo yo no quiero mostrar una barra de desplazamiento horizontal. Así que escribí:
Código: [ Select ]
<table ...>
  <tr ...>
   <td height=100 style="padding:0px">
     <div style="height:100px; overflow-y: scroll; overflow-x: none;">
       Some big text ...
     </div>
   </td>
  </tr>
</table>   
  1. <table ...>
  2.   <tr ...>
  3.    <td height=100 style="padding:0px">
  4.      <div style="height:100px; overflow-y: scroll; overflow-x: none;">
  5.        Some big text ...
  6.      </div>
  7.    </td>
  8.   </tr>
  9. </table>   

Está bien para IE en Windows, pero no funciona para IE en Mac. Así que me pasé 3 horas y encontró un truco:
Código: [ Select ]
<table ...>
  <tr ...>
   <td height=100 style="padding:0px">
     <div style="height:100px; overflow: auto; margin-right: -15px">
       <div style="margin-right: 15px; overflow: none">
         Some big text ...
       </div>
     </div>
   </td>
  </tr>
</table>   
  1. <table ...>
  2.   <tr ...>
  3.    <td height=100 style="padding:0px">
  4.      <div style="height:100px; overflow: auto; margin-right: -15px">
  5.        <div style="margin-right: 15px; overflow: none">
  6.          Some big text ...
  7.        </div>
  8.      </div>
  9.    </td>
  10.   </tr>
  11. </table>   

Sin embargo, no funciona en Netscape, Mozilla en Windows, Netscape, Camino y Safari en Mac :evil: . Los estilos "overflow-x" y "overflow-y" no son compatibles con estos navegadores (como Internet Explorer en Mac!) :x . Puedo usar "overflow: auto" sólo para ellos.
Alguien que han solucionado el problema similar?

Ahora estoy estudiando la posibilidad. Me obligaba a Netscape sólo muestran una barra de desplazamiento versical :roll: Sin embargo, mi texto tiene un relleno 15px. Es aceptable, pero no es bueno.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Mayo 21st, 2004, 12:51 pm

  • digitalMedia
  • a.k.a. dM
  • Genius
  • Avatar de Usuario
  • Registrado: Dic 29, 2003
  • Mensajes: 5169
  • Loc: SC-USA
  • Status: Offline

Nota Mayo 21st, 2004, 5:40 pm

andrushok: Bienvenido a Ozzu! Cuando se le citó las secciones de código, por favor, utilice el código brakets. [code] <HTML> [/ code]

Im no seguro de lo que estamos pidiendo aquí. ¿Podría elaborar? Overflow: auto debe ser todo lo que necesita.

?


/ / BTW: Me fijo su puesto original ;)
- dM
  • rtm223
  • Mastermind
  • Mastermind
  • Avatar de Usuario
  • Registrado: Mar 24, 2004
  • Mensajes: 1855
  • Loc: Uk
  • Status: Offline

Nota Mayo 21st, 2004, 11:42 pm

overflow-x-y desbordamiento de navegador y son específicos de estilos.

Si desea <b> sólo </ b> un desplazador vertical, entonces overflow: auto

si quieres tanto horizontal como vertical, overflow: scroll debe hacer el truco:

http://www.w3.org/TR/CSS21/visufx.html#overflow
CSS website design tutorials
  • andrushok
  • Novice
  • Novice
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 24
  • Status: Offline

Nota Mayo 24th, 2004, 6:37 am

Gracias por su respuesta.
Quiero tener sólo una barra de desplazamiento vertical. Lamentablemente "overflow: auto" crea tanto vertical como horizontal, barras de desplazamiento. He encontrado algunas desicion (quiero decir, Netscape, Mozilla en Win y Sarari, Camino, Netscape en Mac):
Código: [ Select ]
<table ...>
  <tr ...>
   <td height=100 style="padding:0px">
     <div style="height:100px; overflow:auto;">
       <div style="margin-right: 15px; overflow: none">
         Some big text ...
       </div>
     </div>
   </td>
  </tr>
</table>  
  1. <table ...>
  2.   <tr ...>
  3.    <td height=100 style="padding:0px">
  4.      <div style="height:100px; overflow:auto;">
  5.        <div style="margin-right: 15px; overflow: none">
  6.          Some big text ...
  7.        </div>
  8.      </div>
  9.    </td>
  10.   </tr>
  11. </table>  

Parece bastante bueno, howevere tengo una plataforma de 15px entre el texto y la barra de desplazamiento vertical. La pregunta es: ¿cómo puedo eliminar esa libreta? En mis ejemplos de código para IE en Win y Mac de IE en que podía llegar a eso. Voy a ser mejor tener el mismo resultado en otros navegadores.

Tal vez sombody tiene otra forma (sin DIVs 2).
  • rtm223
  • Mastermind
  • Mastermind
  • Avatar de Usuario
  • Registrado: Mar 24, 2004
  • Mensajes: 1855
  • Loc: Uk
  • Status: Offline

Nota Mayo 24th, 2004, 6:47 am

y auto de desbordamiento sólo le dará las barras de desplazamiento si los necesita. Supongo que si le está dando una barra de desplazamiento horizontal, entonces debe haber algo allí que es demasiado amplia.
ejemplo - copia y pega esto en un archivo de texto:
Código: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="all" >
    div{margin:auto;width:200px; height:200px;background-color:#CCCCCC;overflow:auto;}
    </style>
</head>

<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rhoncus. Suspendisse potenti. Nam lectus augue, luctus nec, suscipit a, sagittis porta, lacus. Ut felis ipsum, interdum non, pretium et, convallis non, neque. Donec sed risus. Pellentesque lorem nibh, egestas ut, consequat vel, consectetuer et, libero. Vivamus tellus mi, mollis vel, pellentesque hendrerit, tristique in, tellus. In vel odio id augue sodales placerat. Vivamus in neque. Vivamus tempus, libero a ullamcorper sodales, tellus enim ultrices urna, vel rhoncus mi pede vitae felis. Nam consectetuer tincidunt nibh. Sed eget neque at ante fringilla porttitor.
Suspendisse turpis. Suspendisse nec nulla ut lectus elementum malesuada. Fusce ultrices lorem eu velit. Suspendisse quis lacus. Phasellus augue. Nam vel eros. Donec vestibulum neque quis orci. Sed pellentesque dui at sapien. Integer ipsum. Donec porta. Suspendisse in erat vel est cursus lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc in massa vel diam scelerisque pulvinar. Nulla diam lectus, imperdiet aliquam, laoreet sit
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2.   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html>
  4. <head>
  5.     <title>Untitled Document</title>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.     <style type="text/css" media="all" >
  8.     div{margin:auto;width:200px; height:200px;background-color:#CCCCCC;overflow:auto;}
  9.     </style>
  10. </head>
  12. <body>
  13. <div>
  14. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rhoncus. Suspendisse potenti. Nam lectus augue, luctus nec, suscipit a, sagittis porta, lacus. Ut felis ipsum, interdum non, pretium et, convallis non, neque. Donec sed risus. Pellentesque lorem nibh, egestas ut, consequat vel, consectetuer et, libero. Vivamus tellus mi, mollis vel, pellentesque hendrerit, tristique in, tellus. In vel odio id augue sodales placerat. Vivamus in neque. Vivamus tempus, libero a ullamcorper sodales, tellus enim ultrices urna, vel rhoncus mi pede vitae felis. Nam consectetuer tincidunt nibh. Sed eget neque at ante fringilla porttitor.
  15. Suspendisse turpis. Suspendisse nec nulla ut lectus elementum malesuada. Fusce ultrices lorem eu velit. Suspendisse quis lacus. Phasellus augue. Nam vel eros. Donec vestibulum neque quis orci. Sed pellentesque dui at sapien. Integer ipsum. Donec porta. Suspendisse in erat vel est cursus lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc in massa vel diam scelerisque pulvinar. Nulla diam lectus, imperdiet aliquam, laoreet sit
  16. </div>
  17. </body>
  18. </html>


Esto sólo se da una barra de desplazamiento vertical. ¿Cuál es comprobar dentro de la div - ¿Tiene alguna palabra realmente larga o imágenes o cualquier cosa?
CSS website design tutorials
  • andrushok
  • Novice
  • Novice
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 24
  • Status: Offline

Nota Mayo 24th, 2004, 9:41 am

Gracias.
Su muestra funciona bien para cualquier navegador. Unfortunally todo no es tan fácil en este mundo. Pensé que no importa cuál es el texto en la etiqueta DIV. Yo no estaba derecho :x . He texto formateado con <li> dentro de las etiquetas. Como resultado he barra de desplazamiento horizontal en todos los casos de incumplimiento navegadores-IE :evil: . Sin embargo ahora sé la razón de ello. Voy a tratar de formato de mi texto, sin etiquetas <li>.

Muchas gracias.
  • rtm223
  • Mastermind
  • Mastermind
  • Avatar de Usuario
  • Registrado: Mar 24, 2004
  • Mensajes: 1855
  • Loc: Uk
  • Status: Offline

Nota Mayo 24th, 2004, 9:47 am

Espere!

Se puede configurar el ancho de la ul a menos que el ancho del div y, a continuación, el lis que debe heredar el ancho y el texto dentro de la lis debe envolver.

Siempre hay un camino :)
CSS website design tutorials
  • andrushok
  • Novice
  • Novice
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 24
  • Status: Offline

Nota Mayo 24th, 2004, 10:30 am

Lo siento. Que he descrito más arriba que la anchura es flexable. Así que no puedo configurar el ancho. Puede ser ¿es posible establecer "margen derecha" estilo? Voy a comprobar eso.

BWT, por desgracia, su muestra no funciona en IE en Mac. Tengo 2 barras de desplazamiento. ¡Odio IE en Mac :evil: . Así que tengo que aplicar mi truco.

Ahora se aplica el formato de <table>. Se ve bien en cualquier navegador, con exclusión de IE en Mac.

Gracias de nuevo.
  • andrushok
  • Novice
  • Novice
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 24
  • Status: Offline

Nota Mayo 24th, 2004, 10:54 am

Lo comprobé <li> etiqueta. La anchura atributo no se aplica de esta etiqueta. I tryed usando el estilo "margen derecha" - no produjo efecto alguno. La línea de bajo <li> etiqueta fue envuelto en función del valor, pero barra de desplazamiento horizontal apareció. Por lo tanto, conclusión: no es una buena idea usar <li> etiqueta en <DIV> si desea ocultar scrolbar horizontal. Evite que.

Gracias a todos.
  • rtm223
  • Mastermind
  • Mastermind
  • Avatar de Usuario
  • Registrado: Mar 24, 2004
  • Mensajes: 1855
  • Loc: Uk
  • Status: Offline

Nota Mayo 24th, 2004, 11:34 pm

Ah, pero me dice que el elemento ul :wink:
Se puede configurar el ancho de un ul utilizando css. como la lis están contenidas dentro de la UL, que no deberá exceder de sus bordes (bloque nivel elementos). Obras en todos los navegadores he intentado, aunque no tengo acceso a un mac :(
CSS website design tutorials
  • andrushok
  • Novice
  • Novice
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 24
  • Status: Offline

Nota Mayo 25th, 2004, 6:48 am

Muchas gracias. Ahora terminé esta página. Yo solía & #149; <li> immitation para todos y se ve bien en cualquier navegador. Tal vez es posible resolver el problema usando CSS, así lo espero. Por supuesto que es menos feo que mi decisión :( . Pero el tiempo es dinero.

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 11 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 110 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC