Re: [Ovillo] Saludos! - Algunas dudas iniciales
Hola Manuel. Lamento tardar tanto en responderte, pero por desgracia no siempre dispongo de todo el tiempo que me gustaría para seguir la lista. On 3/31/06, webmaster [EMAIL PROTECTED] wrote: Hola, ... punto también me acuso un poco de que aunque me e dedicado a leer artículos, tutoriales y libros de CSS, no e leido la especificación de la w3c directamente. La verdad es que el formato original, de la web del w3c, no es muy agradable para la lectura. De todas formas, y aquí ya hablo de memoria, hay tutoriales por la red que inician en el uso de las CSS o que tratan, con más o menos profundidad, temas específicos; y que seguro son mucho más afables que los originales del w3c. Así a bote pronto te podría recomendar que buscaras alguno que te explicara claramente el modelo de cajas (box model), otro que tratara sobre los distintos tipo de elementos contenedores (block, inline,...) y alguno que profundizara en el layout de los elementos según su 'position' (perdón por el palabro, pero creo que así se me entiende mejor), para saber como se comporta un elemento al estar flotado, o en posición relativa, o absoluta,... y como se comportan __los de alrededor__ Sí me permites quisiera aquí hacerte una pregunta más puntual, se que si utilizo Float: left, el objeto se movera a la izquierda, y si utilizo Float: right, el elemento se movera (lo correcto es flotara no? ) a la derecha, entonces lo ultimo que me queda preguntar es cómo defino el centro? (Lo que se me a ocurrido hasta ahora, es que le coloco margenes iguales a la izquierda y derecha y eso de una u otra manera centra los objetos, sin embargo, no se cómo funcionara esto con el Float). No existe un modo que nos permita 'flotar' un elemento en el centro de la pantalla. Para el resto de elementos, si queremos centrar un __contenedor__ (tipo bloque) podremos: 1º) especificarle una anchura (recordemos que sino, su comportamiento natural es tomar el 100% del ancho que le permita su contenedor padre [y sus márgenes]); y 2º) asignarle unos márgenes laterales automáticos. También podremos optar por asignarle unos márgenes laterales y entonces la anchura se ajustará automáticamente al espacio disponible, tal y como vienes haciendo. Si lo que queremos es centrar el __contenido__ de un contenedor, basta con aplicarle la propiedad 'text-align: center' al contenedor. Esto me suena un poco raro, normalmente cuando yo hago una página defino una tabla contenedora principal, la cual le doy los atributos de tener el 100% del ancho de la pantalla y luego el 100% del alto, eso me permite tener el centro exacto de la página y de ahí en adelante me voy. ¿Crees que estoy cometiendo una mala práctica (bueno sin contar que diseño con tablas :) )? Debe ser enormemente complicado idear una maquetación para menos de 600 píxeles de altura, o incluso 768 píxeles. Por supuesto puedes optar por la ya muy manida disposición de 'cabecera pegada arriba' -- 'columnas ocupando todo el centro' -- 'pie siempre visible abajo', pero verás con el tiempo (o al menos yo así lo he percibido) que los truquillos que tienes que tener activos para mantener esa maquetación te van a complicar, e incluso limitar la creatividad y originalidad en el resto de la página. A mi me gusta más pensar que la maquetación en vertical me da toda la libertad del mundo, y que de esta manera, por ejemplo, no dependo tanto de resoluciones cliente (ya bastante tengo con cuidarme de la resolución horizontal), y así puedo jugar con más contenido sin que se me pierda el preciadísimo espacio en blanco que tanto le gusta a la gente al visitar páginas... ;) No intentes hacer cosas demasiado complicadas al principio, te llegarás a desesperar y con el tiempo verás que lo que tuviste que hacer para llegar a esa maquetación es digno de frenopático. Esto es un poco Off Topic: Frenopático? Ja, ja, ja. Sí, en ese momento no se me ocurría mejor palabra. Me refiero básicamente al hecho de que, cuando lleves bastante tiempo en esto y eches la mirada a alguna de tus hojas de estilo anteriores, con esa maquetación que tanto te costó alcanzar (por que la complicaste demasiado sin necesidad), verás que comprender que rumbo tomaste para llegar a cierto resultado es básicamente para volverse loco. xD Ya por ultimo, muchas gracias por los tips, se te agradecen bastante, le dare otra lectura despacio otra vez hoy. Quizas me anime cuando me averguenze un poco menos a mostrar lo que estoy tratando de diseñar, Saludos a todos, Manuel ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo Muchas de nada. Espero sinceramente que te sean de utilidad. Un saludo, David Merino Ogando. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a
Re: [Ovillo] Saludos! - Algunas dudas iniciales
webmaster escribió:
Sí me permites quisiera aquí hacerte una pregunta más puntual, se que
si utilizo Float: left, el objeto se movera a la izquierda, y si
utilizo Float: right, el elemento se movera (lo correcto es flotara
no? ) a la derecha, entonces lo ultimo que me queda preguntar es cómo
defino el centro? (Lo que se me a ocurrido hasta ahora, es que le
coloco margenes iguales a la izquierda y derecha y eso de una u otra
manera centra los objetos, sin embargo, no se cómo funcionara esto con
el Float).
La idea es colocar los 3 elementos con float: left; así se irán poniendo
uno al lado del otro.
Para el alto se definen las mismas pautas pero, evidentemente, la repercusión es
mínima, pues casi nunca tendremos la necesidad de ajustar una maquetación en
vertical.
Esto me suena un poco raro, normalmente cuando yo hago una página defino una tabla contenedora principal, la cual le doy los atributos de tener el 100% del ancho de la pantalla y luego el 100% del alto, eso me permite tener el centro exacto de la página y de ahí en adelante me voy. ¿Crees que estoy cometiendo una mala práctica (bueno sin contar que diseño con tablas :) )?
Para centrar horizontalmente se utilizan los margenes (excepto en explorer)
En el css:
p {width: 5em; margin: auto;}
Y en el html
pHola/p
Para IExplorer lo que hay que hacer es al contenedor del p el añadirle
un text-align: center;
--
Saludos -=stripTM=-
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Saludos! - Algunas dudas iniciales
Que gran texto Naigt, solo mencionar que he tenido que reenviar ese email, a unos amiguetes que estan empezando, por que me ha parecido muy bueno. Un saludo El día 31/03/06, Maikel Naigt [EMAIL PROTECTED] escribió: Hola Manuel. On 3/31/06, webmaster [EMAIL PROTECTED] wrote: Hola, Mucho gusto en conocerlos, mi nombre es Manuel. Hoy encontre su lista, cómo referencia en http://www.w3.org y después de consultar algunas cosas me e dado cuenta, de que este puede ser un buen lugar para comenzar (continuar mis estudiso en el desarrollo de páginas web). Bienvenido a la lista. Durante las últimas semanas e estado estudiando lo más básico de CSS y lo que se puede hacer con ello en las páginas web, y pues bien, me a convencido de cambiar mi diseño básado en tablas por diseños usando CSS, sin embargo me estoy topando con bastantes problemas, especialmente con la forma de posicionar los DIV, Uno de los grandes caballos de batalla de casi cualquier maquetador CSS. aparte de dedicar este primer correo a mi presentación me gustaria consultarles por algunas referencias a tutoriales de posicionamiento, e encontrado varios sitios webs en ingles, pero en la mayoría solo me presentan soluciones sin explicar cual fue el razonamiento que les llevo a ello, si pudieran ayudarme con esto se los agradeceria mucho. Bueno, los razonamientos básicos que llevan a lograr cualquier maquetación simple vienen dados por la propia recomendación del w3c sobre las especificaciones CSS. Para abreviar, en la mayoría de las páginas prescinden de explicaciones a nivel básico y tienden a centrar los esfuerzos docentes en la resolución de las partes más complejas del tutorial. Esto es un comportamiento totalmente normal en todas las áreas del conocimiento, así que lo primero que hay que afrontar es un conocimiento lo más exhaustivo posible de la herramienta que manejemos, en este caso HTML y CSS, y de ningún sitio mejor que de la página del grupo encargado de estandarizar sus especificaciones, la w3c[1]. Estoy tratando de crear mi primer diseño de tres columnas para una página web básado en CSS y pues bueno, realmente estoy declarandolo un fracazo parcial de momento. No pienses que porque el HTML como lenguaje de marcado semántico, o el CSS como atributos de presentación, sean relativamente sencillos y no muy extensos en su definición, pasen a ser totalmente prescindibles su lectura y comprensión. Te puedo asegurar que una buena y pausada lectura de lo que hacen, para lo que sirven (y para lo que no) y su comportamiento a nivel individal y, lo más importante, a nivel global (es decir, como afectan y se dejan afectar por los elementos que lo rodean) te hará muchísimo bien para comprender por qué tienen esos comportamientos tan extraños. El CSS es particularmente extravagante en este sentido e IMPRESCINDIBLE su lectura. También comprendo que seguramente te urja medianamente una respuesta que te saque cuanto antes del atolladero (mientras estudias concienzudamente las especificaciones ;-) ). Bueno, yo te diría que siguieras unas sencillas reglas para encajar dives: · El ancho de la pantalla es, para la mayoría de nuestros propósitos, finito y conocido, el alto infinito. Esto redunda en que desde el principio puedes definir anchos en porcentajes, mientras que para los altos necesitarás de ciertos truquillos, que te desaconsejo desde ya para el nivel de inicio. De todas maneras siempre puedes definir un alto en medidas que no sean porcentajes. · Los elementos del HTML se dividen principalmente en elementos de bloque y elementos de línea. Los elementos de bloque, __sin ancho definido__ (o width: auto), tienden a ocupar el 100% del espacio que les queda a los lados y, además, no les gusta compartir este espacio con nadie (esto último, tenga o no un ancho definido). Los elementos de línea, en la misma situación, toman el ancho de su contenido (cuanto más contenido, más ancho) y se llevan muy bien en la misma horizontal con otros elementos de línea. Como elementos de bloque tenemos por ejemplo p, ul, ol, div... y como elementos de línea a, img, span... Si quieres que un elemento de bloque comparta su espacio horizontal con otros elementos de bloque (la típica maquetación en columnas a la que deseas llegar) tendrás que especificarles un ancho (33%, 33%, 33% por ejemplo) y 'flotarlos' (La propiedad 'float' es complicada de explicar en poco espacio, pero hay miles de artículos en la red sobre la misma). · El modelo de cajas (las pautas que dictan lo que mide relamente un contenedor dependiendo de las medidas que se le den) define que el ancho de un contenedor es igual a __margen derecho + ancho del borde derecho + padding derecho + ANCHO + padding izquierdo + ancho del borde izquierdo + margen izquierdo__ con lo cual, si defines que el ancho (width) de un contenedor es del 33% y le añades un borde, un padding o un margin (o la mezcla
RE: [Ovillo] Saludos! - Algunas dudas iniciales
Hola,
Inicialmente te quiero dar las gracias David, me a sorprendido mucho tu
artículo, aunque de entrada no me a quedado 100% claro algunos de tus puntos,
creo que con la práctica podre ir captando mejor y poco a poco los temas.
Comento a continuación poco a poco, alguans de las cosas que me causaron duda o
sobre las que quisiera comentar un poco...
ningún sitio mejor que de la página del grupo encargado de estandarizar sus
especificaciones, law3c[1]
El CSS es particularmente extravagante en este sentido e IMPRESCINDIBLE su
lectura.
Pues como comente en mi primer correo, me dedique a empezar por aca, aunque
francamente me parece un poco desordenada la página principal de la w3c/css y
un poco confusa su sección de learning, aunque pueda ser cuestión de costumbre.
Partiendo de este punto también me acuso un poco de que aunque me e dedicado a
leer artículos, tutoriales y libros de CSS, no e leido la especificación de la
w3c directamente.
Bueno, yo te diría que siguieras unas sencillas reglas para encajar dives:
* El ancho de la pantalla es, para la mayoría de nuestros propósitos, finito y
conocido, el alto infinito. Esto redunda en que desde el principio puedes
definir anchos en porcentajes, mientras que para los altos necesitarás de
ciertos truquillos, que te desaconsejo desde ya para el nivel de
inicio. De todas maneras siempre puedes definir un alto en medidas que no
sean porcentajes.
Que buen primer TIP, ayer me pase peleando un buen rato hasta darme por vencido
tratando de especificar que queria una columna con 100% de tamaño de alto y
nada de nada, creo que sigo pensando que estoy diseñando por medio de Tablas y
eso es lo que me tiene tan confuso. Bien, probare cambiar mi mentalidad un poco.
* Los elementos del HTML se dividen principalmente en elementos de bloque y
elementos de línea. Los elementos de bloque, __sin ancho definido__ (o
width: auto), tienden a ocupar el 100% del espacio
que les queda a los lados y, además, no les gusta compartir este espacio con
nadie (esto último,
tenga o no un ancho definido). Los elementos de línea, en la misma situación,
toman el ancho de su contenido (cuanto más contenido, más ancho) y se
llevan muy bien en la misma horizontal con otros
elementos de línea. Como elementos de bloque tenemos por ejemplo p, ul,
ol, div... y como
elementos de línea a, img, span... Si quieres que un elemento de bloque
comparta su espacio
horizontal con otros elementos de bloque (la típica maquetación en columnas a
la que deseas llegar) tendrás que especificarles un ancho (33%, 33%, 33%
por ejemplo) y 'flotarlos' (La propiedad
'float' es complicada de explicar en poco espacio, pero hay miles de
artículos en la red sobre la
misma). ...
Sí me permites quisiera aquí hacerte una pregunta más puntual, se que si
utilizo Float: left, el objeto se movera a la izquierda, y si utilizo Float:
right, el elemento se movera (lo correcto es flotara no? ) a la derecha,
entonces lo ultimo que me queda preguntar es cómo defino el centro? (Lo que se
me a ocurrido hasta ahora, es que le coloco margenes iguales a la izquierda y
derecha y eso de una u otra manera centra los objetos, sin embargo, no se cómo
funcionara esto con el Float).
Para el alto se definen las mismas pautas pero, evidentemente, la repercusión
es mínima, pues casi nunca tendremos la necesidad de ajustar una
maquetación en vertical.
Esto me suena un poco raro, normalmente cuando yo hago una página defino una
tabla contenedora principal, la cual le doy los atributos de tener el 100% del
ancho de la pantalla y luego el 100% del alto, eso me permite tener el centro
exacto de la página y de ahí en adelante me voy. ¿Crees que estoy cometiendo
una mala práctica (bueno sin contar que diseño con tablas :) )?
No intentes hacer cosas demasiado complicadas al principio, te llegarás a
desesperar y con el
tiempo verás que lo que tuviste que hacer para llegar a esa maquetación es
digno de frenopático.
Esto es un poco Off Topic: Frenopático?
Básicamente existen medidas relativas que el usuario podrá cambiar a su gusto
mediante el navegador ('em', 'ex', '%'...) y absolutas
Tratare de acostumbrarme a los em lo mejor que pueda, ya habia decidido esto
según lo leido, pero es cuestión de costumbres, cómo pareciera ser todo con CSS.
Ya por ultimo, muchas gracias por los tips, se te agradecen bastante, le dare
otra lectura despacio otra vez hoy. Quizas me anime cuando me averguenze un
poco menos a mostrar lo que estoy tratando de diseñar, Saludos a todos,
Manuel
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
[Ovillo] Saludos! - Algunas dudas iniciales
Hola, Mucho gusto en conocerlos, mi nombre es Manuel. Hoy encontre su lista, cómo referencia en http://www.w3.org y después de consultar algunas cosas me e dado cuenta, de que este puede ser un buen lugar para comenzar (continuar mis estudiso en el desarrollo de páginas web). Durante las últimas semanas e estado estudiando lo más básico de CSS y lo que se puede hacer con ello en las páginas web, y pues bien, me a convencido de cambiar mi diseño básado en tablas por diseños usando CSS, sin embargo me estoy topando con bastantes problemas, especialmente con la forma de posicionar los DIV, aparte de dedicar este primer correo a mi presentación me gustaria consultarles por algunas referencias a tutoriales de posicionamiento, e encontrado varios sitios webs en ingles, pero en la mayoría solo me presentan soluciones sin explicar cual fue el razonamiento que les llevo a ello, si pudieran ayudarme con esto se los agradeceria mucho. Estoy tratando de crear mi primer diseño de tres columnas para una página web básado en CSS y pues bueno, realmente estoy declarandolo un fracazo parcial de momento. No me queiro extender más ya con esta presentación, les agradezco la oportunidad que me dan de unirme a su lista, y pues bueno, talvez mando mis experimentos para pedir sugerencia, Un saludo, Manuel ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Saludos! - Algunas dudas iniciales
Hola Manuel, bienvenido a la lista Lo que te recomendaría es que no cometas el mismo error que yo...Estás cambiando tu maquetación de Tablas por CSS, no pretendas hacer lo mismo, ni tratarlos como si fueran elementos similares (errores de principiante) De eso se trata usar CSS, donde los posicionamientos para cada contenido deben de definirse con este Ahora bien, tu diseño de tres columnas es lograble, pero darte un enlace directo sería como un daño...lo mejor es que aprendas poco a poco y luego tu problema ya no serán tres columnas Bueno, es todo lo que te puedo decir Saludo, DJ-Dom El día 31/03/06, webmaster [EMAIL PROTECTED] escribió: Hola, Mucho gusto en conocerlos, mi nombre es Manuel. Hoy encontre su lista, cómo referencia en http://www.w3.org y después de consultar algunas cosas me e dado cuenta, de que este puede ser un buen lugar para comenzar (continuar mis estudiso en el desarrollo de páginas web). Durante las últimas semanas e estado estudiando lo más básico de CSS y lo que se puede hacer con ello en las páginas web, y pues bien, me a convencido de cambiar mi diseño básado en tablas por diseños usando CSS, sin embargo me estoy topando con bastantes problemas, especialmente con la forma de posicionar los DIV, aparte de dedicar este primer correo a mi presentación me gustaria consultarles por algunas referencias a tutoriales de posicionamiento, e encontrado varios sitios webs en ingles, pero en la mayoría solo me presentan soluciones sin explicar cual fue el razonamiento que les llevo a ello, si pudieran ayudarme con esto se los agradeceria mucho. Estoy tratando de crear mi primer diseño de tres columnas para una página web básado en CSS y pues bueno, realmente estoy declarandolo un fracazo parcial de momento. No me queiro extender más ya con esta presentación, les agradezco la oportunidad que me dan de unirme a su lista, y pues bueno, talvez mando mis experimentos para pedir sugerencia, Un saludo, Manuel ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo -- www.dj-dom.net [EMAIL PROTECTED] ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
