Foros del Web » Creando para Internet » CSS »

Quitar los puntos negros de una lista de imágenes

Estas en el tema de Quitar los puntos negros de una lista de imágenes en el foro de CSS en Foros del Web. Hola. Un saludo a todos los miembros y visitantes del foro: He copiado un menú que había por ahí para hacer un pase de fotos ...
  #1 (permalink)  
Antiguo 22/07/2011, 17:31
 
Fecha de Ingreso: julio-2011
Ubicación: Salamanca
Mensajes: 9
Antigüedad: 6 años
Puntos: 0
Quitar los puntos negros de una lista de imágenes

Hola. Un saludo a todos los miembros y visitantes del foro:

He copiado un menú que había por ahí para hacer un pase de fotos (una lista de cuatro o cinco fotos nada más) y todo sale bien, excepto que me salen al final de las fotos unos puntos negros que no soy capaz de quitar.
Agradecería mucho vuestra ayuda, porque he probado a cambiar mil veces todo y ya no sé qué hacer.

Por cierto, con Internet Explorer no me ocurre eso, sólo ocurre con Mozilla Firefox y con Google Chrome.

He leído por ahí que hay que añadir algo parecido a esto: ul{list-style:none;}
Pero no sé dónde hay que añadirlo exactamente ni si funcionará así.


Éste es el código que tengo:
--------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0074)http://www.digitalicon.es/ejemplos/carrusel-efecto-fundido/carrusel-01.htm -->
<HTML lang=es xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>

<TITLE>pase-con-tabla</TITLE>

<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<br>
<br>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="740 HEIGHT="360" >
<tr>
<td WIDTH="30" HEIGHT="360"></td>
<td WIDTH="710" HEIGHT="360">
<STYLE type=text/css> *
{BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px;}

#diapos-on {POSITION: relative; WIDTH: 700px; HEIGHT: 350px; box-shadow: 0px 2px 30px #000}
#diapos-on LI {POSITION: absolute; LIST-STYLE-TYPE: none; WIDTH: 700px; HEIGHT: 350px; TOP: 0px; LIST-STYLE-IMAGE: none; LEFT: 0px}

#contador {MARGIN: 1em auto 0px; WIDTH: 700px}

#contador LI {LIST-STYLE-TYPE: none; WIDTH: 10px; FLOAT: left; HEIGHT: 10px; LIST-STYLE-IMAGE: none; MARGIN-RIGHT: 5px; -moz-box-shadow: 0 1px 4px #000; -webkit-box-shadow: 0 1px 4px #000; box-shadow: 0 1px 4px #000}

#contador LI A {TEXT-INDENT: -999em; WIDTH: 10px; DISPLAY: block; BACKGROUND: #f9d8e3; HEIGHT: 10px; OVERFLOW: hidden}

#contador LI A:focus {OUTLINE-STYLE: solid; OUTLINE-COLOR: #f9d8e3; OUTLINE-WIDTH: 1px}

#contador LI.actual A {BACKGROUND: #e6658e}
</STYLE>

<SCRIPT type=text/javascript
src="DP.js"></SCRIPT>

<SCRIPT type=text/javascript>
window.onload = DP.inicio;
</SCRIPT>

<META name=GENERATOR content="MSHTML 8.00.6001.18928">
</HEAD>

<UL id=diapos>
<LI><IMG src="01.jpg" width=700 height=350></LI>
<LI><IMG src="02.jpg" width=700 height=350></LI>
<LI><IMG src="03.jpg" width=700 height=350></LI>
<LI><IMG src="04.jpg" width=700 height=350></LI>
<LI><IMG src="05.jpg" width=700 height=350></LI>
</UL>
</td>
</tr>
</table>
</BODY>
</HTML>

------------------------------------------------------------------------------------
  #2 (permalink)  
Antiguo 22/07/2011, 18:12
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 11 meses
Puntos: 64
Respuesta: Quitar los puntos negros de una lista de imágenes

agrega en el css

li{ list-style:none;}
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 23/07/2011, 06:22
 
Fecha de Ingreso: julio-2011
Ubicación: Salamanca
Mensajes: 9
Antigüedad: 6 años
Puntos: 0
Respuesta: Quitar los puntos negros de una lista de imágenes

Muchísimas gracias, GASTON.

Le he puesto esa línea que me has dicho y se quitaron los puntos, pero entonces las imágenes se desplazaban hacia la izquierda, saliéndose del borde difuminado que las rodeaba.

Entonces, para quitar el borde difuminado (que además no se veía en Internmet Explorer), he borrado esta parte del código:
box-shadow: 0px 2px 30px #000

Ahora ya parece que se ve bien en los tres exploradores (Int. Explorer, Mozilla y Chrome), aunque en el primero las imágenes aparecen algo separadas del margen izquierdo.

Gracias de nuevo por tu ayuda, GASTON.
Alexmabo
  #4 (permalink)  
Antiguo 23/07/2011, 06:26
 
Fecha de Ingreso: julio-2011
Ubicación: Salamanca
Mensajes: 9
Antigüedad: 6 años
Puntos: 0
Respuesta: Quitar los puntos negros de una lista de imágenes

Olvidé comentarte, GASTON, que la línea de código que me dijiste que pusiera la coloqué aquí:


<STYLE type=text/css> * li{ list-style:none;}

Imagino que ésa es la posición correcta.

Saludos.
  #5 (permalink)  
Antiguo 23/07/2011, 07:52
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.147
Antigüedad: 9 años, 6 meses
Puntos: 181
Respuesta: Quitar los puntos negros de una lista de imágenes

creo que tendrías que haberlo puesto antes del *

así:
<STYLE type=text/css> li{ list-style:none;} *




P.D. El código HTML tiene muchos errores




Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #6 (permalink)  
Antiguo 23/07/2011, 17:13
 
Fecha de Ingreso: julio-2011
Ubicación: Salamanca
Mensajes: 9
Antigüedad: 6 años
Puntos: 0
Respuesta: Quitar los puntos negros de una lista de imágenes

Fitufoweb:
Muchas gracias. Efectivamente: lo he puesto como tú dices y se ha solucionado automáticamente el problema del espacio que quedaba entre el margen izquierdo y las imágenes con Internet Explorer.

Ahora me ha surgido un último problema: He integrado todo ese código en una breve página de prueba para ver cómo queda este pase de fotos dentro de dicha página de pruebas. Resulta que con Mozilla y Chrome queda perfecto; pero con Internet Explorer queda un espacio en blanco (de aproximadamente 3 cms.) entre el borde inferior del pase de fotos y los contenidos que vienen a continuación (una tabla con datos).

Por lo que he visto, es ya el último inconveniente que me queda para ver el resultado final como yo quiero. Por si tú o algún otro miembro del foro puede ayudarme, voy a pegar aquí debajo el código completo de esta página de prueba, incluyendo el código del pase de fotos.
Éste es el código de la página (los códigos específicos del pase de fotos están bastante espaciados del resto):
------------------------------------------------------------------------------------

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Alex-8">
<meta name="GENERATOR" content="Mozilla/4.5 [es] (WinNT; I) [Netscape]">
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=5)">
<title>contactar</title>




<style type=text/css> li{ list-style:none;} *
{BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px;}

#diapos-on {POSITION: relative; WIDTH: 700px; HEIGHT: 350px;}
#diapos-on LI {POSITION: absolute; LIST-STYLE-TYPE: none; WIDTH: 700px; HEIGHT: 350px; TOP: 0px; LIST-STYLE-IMAGE: none; LEFT: 0px;}

</style>
<script type=text/javascript
src="DP.js"></script>
<script type=text/javascript>
window.onload = DP.inicio;
</script>

</head>




<body text="#000000" bgcolor="#FFFFFF" link="#660000" vlink="#660000" alink="#CC0000">
<center><b><font face="Arial,Helvetica"><font color="#660000"><font size=+3>Contacta
con nosotros</font></font></font></b>
<br>
<hr WIDTH="90%" font color="#660000">
<br></center>

<center><table BORDER=0 CELLSPACING=0 CELLPADDING=8 COLS=1 WIDTH="90%" >
<tr><td BGCOLOR="#660000">
<center><b><font face="Arial,Helvetica"><font size=+1><font color="#FFFFFF">Por&nbsp; correo&nbsp; electr&oacute;nico</font></font></font></b></center>
</td></tr>

<tr><td><br>
<p><font color="#000066"><font face="Arial,Helvetica">Director de Educaci&oacute;n Secundaria Obligatoria:</font></font>
<p><font color="#000066"><font face="Arial,Helvetica">Directora de Educaci&oacute;n Infantil y Primaria:</font></font>
</tr></td></table></center>
&nbsp;



<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="710" 360" >
<tr>
<td WIDTH="5" HEIGHT="360"></td>
<td WIDTH="705" HEIGHT="360">
<ul id=diapos>
<li><img SRC="01.jpg" height=350 width=700></li>
<li><img SRC="02.jpg" height=350 width=700></li>
<li><img SRC="03.jpg" height=350 width=700></li>
<li><img SRC="04.jpg" height=350 width=700></li>
<li><img SRC="05.jpg" height=350 width=700></li>
</ul>
</td>
</tr>
</table>



<br>
<center><table BORDER=0 CELLSPACING=0 CELLPADDING=8 COLS=1 WIDTH="90%" >
<tr>
<td BGCOLOR="#660000">
<center><b><font face="Arial,Helvetica"><font color="#FFFFFF"><font size=+1>Por&nbsp;
correo&nbsp; postal</font></font></font></b></center>
</td></tr></table></center>

<center><table BORDER=0 CELLSPACING=0 CELLPADDING=8 COLS=1 WIDTH="90%" >
<tr><td>&nbsp;
<br><font face="Arial,Helvetica"><font color="#660000">Colegio San Juan Bosco</font></font>
<br><font face="Arial,Helvetica"><font color="#660000">C/ Mayor, 25</font></font>
</td></tr></table></center>
<br>&nbsp;
<br>&nbsp;
</body>
</html>
--------------------------------------------------------------------------------------

Gracias de nuevo Pitufoweb por tu ayuda.

Saludos.

Etiquetas: fotos, lista, negros, puntos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:47.