Foros del Web » Creando para Internet » CSS »

Diseño a fuerza de puro CSS

Estas en el tema de Diseño a fuerza de puro CSS en el foro de CSS en Foros del Web. 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 ...

  #1 (permalink)  
Antiguo 06/11/2004, 02:10
Avatar de Khronos  
Fecha de Ingreso: agosto-2004
Ubicación: Venezuela, PLC
Mensajes: 218
Antigüedad: 13 años, 3 meses
Puntos: 0
Diseño a fuerza de puro CSS

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
__________________
When someone dies in the grip of a powerful rage... A curse is born. The curse gathers in that place of death. Those who encounter it will be consumed by its fury.
  #2 (permalink)  
Antiguo 06/11/2004, 02:25
Avatar de Khronos  
Fecha de Ingreso: agosto-2004
Ubicación: Venezuela, PLC
Mensajes: 218
Antigüedad: 13 años, 3 meses
Puntos: 0
Mmmm... Ya estuve leyendo algo por ahi... Creo que mediante la combinación de capas y estilos CSS... ¿si?
__________________
When someone dies in the grip of a powerful rage... A curse is born. The curse gathers in that place of death. Those who encounter it will be consumed by its fury.
  #3 (permalink)  
Antiguo 06/11/2004, 10:34
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Información Hola Khronos,

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...
__________________
_______
Jorge Rojas.
  #4 (permalink)  
Antiguo 06/11/2004, 19:42
Avatar de Khronos  
Fecha de Ingreso: agosto-2004
Ubicación: Venezuela, PLC
Mensajes: 218
Antigüedad: 13 años, 3 meses
Puntos: 0
De acuerdo

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
__________________
When someone dies in the grip of a powerful rage... A curse is born. The curse gathers in that place of death. Those who encounter it will be consumed by its fury.
  #5 (permalink)  
Antiguo 06/11/2004, 20:11
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola otra vez,

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...
__________________
_______
Jorge Rojas.
  #6 (permalink)  
Antiguo 06/11/2004, 22:28
Avatar de Khronos  
Fecha de Ingreso: agosto-2004
Ubicación: Venezuela, PLC
Mensajes: 218
Antigüedad: 13 años, 3 meses
Puntos: 0
De acuerdo

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
__________________
When someone dies in the grip of a powerful rage... A curse is born. The curse gathers in that place of death. Those who encounter it will be consumed by its fury.
  #7 (permalink)  
Antiguo 07/11/2004, 00:53
n2h
 
Fecha de Ingreso: octubre-2004
Mensajes: 163
Antigüedad: 13 años, 1 mes
Puntos: 0
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...

Última edición por n2h; 07/11/2004 a las 00:55
  #8 (permalink)  
Antiguo 07/11/2004, 06:51
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #9 (permalink)  
Antiguo 08/11/2004, 09:08
 
Fecha de Ingreso: octubre-2003
Ubicación: Madrid
Mensajes: 320
Antigüedad: 14 años, 1 mes
Puntos: 0
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.
  #10 (permalink)  
Antiguo 09/11/2004, 03:03
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #11 (permalink)  
Antiguo 09/11/2004, 11:34
Avatar de don_fransisco  
Fecha de Ingreso: junio-2004
Mensajes: 192
Antigüedad: 13 años, 5 meses
Puntos: 1
disculpen mi ignorancia a que se refieren cuando se refieren de Datos Tabulares

saludos
  #12 (permalink)  
Antiguo 09/11/2004, 13:13
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
datos que deberian de ir en una tabla, como por ejemplo

nombres| caracteristicas
______________________
nombre1| caracteristica1
______________________
nombre2| caracteristica 2
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #13 (permalink)  
Antiguo 11/11/2004, 09:18
 
Fecha de Ingreso: octubre-2003
Ubicación: Madrid
Mensajes: 320
Antigüedad: 14 años, 1 mes
Puntos: 0
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?
  #14 (permalink)  
Antiguo 12/11/2004, 15:56
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
La verdad es que no entiendo mucho tu problema sin poder verlo ,

¿Podrias poner algun ejemplo o duda que tengas con un código?
  #15 (permalink)  
Antiguo 12/11/2004, 16:49
 
Fecha de Ingreso: octubre-2003
Ubicación: Madrid
Mensajes: 320
Antigüedad: 14 años, 1 mes
Puntos: 0
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.
  #16 (permalink)  
Antiguo 12/11/2004, 17:13
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
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
  #17 (permalink)  
Antiguo 13/11/2004, 19:17
 
Fecha de Ingreso: octubre-2003
Ubicación: Madrid
Mensajes: 320
Antigüedad: 14 años, 1 mes
Puntos: 0
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é.
  #18 (permalink)  
Antiguo 13/11/2004, 23:32
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
sí, puedes...

Saludos
  #19 (permalink)  
Antiguo 14/11/2004, 14:21
 
Fecha de Ingreso: agosto-2004
Mensajes: 6
Antigüedad: 13 años, 3 meses
Puntos: 0
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
  #20 (permalink)  
Antiguo 16/11/2004, 14:36
 
Fecha de Ingreso: octubre-2003
Ubicación: Madrid
Mensajes: 320
Antigüedad: 14 años, 1 mes
Puntos: 0
¡Qué interesante, alvaromg! Probaré eso que dices, a ver qué tal.
  #21 (permalink)  
Antiguo 16/11/2004, 19:39
Avatar de Khronos  
Fecha de Ingreso: agosto-2004
Ubicación: Venezuela, PLC
Mensajes: 218
Antigüedad: 13 años, 3 meses
Puntos: 0
De acuerdo

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
__________________
When someone dies in the grip of a powerful rage... A curse is born. The curse gathers in that place of death. Those who encounter it will be consumed by its fury.
  #22 (permalink)  
Antiguo 21/11/2004, 18:32
 
Fecha de Ingreso: abril-2004
Mensajes: 634
Antigüedad: 13 años, 7 meses
Puntos: 2
excelente, a mi tambien me pasaba eso, razon por la cual me cuesta dejar las tablas, pero ya pasare a las capas, al fin...
  #23 (permalink)  
Antiguo 23/11/2004, 13:36
 
Fecha de Ingreso: abril-2004
Mensajes: 634
Antigüedad: 13 años, 7 meses
Puntos: 2
Por favor ayuda en esto, PLEASE

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.-
  #24 (permalink)  
Antiguo 23/11/2004, 13:52
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
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
  #25 (permalink)  
Antiguo 23/11/2004, 14:18
 
Fecha de Ingreso: abril-2004
Mensajes: 634
Antigüedad: 13 años, 7 meses
Puntos: 2
Vere como me funciona

Gracias JesusBet.


A ver si con esto doy ese salto definitivo.


Gracias.
  #26 (permalink)  
Antiguo 23/11/2004, 14:37
 
Fecha de Ingreso: abril-2004
Mensajes: 634
Antigüedad: 13 años, 7 meses
Puntos: 2
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

Última edición por edudw; 23/11/2004 a las 14:38
  #27 (permalink)  
Antiguo 23/11/2004, 17:18
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
pues eso depende de tu CSS... las capas se pueden posicionar donde tu quieras, y no donde ellas :¿

Saludos
  #28 (permalink)  
Antiguo 23/11/2004, 17:51
 
Fecha de Ingreso: abril-2004
Mensajes: 634
Antigüedad: 13 años, 7 meses
Puntos: 2
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
  #29 (permalink)  
Antiguo 23/11/2004, 17:59
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
No son necesarias las tablas, con capas es suficiente... si quieres crea un nuevo tema con tu problema y posteas tu código...

Saludos
  #30 (permalink)  
Antiguo 23/11/2004, 20:35
 
Fecha de Ingreso: abril-2004
Mensajes: 634
Antigüedad: 13 años, 7 meses
Puntos: 2
sorry amigo. una consulta, el codigo (div's) que posteaste mas arriba de cual de tus sitios es? (solo para tener una idea)
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 03:57.