Foros del Web » Creando para Internet » CSS »

Celda con tamaño fijo y scroll horizontal

Estas en el tema de Celda con tamaño fijo y scroll horizontal en el foro de CSS en Foros del Web. Hola a todos, estoy creando una tabla que quiero que se vea de esta forma: Pero resulta, que al insertar una algo que sobrepase el ...
  #1 (permalink)  
Antiguo 14/01/2009, 11:51
Avatar de nixolax  
Fecha de Ingreso: enero-2008
Ubicación: Villa María, Pcia de Córdoba
Mensajes: 45
Antigüedad: 9 años, 10 meses
Puntos: 0
Celda con tamaño fijo y scroll horizontal

Hola a todos, estoy creando una tabla que quiero que se vea de esta forma:



Pero resulta, que al insertar una algo que sobrepase el ancho (445px), la celda del contenido se estira y deforma la tabla. Por eso, quiero colocar una barra scroll solo horizontal (la roja) que permita ver todo el contenido.
Alguien sabe qué debo quitar o qué debo agregar?

aquí el código:

Cita:
<td style="vertical-align: top; width: 445px; heigth: 700px; padding-left: 10px; padding-right: 10px; border: 0px; font-size:12px;">
CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO CONTENIDO <br /><img src="http://i48.servimg.com/u/f48/12/48/54/57/tutori37.jpg"></td>
<td style="vertical-align: top;"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="background-image: url(http://nixoweb.at.ua/design-01/titulo-box.png); background-repeat: no-repeat; width: 225px; height: 42px;vertical-align: top; padding-top: 10px; padding-left: 20px; font-weight: bold; color: #FFFFFF;">TITULO DE BOX</td>
</tr>
<tr>
<td style="width: 225px; vertical-align: top; padding-top: 6px; padding-left: 10px; font-size: 11px;">CONTENIDO BOX<br /><br /><br /><br /><br /><br /><br /><br /><br /></td>
</tr>
</table><br /><table border="0">
<tr>
<td style="background-image: url(http://nixoweb.at.ua/design-01/titulo-box.png); background-repeat: no-repeat; width: 225px; height: 42px;vertical-align: top; padding-top: 10px; padding-left: 20px; font-weight: bold; color: #FFFFFF;">TITULO DE BOX</td>
</tr>
<tr>
<td style="width: 225px; vertical-align: top; padding-top: 6px; padding-left: 10px; font-size: 11px;">CONTENIDO BOX<br /><br /><br /><br /><br /><br /><br /><br /><br /></td>
</tr>
</table>
</td>
</tr>
</table>
  #2 (permalink)  
Antiguo 14/01/2009, 16:03
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Celda con tamaño fijo y scroll horizontal

Hola:

Prueba con la propiedad overflow.

Código:
overflow: auto;
Saludos.

  #3 (permalink)  
Antiguo 14/01/2009, 16:50
Avatar de nixolax  
Fecha de Ingreso: enero-2008
Ubicación: Villa María, Pcia de Córdoba
Mensajes: 45
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Celda con tamaño fijo y scroll horizontal

Eso debo colocar en la celda del contenido verdad? Pues no funciona.
  #4 (permalink)  
Antiguo 15/01/2009, 10:44
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Celda con tamaño fijo y scroll horizontal

no, coloca un div dentro del td y dale la propiedad que dice joramuro

<div style="overflow:auto"></div>

prueba con eso
__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 15/01/2009, 11:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Celda con tamaño fijo y scroll horizontal

Hazlo bien desde el principio.
Si estamos en un foro de CSS, monta tu página con se debe.

Deja las tablas y el incorporar los estilos en el html.
(aunque ahora que recuerdo, creo que ese consejo ya te fue dado)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 15/01/2009, 17:47
Avatar de nixolax  
Fecha de Ingreso: enero-2008
Ubicación: Villa María, Pcia de Córdoba
Mensajes: 45
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Celda con tamaño fijo y scroll horizontal

Cita:
Iniciado por kseso? Ver Mensaje
Hazlo bien desde el principio.
Si estamos en un foro de CSS, monta tu página con se debe.

Deja las tablas y el incorporar los estilos en el html.
(aunque ahora que recuerdo, creo que ese consejo ya te fue dado)
Ya me habían dado la sugerencia, gracias pero no lo haré.

Igual, acaso la modificación o error que estoy cometiendo y las propiedades que me están dando, no son css?



willyfc ahora pruebo lo tuyo, gracias
Edito: no funciona u.u gracias igual.
  #7 (permalink)  
Antiguo 15/01/2009, 18:12
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Celda con tamaño fijo y scroll horizontal

Sí, son propiedades css. Pero estás haciendo un uso totalmente contrario a la naturaleza y a la razón de ser de las "hojas de estilo en cascada". Usas la propiedades para dejar sin "razón de ser" la existencia del css.

Quizás te interese investigar la propiedad white-space para aplicar junto a overflow
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 15/01/2009, 18:56
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Celda con tamaño fijo y scroll horizontal

nicolax, el mejor consejo es el que te da kseso?, pero si tienes, por el motivo que sea, una necesidad imperiosa de usar esa tabla y quieres un scroll horizontal en una celda, utiliza este código, adaptándolo a tus necesidades:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Título</title>
<style type="text/css">
#celda {
	width: 180px;
	height: 130px;
	border: 1px solid #C0C0C0;
}
#capa-a {
	width: 180px;
	height: 130px;
	overflow: hidden;
	overflow-x: scroll;
}
</style>
</head>

<body>
<table>
	<tr>
		<td id="celda">
		<div id="capa-a">
			<img border="0" src="http://www.google.es/intl/en_com/images/logo_plain.png" width="276" height="110">
		</div>
		</td>
	</tr>
</table>
</body>

</html> 
Saludos
  #9 (permalink)  
Antiguo 16/01/2009, 13:29
Avatar de nixolax  
Fecha de Ingreso: enero-2008
Ubicación: Villa María, Pcia de Córdoba
Mensajes: 45
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Celda con tamaño fijo y scroll horizontal

Gracias a ambos, probaré ssclamp en seguida.
kseso? Entonces tu quieres que use la forma correcta? digamos. Así?

<td id="Capa-a"

y en el css

#capa-a {aqui las propiedades}

Así? Intentaré como dice ssclamp. Disculpen si demoro. gracias
  #10 (permalink)  
Antiguo 17/01/2009, 11:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Celda con tamaño fijo y scroll horizontal

Creo que te convendría leerte estos dos "compendios" de Mikmoro antes de seguir con tu proyecto.

Aporte: pequeña guía de migración a XHTML+CSS


Aporte: Guía de Migración a XHTML+CSS - Parte II

Que por cierto, están encabezando este foro de css.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 20/01/2009, 09:11
Avatar de nixolax  
Fecha de Ingreso: enero-2008
Ubicación: Villa María, Pcia de Córdoba
Mensajes: 45
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Celda con tamaño fijo y scroll horizontal

kseso? muchas gracias por las guias, los vi en el cabezal pero como tengo un poco de conocimientos, realmente no vi necesidad de leerlos aunque que los leo ahora, aumente un poco más mis conocimientos en css. Y te digo, yo se un poco, esta web la hice con css www.guitarrocker.es.tl :) pero solo creo que es bueno hacer algo nuevo y diferente y pense eso..

Disculpen los inconvenientes causados si alguna vez se molestaron en responderme.

ssclamp probé lo que me dijiste y funcionó..

Gracias a ambos por solucionar mi problema. Ya no hablo mas XD Saludos amigos!!!
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 23:54.