Foros del Web » Creando para Internet » CSS »

migrar tablas a capas

Estas en el tema de migrar tablas a capas en el foro de CSS en Foros del Web. Tengo una web hecha en con tablas, ahora estoy empezando a meterme en CSS y quisiera pasarla a capas, solo se me ha presentado 1 ...
  #1 (permalink)  
Antiguo 19/11/2005, 09:11
Avatar de tyo100  
Fecha de Ingreso: febrero-2005
Ubicación: Monterrey, NL
Mensajes: 475
Antigüedad: 12 años, 10 meses
Puntos: 1
migrar tablas a capas

Tengo una web hecha en con tablas, ahora estoy empezando a meterme en CSS y quisiera pasarla a capas, solo se me ha presentado 1 problema, hay una parte donde las tablas estan asi



esto va en la parte superior de la pagina y va centrado, he estado moviendole pero no me queda, se ponen una sobre otra o de plano brincan un renglon, haber si alguien me puede dar una ayudadita
__________________
Desde la tierra de los nopales, las tortillas de maiz, y en cuya ciudad se encuenta el cerro de la silla.
NalgAss Web
SpiderMex - La Historia del Hombre Araña en MEXICO
  #2 (permalink)  
Antiguo 19/11/2005, 09:35
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
<div style="width:50%;height:100px;margin:auto;">
<div style="float:left;width:50%;height:100%;background:gray; ">1</div>
<div style="float:right;width:50%;height:40%;background:r ed;">2</div>
<div style="float:left;width:15%;height:60%;background:bl ue;">3</div>
<div style="float:right;width:35%;height:60%;background:aqua; ">4</div>
</div>

  #3 (permalink)  
Antiguo 19/11/2005, 09:53
Avatar de tyo100  
Fecha de Ingreso: febrero-2005
Ubicación: Monterrey, NL
Mensajes: 475
Antigüedad: 12 años, 10 meses
Puntos: 1
muchas gracias :D y pues me varan varias veces por aqui
__________________
Desde la tierra de los nopales, las tortillas de maiz, y en cuya ciudad se encuenta el cerro de la silla.
NalgAss Web
SpiderMex - La Historia del Hombre Araña en MEXICO

Última edición por tyo100; 19/11/2005 a las 10:08
  #4 (permalink)  
Antiguo 19/11/2005, 10:19
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Hola tyo100.

Viendo la respuesta de programeitor, tengo otra opción, porque mejor no pones el código de lo que tienes en ese encabezado para darte mi respuesta, para que no "abuses" de las divisiones, pues el diseño con CSS no se hace igual que con las tablas.

Porque veo que tienes un espacio como para un logotipo y unas divisiones que me parecen enlaces, se podría hacer de otra manera que no use tantas divisiones, pero claro, tendríamos que ver cual es el contenido.

Saludos.
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 19/11/2005 a las 10:59
  #5 (permalink)  
Antiguo 19/11/2005, 11:26
Avatar de tyo100  
Fecha de Ingreso: febrero-2005
Ubicación: Monterrey, NL
Mensajes: 475
Antigüedad: 12 años, 10 meses
Puntos: 1
Todavia no tiene codigo estoy haciendo una plantilla para implementarla con PHP+MySQL+AJAX

Div1 = un logo
Div2 = un menu
Div3 = mostrara imagen aleatoria
Div4 = mostrara iniciar Sesion para usuarios y/o cerrar sesion(segun el caso) tambien le mostrara por ejemplo 1 partidas pendientes

La plantilla la hice en con tablas ahora la pase a divs, en que aspectos se abusa de de las divisiones
__________________
Desde la tierra de los nopales, las tortillas de maiz, y en cuya ciudad se encuenta el cerro de la silla.
NalgAss Web
SpiderMex - La Historia del Hombre Araña en MEXICO
  #6 (permalink)  
Antiguo 19/11/2005, 11:40
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Solo necesitas una división, o sea (esto lo estoy haciendo directamente aquí):
Código HTML:
<div id="header"><!--Corregido gracias a Ramm -->
<img src="tulogotipo.png" alt="tupagina.com"/>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<ul>
<span class="random"><script de imagen aleatoria>...</script></span>
<form .....>....</form></div> 
Esto es a grandes rasgos tu código, ahora el CSS:
Código:
#header {width: 100%;
height: 150px; /*por ejemplo*/
}
#header ul {/*el menu*/
position: relative;
width: 60%;
float: right;
}
#header li {display: inline;
}
#header img {*/el logotipo*/
position: relative;
float: left;
margin: 5px;
}
#header a {
color: black;
text-decoration: none;
}
.random {
}
form {
}...
Esto es a grandes rasgos, solo lo condicionas a tu página.

Saludos,
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 21/11/2005 a las 08:54
  #7 (permalink)  
Antiguo 20/11/2005, 22:58
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
Si se me permite, corregire unos detalles:

Código HTML:
<div id="header"><!--(lo llamas header en el CSS)-->
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<ul>
<span class="random"><script de imagen aleatoria>...</script></span>
<form .....>....</form></div> 
Código:
#header {width: 100%;
height: 150px; /*por ejemplo*/
background-image:url(logo.jpg);
background-repeat:no-repeat;
}
#header ul {/*el menu, los position:relative no son necesarios.*/
width: 60%;
float: right;
}
#header li {display: inline;
}
*/#header img {todo esto lo pongo como comentario, el logo es parte del layout, por lo tanto no debe ir como contenido.
position: relative;
float: left;
margin: 5px;
}*/
#header a {
color: black;
text-decoration: none;
}
.random {
}
form {
}...
De resto debe funcionar bien.
  #8 (permalink)  
Antiguo 21/11/2005, 08:53
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Tienes razón RAMM, en parte

Ya corregí el error más grave que era el nombre del id encabezado por header.

Por otra parte, lo del logotipo depende de cada uno, tu lo usas como layout, yo lo utilizo como contenido y por lo general le pongo un link hacia la página principal, además alguién que tenga desactivado el css podrá verlo, o en caso de no usar las imágenes o usar un lector de pantalla podrá usar el texto alternativo para referenciarse, igual si se imprime la página el logotipo no aparecerá (en donde trabajo es norma que se imprima), puesto que los backgrounds no se imprimen.

Saludos,
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 21/11/2005 a las 09:39
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 17:07.