Foros del Web » Creando para Internet » CSS »

Cambiar tablas por CSS

Estas en el tema de Cambiar tablas por CSS en el foro de CSS en Foros del Web. que interesante esto de sacar las tablas.. ahora bien me podrían explicar como hacer .. por ejempo un sitio de la siguiente manera con CSS ...
  #1 (permalink)  
Antiguo 06/07/2005, 14:40
Avatar de nachopro  
Fecha de Ingreso: noviembre-2003
Ubicación: Haedo, Bs. As.
Mensajes: 290
Antigüedad: 14 años
Puntos: 2
Cambiar tablas por CSS

que interesante esto de sacar las tablas.. ahora bien
me podrían explicar como hacer .. por ejempo un sitio de la siguiente manera con CSS ??



ya que yo lo vengo realizando con tablas y tablas dentro de tablas...
ya estoy un tanto harto de las columnas de más para colorearlas y dar aspecto de recuadro y cosas por el estilo

espero que me puedan guiar o recomendar algún material para leer

gracias
  #2 (permalink)  
Antiguo 06/07/2005, 14:50
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
Leete esta pagina que Durgeoble puso en otro tema parecido a este, es muy buena
  #3 (permalink)  
Antiguo 06/07/2005, 15: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
Tables to CSS Es lo mejor que puedes hacer

Código HTML:
<!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>Documento sin t&iacute;tulo</title>
<style type="text/css">
#encabezado {
	height: 75px;
	background-color:#CCCCCC;
	z-index:1;
	width: 100%;
}
#cuerpo {
	z-index:2;
	position:relative;
	clear:both;
	width: 100%;
}
#menu {
	width: 15%;
	background-color:#FF0000;
	color:#FFFFFF;
	float:left;
}
#contenido {
	float:right;
	width: 85%;
	background-color:#66FFFF;
	margin: 5px;
}
#pie {
	z-index:3;
	clear:both;
	border-top: 1px solid #000;
}
</style>
</head>

<body>
<div id="encabezado">encabezado</div>
<div id="cuerpo">
  <div id="menu">menu</div>
  <div id="contenido">contenido</div>
</div>
<div id="pie">pi&eacute; de p&aacute;gina </div>
</body>
</html> 
Pero no está de más que leas el link que te postearon antes, es muy bueno!
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 11/07/2005 a las 21:54
  #4 (permalink)  
Antiguo 06/07/2005, 15:25
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
Te han pasado un link que yo puse, yo te paso un tandem de links (aparte de los de mi firma XD)
Porqué diseñar con tablas es estúpido: problemas definidos, soluciones ofrecidas
torresburriel.com » Buenas prácticas trabajando con CSS. Una traducción libre de ‘CSS Crib Sheet’ de Dave Shea
Apuntes de CSS: intro
tierra de nómadas - Maquetación CSS
Atributos para capas
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #5 (permalink)  
Antiguo 06/07/2005, 17:47
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 5 meses
Puntos: 7
pregunta para baccxus

¿que funcion y que atributos tiene el
Cita:
clear:both;
? que repites en varios id#

me come la curiosidad
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #6 (permalink)  
Antiguo 06/07/2005, 18:31
Avatar de nachopro  
Fecha de Ingreso: noviembre-2003
Ubicación: Haedo, Bs. As.
Mensajes: 290
Antigüedad: 14 años
Puntos: 2
realmente me pone contento toda la ayuda qe recibí.. muchas gracias...


pero no se librarán de mí.. muejejejejejej
jej

el tema es este, logré hacer una "tabla" con menú resaltado y hermoso
gracias al dreamweaver fui tocando y haciendo cosas..

ahora el tema es este:
yo utilizo #algo {....}
es correcto mezclarlo con declaraciones que afecten tags como body (para fijar colores y la letra por defecto ?

hay cosas que aún me hacen ya que no manejo muy bien esto
es defícil desatarse, en tres días, de 3 años de tablas

un aspecto a refinar.. supongamos que tengo:
Código HTML:
#menu {
	background-color:#999999;
	float:left;
	width: 120px;
	position: relative;
	border-top: 0 none;
	border-right: 5px solid #99CC00;
	border-bottom: 5px solid #99CC00;
	border-left: 5px solid #99CC00;
	height: 250px;
}
#menu ul {
  margin: 0 5 0 5;
  padding: 0 0 20px 0;
  }
#menu ul li {
 margin: 0;
 padding: 0;
 list-style-type: none;
}
#menu ul li a:link, #menu ul li a:visited, #menu ul li a:active {

	font-size: x-small;
	text-decoration: none;
	color: #000000;
	display: block;
	width: 100%;
}
#menu ul li a:hover {

	text-decoration: none;
	background-color: #CCCCCC;
}
  <div id="menu">
  <ul>
    <li><a href="#">&raquo;&raquo; inicio</a></li>
    <li><a href="#">&raquo;&raquo; fotos</a></li>
    <li><a href="#">&raquo;&raquo; mensajes</a></li>
  </ul>
  </div> 
cómo puedo hacer para que el block que se usa en hover no se vea afectado por la sangría de 5px que hay a la iz y del #menu ul ??

bueno, saludos!
  #7 (permalink)  
Antiguo 06/07/2005, 23:54
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
padding: 0;
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #8 (permalink)  
Antiguo 07/07/2005, 08:06
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
Cita:
Iniciado por bhagat
¿que funcion y que atributos tiene el clear:both? que repites en varios id#

me come la curiosidad
El clear:both hace que no se monte una capa sobre otra, por ejemplo hace tiempo hice una página y el pié de página se ponía justo debajo del contenido, que a su vez estaba al lado del menú, pero en algunas páginas el contenido era mas corto que el menú y el menú quedaba encima (montado) del pié de página que quedaba medio escondido.

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #9 (permalink)  
Antiguo 08/07/2005, 23:55
Avatar de nachopro  
Fecha de Ingreso: noviembre-2003
Ubicación: Haedo, Bs. As.
Mensajes: 290
Antigüedad: 14 años
Puntos: 2
ayuda con manejo de conceptos..

hola, realmente es grancioso esto del CSS... intento migrar mi diseño actual de http://nachopro.com.ar a css

pero tengo unas limitaciones.. utilizo UL y LI...
pero tienen un límite =(
es correcto utilizar un DIV dentro de un DIV a o existe otra posibilidad que sea óptima para esto?

muchas gracias
  #10 (permalink)  
Antiguo 09/07/2005, 02:25
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
no llego a entender el problema, efectivamente es correcto, pero si lo que quieres es usar listas (ul) para los menus y demas solo deves añadirle los propiedades adecuadas para que se vea como tu quieres
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #11 (permalink)  
Antiguo 09/07/2005, 07:00
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 5 meses
Puntos: 7
Mira estos ejemplos de listas con CSS

NACHOPRO
mira estos sites:

http://css.maxdesign.com.au/index.htm

http://www.bigbaer.com/css_lists.htm

Creo que te ayudaran mucho a ver las posibilidades de diseño de listas con CSS.
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
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 14:45.