Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Problemas con las listas (http://www.forosdelweb.com/f53/problemas-con-las-listas-578620/)

hscnet 22/04/2008 06:55
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.

Eourus 22/04/2008 08:33
Re: Problemas con las listas
 
En firefox a mi me salen, en explorer no. Así que revisa bien ese código ;)

komodo 22/04/2008 08:52
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

komodo 22/04/2008 09:00
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!!

hscnet 23/04/2008 03:37
Re: Problemas con las listas
 
No consigo que esto funcione bien

Te paso un pantallazo de lo que ocurre

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.

komodo 23/04/2008 06:11
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!

hscnet 25/04/2008 02:23
Re: Problemas con las listas
 
Gracias. Lo pruebo en cuanto pueda y te cuento.


La zona horaria es GMT -6. Ahora son las 02:56.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.