Cambiar tablas por CSS

nachopro · #1 (**permalink**) 06/07/2005, 13:40

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

RoQ · #2 (**permalink**) 06/07/2005, 13:50

Leete esta pagina que Durgeoble puso en otro tema parecido a este, es muy buena

baccxus · #3 (**permalink**) 06/07/2005, 14:19

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!

Durgeoble · #4 (**permalink**) 06/07/2005, 14:25

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

bhagat · #5 (**permalink**) 06/07/2005, 16:47

¿que funcion y que atributos tiene el

Cita:

clear:both;

? que repites en varios id#

me come la curiosidad

nachopro · #6 (**permalink**) 06/07/2005, 17:31

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!

Durgeoble · #7 (**permalink**) 06/07/2005, 22:54

padding: 0;

baccxus · #8 (**permalink**) 07/07/2005, 07:06

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

nachopro · #9 (**permalink**) 08/07/2005, 22:55

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

Durgeoble · #10 (**permalink**) 09/07/2005, 01:25

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

bhagat · #11 (**permalink**) 09/07/2005, 06:00

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.