[Ovillo] El que no sabe es como el que no ve
Es CSS me va a volver loco.
No encuentro explicacion a
http://kioscoelcoso.iespana.es/
por mas que busco
En ff y en netscape se escapa el div lateral del div contenido por
debajo, a pesar de estar anidado uno en el otro
Os pego el codigo HTML
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
titleLA WEB DEL INVIERNO/title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
link rel=stylesheet href=estilosDesarrolloWeb.css
/head
body
div id=contenedor
div id=cabeceraimg src=imagenes/cabecera.jpg alt=la web del
invierno/div
div id=navegador
a href=# class=enlacenavPortada/a |
a href=# class=enlacenavInvierno/a |
a href=# class=enlacenavDiciembre a Marzo/a |
a href=# class=enlacenavLa Chimenea /a |
a href=# class=enlacenavDeportes de Inviernos/a|
a href=# class=enlacenavContactos/a
/div
div id=lateral
h2 class=titlatbuscar/h2
div id=fbuscar class=cuerpolateral
form action= method=post
div id=campotextoinput type=text
name=criterio/div
div id=botonbuscarinput
name=busca type=image
src=imagenes/go.gif /div
div class=radio nowrapinput
type=radio name=op
value=1En la Web de Invierno/div
div class=radioinput type=radio
name=op value=2En
toda la Web/div
/form
/div
h2 class=titlatregistro/h2
div id=registro class=cuerpolateral
a href=#registrese con nosotro/a y
obtenga muchas ventajas
/div
h2 class=titlatotras informaciones/h2
div id=otras class=cuerpolateral
ul
lia href=#Quienes somos/a/li
lia href=#Nuestra mision/a/li
lia href=#Agenda de
Eventos/a/li
/ul
/div
/div
div id=cuerpo
h1Titulo de la pagina/h1
p
En este articulo vamos a conocer la maquetacion de
paginas de
estilo en cascada(CSS).
Veremos como realizar este tipo de maquetacion, junto
con algunas
ventajas e inconvenientes
Para muchos sera todavia un campo por explorar.Aunque
no vamos a
entrar en grandes detalles, vamos
a intentar dar a conocer la maquetacion con CSS para
cubrir la
posible lagana por parte del lector
En capitulo sucesivos ampliaremos la informacion y
ofreceremos
tutoriales mas practicos.
/p
p
Como se ha podido aprender en el Manual de CSS,las
hojas de estilo
en cascada ayudan a separar el
contenido de la forma, es decir...
/p
div id=navabajo
a href=#Volver/a |
a href=#Portada/a |
a href=#Mapa del Sitio/a |
/div
/div
/div
/body
/html
el codigo CSS
/* CSS Document */
body{ background-image: url(imagenes/fondo.gif);
font:8pt;
font:Verdana, Arial, Helvetica, sans-serif;
color:#66;
margin:20px 0px 20px 0px;
text-align:center;
}
#contenedor{
text-align:left;
width:700px;
background-color:#ff;
margin:auto;
}
#cabecera{
width:700px;
height:100px;
}
#navegador{
background-image:url(imagenes/fondonav.gif);
padding:3px 10px 5px 10px;
border-top:1px solid #cc;
border-bottom:1px solid #cc;
}
#cuerpo{
width:480px;
margin-left:8px;
padding:12px 0px 10px 0px;
background-color:#ff;
}
#lateral{
width:200px;
background-color:#ebf2fe;
border-bottom:1px solid #cc;
border-left:1px solid #cc;
float:right;
}
.titlat{
background-color:#68729e;
color:#ff;
font-size:8pt;
text-transform:uppercase;
padding:7px 3px 7px 8px;
font-weight:normal;
letter-spacing:2px;
margin:0px 0px 8px 0px;
}
.cuerpolateral{
padding:5px 4px 13px 10px;
}
input{
font-size:8pt;
}
#fbuscar form{
margin-top:0px;
margin-bottom:0px;
}
Re: [Ovillo] El que no sabe es como el que no ve
Hola juan, Es un problema común al empezar a usar float, si no sabe donde acabar el float se sale de la capa que lo contiene, has de poner un clear. mas info en: http://css.maxdesign.com.au/floatutorial/index.htm y en concreto: http://css.maxdesign.com.au/floatutorial/clear.htm Y por cierto, Firefox lo hace bien. Aunque parezca raro en este caso. Espero ser de utilidad :D jrc Es CSS me va a volver loco. jrc No encuentro explicacion a jrc http://kioscoelcoso.iespana.es/ jrc por mas que busco jrc En ff y en netscape se escapa el div lateral del div contenido por jrc debajo, a pesar de estar anidado uno en el otro jrc Os pego el codigo HTML Saludos. _ Todo lo que no aprendí, no se me ha olvidado. _ ___ 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] El que no sabe es como el que no ve
Raúl Martín escribió: Hola juan, Es un problema común al empezar a usar float, si no sabe donde acabar el float se sale de la capa que lo contiene, has de poner un clear. mas info en: http://css.maxdesign.com.au/floatutorial/index.htm y en concreto: http://css.maxdesign.com.au/floatutorial/clear.htm Y por cierto, Firefox lo hace bien. Aunque parezca raro en este caso. Efectivamente, aquí dejo la especificación http://www.sidar.org/recur/desdi/traduc/es/css/visuren.html#float-position -- 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] El que no sabe es como el que no ve
Es verdad, el que no sabe es como el que no ve... y cieguito estás.
Miguel Flores Franco
Pixelperu
Arte, Diseño, Web y Teletrabajo
http://www.pixelperu.com
Cel.: (1) 9330 8572 | Telf.: (1) 567 7475
MSN: [EMAIL PROTECTED]
SPYKE ID: pixelperu
- Original Message -
From: juan romero cruz [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, October 13, 2005 1:12 PM
Subject: [Ovillo] El que no sabe es como el que no ve
Es CSS me va a volver loco.
No encuentro explicacion a
http://kioscoelcoso.iespana.es/
por mas que busco
En ff y en netscape se escapa el div lateral del div contenido por
debajo, a pesar de estar anidado uno en el otro
Os pego el codigo HTML
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
titleLA WEB DEL INVIERNO/title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
link rel=stylesheet href=estilosDesarrolloWeb.css
/head
body
div id=contenedor
div id=cabeceraimg src=imagenes/cabecera.jpg alt=la web del
invierno/div
div id=navegador
a href=# class=enlacenavPortada/a |
a href=# class=enlacenavInvierno/a |
a href=# class=enlacenavDiciembre a Marzo/a |
a href=# class=enlacenavLa Chimenea /a |
a href=# class=enlacenavDeportes de Inviernos/a|
a href=# class=enlacenavContactos/a
/div
div id=lateral
h2 class=titlatbuscar/h2
div id=fbuscar class=cuerpolateral
form action= method=post
div id=campotextoinput type=text name=criterio/div
div id=botonbuscarinput name=busca type=image
src=imagenes/go.gif /div
div class=radio nowrapinput type=radio name=op
value=1En la Web de Invierno/div
div class=radioinput type=radio name=op value=2En
toda la Web/div
/form
/div
h2 class=titlatregistro/h2
div id=registro class=cuerpolateral
a href=#registrese con nosotro/a y obtenga muchas ventajas
/div
h2 class=titlatotras informaciones/h2
div id=otras class=cuerpolateral
ul
lia href=#Quienes somos/a/li
lia href=#Nuestra mision/a/li
lia href=#Agenda de Eventos/a/li
/ul
/div
/div
div id=cuerpo
h1Titulo de la pagina/h1
p
En este articulo vamos a conocer la maquetacion de paginas de
estilo en cascada(CSS).
Veremos como realizar este tipo de maquetacion, junto con algunas
ventajas e inconvenientes
Para muchos sera todavia un campo por explorar.Aunque no vamos a
entrar en grandes detalles, vamos
a intentar dar a conocer la maquetacion con CSS para cubrir la
posible lagana por parte del lector
En capitulo sucesivos ampliaremos la informacion y ofreceremos
tutoriales mas practicos.
/p
p
Como se ha podido aprender en el Manual de CSS,las hojas de estilo
en cascada ayudan a separar el
contenido de la forma, es decir...
/p
div id=navabajo
a href=#Volver/a |
a href=#Portada/a |
a href=#Mapa del Sitio/a |
/div
/div
/div
/body
/html
el codigo CSS
/* CSS Document */
body{ background-image: url(imagenes/fondo.gif);
font:8pt;
font:Verdana, Arial, Helvetica, sans-serif;
color:#66;
margin:20px 0px 20px 0px;
text-align:center;
}
#contenedor{
text-align:left;
width:700px;
background-color:#ff;
margin:auto;
}
#cabecera{
width:700px;
height:100px;
}
#navegador{
background-image:url(imagenes/fondonav.gif);
padding:3px 10px 5px 10px;
border-top:1px solid #cc;
border-bottom:1px solid #cc;
}
#cuerpo{
width:480px;
margin-left:8px;
padding:12px 0px 10px 0px;
background-color:#ff;
}
#lateral{
width:200px;
background-color:#ebf2fe;
border-bottom:1px solid #cc;
border-left:1px solid #cc;
float:right;
}
.titlat{
background-color:#68729e;
color:#ff;
font-size:8pt;
text-transform:uppercase;
padding:7px 3px 7px 8px;
font-weight:normal;
letter-spacing:2px;
margin:0px 0px 8px 0px;
}
.cuerpolateral{
padding:5px 4px 13px 10px;
}
input{
font-size:8pt;
}
#fbuscar form{
margin-top:0px;
margin-bottom:0px;
}
#campotexto{
float:left;
}
#campotexto imput{
width:100px;
}
#botonbuscar{
padding-top:3px;
padding-left:106px;
}
#botonbuscar imput{
border:0px none;
}
.radio{
clear:both;
}
#otras ul{
margin:5px 10px 0px 0px;
padding:0px 0px 0px 0px;
list-style:none;
}
#otras li{
padding-left:14px;
background:transparent url(imagenes/bullet.gif)0 2px no-repeat;
margin-bottom:10px;
}
h1{
font-size:18px;
}
#navavajo{
font-weight:bold;
}
a.enlacenav a.enlacenav:VISITED a.enlacenav:ACTIVE a.enlacenav:FOCUS
a.enlacenav:LINK¨{
color:#494E6B;
}
A.enlacenav:HOVER{
color:#00CC00;
}
Seguro que algo hago mal pero... que??
___
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
__
Renovamos el Correo Yahoo!
Nuevos servicios, más seguridad
http://correo.yahoo.es
___
Lista de distribución Ovillo
Para
Re: [Ovillo] El que no sabe es como el que no ve
Miguel , como estas? aqui de Chosica.
Mira te recomiendo que cuando te embarques en un proyecto, tengas presente
que no todos los navegadores, intrepretan correctamente CSS, creoi que eso
tu lo sabes.
El mas completo es FireFox, asi que debes de elegir que usar, te envio este
enlace que se que te sera de mucha utilidad:
http://www.csscreator.com/attributes/
Saludos
El día 13/10/05, Pixelperu [EMAIL PROTECTED] escribió:
Es verdad, el que no sabe es como el que no ve... y cieguito estás.
Miguel Flores Franco
Pixelperu
Arte, Diseño, Web y Teletrabajo
http://www.pixelperu.com
Cel.: (1) 9330 8572 | Telf.: (1) 567 7475
MSN: [EMAIL PROTECTED]
SPYKE ID: pixelperu
- Original Message -
From: juan romero cruz [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, October 13, 2005 1:12 PM
Subject: [Ovillo] El que no sabe es como el que no ve
Es CSS me va a volver loco.
No encuentro explicacion a
http://kioscoelcoso.iespana.es/
por mas que busco
En ff y en netscape se escapa el div lateral del div contenido por
debajo, a pesar de estar anidado uno en el otro
Os pego el codigo HTML
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
titleLA WEB DEL INVIERNO/title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
link rel=stylesheet href=estilosDesarrolloWeb.css
/head
body
div id=contenedor
div id=cabeceraimg src=imagenes/cabecera.jpg alt=la web del
invierno/div
div id=navegador
a href=# class=enlacenavPortada/a |
a href=# class=enlacenavInvierno/a |
a href=# class=enlacenavDiciembre a Marzo/a |
a href=# class=enlacenavLa Chimenea /a |
a href=# class=enlacenavDeportes de Inviernos/a|
a href=# class=enlacenavContactos/a
/div
div id=lateral
h2 class=titlatbuscar/h2
div id=fbuscar class=cuerpolateral
form action= method=post
div id=campotextoinput type=text name=criterio/div
div id=botonbuscarinput name=busca type=image
src=imagenes/go.gif /div
div class=radio nowrapinput type=radio name=op
value=1En la Web de Invierno/div
div class=radioinput type=radio name=op value=2En
toda la Web/div
/form
/div
h2 class=titlatregistro/h2
div id=registro class=cuerpolateral
a href=#registrese con nosotro/a y obtenga muchas ventajas
/div
h2 class=titlatotras informaciones/h2
div id=otras class=cuerpolateral
ul
lia href=#Quienes somos/a/li
lia href=#Nuestra mision/a/li
lia href=#Agenda de Eventos/a/li
/ul
/div
/div
div id=cuerpo
h1Titulo de la pagina/h1
p
En este articulo vamos a conocer la maquetacion de paginas de
estilo en cascada(CSS).
Veremos como realizar este tipo de maquetacion, junto con algunas
ventajas e inconvenientes
Para muchos sera todavia un campo por explorar.Aunque no vamos a
entrar en grandes detalles, vamos
a intentar dar a conocer la maquetacion con CSS para cubrir la
posible lagana por parte del lector
En capitulo sucesivos ampliaremos la informacion y ofreceremos
tutoriales mas practicos.
/p
p
Como se ha podido aprender en el Manual de CSS,las hojas de estilo
en cascada ayudan a separar el
contenido de la forma, es decir...
/p
div id=navabajo
a href=#Volver/a |
a href=#Portada/a |
a href=#Mapa del Sitio/a |
/div
/div
/div
/body
/html
el codigo CSS
/* CSS Document */
body{ background-image: url(imagenes/fondo.gif);
font:8pt;
font:Verdana, Arial, Helvetica, sans-serif;
color:#66;
margin:20px 0px 20px 0px;
text-align:center;
}
#contenedor{
text-align:left;
width:700px;
background-color:#ff;
margin:auto;
}
#cabecera{
width:700px;
height:100px;
}
#navegador{
background-image:url(imagenes/fondonav.gif);
padding:3px 10px 5px 10px;
border-top:1px solid #cc;
border-bottom:1px solid #cc;
}
#cuerpo{
width:480px;
margin-left:8px;
padding:12px 0px 10px 0px;
background-color:#ff;
}
#lateral{
width:200px;
background-color:#ebf2fe;
border-bottom:1px solid #cc;
border-left:1px solid #cc;
float:right;
}
.titlat{
background-color:#68729e;
color:#ff;
font-size:8pt;
text-transform:uppercase;
padding:7px 3px 7px 8px;
font-weight:normal;
letter-spacing:2px;
margin:0px 0px 8px 0px;
}
.cuerpolateral{
padding:5px 4px 13px 10px;
}
input{
font-size:8pt;
}
#fbuscar form{
margin-top:0px;
margin-bottom:0px;
}
#campotexto{
float:left;
}
#campotexto imput{
width:100px;
}
#botonbuscar{
padding-top:3px;
padding-left:106px;
}
#botonbuscar imput{
border:0px none;
}
.radio{
clear:both;
}
#otras ul{
margin:5px 10px 0px 0px;
padding:0px 0px 0px 0px;
list-style:none;
}
#otras li{
padding-left:14px;
background:transparent url(imagenes/bullet.gif)0 2px no-repeat;
margin-bottom:10px;
}
h1{
font-size:18px;
}
#navavajo{
font-weight:bold;
}
a.enlacenav a.enlacenav:VISITED a.enlacenav:ACTIVE a.enlacenav:FOCUS
Re: [Ovillo] El que no sabe es como el que no ve
Miguel, para decir eso mejor no digas nada, o al menos aporta algo
interesante...
Juan, así a primeras, es posible que sea simplemente porque el
contenido del div lateral es mayor? Al tener más texto tiende a tirar
hacia abajo.
En safari también lo veo igual...
Diana Hervás Castillo
www.trozosdetiempo.net
El 13/10/2005, a las 23:03, Pixelperu escribió:
Es verdad, el que no sabe es como el que no ve... y cieguito estás.
Miguel Flores Franco
Pixelperu
Arte, Diseño, Web y Teletrabajo
http://www.pixelperu.com
Cel.: (1) 9330 8572 | Telf.: (1) 567 7475
MSN: [EMAIL PROTECTED]
SPYKE ID: pixelperu
- Original Message - From: juan romero cruz
[EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, October 13, 2005 1:12 PM
Subject: [Ovillo] El que no sabe es como el que no ve
Es CSS me va a volver loco.
No encuentro explicacion a
http://kioscoelcoso.iespana.es/
por mas que busco
En ff y en netscape se escapa el div lateral del div contenido por
debajo, a pesar de estar anidado uno en el otro
Os pego el codigo HTML
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
titleLA WEB DEL INVIERNO/title
meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1
link rel=stylesheet href=estilosDesarrolloWeb.css
/head
body
div id=contenedor
div id=cabeceraimg src=imagenes/cabecera.jpg alt=la web del
invierno/div
div id=navegador
a href=# class=enlacenavPortada/a |
a href=# class=enlacenavInvierno/a |
a href=# class=enlacenavDiciembre a Marzo/a |
a href=# class=enlacenavLa Chimenea /a |
a href=# class=enlacenavDeportes de Inviernos/a|
a href=# class=enlacenavContactos/a
/div
div id=lateral
h2 class=titlatbuscar/h2
div id=fbuscar class=cuerpolateral
form action= method=post
div id=campotextoinput type=text name=criterio/div
div id=botonbuscarinput name=busca type=image
src=imagenes/go.gif /div
div class=radio nowrapinput type=radio name=op
value=1En la Web de Invierno/div
div class=radioinput type=radio name=op value=2En
toda la Web/div
/form
/div
h2 class=titlatregistro/h2
div id=registro class=cuerpolateral
a href=#registrese con nosotro/a y obtenga muchas ventajas
/div
h2 class=titlatotras informaciones/h2
div id=otras class=cuerpolateral
ul
lia href=#Quienes somos/a/li
lia href=#Nuestra mision/a/li
lia href=#Agenda de Eventos/a/li
/ul
/div
/div
div id=cuerpo
h1Titulo de la pagina/h1
p
En este articulo vamos a conocer la maquetacion de paginas de
estilo en cascada(CSS).
Veremos como realizar este tipo de maquetacion, junto con algunas
ventajas e inconvenientes
Para muchos sera todavia un campo por explorar.Aunque no vamos a
entrar en grandes detalles, vamos
a intentar dar a conocer la maquetacion con CSS para cubrir la
posible lagana por parte del lector
En capitulo sucesivos ampliaremos la informacion y ofreceremos
tutoriales mas practicos.
/p
p
Como se ha podido aprender en el Manual de CSS,las hojas de estilo
en cascada ayudan a separar el
contenido de la forma, es decir...
/p
div id=navabajo
a href=#Volver/a |
a href=#Portada/a |
a href=#Mapa del Sitio/a |
/div
/div
/div
/body
/html
el codigo CSS
/* CSS Document */
body{ background-image: url(imagenes/fondo.gif);
font:8pt;
font:Verdana, Arial, Helvetica, sans-serif;
color:#66;
margin:20px 0px 20px 0px;
text-align:center;
}
#contenedor{
text-align:left;
width:700px;
background-color:#ff;
margin:auto;
}
#cabecera{
width:700px;
height:100px;
}
#navegador{
background-image:url(imagenes/fondonav.gif);
padding:3px 10px 5px 10px;
border-top:1px solid #cc;
border-bottom:1px solid #cc;
}
#cuerpo{
width:480px;
margin-left:8px;
padding:12px 0px 10px 0px;
background-color:#ff;
}
#lateral{
width:200px;
background-color:#ebf2fe;
border-bottom:1px solid #cc;
border-left:1px solid #cc;
float:right;
}
.titlat{
background-color:#68729e;
color:#ff;
font-size:8pt;
text-transform:uppercase;
padding:7px 3px 7px 8px;
font-weight:normal;
letter-spacing:2px;
margin:0px 0px 8px 0px;
}
.cuerpolateral{
padding:5px 4px 13px 10px;
}
input{
font-size:8pt;
}
#fbuscar form{
margin-top:0px;
margin-bottom:0px;
}
#campotexto{
float:left;
}
#campotexto imput{
width:100px;
}
#botonbuscar{
padding-top:3px;
padding-left:106px;
}
#botonbuscar imput{
border:0px none;
}
.radio{
clear:both;
}
#otras ul{
margin:5px 10px 0px 0px;
padding:0px 0px 0px 0px;
list-style:none;
}
#otras li{
padding-left:14px;
background:transparent url(imagenes/bullet.gif)0 2px no-repeat;
margin-bottom:10px;
}
h1{
font-size:18px;
}
#navavajo{
font-weight:bold;
}
a.enlacenav a.enlacenav:VISITED a.enlacenav:ACTIVE a.enlacenav:FOCUS
a.enlacenav:LINK¨{
color:#494E6B;
}
A.enlacenav:HOVER{
color:#00CC00;
}
Seguro que algo hago mal pero... que??
___
Lista de distribución
Re: [Ovillo] El que no sabe es como el que no ve
El 13/10/05, Diana Hervás Castillo[EMAIL PROTECTED] escribió:
Miguel, para decir eso mejor no digas nada, o al menos aporta algo
interesante...
Juan, así a primeras, es posible que sea simplemente porque el
contenido del div lateral es mayor? Al tener más texto tiende a tirar
hacia abajo.
En safari también lo veo igual...
si, asi es, pero en IE tira del contenedor y lo adapta al tamaño
necesario para que quepa el lateral y en ff el lateral se sale
desbordado hacia abajo.
En teoria el contenedor, al ser el div primero y todos los demas estar
anidados en el, deberia adaptarse al contenido, como así lo hace el
IE, opera pero no es asi, y no comprendo por que. Yo no necesito
arreglarlo, ya que esto es solo un ejercicio, pero si tengo que
comprender el por que, para poder solucionar situaciones reales cuando
se prensenten.
---
Diana Hervás Castillo
www.trozosdetiempo.net
El 13/10/2005, a las 23:03, Pixelperu escribió:
Es verdad, el que no sabe es como el que no ve... y cieguito estás.
Miguel Flores Franco
Pixelperu
Arte, Diseño, Web y Teletrabajo
http://www.pixelperu.com
Cel.: (1) 9330 8572 | Telf.: (1) 567 7475
MSN: [EMAIL PROTECTED]
SPYKE ID: pixelperu
- Original Message - From: juan romero cruz
[EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, October 13, 2005 1:12 PM
Subject: [Ovillo] El que no sabe es como el que no ve
Es CSS me va a volver loco.
No encuentro explicacion a
http://kioscoelcoso.iespana.es/
por mas que busco
En ff y en netscape se escapa el div lateral del div contenido por
debajo, a pesar de estar anidado uno en el otro
Os pego el codigo HTML
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
titleLA WEB DEL INVIERNO/title
meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1
link rel=stylesheet href=estilosDesarrolloWeb.css
/head
body
div id=contenedor
div id=cabeceraimg src=imagenes/cabecera.jpg alt=la web del
invierno/div
div id=navegador
a href=# class=enlacenavPortada/a |
a href=# class=enlacenavInvierno/a |
a href=# class=enlacenavDiciembre a Marzo/a |
a href=# class=enlacenavLa Chimenea /a |
a href=# class=enlacenavDeportes de Inviernos/a|
a href=# class=enlacenavContactos/a
/div
div id=lateral
h2 class=titlatbuscar/h2
div id=fbuscar class=cuerpolateral
form action= method=post
div id=campotextoinput type=text name=criterio/div
div id=botonbuscarinput name=busca type=image
src=imagenes/go.gif /div
div class=radio nowrapinput type=radio name=op
value=1En la Web de Invierno/div
div class=radioinput type=radio name=op value=2En
toda la Web/div
/form
/div
h2 class=titlatregistro/h2
div id=registro class=cuerpolateral
a href=#registrese con nosotro/a y obtenga muchas ventajas
/div
h2 class=titlatotras informaciones/h2
div id=otras class=cuerpolateral
ul
lia href=#Quienes somos/a/li
lia href=#Nuestra mision/a/li
lia href=#Agenda de Eventos/a/li
/ul
/div
/div
div id=cuerpo
h1Titulo de la pagina/h1
p
En este articulo vamos a conocer la maquetacion de paginas de
estilo en cascada(CSS).
Veremos como realizar este tipo de maquetacion, junto con algunas
ventajas e inconvenientes
Para muchos sera todavia un campo por explorar.Aunque no vamos a
entrar en grandes detalles, vamos
a intentar dar a conocer la maquetacion con CSS para cubrir la
posible lagana por parte del lector
En capitulo sucesivos ampliaremos la informacion y ofreceremos
tutoriales mas practicos.
/p
p
Como se ha podido aprender en el Manual de CSS,las hojas de estilo
en cascada ayudan a separar el
contenido de la forma, es decir...
/p
div id=navabajo
a href=#Volver/a |
a href=#Portada/a |
a href=#Mapa del Sitio/a |
/div
/div
/div
/body
/html
el codigo CSS
/* CSS Document */
body{ background-image: url(imagenes/fondo.gif);
font:8pt;
font:Verdana, Arial, Helvetica, sans-serif;
color:#66;
margin:20px 0px 20px 0px;
text-align:center;
}
#contenedor{
text-align:left;
width:700px;
background-color:#ff;
margin:auto;
}
#cabecera{
width:700px;
height:100px;
}
#navegador{
background-image:url(imagenes/fondonav.gif);
padding:3px 10px 5px 10px;
border-top:1px solid #cc;
border-bottom:1px solid #cc;
}
#cuerpo{
width:480px;
margin-left:8px;
padding:12px 0px 10px 0px;
background-color:#ff;
}
#lateral{
width:200px;
background-color:#ebf2fe;
border-bottom:1px solid #cc;
border-left:1px solid #cc;
float:right;
}
.titlat{
background-color:#68729e;
color:#ff;
font-size:8pt;
text-transform:uppercase;
padding:7px 3px 7px
Re: [Ovillo] El que no sabe es como el que no ve
On 14/10/05, juan romero cruz [EMAIL PROTECTED] wrote: En teoria el contenedor, al ser el div primero y todos los demas estar anidados en el, deberia adaptarse al contenido, como así lo hace el IE, opera pero no es asi, y no comprendo por que. Yo no necesito arreglarlo, ya que esto es solo un ejercicio, pero si tengo que comprender el por que, para poder solucionar situaciones reales cuando se prensenten. No lo entiendo, Raúl Martín ya te lo ha explicado. ¿No te ha llegado su mail? Fue la primera respuesta. Y por favor, eliminad los otros mensajes al responder. -- Manuel a veces :) a veces :( pero siempre trabajando duro para Simplelógica: apariencia, experiencia y comunicación en la web. http://simplelogica.net # (+34) 985 22 12 65 ¡Ah! y escribiendo en Logicola: http://logicola.simplelogica.net ___ 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] El que no sabe es como el que no ve
juan romero cruz escribió: El 13/10/05, Diana Hervás Castillo[EMAIL PROTECTED] escribió: Miguel, para decir eso mejor no digas nada, o al menos aporta algo interesante... Juan, así a primeras, es posible que sea simplemente porque el contenido del div lateral es mayor? Al tener más texto tiende a tirar hacia abajo. En safari también lo veo igual... si, asi es, pero en IE tira del contenedor y lo adapta al tamaño necesario para que quepa el lateral y en ff el lateral se sale desbordado hacia abajo. En teoria el contenedor, al ser el div primero y todos los demas estar anidados en el, deberia adaptarse al contenido, como así lo hace el IE, opera pero no es asi, y no comprendo por que. Yo no necesito arreglarlo, ya que esto es solo un ejercicio, pero si tengo que comprender el por que, para poder solucionar situaciones reales cuando se prensenten. Relee los correos de Raúl Martín y el mio ;-) El Explorer es el que lo hace mal ya que un elemento que flota sale del flujo. -- 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
