Celda con tamaño fijo y scroll horizontal

nixolax · #1 (**permalink**) 14/01/2009, 11:51

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>

jomaruro · #2 (**permalink**) 14/01/2009, 16:03

Hola:

Prueba con la propiedad overflow.

Código:

overflow: auto;

Saludos.

nixolax · #3 (**permalink**) 14/01/2009, 16:50

Eso debo colocar en la celda del contenido verdad? Pues no funciona.

willyfc · #4 (**permalink**) 15/01/2009, 10:44

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

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

prueba con eso

kseso? · #5 (**permalink**) 15/01/2009, 11:00

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)

nixolax · #6 (**permalink**) 15/01/2009, 17:47

Cita:

Iniciado por kseso?

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.

kseso? · #7 (**permalink**) 15/01/2009, 18:12

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

ssclamp · #8 (**permalink**) 15/01/2009, 18:56

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

nixolax · #9 (**permalink**) 16/01/2009, 13:29

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

kseso? · #10 (**permalink**) 17/01/2009, 11:47

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.

nixolax · #11 (**permalink**) 20/01/2009, 09:11

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!!!