Diseño a fuerza de puro CSS

Khronos · #1 (**permalink**) 06/11/2004, 02:10

Hola.

No se si mi pregunta sea un poco ilógica o tonta, pero de todas formas la voy a hacer.

¿Es posible diseñar un site a fuerza de puro CSS y evitar totalmente el uso de tablas?

Saludos

Khronos · #2 (**permalink**) 06/11/2004, 02:25

Mmmm... Ya estuve leyendo algo por ahi... Creo que mediante la combinación de capas y estilos CSS... ¿si?

iconogt · #3 (**permalink**) 06/11/2004, 10:34

Copia este ejemplo y me dices que opinas...

Código:

<html>
<head>
          <title>Capas y css</title>
<style type="text/css">
		<!--  Aplicando estilo a una capa  -->
<!--  
     .capa {
          position: absolute;
          left: 16%;
          top: 1%;
          width: 77%;
          height: 50%;
          background-color: #ffffff;
          border-style: solid;
          border-width: 1px;
          border-color: #000000;
     }

	BODY {
		background-color: #eeeeee;
		font-family: Verdana;
		font-size: 11pt;
		color: Navy;
	}
-->
</style>
     </head>
          <body>
     <div class="capa">Aqui tu contenido...</div>
</body>
</html>

Slds...

Khronos · #4 (**permalink**) 06/11/2004, 19:42

iconogt:

Gracias por tu ejemplo

. Me viene bien visualizarlo. Esto me anima a intentar usar un diseño basado en capas y CSS para aplicarlo a una web.

Claro, lo que veo algo complicado es reproducir mediante esa técnica, el mismo orden y ubicación de elementos que normalmente ocustumbro a hacer mediante el uso de tablas.

Por ejemplo, tendría que pensar como sustituir mediante capas y CSS, una tabla de 600px dividida en 2 filas y catro columnas. En ese punto es donde siento que se complican un tanto las cosas

.

Saludos

iconogt · #5 (**permalink**) 06/11/2004, 20:11

Pues fijate que yo apenas he empezado a usar las capas, ya que al igual que tú y que muchos, yo siempre usaba tablas, y aunque las tablas si son muy útiles, ahora que más o menos he aprendido a usar las capas, me doy cuenta que son bastante manejables y puedes hacer cosas bastante buenas con ellas, y cuando usas CSS obtienes resultados bastante buenos..

Pero bueno... que bien que te haya podido ayudar a que tengas una nueva idea de como trabajar tus diseños, y ya sabes... cuando quieras!!!

Slds...

Khronos · #6 (**permalink**) 06/11/2004, 22:28

Gracias por tu buena dispisición y colaboración.

Pronto me pondré a trabajar y hacer pruebas, así que cuando tenga algo, dejaré algun post para ver las críticas o sugerencias que tú o algun otro miembro del foro quieran aportar.

Saludos

n2h · #7 (**permalink**) 07/11/2004, 00:53

Bienvenido al mundo del tableless!!

Ojo, las tablas son extremadamente utiles a la hora de presentar informacion tabulada, como matrices. Pero para maquetar un sitio, es mucho mas prolijo y economico (en lineas de codigo, tiempo y mantenimiento) el uso de DIVs.

Ten en cuenta que la regla prima que rige todo este movimiento es el de separar lo mas posible al contenido del sitio (HTML) de su diseño (CSS).

Luego de hacer una o dos webs sencillas de esta manera, te olvidaras por completo del uso de tablas para maquetar tus sites!

Exitos, Diego.

PD: Hay que evitar caer en el minimalismo que esto conlleva...

kahlito · #8 (**permalink**) 07/11/2004, 06:51

Estoy de acuerdo con los comentarios, yo hace tiempo que intento no poder tablas en mis diseños, creo que hace mucho que no utilizo una

casi siempre uso los divs y capas, aunque tambien es bueno usar las tablas para datos tabulares como cita n2h

Saludosss

Daphne · #9 (**permalink**) 08/11/2004, 09:08

A mí las capas se me descuadran cuando paso de un navegador a otro, porque no tienen el origen de coordenadas fijado en el mismo sitio. Si alguien me dijera cómo resuelve este problema, se lo agradecería muchísimo.

kahlito · #10 (**permalink**) 09/11/2004, 03:03

Pon un ejemplo de tu problema y así te podremos ayudar

Si no mira estos manuales por ejemplo:

Posicionamiento de capas

Maquetación CSS

Saludosss

don_fransisco · #11 (**permalink**) 09/11/2004, 11:34

disculpen mi ignorancia a que se refieren cuando se refieren de Datos Tabulares

saludos

kemie · #12 (**permalink**) 09/11/2004, 13:13

datos que deberian de ir en una tabla, como por ejemplo

nombres| caracteristicas
______________________
nombre1| caracteristica1
______________________
nombre2| caracteristica 2

Daphne · #13 (**permalink**) 11/11/2004, 09:18

Kahlito, mi problema es sencillo: para unas coordenadas dadas, Mozilla y Explorer interpretan puntos distintos debido a que, como he dicho, los orígenes de coordenadas están desplazados (no se ponen de acuerdo ni en eso, hay que fastidiarse). ¿Cómo resolvéis eso vosotros?

kahlito · #14 (**permalink**) 12/11/2004, 15:56

La verdad es que no entiendo mucho tu problema sin poder verlo

,

¿Podrias poner algun ejemplo o duda que tengas con un código?

Daphne · #15 (**permalink**) 12/11/2004, 16:49

Ahora mismo no estoy con eso. Pero en cuanto haga algo, volveré aquí para poner enlace. Sigo creyendo que mi explicación es suficiente: si los orígenes de coordenadas no se toman en el mismo punto en todos los navegadores, en el momento en que uses capas te van a salir mal (desplazadas sin quererlo) en uno u otro navegador. Es decir, que no se puede hacer encajar para los dos a la vez. Bueno, sí que debe de poderse, pero yo no sé cómo se hace y ésa es mi duda.

En cualquier caso, gracias por tu interés y a ver si me paso por aquí cuando tenga un código que poder enseñaros.

jesusbet · #16 (**permalink**) 12/11/2004, 17:13

pues podrías abrir tu página en un popup sin barras, sino el puro título (aunque a algunos nos es muy molesto); yo mis capas las tengo hechas en porcentajes, y no tengo problema en eso.

Saludos

Daphne · #17 (**permalink**) 13/11/2004, 19:17

A mí también me es muy molesto, y creo que a la mayor parte de la gente también le resulta odioso, así que creo que no es la mejor solución.

Porcentajes no sirven, que yo sepa, porque me refiero a la posición de las capas, no a su tamaño. ¿Se puede expresar la posición en porcentajes? Es que no lo sé.

jesusbet · #18 (**permalink**) 13/11/2004, 23:32

sí, puedes...

Saludos

alvaromg · #19 (**permalink**) 14/11/2004, 14:21

Daphne, quizás el problema que estás mencionando tenga que ver con el espacio "por defecto" que da cada navegador a las páginas. Si se declara en el CSS:

body { width : 100% ; margin : 0 ; padding : 0 ; border : 0 }

te aseguras que todos los navegadores empiecen a calcular las posiciones (y anchos, etc.) desde la misma posición, 0x-0y.

Yo he estado 4 años aprox. haciendo páginas sin tablas, y en realidad no me había topado con ese problema que mencionas. Otros problemas, a camionadas, pero ese específico nunca... cuando tengas algo de código, creo que hay varios que nos encantaría echarle una ojeada :) Saludos,

Alvaro Medina

Daphne · #20 (**permalink**) 16/11/2004, 14:36

¡Qué interesante, alvaromg! Probaré eso que dices, a ver qué tal.

Khronos · #21 (**permalink**) 16/11/2004, 19:39

Cita:

Iniciado por alvaromg

Daphne, quizás el problema que estás mencionando tenga que ver con el espacio "por defecto" que da cada navegador a las páginas. Si se declara en el CSS:

body { width : 100% ; margin : 0 ; padding : 0 ; border : 0 }

te aseguras que todos los navegadores empiecen a calcular las posiciones (y anchos, etc.) desde la misma posición, 0x-0y.

Yo he estado 4 años aprox. haciendo páginas sin tablas, y en realidad no me había topado con ese problema que mencionas. Otros problemas, a camionadas, pero ese específico nunca... cuando tengas algo de código, creo que hay varios que nos encantaría echarle una ojeada :) Saludos,

Alvaro Medina

De las cosas que se entera uno sin esperar ... Desde hace tiempo tenía problemas en Opera, pues se me descuadraban las páginas y con esa respuesta solucioné el problema

edudw · #22 (**permalink**) 21/11/2004, 18:32

excelente, a mi tambien me pasaba eso, razon por la cual me cuesta dejar las tablas, pero ya pasare a las capas, al fin...

edudw · #23 (**permalink**) 23/11/2004, 13:36

Hola, he seguido el hilo de este tema y me ha servido mucho, comence con las capas, pero mi problema esta cuando esta capa forma parte de un include en un archivo .php, o sea, si el menu va ala derecha, o el pied de pagina es otro include, todos se muestran en la esquina superior izquierda, se entiende?

Desde ya gracias.-

jesusbet · #24 (**permalink**) 23/11/2004, 13:52

mira.. lo que yo hago es esto:

Código PHP:

 
<div id="cabecera">

<? include('cabecera.php'); ?>

</div>

 
<div id="menu">

<? include('menu.html'); ?>

</div>

 
<div id="contenido">

<? include('contenido_indice.php'); ?>

</div>

 
<div id="pie">

<? include('pie.html'); ?>

</div>

Así es mi index.php, no sé si te sirva.

Saludos

edudw · #25 (**permalink**) 23/11/2004, 14:18

Gracias JesusBet.

A ver si con esto doy ese salto definitivo.

Gracias.

edudw · #26 (**permalink**) 23/11/2004, 14:37

probe, pero mi menu va a la derecha, y aunque lo coloque a la izquierda (lo probe) el contenido no aparece a un costado sino abajo.

O sea seria algo asi

++header++
++menu++
++contenido++
++pie de pagina++

y no
++header++
++menu++contenido++
++pie de pagina++

es asi como yo lo quiero

...que rabia

jesusbet · #27 (**permalink**) 23/11/2004, 17:18

pues eso depende de tu CSS... las capas se pueden posicionar donde tu quieras, y no donde ellas :¿

Saludos

edudw · #28 (**permalink**) 23/11/2004, 17:51

no me sale, en todo caso probe este otro codigo y tampoco puedo lograr que todo se cuadre bien.

<html>
<head><title>Prueba de sitio</title></head>
<body>
<? include('includes/header.php'); ?>
<table>
<tr>
<td width="120"><? include('includes/menu.php'); ?></td>
<td>Contenido sitio</td>
</tr>
<? include('includes/footer.php'); ?>
</table>
</body>
</html>

el bendito menu debe aparecer a la derecha y baho el header, aparece a al izquierda y fuera de todo

jesusbet · #29 (**permalink**) 23/11/2004, 17:59

No son necesarias las tablas, con capas es suficiente... si quieres crea un nuevo tema con tu problema y posteas tu código...

Saludos

edudw · #30 (**permalink**) 23/11/2004, 20:35

sorry amigo. una consulta, el codigo (div's) que posteaste mas arriba de cual de tus sitios es? (solo para tener una idea)