Discussion:
[CSS-DMW] Problema raro
(demasiado antiguo para responder)
Luisete
2008-05-21 11:40:59 UTC
Permalink
Hola a todos, me pasa una cosa muy curiosa, he querido darle un estilo a una
lista de datos, y he cambiado el tipico puntito del <LI> por una imagen, lo
que pasa que la imagen solamente sale cuando entramos por primera vez en la
pagina, si actualizamos el grafico desaparece. ¿Le ha pasado esto a alguien?
Pongo el estilo para que le echéis un ojo a ver si véis algo raro:

<style type="text/css">
<!--
body {
margin-top: 0px;
margin-bottom: 0px;
}

ul#menuder {
display:block;
border: 0;
padding: 0;
width: 180px;
list-style-image: url(img/point.gif);
}

ul#menuder li {
display: block;
}

ul#menuder li a {
display: block;
height: 23px;
font-family: "Trebuchet MS", Arial;
font-size: 1.2em;
border-bottom: 1px dotted #CCCCCC;
padding: 3px 12px 0px 12px;
border-right: none;
color: #666666;
font-size: 14px;
text-align: left;
text-decoration: none;
font-weight: normal;
cursor: pointer;
}

ul#menuder li a:hover {
text-decoration: none;
color: #FF9900;
}


-->
</style>

Gracias de anemano
Un saludo
Luis
Miguel
2008-05-22 17:52:52 UTC
Permalink
Hola.
Creo que has cometido algunos errores. Para usar imagenes como estilo de
listas es mejor usar el método "background-image" y posicionar esta con
"background-position".La imagen debe ser colocada en la etiqueta "li".
Prueba a cambiar tu codigo por este otro:

<style type="text/css">
<!--
body {
margin-top: 0px;
margin-bottom: 0px;
}
#menuder{
width:180px;
border: 0;
padding: 0;
}

#menuder ul{
border: 0;
padding: 0;
list-style:none;
}

#menuder li {
margin:0px;
margin-left:20px;
border-bottom: 1px dotted #CCCCCC;
background-image:url(img/point.gif);
background-repeat:no-repeat;
background-position: 1px 10px; /*1px distancia izda. 10px distancia
superior */
}

#menuder li a {
display: block;
height: 23px;
font-family: "Trebuchet MS", Arial;
font-size: 1.2em;
padding: 3px 12px 0px 12px;
border-right: none;
color: #666666;
font-size: 14px;
text-align: left;
text-decoration: none;
font-weight: normal;
cursor: pointer;
}

#menuder li a:hover {
text-decoration: none;
color: #FF9900;
}
-->
</style>

El codigo seria:
<body>
<div id="menuder">
<ul>
<li><a href="#">lista 1</a></li>
<li><a href="#">lista 2</a></li>
<li><a href="#">lista 3</a></li>
<li><a href="#">lista 4</a></li>
</ul>
</div>
</body>

Un saludo
Post by Luisete
Hola a todos, me pasa una cosa muy curiosa, he querido darle un estilo a
una lista de datos, y he cambiado el tipico puntito del <LI> por una
imagen, lo que pasa que la imagen solamente sale cuando entramos por
primera vez en la pagina, si actualizamos el grafico desaparece. ¿Le ha
pasado esto a alguien? Pongo el estilo para que le echéis un ojo a ver si
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-bottom: 0px;
}
ul#menuder {
display:block;
border: 0;
padding: 0;
width: 180px;
list-style-image: url(img/point.gif);
}
ul#menuder li {
display: block;
}
ul#menuder li a {
display: block;
height: 23px;
font-family: "Trebuchet MS", Arial;
font-size: 1.2em;
border-bottom: 1px dotted #CCCCCC;
padding: 3px 12px 0px 12px;
border-right: none;
color: #666666;
font-size: 14px;
text-align: left;
text-decoration: none;
font-weight: normal;
cursor: pointer;
}
ul#menuder li a:hover {
text-decoration: none;
color: #FF9900;
}
-->
</style>
Gracias de anemano
Un saludo
Luis
Luisete
2008-05-23 10:21:19 UTC
Permalink
Muchas gracias Miguel, funciona perfectamente lo único que digamos que entra
en conflicto con otro estilo del a hover, pero bueno ahora lo solucionaré

Gracias!

Un saludo
Lui7
Post by Miguel
Hola.
Creo que has cometido algunos errores. Para usar imagenes como estilo de
listas es mejor usar el método "background-image" y posicionar esta con
"background-position".La imagen debe ser colocada en la etiqueta "li".
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-bottom: 0px;
}
#menuder{
width:180px;
border: 0;
padding: 0;
}
#menuder ul{
border: 0;
padding: 0;
list-style:none;
}
#menuder li {
margin:0px;
margin-left:20px;
border-bottom: 1px dotted #CCCCCC;
background-image:url(img/point.gif);
background-repeat:no-repeat;
background-position: 1px 10px; /*1px distancia izda. 10px distancia
superior */
}
#menuder li a {
display: block;
height: 23px;
font-family: "Trebuchet MS", Arial;
font-size: 1.2em;
padding: 3px 12px 0px 12px;
border-right: none;
color: #666666;
font-size: 14px;
text-align: left;
text-decoration: none;
font-weight: normal;
cursor: pointer;
}
#menuder li a:hover {
text-decoration: none;
color: #FF9900;
}
-->
</style>
<body>
<div id="menuder">
<ul>
<li><a href="#">lista 1</a></li>
<li><a href="#">lista 2</a></li>
<li><a href="#">lista 3</a></li>
<li><a href="#">lista 4</a></li>
</ul>
</div>
</body>
Un saludo
Post by Luisete
Hola a todos, me pasa una cosa muy curiosa, he querido darle un estilo a
una lista de datos, y he cambiado el tipico puntito del <LI> por una
imagen, lo que pasa que la imagen solamente sale cuando entramos por
primera vez en la pagina, si actualizamos el grafico desaparece. ¿Le ha
pasado esto a alguien? Pongo el estilo para que le echéis un ojo a ver si
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-bottom: 0px;
}
ul#menuder {
display:block;
border: 0;
padding: 0;
width: 180px;
list-style-image: url(img/point.gif);
}
ul#menuder li {
display: block;
}
ul#menuder li a {
display: block;
height: 23px;
font-family: "Trebuchet MS", Arial;
font-size: 1.2em;
border-bottom: 1px dotted #CCCCCC;
padding: 3px 12px 0px 12px;
border-right: none;
color: #666666;
font-size: 14px;
text-align: left;
text-decoration: none;
font-weight: normal;
cursor: pointer;
}
ul#menuder li a:hover {
text-decoration: none;
color: #FF9900;
}
-->
</style>
Gracias de anemano
Un saludo
Luis
CMacias
2008-05-24 18:13:51 UTC
Permalink
Yo el list-style-image se lo pondría al <li> y no al <ul>.
Es más, yo suelo poner "list-style: none" y añado una imagen como fondo
al <li> y evidentemente un padding algo mayor al ancho de la imagen de
fondo. De esta manera colocas el gráfico en el lugar que tu quieres.
Post by Luisete
Hola a todos, me pasa una cosa muy curiosa, he querido darle un estilo a una
lista de datos, y he cambiado el tipico puntito del <LI> por una imagen, lo
que pasa que la imagen solamente sale cuando entramos por primera vez en la
pagina, si actualizamos el grafico desaparece. ¿Le ha pasado esto a alguien?
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-bottom: 0px;
}
ul#menuder {
display:block;
border: 0;
padding: 0;
width: 180px;
list-style-image: url(img/point.gif);
}
ul#menuder li {
display: block;
}
ul#menuder li a {
display: block;
height: 23px;
font-family: "Trebuchet MS", Arial;
font-size: 1.2em;
border-bottom: 1px dotted #CCCCCC;
padding: 3px 12px 0px 12px;
border-right: none;
color: #666666;
font-size: 14px;
text-align: left;
text-decoration: none;
font-weight: normal;
cursor: pointer;
}
ul#menuder li a:hover {
text-decoration: none;
color: #FF9900;
}
-->
</style>
Gracias de anemano
Un saludo
Luis
Anuack Technology de Colombia
2008-05-25 04:10:27 UTC
Permalink
Un pequeño dato

Colócale la /

Antes
url(img/point.gif);

Ahora
url(/img/point.gif);

También puede variar bastante

Saludos desde Colombia

wwww.anuack.com
Post by Luisete
Hola a todos, me pasa una cosa muy curiosa, he querido darle un estilo a
una lista de datos, y he cambiado el tipico puntito del <LI> por una
imagen, lo que pasa que la imagen solamente sale cuando entramos por
primera vez en la pagina, si actualizamos el grafico desaparece. ¿Le ha
pasado esto a alguien? Pongo el estilo para que le echéis un ojo a ver si
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-bottom: 0px;
}
ul#menuder {
display:block;
border: 0;
padding: 0;
width: 180px;
list-style-image: url(img/point.gif);
}
ul#menuder li {
display: block;
}
ul#menuder li a {
display: block;
height: 23px;
font-family: "Trebuchet MS", Arial;
font-size: 1.2em;
border-bottom: 1px dotted #CCCCCC;
padding: 3px 12px 0px 12px;
border-right: none;
color: #666666;
font-size: 14px;
text-align: left;
text-decoration: none;
font-weight: normal;
cursor: pointer;
}
ul#menuder li a:hover {
text-decoration: none;
color: #FF9900;
}
-->
</style>
Gracias de anemano
Un saludo
Luis
Loading...