[Ovillo] [OT] Concurso trampa sobre accesibilidad
Hola amigos una pagina web ha organizado un concurso sobre el dia mundial de internet. Existe la categoria de web mas accesible http://www.diadeinternet.es/contenidos/di_index.php3?body=premios_listartop10c=c03par=422910272 y si le echais un vistazo vereis que las paginas que estan en el TOP no son para nada accesibles, muchas de ellas (no las he repasado todas) tienen el css NO valido, 400 y pico errores HTML y algunas cerca de 600 o 900 errores de accesiblidad (TAW) Para colmo las bases de esta categoría no especifica para nada los criterios que valorará el jurado para nombrar la web mas accesible. Esto tiene un tufillo raro raro. Que opinais? ___ 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] Ver primero el contenido
Adrian Gomez Collantes wrote: Hola: Luego de presentar en este nuevo curso escolar mi web con un nuevo formato al maquetar a tres columnas según la propuesta de desarrolloweb.com me he fijado que en los navegadores a sólo texto me sale primero el cabezal, las columnas laterales y luego el contenido, he tratado de mover esto de forma tal que lo primero que me salga sea el cabezal y luego el contenido pero nada, me podrían dar alguna sugerencia? Tan simple como escribir el código del contenido, como lo llamas, inmediatamente después del de la cabecera. Luego, vía CSS, lo sitúas en el lugar que más te interese. De todos modos, parece más adecuado que el código esté tal y como nos cuentas. Simplemente poniendo un vínculo oculto (que sea visible sólo cuando se navega sin hojas de estilo o en navegadores 'sólo texto') para saltar la navegación, puedes conservar tu código actual. Saludos! -- /* Daniel Torres Burriel - www.torresburriel.com /* Web design - Usability consulting - IT Press /* More info bio: www.torresburriel.com/perfil/ /* GPG key: 0x43DB2AB7 ___ 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] [OT] Concurso trampa sobre accesibilidad
Jose Antonio Riquelme wrote: Hola amigos una pagina web ha organizado un concurso sobre el dia mundial de internet. Existe la categoria de web mas accesible http://www.diadeinternet.es/contenidos/di_index.php3?body=premios_listartop10c=c03par=422910272 y si le echais un vistazo vereis que las paginas que estan en el TOP no son para nada accesibles, muchas de ellas (no las he repasado todas) tienen el css NO valido, 400 y pico errores HTML y algunas cerca de 600 o 900 errores de accesiblidad (TAW) Para colmo las bases de esta categoría no especifica para nada los criterios que valorará el jurado para nombrar la web mas accesible. Esto tiene un tufillo raro raro. Que opinais? ___ 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 para variar, vergonzoso. Ni siquiera su propia página está decentemente codificada. xavier gonzalez. ___ 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] Ver primero el contenido
Bueno, creo que me voy por la opción del código oculto y gracias por la aclaración, saludos, Adrián Gómez Collantes http://www.16deabril.sld.cu No hay realidad que no nazca de un sueño -Original Message- From: Daniel Torres Burriel [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Date: Thu, 13 Oct 2005 09:18:46 +0200 Subject: Re: [Ovillo] Ver primero el contenido Adrian Gomez Collantes wrote: Hola: Luego de presentar en este nuevo curso escolar mi web con un nuevo formato al maquetar a tres columnas según la propuesta de desarrolloweb.com me he fijado que en los navegadores a sólo texto me sale primero el cabezal, las columnas laterales y luego el contenido, he tratado de mover esto de forma tal que lo primero que me salga sea el cabezal y luego el contenido pero nada, me podrían dar alguna sugerencia? Tan simple como escribir el código del contenido, como lo llamas, inmediatamente después del de la cabecera. Luego, vía CSS, lo sitúas en el lugar que más te interese. De todos modos, parece más adecuado que el código esté tal y como nos cuentas. Simplemente poniendo un vínculo oculto (que sea visible sólo cuando se navega sin hojas de estilo o en navegadores 'sólo texto') para saltar la navegación, puedes conservar tu código actual. Saludos! -- /* Daniel Torres Burriel - www.torresburriel.com /* Web design - Usability consulting - IT Press /* More info bio: www.torresburriel.com/perfil/ /* GPG key: 0x43DB2AB7 ___ 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 ___ 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] 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
[Ovillo] Oferta de empleo
Hola a todos, seré breve; en mi empresa buscan gente con conocimientos avanzados de: - Accesibilidad - Diseño y desarrollo de interfaces con estándares web: (X)HTML, CSS, Javascript Interesados mandarme un correo por favor. Perdon por la interrupción Un saludo Félix Zapata Berlinches Tanta Tecnología y Comunicación Grupo Onetec c/ Julián Camarillo 26 1º Of. 2 28037 Madrid Tel.: 91.440.10.40 Fax: 91.304.91.24 www.tantacom.com www.grupoonetec.com Este correo electrónico y, en su caso, cualquier fichero anexo al mismo, pueden contener información de carácter confidencial exclusivamente dirigida a la persona o entidad a la que se le envía. Queda prohibido cualquier uso indebido, revisión, retransmisión o diseminación del contenido por personas o entidades ajenas al destinatario. Si recibe usted este correo por error, le rogamos que nos lo comunique por la misma vía al remitente y proceda a borrar este material de todo ordenador. Gracias. ___ The information in this e-mail and in any attachments is confidential and solely for the attention and use of the named addressee(s). You are hereby notified that any distribution, copy or dissemination of this communication is prohibited without the prior written consent of the sender. If you received this in error and are not the formal receiver of this message please destroy it without making any digital or physical copy and inform the sender by e-mail of the reception of the present message. Thank you -Mensaje original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de roger Enviado el: miércoles, 05 de octubre de 2005 7:51 Para: Ovillo, la lista de CSS en castellano Asunto: [Ovillo] Programador CSS mini-spam. Aupa peña: Perdonen ustedes el spam, pero ando buscando trabajo: Ofrecesé programador PHP-MySQL y ASP-SQL-Server con conocimiento de CSS y accesibilidad, residente en Alava. Se aceptan ofertas de freelance. Gracias por vuestro tiempo. ___ 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 ___ 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
