Foros del Web » Creando para Internet » CSS »

Problemas con las listas

 Estas en el tema de Problemas con las listas en el foro de CSS en Foros del Web. Hola, quería saber porqué no me sale el cuadrado de la propiedad llist-style-type en la siguiente lista. Os dejo el código: Cita: <!DOCTYPE html PUBLIC ...
  #1 (permalink)  
Antiguo 22/04/2008, 06:55
 
Fecha de Ingreso: diciembre-2003
Mensajes: 83
Antigüedad: 20 años, 11 meses
Puntos: 0
Problemas con las listas
Hola, quería saber porqué no me sale el cuadrado de la propiedad llist-style-type en la siguiente lista. Os dejo el código:
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
ul.listan3 {
position:absolute;
left:0px;
top:0px;
width:100%;
height:383px;
list-style-type: square;
overflow: auto;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

ul.listan3 li{
margin-right: 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #336699;
}

ul.listan3 li li{
list-style-type: lower-roman;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #336699;
}
</style>
</HEAD>

<BODY>

<ul class="listan3">
<li>Consultas/Informes</li>
<ul>
<li>Uso privativo</li>
<li>Uso especial</li>
<li>Intereses demora</li>
<li>Petición informes diferidos</li>
<li>Resultados informes diferidos</li>
</ul>
<br />
<li>Autorización</li>
<ul>
<li>Uso privativo</li>
<li>Uso especial</li>
<li>Intereses demora</li>
<li>Información de Apremio</li>
</ul>
<br />
<li>Consultas Info Apremio</li>
<br /> <br />
<li>Consulta liquidaciones no emitidas</li>
<br /> <br />
<li>Consulta cálculo de canon</li>
<br /> <br />
<li>Gestión de liquidaciones</li>
<br /> <br />
<li>Nueva Liquidación Int. Demora</li>
<br /> <br />
<li>Anulación de apremios</li>
<br /> <br />
<li>Anulación de liquidaciones</li>
<br /> <br />
<li>Cancelación de Liquidaciones</li>
<br /> <br />
</ul>

</BODY>
</html>
A ver si me echáis una mano porque ya estoy desesperado. He probado a ponerlo en el ul, en li, a ponerlo en la clase sola, sin ul ni li, etc. En fin, AYUDA.

Gracias.
__________________
Si quieres, puedes leer mi blog.

Aquí tienes la dirección:
Blog: http://www.google.com/reader/shared/...26498618720899
  #2 (permalink)  
Antiguo 22/04/2008, 08:33
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 18 años, 1 mes
Puntos: 6
Re: Problemas con las listas
En firefox a mi me salen, en explorer no. Así que revisa bien ese código ;)
  #3 (permalink)  
Antiguo 22/04/2008, 08:52
 
Fecha de Ingreso: noviembre-2006
Mensajes: 437
Antigüedad: 18 años
Puntos: 3
Re: Problemas con las listas
Hola! Haz:

Cita:
ul.listan3 ul{
position:absolute;
left:0px;
top:0px;
width:100%;
height:383px;
list-style-type: square;
overflow: auto;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
Como puedes observar he añadido ul a tu estilo para que explorer lo interprete. Te recomiendo depurar bien tu css y tu código, por ejemplo no uses br para dar separación entre las listas, utiliza la propiedad margin ya que utilizas css. Revisa bien cada estilo ya que muchas propiedades no són necesarias.

Un saludo
  #4 (permalink)  
Antiguo 22/04/2008, 09:00
 
Fecha de Ingreso: noviembre-2006
Mensajes: 437
Antigüedad: 18 años
Puntos: 3
Re: Problemas con las listas
Como tenia un poco de tiempo te pongo tu código modificado de como lo haria yo.

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> New Document </TITLE>
<style>
body{font-family: Arial, Helvetica, sans-serif; color: #336699; font-size: 12px;}
ul.listan3 ul{
margin:10px 0 0 0;
}

ul.listan3 li{
margin:15px 0 0 5px;
list-style-type: square;

}

ul.listan3 li li{
list-style-type: lower-roman;
font-size: 10px;
margin:15px 0 0 50px;
}
</style>
</HEAD>

<BODY>

<ul class="listan3">
<li>Consultas/Informes</li>
<ul>
<li>Uso privativo</li>
<li>Uso especial</li>
<li>Intereses demora</li>
<li>Petición informes diferidos</li>
<li>Resultados informes diferidos</li>
</ul>
<li>Autorización</li>
<ul>
<li>Uso privativo</li>
<li>Uso especial</li>
<li>Intereses demora</li>
<li>Información de Apremio</li>
</ul>
<li>Consultas Info Apremio</li>
<li>Consulta liquidaciones no emitidas</li>
<li>Consulta cálculo de canon</li>
<li>Gestión de liquidaciones</li>
<li>Nueva Liquidación Int. Demora</li>
<li>Anulación de apremios</li>
<li>Anulación de liquidaciones</li>
<li>Cancelación de Liquidaciones</li>
</ul>
</body>
</html>
</body>
</html>
Como puedes ver utilizo menos código y todo está más claro.

Un saludo!!
  #5 (permalink)  
Antiguo 23/04/2008, 03:37
 
Fecha de Ingreso: diciembre-2003
Mensajes: 83
Antigüedad: 20 años, 11 meses
Puntos: 0
Re: Problemas con las listas
No consigo que esto funcione bien

Te paso un pantallazo de lo que ocurre

Cita:
Y todo el código a ver si me puedes solucionar esto del todo.

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>n3liquida</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (n3liquida.psd - Slices: n3liquida_01, n3liquida_02, n3liquida_03, n3liquida_04, n3liquida_05, n3liquida_06, n3liquida_07, n3liquida_08, n3liquida_09) -->
<style type="text/css">
<!--

.pointer {
cursor: pointer;
}

body{font-family: Arial, Helvetica, sans-serif; color: #336699; font-size: 12px;}
ul.listan3 ul{
margin:10px 0 0 0;
position:absolute;
left:0px;
top:0px;
width:100%;
height:373px;
overflow: auto;
}

ul.listan3 li{
margin:15px 0 0 5px;
list-style-type: square;

}

ul.listan3 li li{
list-style-type: lower-roman;
font-size: 10px;
margin:15px 0 0 50px;
}

/*ul.listan3 {
position:absolute;
left:0px;
top:0px;
width:100%;
height:373px;
list-style-type: circle;
overflow: auto;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

ul.listan3 li{
margin-right: 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #336699;
}

ul.listan3 li li{
list-style-type: lower-roman;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #336699;
}

/*#Tabla_01 {
position:absolute;
left:0px;
top:0px;
width:996px;
height:820px;
}*/

#n3liquida-01_ {
position:absolute;
left:438px;
top:180px;
width:229px;
height:60px;
}

#n3liquida-02_ {
position:absolute;
left:667px;
top:180px;
width:17px;
height:29px;
}

#n3liquida-05_ {
position:absolute;
left:684px;
top:180px;
width:46px;
height:60px;
z-index: 40;
}

#n3liquida-03_ {
position:absolute;
left:667px;
top:209px;
width:17px;
height:17px;
}

#n3liquida-04_ {
position:absolute;
left:667px;
top:226px;
width:17px;
height:14px;
}

#n3liquida-06_ {
position:absolute;
left:438px;
top:240px;
width:93px;
height:383px;
}

#n3liquida-07_ {
position:absolute;
left:531px;
top:240px;
width:184px;
height:383px;
}

#n3liquida-08_ {
position:absolute;
left:715px;
top:240px;
width:15px;
height:383px;
}

#n3liquida-09_ {
position:absolute;
left:438px;
top:623px;
width:292px;
height:42px;
}

-->
</style>
<!-- End ImageReady Styles -->
<script>
<!--
var capas = ["roja", "verde", "azul", "amarilla"];
function ocultar(capa) {
document.getElementById(capa).style.display = "none";
}

function ocultarTodas (){
ocultar('n3liquida-01_');
ocultar('n3liquida-02_');
ocultar('n3liquida-03_');
ocultar('n3liquida-04_');
ocultar('n3liquida-05_');
ocultar('n3liquida-06_');
ocultar('n3liquida-07_');
ocultar('n3liquida-08_');
ocultar('n3liquida-09_');
}
//-->
</script>
</head>
<body style="">
<!-- ImageReady Slices (n3liquida.psd - Slices: n3liquida_01, n3liquida_02, n3liquida_03, n3liquida_04, n3liquida_05, n3liquida_06, n3liquida_07, n3liquida_08, n3liquida_09) -->
<!--<div id="Tabla_01"> -->
<div id="n3liquida-01_">
<img id="n3liquida_01" src="img/n3liquida_01.gif" width="229" height="60" alt="Liquidaciones" />
</div>
<div id="n3liquida-02_">
<img id="n3liquida_02" src="img/n3liquida_02.jpg" width="17" height="29" alt="" />
</div>
<div id="n3liquida-05_">
<img id="n3liquida_05" src="img/n3liquida_05.gif" width="46" height="60" alt="" />
</div>
<div id="n3liquida-03_">
<span class="pointer" onClick="ocultarTodas()" ><img id="n3liquida_03" src="img/n3liquida_03.jpg" width="17" height="17" alt="Cerrar" /></span>
</div>
<div id="n3liquida-04_">
<img id="n3liquida_04" src="img/n3liquida_04.jpg" width="17" height="14" alt="" />
</div>
<div id="n3liquida-06_">
<img id="n3liquida_06" src="img/n3liquida_06.gif" width="93" height="383" alt="" />
</div>
<div id="n3liquida-07_">
<img id="n3liquida_07" src="img/n3liquida_07.jpg" width="184" height="383" alt="" />
<ul class="listan3">
<li>Consultas/Informes</li>
<ul>
<li>Uso privativo</li>
<li>Uso especial</li>
<li>Intereses demora</li>
<li>Petición informes diferidos</li>
<li>Resultados informes diferidos</li>
</ul>
<br />
<li>Autorización</li>
<ul>
<li>Uso privativo</li>
<li>Uso especial</li>
<li>Intereses demora</li>
<li>Información de Apremio</li>
</ul>
<br />
<li>Consultas Info Apremio</li>
<br /> <br />
<li>Consulta liquidaciones no emitidas</li>
<br /> <br />
<li>Consulta cálculo de canon</li>
<br /> <br />
<li>Gestión de liquidaciones</li>
<br /> <br />
<li>Nueva Liquidación Int. Demora</li>
<br /> <br />
<li>Anulación de apremios</li>
<br /> <br />
<li>Anulación de liquidaciones</li>
<br /> <br />
<li>Cancelación de Liquidaciones</li>
<br /> <br />
</ul>
</div>
<div id="n3liquida-08_">
<img id="n3liquida_08" src="img/n3liquida_08.jpg" width="15" height="383" alt="" />
</div>
<div id="n3liquida-09_">
<img id="n3liquida_09" src="img/n3liquida_09.gif" width="292" height="42" alt="" />
</div>
<!--</div> -->
<!-- End ImageReady Slices -->
</body>
</html>
Gracias.
__________________
Si quieres, puedes leer mi blog.

Aquí tienes la dirección:
Blog: http://www.google.com/reader/shared/...26498618720899
  #6 (permalink)  
Antiguo 23/04/2008, 06:11
 
Fecha de Ingreso: noviembre-2006
Mensajes: 437
Antigüedad: 18 años
Puntos: 3
Re: Problemas con las listas
Aqui esta el código modificado:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>n3liquida</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (n3liquida.psd - Slices: n3liquida_01, n3liquida_02, n3liquida_03, n3liquida_04, n3liquida_05, n3liquida_06, n3liquida_07, n3liquida_08, n3liquida_09) -->
<style type="text/css">
<!--

.pointer {
cursor: pointer;
}

body{font-family: Arial, Helvetica, sans-serif; color: #336699; font-size: 12px;}
ul.listan3 ul{
margin:10px 0 0 0;
width:100%;
overflow:auto;
}

ul.listan3 li{
margin:15px 0 0 5px;
list-style-type: square;

}

ul.listan3 li li{
list-style-type: lower-roman;
font-size: 10px;
margin:15px 0 0 50px;
}

/*ul.listan3 {
position:absolute;
left:0px;
top:0px;
width:100%;
height:373px;
list-style-type: circle;
overflow: auto;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

ul.listan3 li{
margin-right: 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #336699;
}

ul.listan3 li li{
list-style-type: lower-roman;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #336699;
}

/*#Tabla_01 {
position:absolute;
left:0px;
top:0px;
width:996px;
height:820px;
}*/

#n3liquida-01_ {
position:absolute;
left:438px;
top:180px;
width:229px;
height:60px;
}

#n3liquida-02_ {
position:absolute;
left:667px;
top:180px;
width:17px;
height:29px;
}

#n3liquida-05_ {
position:absolute;
left:684px;
top:180px;
width:46px;
height:60px;
z-index: 40;
}

#n3liquida-03_ {
position:absolute;
left:667px;
top:209px;
width:17px;
height:17px;
}

#n3liquida-04_ {
position:absolute;
left:667px;
top:226px;
width:17px;
height:14px;
}

#n3liquida-06_ {
position:absolute;
left:438px;
top:240px;
width:93px;
height:383px;
}

#n3liquida-07_ {
background:url(img/n3liquida_07.jpg) no-repeat;
position:absolute;
left:531px;
top:240px;
width:184px;
height:383px;
overflow:auto;
}

#n3liquida-08_ {
position:absolute;
left:715px;
top:240px;
width:15px;
height:383px;
}

#n3liquida-09_ {
position:absolute;
left:438px;
top:623px;
width:292px;
height:42px;
}

-->
</style>
</head>
<body style="">
<!-- ImageReady Slices (n3liquida.psd - Slices: n3liquida_01, n3liquida_02, n3liquida_03, n3liquida_04, n3liquida_05, n3liquida_06, n3liquida_07, n3liquida_08, n3liquida_09) -->
<!--<div id="Tabla_01"> -->
<div id="n3liquida-01_">
<img id="n3liquida_01" src="img/n3liquida_01.gif" width="229" height="60" alt="Liquidaciones" />
</div>
<div id="n3liquida-02_">
<img id="n3liquida_02" src="img/n3liquida_02.jpg" width="17" height="29" alt="" />
</div>
<div id="n3liquida-05_">
<img id="n3liquida_05" src="img/n3liquida_05.gif" width="46" height="60" alt="" />
</div>
<div id="n3liquida-03_">
<span class="pointer" onClick="ocultarTodas()" ><img id="n3liquida_03" src="img/n3liquida_03.jpg" width="17" height="17" alt="Cerrar" /></span>
</div>
<div id="n3liquida-04_">
<img id="n3liquida_04" src="img/n3liquida_04.jpg" width="17" height="14" alt="" />
</div>
<div id="n3liquida-06_">
<img id="n3liquida_06" src="img/n3liquida_06.gif" width="93" height="383" alt="" />
</div>
<div id="n3liquida-07_">
<ul class="listan3">
<li>Consultas/Informes</li>
<ul>
<li>Uso privativo</li>
<li>Uso especial</li>
<li>Intereses demora</li>
<li>Petición informes diferidos</li>
<li>Resultados informes diferidos</li>
</ul>
<br />
<li>Autorización</li>
<ul>
<li>Uso privativo</li>
<li>Uso especial</li>
<li>Intereses demora</li>
<li>Información de Apremio</li>
</ul>
<br />
<li>Consultas Info Apremio</li>
<br /> <br />
<li>Consulta liquidaciones no emitidas</li>
<br /> <br />
<li>Consulta cálculo de canon</li>
<br /> <br />
<li>Gestión de liquidaciones</li>
<br /> <br />
<li>Nueva Liquidación Int. Demora</li>
<br /> <br />
<li>Anulación de apremios</li>
<br /> <br />
<li>Anulación de liquidaciones</li>
<br /> <br />
<li>Cancelación de Liquidaciones</li>
<br /> <br />
</ul>
</div>
<div id="n3liquida-08_">
<img id="n3liquida_08" src="img/n3liquida_08.jpg" width="15" height="383" alt="" />
</div>
<div id="n3liquida-09_">
<img id="n3liquida_09" src="img/n3liquida_09.gif" width="292" height="42" alt="" />
</div>
<!--</div> -->
<!-- End ImageReady Slices -->
</body>
</html>
Le he quitado el javascript porque me daba problemas, ponselo otra vez. Las imagenes que quieras poner de fondo en las capas se deben poner en el css y no en el html con la etiqueta img.

Un saludo!
  #7 (permalink)  
Antiguo 25/04/2008, 02:23
 
Fecha de Ingreso: diciembre-2003
Mensajes: 83
Antigüedad: 20 años, 11 meses
Puntos: 0
Re: Problemas con las listas
Gracias. Lo pruebo en cuanto pueda y te cuento.
__________________
Si quieres, puedes leer mi blog.

Aquí tienes la dirección:
Blog: http://www.google.com/reader/shared/...26498618720899
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:46.