Re: [Ovillo] dimensiones de listas ul li ul
Las WCAG/WAI hablan de unidades relativas (porcentajes y em) frente a
unidades absolutas (pt o cm). Puedes usar ambas según tus necesidades:
> http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/#tech-relative-units
> 3.4 Use relative rather than absolute units in markup language attribute
> values and style sheet property values. [Priority 2] For example, in CSS,
> use 'em' or percentage lengths rather than 'pt' or 'cm', which are absolute
> units.
2005/11/27, Alec R <[EMAIL PROTECTED]>:
>
> Gracias, parece que funciona pero... poniendo el porcentaje NO es un css
> válido porque se supone que la medida tiene que ser en EM? ¿Qué sabes de
> accesibilidad en este caso?
>
>
>
> >From: Fernando Gutierrez <[EMAIL PROTECTED]>
> >Reply-To: "Ovillo, la lista de CSS en castellano" <
> ovillo@lists.ovillo.org>
> >To: "Ovillo, la lista de CSS en castellano"
> >Subject: Re: [Ovillo] dimensiones de listas ul li ul
> >Date: Sat, 26 Nov 2005 22:49:09 +0100
> >
> >Usa width: 100%; en lugar de width: 12em; en ul#mainnav li a. Como has
> >reducido la fuente a 9px, los 12em de la lista azul no son igual a los
> 12em
> >de la lista principal.
> >--
> >_
> >Fernando Gutiérrez
> >http://ferguweb.tx.com.ru/
> >
> >
> >2005/11/26, Alec R <[EMAIL PROTECTED]>:
> > >
> > > Hola a todos,
> > >
> > > Alguno me podría decir qué tengo en el código para que la segunda
> lista
> >no
> > > ocupe todo el tamaño de la capa (12em). lo he conseguido con la
> primera
> > > list, pero la azúl es más pequeña. Quiero respetar el tamño de letra y
> >de
> > > capa (si la línea la sobrepasa que escriba dos líneas).
> > >
> > >
> > >
> > > Oo oo dddfffg ffg
> > > fdfdf
> > > pp ppn ppp
> > >
> > > ppp
> > > p ppp
> >ppp
> > > pp
> > >
> > > p
> > >
> > > t rr ee w
> > > ww w
> > > eee e g
> > > dd dd
> > > dd hh
> > > nn nn, nn yy y eh
> >gfgffggf
> > > rt fhgfhfh fghfghfh
> > > fghfghfhfh
> > >
> > >
> > > fghfghfgh
> > > fhfgh fghfh
> > > fhfhfh fghfghfgh
> > >
> > >
> > >
> > > #menus {
> > > margin: 0.5em 0em 0em 0em;
> > > float: left;
> > > width: 12em;
> > > height: auto;
> > > background-repeat: no-repeat;
> > > }
> > >
> > > #mPrincipal {
> > > float: left;
> > > width: 12em;
> > > height: auto;
> > > background-repeat: no-repeat;
> > > border-style: dotted;
> > > border-width: 0.05em;
> > > border-color: #99;
> > > }
> > >
> > > .invisible {display: none;}
> > >
> > > #listMenu{
> > > float: left;
> > > width: 12em;
> > > height: auto;
> > > background-repeat: no-repeat;
> > > }
> > >
> > >
> > > ul#mainnav {
> > > margin: 0;
> > > padding: 0;
> > > list-style: none;
> > > }
> > >
> > > ul#mainnav li ul {
> > > padding: 0;
> > > margin: 0;
> > > list-style: none;
> > > }
> > >
> > > ul#mainnav a {
> > > text-decoration: none;
> > > }
> > >
> > > ul#mainnav li a {
> > > display: block;
> > > width: 12em;
> > > margin: 0;
> > > padding: 0.1em 0em 0.1em 0em;
> > > background-image: url("pruebas/fotos/flechasMenu.jpg");
> > > background-repeat: no-repeat;
> > > background-position: 1% 20%;
> > > text-decoration: none;
> > > color: #44;
> > > background-color: #EAEAEA;
> > > }
> > >
> > > ul#mainnav li a:hover {
> > > display: block;
> > > width: 12em;
> > > margin: 0;
> > > padding: 0.1em 0em 0.1em 0em;
> > > background-image: url("pruebas/fotos/flechasMSecundario.jpg");
> > > background-repeat: no-repeat;
> > >
Re: [Ovillo] dimensiones de listas ul li ul
Gracias, parece que funciona pero... poniendo el porcentaje NO es un css
válido porque se supone que la medida tiene que ser en EM? ¿Qué sabes de
accesibilidad en este caso?
From: Fernando Gutierrez <[EMAIL PROTECTED]>
Reply-To: "Ovillo, la lista de CSS en castellano"
To: "Ovillo, la lista de CSS en castellano"
Subject: Re: [Ovillo] dimensiones de listas ul li ul
Date: Sat, 26 Nov 2005 22:49:09 +0100
Usa width: 100%; en lugar de width: 12em; en ul#mainnav li a. Como has
reducido la fuente a 9px, los 12em de la lista azul no son igual a los 12em
de la lista principal.
--
_
Fernando Gutiérrez
http://ferguweb.tx.com.ru/
2005/11/26, Alec R <[EMAIL PROTECTED]>:
>
> Hola a todos,
>
> Alguno me podría decir qué tengo en el código para que la segunda lista
no
> ocupe todo el tamaño de la capa (12em). lo he conseguido con la primera
> list, pero la azúl es más pequeña. Quiero respetar el tamño de letra y
de
> capa (si la línea la sobrepasa que escriba dos líneas).
>
>
>
> Oo oo dddfffg ffg
> fdfdf
> pp ppn ppp
>
> ppp
> p ppp
ppp
> pp
>
> p
>
> t rr ee w
> ww w
> eee e g
> dd dd
> dd hh
> nn nn, nn yy y eh
gfgffggf
> rt fhgfhfh fghfghfh
> fghfghfhfh
>
>
> fghfghfgh
> fhfgh fghfh
> fhfhfh fghfghfgh
>
>
>
> #menus {
> margin: 0.5em 0em 0em 0em;
> float: left;
> width: 12em;
> height: auto;
> background-repeat: no-repeat;
> }
>
> #mPrincipal {
> float: left;
> width: 12em;
> height: auto;
> background-repeat: no-repeat;
> border-style: dotted;
> border-width: 0.05em;
> border-color: #99;
> }
>
> .invisible {display: none;}
>
> #listMenu{
> float: left;
> width: 12em;
> height: auto;
> background-repeat: no-repeat;
> }
>
>
> ul#mainnav {
> margin: 0;
> padding: 0;
> list-style: none;
> }
>
> ul#mainnav li ul {
> padding: 0;
> margin: 0;
> list-style: none;
> }
>
> ul#mainnav a {
> text-decoration: none;
> }
>
> ul#mainnav li a {
> display: block;
> width: 12em;
> margin: 0;
> padding: 0.1em 0em 0.1em 0em;
> background-image: url("pruebas/fotos/flechasMenu.jpg");
> background-repeat: no-repeat;
> background-position: 1% 20%;
> text-decoration: none;
> color: #44;
> background-color: #EAEAEA;
> }
>
> ul#mainnav li a:hover {
> display: block;
> width: 12em;
> margin: 0;
> padding: 0.1em 0em 0.1em 0em;
> background-image: url("pruebas/fotos/flechasMSecundario.jpg");
> background-repeat: no-repeat;
> background-position: 1% 20%;
> text-decoration: none;
> color: #FF;
> background-color: #E00404;
> }
>
> ul#mainnav li a span {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 10px;
> display: block;
> /*width: 12em;*/
> margin: 0;
> padding: 0 0 0 1.5em;
> }
>
> ul#mainnav li li {
>
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 9px;
> background-image: none;
> padding: 0.1em 0em 0.1em 1.5em;
> margin: 0;
> border-bottom-style: dotted;
> border-bottom-width: 0.05em;
> border-bottom-color: #99;
> }
>
> ul#mainnav li li a {
> background-image: none;
>
> color: #3F3F3F;
> background-color: blue;
> margin: 0;
> padding: 0.2em 0em 0.2em 0em;
> }
>
> ul#mainnav li li a:hover {
> background-image: none;
> color: #E00404;
> background-color: #FF;
> margin: 0;
> padding: 0.2em 0em 0.2em 0em;
> }
>
>
> ul#mainnav li {
> margin-top: 1px;
> }
>
>
> ___
> 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
___
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] dimensiones de listas ul li ul
Usa width: 100%; en lugar de width: 12em; en ul#mainnav li a. Como has
reducido la fuente a 9px, los 12em de la lista azul no son igual a los 12em
de la lista principal.
--
_
Fernando Gutiérrez
http://ferguweb.tx.com.ru/
2005/11/26, Alec R <[EMAIL PROTECTED]>:
>
> Hola a todos,
>
> Alguno me podría decir qué tengo en el código para que la segunda lista no
> ocupe todo el tamaño de la capa (12em). lo he conseguido con la primera
> list, pero la azúl es más pequeña. Quiero respetar el tamño de letra y de
> capa (si la línea la sobrepasa que escriba dos líneas).
>
>
>
> Oo oo dddfffg ffg
> fdfdf
> pp ppn ppp
>
> ppp
> p ppp ppp
> pp
>
> p
>
> t rr ee w
> ww w
> eee e g
> dd dd
> dd hh
> nn nn, nn yy y eh gfgffggf
> rt fhgfhfh fghfghfh
> fghfghfhfh
>
>
> fghfghfgh
> fhfgh fghfh
> fhfhfh fghfghfgh
>
>
>
> #menus {
> margin: 0.5em 0em 0em 0em;
> float: left;
> width: 12em;
> height: auto;
> background-repeat: no-repeat;
> }
>
> #mPrincipal {
> float: left;
> width: 12em;
> height: auto;
> background-repeat: no-repeat;
> border-style: dotted;
> border-width: 0.05em;
> border-color: #99;
> }
>
> .invisible {display: none;}
>
> #listMenu{
> float: left;
> width: 12em;
> height: auto;
> background-repeat: no-repeat;
> }
>
>
> ul#mainnav {
> margin: 0;
> padding: 0;
> list-style: none;
> }
>
> ul#mainnav li ul {
> padding: 0;
> margin: 0;
> list-style: none;
> }
>
> ul#mainnav a {
> text-decoration: none;
> }
>
> ul#mainnav li a {
> display: block;
> width: 12em;
> margin: 0;
> padding: 0.1em 0em 0.1em 0em;
> background-image: url("pruebas/fotos/flechasMenu.jpg");
> background-repeat: no-repeat;
> background-position: 1% 20%;
> text-decoration: none;
> color: #44;
> background-color: #EAEAEA;
> }
>
> ul#mainnav li a:hover {
> display: block;
> width: 12em;
> margin: 0;
> padding: 0.1em 0em 0.1em 0em;
> background-image: url("pruebas/fotos/flechasMSecundario.jpg");
> background-repeat: no-repeat;
> background-position: 1% 20%;
> text-decoration: none;
> color: #FF;
> background-color: #E00404;
> }
>
> ul#mainnav li a span {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 10px;
> display: block;
> /*width: 12em;*/
> margin: 0;
> padding: 0 0 0 1.5em;
> }
>
> ul#mainnav li li {
>
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 9px;
> background-image: none;
> padding: 0.1em 0em 0.1em 1.5em;
> margin: 0;
> border-bottom-style: dotted;
> border-bottom-width: 0.05em;
> border-bottom-color: #99;
> }
>
> ul#mainnav li li a {
> background-image: none;
>
> color: #3F3F3F;
> background-color: blue;
> margin: 0;
> padding: 0.2em 0em 0.2em 0em;
> }
>
> ul#mainnav li li a:hover {
> background-image: none;
> color: #E00404;
> background-color: #FF;
> margin: 0;
> padding: 0.2em 0em 0.2em 0em;
> }
>
>
> ul#mainnav li {
> margin-top: 1px;
> }
>
>
> ___
> 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] dimensiones de listas ul li ul
Hola a todos,
Alguno me podría decir qué tengo en el código para que la segunda lista no
ocupe todo el tamaño de la capa (12em). lo he conseguido con la primera
list, pero la azúl es más pequeña. Quiero respetar el tamño de letra y de
capa (si la línea la sobrepasa que escriba dos líneas).
Oo oo dddfffg ffg
fdfdf
pp ppn ppp
ppp
p ppp ppp
pp
p
t rr ee w
ww w
eee e g
dd dd
dd hh
nn nn, nn yy y eh gfgffggf
rt fhgfhfh fghfghfh
fghfghfhfh
fghfghfgh
fhfgh fghfh
fhfhfh fghfghfgh
#menus {
margin: 0.5em 0em 0em 0em;
float: left;
width: 12em;
height: auto;
background-repeat: no-repeat;
}
#mPrincipal {
float: left;
width: 12em;
height: auto;
background-repeat: no-repeat;
border-style: dotted;
border-width: 0.05em;
border-color: #99;
}
.invisible {display: none;}
#listMenu{
float: left;
width: 12em;
height: auto;
background-repeat: no-repeat;
}
ul#mainnav {
margin: 0;
padding: 0;
list-style: none;
}
ul#mainnav li ul {
padding: 0;
margin: 0;
list-style: none;
}
ul#mainnav a {
text-decoration: none;
}
ul#mainnav li a {
display: block;
width: 12em;
margin: 0;
padding: 0.1em 0em 0.1em 0em;
background-image: url("pruebas/fotos/flechasMenu.jpg");
background-repeat: no-repeat;
background-position: 1% 20%;
text-decoration: none;
color: #44;
background-color: #EAEAEA;
}
ul#mainnav li a:hover {
display: block;
width: 12em;
margin: 0;
padding: 0.1em 0em 0.1em 0em;
background-image: url("pruebas/fotos/flechasMSecundario.jpg");
background-repeat: no-repeat;
background-position: 1% 20%;
text-decoration: none;
color: #FF;
background-color: #E00404;
}
ul#mainnav li a span {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
display: block;
/*width: 12em;*/
margin: 0;
padding: 0 0 0 1.5em;
}
ul#mainnav li li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
background-image: none;
padding: 0.1em 0em 0.1em 1.5em;
margin: 0;
border-bottom-style: dotted;
border-bottom-width: 0.05em;
border-bottom-color: #99;
}
ul#mainnav li li a {
background-image: none;
color: #3F3F3F;
background-color: blue;
margin: 0;
padding: 0.2em 0em 0.2em 0em;
}
ul#mainnav li li a:hover {
background-image: none;
color: #E00404;
background-color: #FF;
margin: 0;
padding: 0.2em 0em 0.2em 0em;
}
ul#mainnav li {
margin-top: 1px;
}
___
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
