Foros del Web » Creando para Internet » HTML »

hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

Estas en el tema de hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P en el foro de HTML en Foros del Web. hola tengo dos columnas en una tabla, ¿como puedo hacer para que la columna 1 tenga exactamente 50 pixeles de ancho y la columna 2 ...
  #1 (permalink)  
Antiguo 12/11/2008, 17:44
Avatar de cuper90  
Fecha de Ingreso: septiembre-2006
Mensajes: 29
Antigüedad: 11 años, 2 meses
Puntos: 1
Sonrisa hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

hola tengo dos columnas en una tabla, ¿como puedo hacer para que la columna 1 tenga exactamente 50 pixeles de ancho y la columna 2 ocupe el resto del ancho de la pantalla??

hice este codigo pero no me funcionó

Código:
<table align="center" border="1" height=60 width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td width="50" height="60" valign="top">columna1</td>
		<td width="100%" height="60" valign="top">columna2</td>
	</tr>
</table>
  #2 (permalink)  
Antiguo 12/11/2008, 17:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

Pues tan sencillo como poner 100% a la tabla, 50px a la primera celda y nada a la segunda:

Cita:
<table align="center" border="1" height=60 width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="60" valign="top">columna1</td>
<td height="60" valign="top">columna2</td>
</tr>
</table>
¿No te funciona así?

Si no funciona revisa tu doctype.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 13/11/2008, 01:39
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

Mikel, como se hace esto mismo con capas y css...
He mirado varios ejemplos adaptables de tu web pero no entiendo bien algunas cosas...por eso te lo comento para que pongas lo más sencillo y el porqué de algunas cosas...

Si quieres abro otro tema...

Aresillo!!
  #4 (permalink)  
Antiguo 13/11/2008, 04:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

Hola Aresillo:
Igual.
Al primer div le fijas la anchura en px, lo flotas (opcional) y al segundo, al no marcarle anchura ocupará de todo el espacio que tenga libre, lo que necesite. Y al no darle una posición definida por css, se colocará adyacente (si es display: inline) al anterior, segú aparece en el html.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 13/11/2008, 05:03
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

He estado intentándolo esta mañana pero no conseguía que el height fuera igual en los dos... no queda como si fuera una tabla...
He estado probando y... o estoy atontao...que es posible porque no sé porque tengo problemas en esta tontería! o no sé...
Pongo código:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>Qué no me sale</title>
<
style>
* {
margin0padding0;}
#izda{
background-color#EBF2FE;
width:200px;
}
#dcha{
background-color #ccc;
}
</
style>
</
head>
<
body>
<
div id="izda">
    <
ul>
        <
li>Portada</li>
        <
li>Invierno</li>
        <
li>Diciembre a marzo</li>
        <
li>La chimenea</li>
        <
li>Deportes de invierno</li>
        <
li>Contacto</li>
    </
ul>
        </
div
<
div id="dcha">
    <
h1>Título de la página</h1>
<
p>LLorem
ipsum dolor sit amet
consectetuer adipiscing elitNulla condimentum
commodo orci
Nulla eget purus nec massa cursus ullamcorperDonec quis
justo
Pellentesque fermentumEtiam pharetraipsum eget faucibus
malesuada
ante elit tristique nibhut commodo sem dolor aliquam ante.
Aliquam ut leo rhoncus arcu dictum sodalesMorbi viverradui vel
mollis iaculis
urna libero tincidunt leonec interdum ligula lacus
congue lacus
Nam porttitornibh quis scelerisque lobortisneque diam
consectetuer magna
sit amet mattis diam quam vitae eratDonec wisi
tortor
lacinia etblandit necsemper necurnaAliquam erat
volutpat
.</p>
            <
pAliquam erat volutpatSed ac augue non
libero commodo lacinia
Morbi molestie augue at felisMauris ornare,
est ac imperdiet vehiculatortor dui sagittis lacussed tempor lorem
tellus ut turpis
Donec dui estrhoncus sit ametbibendum sedrutrum
sit amet
ligulaSuspendisse ac sapien ac mi posuere rutrumVivamus
sollicitudin
mi eu vehicula convallissem magna blandit purusid
pellentesque augue dui vitae urna
Nam imperdietCurabitur libero.
Suspendisse sodales sem in nuncProin diam auguenonummy nonposuere
in
lacinia egetpedePellentesque felis semcursus mattiscommodo
et
condimentum egestasquamMorbi laciniaPraesent pulvinar elit
vitae arcu
Integer sagittis metus ut justoEtiam pharetra adipiscing
nunc
. </p>
            <
pEtiam sodales nulla non nequeDuis
porttitor faucibus leo
Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas
Mauris ipsum nunc,
sodales necfaucibus quiseuismod atarcuPhasellus id odioAenean
nibh mauris
venenatis egetcommodo idgravida utarcuPellentesque
dui metus
nonummy sit ametaliquet sedpretium sit ametdiamSed
dapibus rhoncus sem
Integer blandit elit at maurisPraesent vel nunc
a massa lacinia pharetra
Etiam nibh arcurhoncus aultrices et,
feugiat inipsumPhasellus suscipit tincidunt urna. </p>

</
div

</
body>
</
html

Lo he flotado y tampoco...
  #6 (permalink)  
Antiguo 13/11/2008, 05:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

La explicación que te da kseso? es correcta.

Si quieres que la segunda caja quede a la derecha de la primera y ocupe todo el ancho debes añadir float-left a la primera y un margen izquierdo a la segunda:

Cita:
* {margin: 0; padding: 0;}
#izda{
background-color: #EBF2FE;
width:200px;
float:left;
}
#dcha{
background-color : #ccc;
margin-left: 200px;
}
Ahora, si lo que quieres es que la primera crezca tanto como la segunda, eso ya es otro tema, de cómo hacer columnas equlibradas. Hay varias maneras. Esta es sólo una de ellas.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 13/11/2008, 05:56
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

Vale! Gracias a los dos...
Hasta lo que decías Mikmoro había llegado, y había visto justo el ejemplo que me das... pero no lo entendía muy bien...
Si veo que no lo entiendo, abro un tema para explicar el ejemplo...

Gracias!

Aresillo!!
  #8 (permalink)  
Antiguo 13/11/2008, 06:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

De acuerdo.
El asunto básicamente es que una columna no tendría por qué crecer porque crezca la otra, y en CSS hay que hacer alguna filigrana para conseguir eso.

Ya comentarás.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 13/11/2008, 07:32
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

Ya está!
No lo he sacao pero medio buceando por ahí y borrando...dejándolo limpito el diseño líquido dos columnas autoajustables queda así...(haata que venga mik)
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Diseño líquido dos columnas autoajustable</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#container{
width: 100%;
background-color: #9cf;
}
#leftnav{
float: left;
width: 200px;
}
#content{
margin-left: 200px;
background: #cce;
}
</style>
</head>

<body>
<div id="container">
<div id="leftnav">
	<ul>
		<li>Home</li>
		<li>Noticias</li>
		<li>Datos de interés</li>
		<li>Links</li>
		<li>Contacto</li>
	</ul>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</body>
</html> 
Aresillo!!
  #10 (permalink)  
Antiguo 13/11/2008, 07:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

Correcto. Esta es una de las opciones, que funciona en caso de que crezca la columna derecha únicamente, no si lo hace la izquierda, que suele ser una de las principales batallas.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 13/11/2008, 14:38
Avatar de cuper90  
Fecha de Ingreso: septiembre-2006
Mensajes: 29
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

Cita:
Iniciado por Mikmoro Ver Mensaje
Pues tan sencillo como poner 100% a la tabla, 50px a la primera celda y nada a la segunda:



¿No te funciona así?

Si no funciona revisa tu doctype.
aah estaba casi seguro de que habia intentado eso antes
pero al parecer no, por que ahora lo hice y si me funcionó
gracias
  #12 (permalink)  
Antiguo 13/11/2008, 17:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: hacer que una columna de una tabla ocupe el 100% de ancho menos 50 :P

De nada, es un placer.

Muchas veces uno cree haberlo probado todo... menos lo correcto

Saludos.
__________________
Visita mi nueva web idplus.org
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 21:22.