Re: [Ovillo] modelo de cajas ilógico
Hola, Pablo Probablemente mi ignorancia sea atrevida, pero mi problema no está en el HTML, sino precisamente en el CSS. Lo que pretendo es cambiar sólo el CSS, y si cambio el HTML porque no haya otro modo de hacerlo (esa es la ventaja del CSS, ¿no?) La ventaja es tener separados contenido y presentación. Ésto efectivamente proporciona poder utilizar la misma hoja de estilos para distintos documentos, en lugar de maquetar los elementos uno por uno. Lo que no debes hacer es cambiar (y lo pongo entre comillas eh xD) la semántica del HTML con CSS. Alguien que no pueda ver tus página con estilos (CSS deshabilitado, navegador de texto, invidente, etc) entenderá mejor un listado digamos agrupado que párrafos sueltos sin una organización aparente. ___ 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://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] modelo de cajas ilógico
Pablo Rodríguez escribió: Muchas gracias por la respuesta, Diego. Te respondo en el cuerpo de mensaje. Diego Martín Lafuente wrote: Empecemos por esto: div class=barsup pa href=./quienes.shtmlQuiénes somos/a/p pa href=./servicios.shtmlServicios/a/p pa href=./tecnologia.shtmlTecnología/a/p pa href=./experiencia.shtmlExperiencia/a/p pa href=./colabora.shtmlColaboradores/a/p pa href=./clientes.shtmlClientes/a/p /div ¿Porqué usas p? ¿No es mejor para estos casos definir una lista en vez de un párrafo sobre otro párrafo? Bueno, no me lo había planteado. Pero en realidad, creo que en realidad es un poco igual ¿no? (Si no estoy muy perdido, en el fondo, las listas no dejan de ser un contenedor con elementos que tienen un formato predeterminado.) Además así no tengo que quitarles el formato propio de las listas, sino sólo añadir. No es lo mismo, no te fijes en la apariencia o si le tienes que quitar más o menos estilos para que quede como pretendes, lo que tienes es una lista no ordenada de enlaces con lo que es mucho más semántico representarlo como ul lia/a/li lia/a/li ... /ul -- 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://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] modelo de cajas ilógico
Gracias por la respuesta, Fernando. Al final .barsup tenía un problema de márgenes verticales que se colapsaban (no sé mucho CSS, pero de eso no tenía ni idea) y lo evité posicionando relativamente todos los elementos que intervienen. (Pero lo solucioné hoy con Opera, ayer no me funcionaba en Opera, a ver si mañana lo pruebo con IE.) Muchas gracias por la nota de cerrar el div .frame. Ni me había dado cuenta. La diferencia de anchura entre .barsup y .direccion funciona perfectamente si se ponen 4 elementos en .barsup con 25% de anchura cada uno (sin haberlo visto en IE 6, que ya fallará). Pero con 6 elementos da a 16.6% y ya es más complicado. Pero es un detalle que si no sale no es tan importante. Muchas gracias de nuevo y saludos, Pablo Fernando Gutierrez wrote: Hola Pablo, No sé si ya has solucionado tu consulta porque en IE6 lo veo similar a como se ve en FF y la funcionalidad no se ve afectada. Eso sí, tienes un error de validación ya que olvidaste cerrar el div .frame. Sobre la diferencia de anchura entre .barsup y .direccion se debe al width: 80% que le aplicas a .direccion. Salu2 ___ 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://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] modelo de cajas ilógico
Muchas gracias por la respuesta, Diego. Te respondo en el cuerpo de mensaje.
Diego Martín Lafuente wrote:
Empecemos por esto:
div class=barsup
pa href=./quienes.shtmlQuiénes somos/a/p
pa href=./servicios.shtmlServicios/a/p
pa href=./tecnologia.shtmlTecnología/a/p
pa href=./experiencia.shtmlExperiencia/a/p
pa href=./colabora.shtmlColaboradores/a/p
pa href=./clientes.shtmlClientes/a/p
/div
¿Porqué usas p? ¿No es mejor para estos casos definir una lista en
vez de un párrafo sobre otro párrafo?
Bueno, no me lo había planteado. Pero en realidad, creo que en realidad
es un poco igual ¿no? (Si no estoy muy perdido, en el fondo, las listas
no dejan de ser un contenedor con elementos que tienen un formato
predeterminado.) Además así no tengo que quitarles el formato propio de
las listas, sino sólo añadir.
Siguiente:
.logo {
position: relative;
¿Porqué utilizas relative? Si es una caja en bloque, no hace falta.
Lo mismo a barsup.
Pues posiciono en relative, porque en algún momento no posicionar o
posicionar en absolute me generó problemas.
Además, la ventaja de posicionar en relative es que los márgenes no se
colapsan (me acabo de enterar en tu bitácora).
El modelo de caja no es ilógico, es ilógico el HTML y la forma en
que, con CSS argumentas la posición de los elementos. Si vienen tan
natural que casi no hay que tocarles.
Bueno, la verdad es que no entiendo el modelo de cajas en CSS (alguien
me lo dijo en esta lista hace un par de años y es verdad). Pero lo que
me sorprende es que Firefox vea las cosas de un modo y Opera de otro
(dejando de lado IE 6, al que no tengo acceso en mi ordenador).
El código de tu página de inicio lo dejaría así:
body
[...]
/body
Mejor que eso no tendrás. Ahora cuéntame, cómo usarías CSS con esa
estructura.
Luego, una página interna, lo mismo:
body
[...]
/body
Te recomiendo que vuelvas a leer el modelo de caja, sobre todo, la
parte de los márgenes colapsables y nunca viene mal también leerse el
Spec de HTML o XHTML para entender el uso de los elementos, dado que
utilizas elementos que no tocan en muchas zonas.
De veras que te agradezco el trabajo que te has tomado en reescribir los
dos modelos de página (lo elimino para hacer el mensaje más breve).
Probablemente mi ignorancia sea atrevida, pero mi problema no está en el
HTML, sino precisamente en el CSS. Lo que pretendo es cambiar sólo el
CSS, y si cambio el HTML porque no haya otro modo de hacerlo (esa es la
ventaja del CSS, ¿no?)
Si, la verdad es que yo he hojeado por encima las especificaciones,
porque no las entiendo, sólo las he usado como referencia. Supongo que
el modelo de la caja es http://www.w3.org/TR/REC-CSS2/box.html. Pero
tendré que leérmelo de arriba a abajo.
No entiendo lo de que uso elementos que no tocan en muchas zonas.
Perdona, pero estoy absolutamente perdido, ¿son elementos que tienen
poco contacto entre sí o con otros elementos? ¿O son elementos que no
están muy desarrollados en la documentación?
Muchas gracias por la respuesta. Saludos,
Pablo
___
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://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] modelo de cajas ilógico
Hola a todas y todos,
tengo un problema grave con una página (http://www.gamco.es/~pablo/) y
el modelo de cajas.
No entiendo cómo en Opera (y supongo que en IE) se monta .logo sobre
.barsup (dejándola inútil). Y tampoco entiendo cómo .barsup puede ser
más largo que .direccion (no creo que influye, pero ambos están dentro
de .frame, que únicamente marca un margen del 6%).
En Firefox funcionan como deberían, pero necesito que funcionen en IE.
La verdad es que necesito ayuda porque no entiendo por qué no funciona
algo que debería funcionar (según alcanzo a comprender). Debajo están
los elementos definidos.
Muchas gracias de antemano,
Pablo
.logo {
position: relative;
width: 100%;
text-align: center;
margin-left: 0%;
margin-top: 0%;
margin-bottom: 3%;
padding: 0%;
z-index: 1;
}
.barsup {
position: relative;
margin-top: 1%;
margin-bottom: 5%;
margin-left: 10%;
margin-right: 10%;
text-align: center;
font-weight: bold;
z-index: 2;
}
.barsup p {
width: 16.6%;
float: left;
text-align: center;
background-color: #0086F6;
font-size: 80%;
margin: 0%;
padding: 0%;
}
.direccion {
color: #ff;
position: relative;
background-color: #0086f6;
width: 80%;
margin-top: 5%;
margin-left: 10%;
font-size: 70%;
text-align: center;
font-weight: bold;
clear: both;
}
___
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://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] modelo de cajas ilógico
Empecemos por esto:
div class=barsup
pa href=./quienes.shtmlQuiénes somos/a/p
pa href=./servicios.shtmlServicios/a/p
pa href=./tecnologia.shtmlTecnología/a/p
pa href=./experiencia.shtmlExperiencia/a/p
pa href=./colabora.shtmlColaboradores/a/p
pa href=./clientes.shtmlClientes/a/p
/div
¿Porqué usas p? ¿No es mejor para estos casos definir una lista en
vez de un párrafo sobre otro párrafo?
Siguiente:
.logo {
position: relative;
¿Porqué utilizas relative? Si es una caja en bloque, no hace falta.
Lo mismo a barsup.
El modelo de caja no es ilógico, es ilógico el HTML y la forma en
que, con CSS argumentas la posición de los elementos. Si vienen tan
natural que casi no hay que tocarles.
El código de tu página de inicio lo dejaría así:
body
div id=frame
h1a href=./index.shtmlMi logo/a/h1
ul id=nav
lia href=./quienes.shtmlQuiénes somos/a/li
lia href=./servicios.shtmlServicios/a/li
lia href=./tecnologia.shtmlTecnología/a/li
lia href=./experiencia.shtmlExperiencia/a/li
lia href=./colabora.shtmlColaboradores/a/li
lia href=./clientes.shtmlClientes/a/li
/ul
div id=footer
pGamco SL · C/ Alcalá 20, 28014 Madrid · Tlf. 915 591 032 ·
Fax
911 852 133 · a href=./contacto.shtmlCorreo electrónico/a/p
/div
/div
/body
Mejor que eso no tendrás. Ahora cuéntame, cómo usarías CSS con esa
estructura.
Luego, una página interna, lo mismo:
body
div id=frame
h1a href=./index.shtmlMi logo/a/h1
ul id=nav
lia href=./quienes.shtmlQuiénes somos/a/li
lia href=./servicios.shtmlServicios/a/li
lia href=./tecnologia.shtmlTecnología/a/li
lia href=./experiencia.shtmlExperiencia/a/li
lia href=./colabora.shtmlColaboradores/a/li
lia href=./clientes.shtmlClientes/a/li
/ul
div id=content
div id=menu
ul
li…/li
/ul
/div
div id=text
h2…/h2
p…/p
/div
div class=clear/div
/div
div id=footer
pGamco SL · C/ Alcalá 20, 28014 Madrid · Tlf. 915 591 032 ·
Fax
911 852 133 · a href=./contacto.shtmlCorreo electrónico/a/p
/div
/div
/body
Te recomiendo que vuelvas a leer el modelo de caja, sobre todo, la
parte de los márgenes colapsables y nunca viene mal también leerse el
Spec de HTML o XHTML para entender el uso de los elementos, dado que
utilizas elementos que no tocan en muchas zonas.
Saludos,
Diego Martín Lafuente
[EMAIL PROTECTED]
http://www.minid.net
––
Chief Creative Officer, Tractis S.L.
http://www.tractis.com
___
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://lists.ovillo.org/mailman/listinfo/ovillo
