[Ovillo] dudas sobre maquetación
Hola amigos de Ovillo,
Tengo una duda que quisiera plantear,
Estoy maquetando una página y estoy usando márgenes negativos para posicionar
unos objetos afuera del div que los contiene. Sin embargo el div que los
contiene tiene un fondo con un .png y por alguna razón no logro que se
despliegue en firefox.
(En Explorer)
http://www.desarrollo.org.gt/ferias/tmp/ferias_ie7.jpg
(En Firefox)
http://www.desarrollo.org.gt/ferias/tmp/ferias_ffox.png
(Página de prueba de la web en desarrollo)
http://www.desarrollo.org.gt/ferias/plantilla.html
También estoy tratando de usar márgenes negativos con el área que quiero usar
de menú pero se me destroza todo más, en firefox me funciona y en 7 no.
(http://www.desarrollo.org.gt/ferias/plantilla.html)
Bueno, les dejo el código del html y del css y sí alguno tiene algunas ideas o
sugerencias (incluso cambio de método para resolver el problema lo agradeceré
muchísimo).
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=utf-8 /
meta name=keywords content= /
meta name=description content= /
titlePlantilla - Ferias en Guatemala V3/title
link href=estilos.css rel=stylesheet type=text/css /
/head
body
div id=contenido_arriba/div
div id=contenido
div id=col_izquierda
div id=logo_feria
img src=imagenes/logo_feria.png alt=Logotipo: Feria del
Comercio 2008 /
/div
/div
div id=col_derecha
div id=navegacion_superior_arriba/div
div id=navegacion_superior
pEsto es una prueba de los menus/p
/div
div id=navegacion_superior_abajo/div
div id=mega_imagen
/div
div class=articulo
pAliquam rhoncus auctor sapien? Suspendisse purus. Sed non mauris. In arcu
leo, ullamcorper nec, egestas in, luctus nec, ante. Mauris sollicitudin
eleifend nibh. Donec a eros quis dolor faucibus molestie. Vivamus mollis. Duis
vel mi interdum justo rhoncus vulputate. Pellentesque quam turpis, bibendum
sed, dictum et; imperdiet sodales, quam. Integer suscipit orci sit amet ante.
In in quam id tortor porta dictum! Duis sed nulla! Fusce velit. Aliquam eu
augue! Curabitur odio nulla, feugiat in, pulvinar nec, semper a, purus. Nulla
pede. Fusce risus tellus, malesuada a, egestas in, dictum et, erat.
Pellentesque semper. Ut imperdiet urna nec odio./p
pDuis cursus justo nec nulla. Nunc mi sem, ornare vel, suscipit et, mollis
quis, mi. Donec sed leo sed quam scelerisque pretium. Duis euismod nisl non
odio. Aenean at massa id elit aliquet feugiat? Quisque tortor. Integer ipsum.
Vivamus euismod lobortis quam. Proin sollicitudin interdum lorem! Mauris
bibendum gravida urna. Morbi semper. Aliquam tincidunt porttitor justo./p
pPhasellus velit magna, viverra at, auctor vel, congue sit amet; augue.
Duis mattis congue nibh. In hac habitasse platea dictumst. Nulla sit amet eros.
Maecenas consequat varius mauris. Aenean laoreet diam at purus. Aenean in nibh.
Duis sapien? Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
iaculis iaculis metus. Vestibulum id quam. Mauris nibh nibh, tempus eget,
venenatis at, suscipit et, nisl. Integer non lectus eu nisi eleifend tempus!
Maecenas eleifend. Vestibulum orci sapien, fermentum ac, porttitor tincidunt,
vestibulum in, quam. Cras diam. Maecenas non nisl? Duis sed eros. Phasellus
semper turpis quis dolor.br /
/p
/div
/div
/div
div id=contenido_abajo/div
div class=limpiar/div
div id=pie
/div
/body
/html
--
CSS
@charset utf-8;
/* CSS Document */
* {margin:0; padding:0;}
#contenido, #pie {margin:auto; width:760px;}
#contenido_arriba, #contenido_abajo {width:760px; height:15px; margin:auto;}
#contenido_arriba {margin-top:5em;}
#contenido {overflow: inherit;}
#navegacion_superior_arriba, #navegacion_superior_abajo {height:20px;}
#navegacion_superior_arriba {margin-top:-3em;}
#col_izquierda {width:200px; float:left;}
#col_derecha {width:560px; float:left;}
#logo_feria {width:200px; height:214px; margin-top:-5em; margin-left:-5em;
z-index:1000;}
body {background-image:url(imagenes/fondo_feria.gif);}
#contenido {background-image:url(imagenes/fondo_contenido.png);
background-repeat:repeat-y;}
#contenido_arriba {background-image:url(imagenes/barra_amarilla_top.png);}
#contenido_abajo {background-image:url(imagenes/bara_amarilla_down.png);}
#navegacion_superior {background-image:url(imagenes/fondo_menu.png);
background-repeat:repeat-y;}
#navegacion_superior_arriba {background-image:url(imagenes/barra_menu_top.png);}
#navegacion_superior_abajo {background-image:url(imagenes/barra_menu_down.png);}
p {font-family:Calibri, Helvetica, Arial, sans-serif; padding:0 1em 1em 1em;
text-align:justify;}
.limpiar {clear:both;}
.centrado {text-align:center;}
Muy agradecido con todos,
Vlad.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a
Re: [Ovillo] dudas sobre maquetación
#col_derecha {width:560px;* height: 100%*;float:left;} ?
On Mon, Apr 21, 2008 at 3:59 PM, webmaster
[EMAIL PROTECTED] wrote:
Hola amigos de Ovillo,
Tengo una duda que quisiera plantear,
Estoy maquetando una página y estoy usando márgenes negativos para
posicionar unos objetos afuera del div que los contiene. Sin embargo el div
que los contiene tiene un fondo con un .png y por alguna razón no logro que
se despliegue en firefox.
(En Explorer)
http://www.desarrollo.org.gt/ferias/tmp/ferias_ie7.jpg
(En Firefox)
http://www.desarrollo.org.gt/ferias/tmp/ferias_ffox.png
(Página de prueba de la web en desarrollo)
http://www.desarrollo.org.gt/ferias/plantilla.html
También estoy tratando de usar márgenes negativos con el área que quiero
usar de menú pero se me destroza todo más, en firefox me funciona y en 7
no. (http://www.desarrollo.org.gt/ferias/plantilla.html)
Bueno, les dejo el código del html y del css y sí alguno tiene algunas
ideas o sugerencias (incluso cambio de método para resolver el problema lo
agradeceré muchísimo).
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=utf-8 /
meta name=keywords content= /
meta name=description content= /
titlePlantilla - Ferias en Guatemala V3/title
link href=estilos.css rel=stylesheet type=text/css /
/head
body
div id=contenido_arriba/div
div id=contenido
div id=col_izquierda
div id=logo_feria
img src=imagenes/logo_feria.png alt=Logotipo: Feria
del Comercio 2008 /
/div
/div
div id=col_derecha
div id=navegacion_superior_arriba/div
div id=navegacion_superior
pEsto es una prueba de los menus/p
/div
div id=navegacion_superior_abajo/div
div id=mega_imagen
/div
div class=articulo
pAliquam rhoncus auctor sapien? Suspendisse purus. Sed non mauris. In
arcu leo, ullamcorper nec, egestas in, luctus nec, ante. Mauris sollicitudin
eleifend nibh. Donec a eros quis dolor faucibus molestie. Vivamus mollis.
Duis vel mi interdum justo rhoncus vulputate. Pellentesque quam turpis,
bibendum sed, dictum et; imperdiet sodales, quam. Integer suscipit orci sit
amet ante. In in quam id tortor porta dictum! Duis sed nulla! Fusce velit.
Aliquam eu augue! Curabitur odio nulla, feugiat in, pulvinar nec, semper a,
purus. Nulla pede. Fusce risus tellus, malesuada a, egestas in, dictum et,
erat. Pellentesque semper. Ut imperdiet urna nec odio./p
pDuis cursus justo nec nulla. Nunc mi sem, ornare vel, suscipit et,
mollis quis, mi. Donec sed leo sed quam scelerisque pretium. Duis euismod
nisl non odio. Aenean at massa id elit aliquet feugiat? Quisque tortor.
Integer ipsum. Vivamus euismod lobortis quam. Proin sollicitudin interdum
lorem! Mauris bibendum gravida urna. Morbi semper. Aliquam tincidunt
porttitor justo./p
pPhasellus velit magna, viverra at, auctor vel, congue sit amet;
augue. Duis mattis congue nibh. In hac habitasse platea dictumst. Nulla sit
amet eros. Maecenas consequat varius mauris. Aenean laoreet diam at purus.
Aenean in nibh. Duis sapien? Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nullam iaculis iaculis metus. Vestibulum id quam. Mauris
nibh nibh, tempus eget, venenatis at, suscipit et, nisl. Integer non lectus
eu nisi eleifend tempus! Maecenas eleifend. Vestibulum orci sapien,
fermentum ac, porttitor tincidunt, vestibulum in, quam. Cras diam. Maecenas
non nisl? Duis sed eros. Phasellus semper turpis quis dolor.br /
/p
/div
/div
/div
div id=contenido_abajo/div
div class=limpiar/div
div id=pie
/div
/body
/html
--
CSS
@charset utf-8;
/* CSS Document */
* {margin:0; padding:0;}
#contenido, #pie {margin:auto; width:760px;}
#contenido_arriba, #contenido_abajo {width:760px; height:15px;
margin:auto;}
#contenido_arriba {margin-top:5em;}
#contenido {overflow: inherit;}
#navegacion_superior_arriba, #navegacion_superior_abajo {height:20px;}
#navegacion_superior_arriba {margin-top:-3em;}
#col_izquierda {width:200px; float:left;}
#col_derecha {width:560px; float:left;}
#logo_feria {width:200px; height:214px; margin-top:-5em;
margin-left:-5em; z-index:1000;}
body {background-image:url(imagenes/fondo_feria.gif);}
#contenido {background-image:url(imagenes/fondo_contenido.png);
background-repeat:repeat-y;}
#contenido_arriba
{background-image:url(imagenes/barra_amarilla_top.png);}
#contenido_abajo {background-image:url(imagenes/bara_amarilla_down.png);}
#navegacion_superior {background-image:url(imagenes/fondo_menu.png);
background-repeat:repeat-y;}
#navegacion_superior_arriba
{background-image:url(imagenes/barra_menu_top.png);}
#navegacion_superior_abajo
{background-image:url(imagenes/barra_menu_down.png);}
p {font-family:Calibri, Helvetica, Arial, sans-serif; padding:0 1em 1em
1em; text-align:justify;}
Re: [Ovillo] dudas sobre maquetación
Saludos, probe tu solución y no logre el resultado deseado, por cierto que
función tienen los * en esas posiciones, no conocia ese uso?
#col_derecha {width:560px;* height: 100%*;float:left;} ?
On Mon, Apr 21, 2008 at 3:59 PM, webmaster [EMAIL PROTECTED] wrote:
Hola amigos de Ovillo,
Tengo una duda que quisiera plantear,
Estoy maquetando una página y estoy usando márgenes negativos para
posicionar unos objetos afuera del div que los contiene. Sin embargo el div
que los contiene tiene un fondo con un .png y por alguna razón no logro que se
despliegue en firefox.
(En Explorer)
http://www.desarrollo.org.gt/ferias/tmp/ferias_ie7.jpg
(En Firefox)
http://www.desarrollo.org.gt/ferias/tmp/ferias_ffox.png
(Página de prueba de la web en desarrollo)
http://www.desarrollo.org.gt/ferias/plantilla.html
También estoy tratando de usar márgenes negativos con el área que
quiero
usar de menú pero se me destroza todo más, en firefox me funciona y en 7 no.
(http://www.desarrollo.org.gt/ferias/plantilla.html)
Bueno, les dejo el código del html y del css y sí alguno tiene
algunas
ideas o sugerencias (incluso cambio de método para resolver el problema lo
agradeceré muchísimo).
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=utf-8 /
meta name=keywords content= / meta name=description
content= / titlePlantilla - Ferias en Guatemala V3/title
link href=estilos.css rel=stylesheet type=text/css / /head
body
div id=contenido_arriba/div
div id=contenido
div id=col_izquierda
div id=logo_feria
img src=imagenes/logo_feria.png alt=Logotipo:
Feria
del Comercio 2008 /
/div
/div
div id=col_derecha
div id=navegacion_superior_arriba/div
div id=navegacion_superior
pEsto es una prueba de los menus/p
/div
div id=navegacion_superior_abajo/div
div id=mega_imagen
/div
div class=articulo
pAliquam rhoncus auctor sapien? Suspendisse purus. Sed non mauris.
In
arcu leo, ullamcorper nec, egestas in, luctus nec, ante. Mauris sollicitudin
eleifend nibh. Donec a eros quis dolor faucibus molestie. Vivamus mollis.
Duis vel mi interdum justo rhoncus vulputate. Pellentesque quam turpis,
bibendum sed, dictum et; imperdiet sodales, quam. Integer suscipit orci sit
amet ante. In in quam id tortor porta dictum! Duis sed nulla! Fusce velit.
Aliquam eu augue! Curabitur odio nulla, feugiat in, pulvinar nec, semper a,
purus. Nulla pede. Fusce risus tellus, malesuada a, egestas in, dictum et,
erat. Pellentesque semper. Ut imperdiet urna nec odio./p
pDuis cursus justo nec nulla. Nunc mi sem, ornare vel, suscipit
et,
mollis quis, mi. Donec sed leo sed quam scelerisque pretium. Duis euismod nisl
non odio. Aenean at massa id elit aliquet feugiat? Quisque tortor.
Integer ipsum. Vivamus euismod lobortis quam. Proin sollicitudin interdum
lorem! Mauris bibendum gravida urna. Morbi semper. Aliquam tincidunt porttitor
justo./p
pPhasellus velit magna, viverra at, auctor vel, congue sit amet;
augue. Duis mattis congue nibh. In hac habitasse platea dictumst. Nulla sit
amet eros. Maecenas consequat varius mauris. Aenean laoreet diam at purus.
Aenean in nibh. Duis sapien? Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nullam iaculis iaculis metus. Vestibulum id quam. Mauris nibh
nibh, tempus eget, venenatis at, suscipit et, nisl. Integer non lectus eu nisi
eleifend tempus! Maecenas eleifend. Vestibulum orci sapien, fermentum ac,
porttitor tincidunt, vestibulum in, quam. Cras diam. Maecenas non nisl? Duis
sed eros. Phasellus semper turpis quis dolor.br /
/p
/div
/div
/div
div id=contenido_abajo/div
div class=limpiar/div
div id=pie
/div
/body
/html
--
CSS
@charset utf-8;
/* CSS Document */
* {margin:0; padding:0;}
#contenido, #pie {margin:auto; width:760px;} #contenido_arriba,
#contenido_abajo {width:760px; height:15px;
margin:auto;}
#contenido_arriba {margin-top:5em;}
#contenido {overflow: inherit;}
#navegacion_superior_arriba, #navegacion_superior_abajo
{height:20px;} #navegacion_superior_arriba {margin-top:-3em;}
#col_izquierda {width:200px; float:left;} #col_derecha {width:560px;
float:left;} #logo_feria {width:200px; height:214px; margin-top:-5em;
margin-left:-5em; z-index:1000;}
body {background-image:url(imagenes/fondo_feria.gif);}
#contenido {background-image:url(imagenes/fondo_contenido.png);
background-repeat:repeat-y;}
#contenido_arriba
{background-image:url(imagenes/barra_amarilla_top.png);}
#contenido_abajo
{background-image:url(imagenes/bara_amarilla_down.png);}
#navegacion_superior {background-image:url(imagenes/fondo_menu.png);
background-repeat:repeat-y;}
#navegacion_superior_arriba
{background-image:url(imagenes/barra_menu_top.png);}
Re: [Ovillo] dudas sobre maquetación
Perdon, el * fue un error de google, lo habia puesto en negrita y lo resalto
asi, seria asi:
#col_derecha {width:560px; height:100%;float:left;}
On Mon, Apr 21, 2008 at 5:16 PM, webmaster
[EMAIL PROTECTED] wrote:
Saludos, probe tu solución y no logre el resultado deseado, por cierto que
función tienen los * en esas posiciones, no conocia ese uso?
#col_derecha {width:560px;* height: 100%*;float:left;} ?
On Mon, Apr 21, 2008 at 3:59 PM, webmaster
[EMAIL PROTECTED] wrote:
Hola amigos de Ovillo,
Tengo una duda que quisiera plantear,
Estoy maquetando una página y estoy usando márgenes negativos para
posicionar unos objetos afuera del div que los contiene. Sin embargo el
div que los contiene tiene un fondo con un .png y por alguna razón no logro
que se despliegue en firefox.
(En Explorer)
http://www.desarrollo.org.gt/ferias/tmp/ferias_ie7.jpg
(En Firefox)
http://www.desarrollo.org.gt/ferias/tmp/ferias_ffox.png
(Página de prueba de la web en desarrollo)
http://www.desarrollo.org.gt/ferias/plantilla.html
También estoy tratando de usar márgenes negativos con el área que
quiero
usar de menú pero se me destroza todo más, en firefox me funciona y en 7
no. (http://www.desarrollo.org.gt/ferias/plantilla.html)
Bueno, les dejo el código del html y del css y sí alguno tiene
algunas
ideas o sugerencias (incluso cambio de método para resolver el problema lo
agradeceré muchísimo).
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=utf-8 /
meta name=keywords content= / meta name=description
content= / titlePlantilla - Ferias en Guatemala V3/title
link href=estilos.css rel=stylesheet type=text/css / /head
body
div id=contenido_arriba/div
div id=contenido
div id=col_izquierda
div id=logo_feria
img src=imagenes/logo_feria.png alt=Logotipo:
Feria
del Comercio 2008 /
/div
/div
div id=col_derecha
div id=navegacion_superior_arriba/div
div id=navegacion_superior
pEsto es una prueba de los menus/p
/div
div id=navegacion_superior_abajo/div
div id=mega_imagen
/div
div class=articulo
pAliquam rhoncus auctor sapien? Suspendisse purus. Sed non mauris.
In
arcu leo, ullamcorper nec, egestas in, luctus nec, ante. Mauris
sollicitudin eleifend nibh. Donec a eros quis dolor faucibus molestie.
Vivamus mollis.
Duis vel mi interdum justo rhoncus vulputate. Pellentesque quam turpis,
bibendum sed, dictum et; imperdiet sodales, quam. Integer suscipit orci sit
amet ante. In in quam id tortor porta dictum! Duis sed nulla! Fusce velit.
Aliquam eu augue! Curabitur odio nulla, feugiat in, pulvinar nec, semper
a, purus. Nulla pede. Fusce risus tellus, malesuada a, egestas in, dictum
et, erat. Pellentesque semper. Ut imperdiet urna nec odio./p
pDuis cursus justo nec nulla. Nunc mi sem, ornare vel, suscipit
et,
mollis quis, mi. Donec sed leo sed quam scelerisque pretium. Duis euismod
nisl non odio. Aenean at massa id elit aliquet feugiat? Quisque tortor.
Integer ipsum. Vivamus euismod lobortis quam. Proin sollicitudin interdum
lorem! Mauris bibendum gravida urna. Morbi semper. Aliquam tincidunt
porttitor justo./p
pPhasellus velit magna, viverra at, auctor vel, congue sit amet;
augue. Duis mattis congue nibh. In hac habitasse platea dictumst. Nulla
sit amet eros. Maecenas consequat varius mauris. Aenean laoreet diam at
purus.
Aenean in nibh. Duis sapien? Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nullam iaculis iaculis metus. Vestibulum id quam. Mauris
nibh nibh, tempus eget, venenatis at, suscipit et, nisl. Integer non lectus
eu nisi eleifend tempus! Maecenas eleifend. Vestibulum orci sapien,
fermentum ac, porttitor tincidunt, vestibulum in, quam. Cras diam. Maecenas
non nisl? Duis sed eros. Phasellus semper turpis quis dolor.br /
/p
/div
/div
/div
div id=contenido_abajo/div
div class=limpiar/div
div id=pie
/div
/body
/html
--
CSS
@charset utf-8;
/* CSS Document */
* {margin:0; padding:0;}
#contenido, #pie {margin:auto; width:760px;} #contenido_arriba,
#contenido_abajo {width:760px; height:15px;
margin:auto;}
#contenido_arriba {margin-top:5em;}
#contenido {overflow: inherit;}
#navegacion_superior_arriba, #navegacion_superior_abajo
{height:20px;} #navegacion_superior_arriba {margin-top:-3em;}
#col_izquierda {width:200px; float:left;} #col_derecha {width:560px;
float:left;} #logo_feria {width:200px; height:214px; margin-top:-5em;
margin-left:-5em; z-index:1000;}
body {background-image:url(imagenes/fondo_feria.gif);}
#contenido {background-image:url(imagenes/fondo_contenido.png);
background-repeat:repeat-y;}
#contenido_arriba
