Foros del Web » Creando para Internet » CSS »

Varias listas en un mismo html

Estas en el tema de Varias listas en un mismo html en el foro de CSS en Foros del Web. Hola, me estoy volviendo loco tratando de ponerme varias listas (ul, li) en un mimsmo HTML pero todos toman los estilos de la primera lista. ...
  #1 (permalink)  
Antiguo 05/02/2014, 13:20
Avatar de jimadri  
Fecha de Ingreso: julio-2006
Ubicación: Buenos Aires
Mensajes: 487
Antigüedad: 17 años, 10 meses
Puntos: 1
Varias listas en un mismo html

Hola, me estoy volviendo loco tratando de ponerme varias listas (ul, li) en un mimsmo HTML pero todos toman los estilos de la primera lista.

Cómo se hace?

GRACIAS!
  #2 (permalink)  
Antiguo 05/02/2014, 13:37
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Varias listas en un mismo html

Ahora cuando publiques el código de cómo lo tienes te decimos.
  #3 (permalink)  
Antiguo 05/02/2014, 13:46
Avatar de jimadri  
Fecha de Ingreso: julio-2006
Ubicación: Buenos Aires
Mensajes: 487
Antigüedad: 17 años, 10 meses
Puntos: 1
Respuesta: Varias listas en un mismo html

Código CSS:
Ver original
  1. #list2 ul, li {
  2. font-family:Arial, Helvetica, sans-serif;
  3. font-size:11px;
  4. color:#333;
  5. line-height:32px;
  6. border-bottom:1px dotted #999;
  7. list-style-type:none;
  8. text-indent:8px;
  9. }

Código HTML:
Ver original
  1. <div id="list2">
  2. <table align="left" border="1" cellpadding="0" cellspacing="0" style="height:271px; width:1000px">
  3.     <tbody>
  4.         <tr>
  5.             <td colspan="2">
  6.             <p><strong><a id="transporte" name="transporte"></a>Medios de Transporte / Meio de Transporte</strong></p>
  7.             </td>
  8.         </tr>
  9.         <tr>
  10.             <td>
  11.             <ul>
  12.                 <li>Equipaje / Bagagem</li>
  13.                 <li>Valija / Mala</li>
  14.                 <li>Changador / Carregador</li>
  15.                 <li>Pasaje / Passagem</li>
  16.                 <li>C&eacute;dula de Identidad / Carteira de Identidade</li>
  17.                 <li>Certificado de Vacuna / Certificado de Vacuna&ccedil;&atilde;o</li>
  18.                 <li>Aduana / Alf&aacute;ndega</li>
  19.                 <li>Ventanilla / Guich&eacute;</li>
  20.                 <li>Primera Clase / Primeira Classe</li>
  21.                 <li>Sala de Espera / Sala de Espera</li>
  22.             </ul>
  23.             </td>
  24.             <td>
  25.             <ul>
  26.                 <li>Guarga Equipaje / Guarda-Bagagem</li>
  27.                 <li>Deseo dejar esas cosas aqui / Gostaria de deixar estas coisas aqui</li>
  28.                 <li>A qu&eacute; hora parte el pr&oacute;ximo tren/micro/avi&oacute;n? / A que hora parte o pr&oacute;ximo trem/ &oacute;nibus/avi&atilde;o?</li>
  29.                 <li>A que hora parte el tres/micro para... / De que plataforma parte o trem/&oacute;nibus para...</li>
  30.                 <li>Cu&aacute;l es la puerta del embarque? / Qual &eacute; a porta de embarque?</li>
  31.                 <li>Quiero un boleto / Gostaria de uma passagem</li>
  32.                 <li>Cu&aacute;nto cuesta el boleto? / Quanto custa a passagem?</li>
  33.                 <li>Hay lugar todav&iacute;a / Ainda tem lugar?</li>
  34.                 <li>Esta es la &uacute;ltima estaci&oacute;n? / Esta &eacute; a &uacute;ltima esta&ccedil;&atilde;o?</li>
  35.                 <li>D&oacute;nde es la salida? / Onde fica a sa&iacute;da?</li>
  36.             </ul>
  37.             </td>
  38.         </tr>
  39.     </tbody>
  40. </div>

Última edición por pzin; 06/02/2014 a las 02:24 Razón: casi 8 años por acá y aún no sabe cómo publicar código
  #4 (permalink)  
Antiguo 05/02/2014, 14:19
 
Fecha de Ingreso: enero-2013
Mensajes: 13
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Varias listas en un mismo html

Lo que entiendo es que las dos lista que están presentes deben tener estilos diferentes, pero lo que tu estas haciendo es acceder al div que contiene ambas lista y darle el estilo a todas las listas que tienes en tu documento.

#list2 ul, li /* Significa que todos los hijos ul li que posea el div list2 van a tener los estilos*/

Lo conveniente seria en este caso darle un id o una clase al ul ej: <ul id="myList">...</ul>

y en el css colocar #list2 #myList li{...}.

Algo por el estilo espero ser de ayuda. Saludos.-
  #5 (permalink)  
Antiguo 05/02/2014, 14:22
Avatar de jimadri  
Fecha de Ingreso: julio-2006
Ubicación: Buenos Aires
Mensajes: 487
Antigüedad: 17 años, 10 meses
Puntos: 1
Respuesta: Varias listas en un mismo html

Ok, muchas gracias pruebo con esto y te aviso.
  #6 (permalink)  
Antiguo 05/02/2014, 21:01
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 11 años
Puntos: 31
Respuesta: Varias listas en un mismo html

Cita:
Iniciado por obitox Ver Mensaje
Lo que entiendo es que las dos lista que están presentes deben tener estilos diferentes, pero lo que tu estas haciendo es acceder al div que contiene ambas lista y darle el estilo a todas las listas que tienes en tu documento.

#list2 ul, li /* Significa que todos los hijos ul li que posea el div list2 van a tener los estilos*/

Lo conveniente seria en este caso darle un id o una clase al ul ej: <ul id="myList">...</ul>

y en el css colocar #list2 #myList li{...}.

Algo por el estilo espero ser de ayuda. Saludos.-
La coma creo que se te ha olvidado al comentar el código.

Estás aplicando el estilo a #list2 ul (los ul hijos de #list2) y li (los elementos li, sin distinción alguna). Y como toda lista tiene elementos li....
  #7 (permalink)  
Antiguo 06/02/2014, 07:01
Avatar de magnate8  
Fecha de Ingreso: octubre-2013
Mensajes: 20
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Varias listas en un mismo html

Código HTML:
#list2 ul, li {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#333;
line-height:32px;
border-bottom:1px dotted #999;
list-style-type:none;
text-indent:8px;
}
 

<div id="list2">
<table align="left" border="1" cellpadding="0" cellspacing="0" style="height:271px; width:1000px">
    <tbody>
        <tr>
            <td colspan="2">
            <p><strong><a id="transporte" name="transporte"></a>Medios de Transporte / Meio de Transporte</strong></p>
            </td>
        </tr>
        <tr>
            <td>
            <ul>
                <li>Equipaje / Bagagem</li>
                <li>Valija / Mala</li>
                <li>Changador / Carregador</li>
                <li>Pasaje / Passagem</li>
                <li>C&eacute;dula de Identidad / Carteira de Identidade</li>
                <li>Certificado de Vacuna / Certificado de Vacuna&ccedil;&atilde;o</li>
                <li>Aduana / Alf&aacute;ndega</li>
                <li>Ventanilla / Guich&eacute;</li>
                <li>Primera Clase / Primeira Classe</li>
                <li>Sala de Espera / Sala de Espera</li>
            </ul>
            </td>
            <td>
            <ul>
                <li>Guarga Equipaje / Guarda-Bagagem</li>
                <li>Deseo dejar esas cosas aqui / Gostaria de deixar estas coisas aqui</li>
                <li>A qu&eacute; hora parte el pr&oacute;ximo tren/micro/avi&oacute;n? / A que hora parte o pr&oacute;ximo trem/ &oacute;nibus/avi&atilde;o?</li>
                <li>A que hora parte el tres/micro para... / De que plataforma parte o trem/&oacute;nibus para...</li>
                <li>Cu&aacute;l es la puerta del embarque? / Qual &eacute; a porta de embarque?</li>
                <li>Quiero un boleto / Gostaria de uma passagem</li>
                <li>Cu&aacute;nto cuesta el boleto? / Quanto custa a passagem?</li>
                <li>Hay lugar todav&iacute;a / Ainda tem lugar?</li>
                <li>Esta es la &uacute;ltima estaci&oacute;n? / Esta &eacute; a &uacute;ltima esta&ccedil;&atilde;o?</li>
                <li>D&oacute;nde es la salida? / Onde fica a sa&iacute;da?</li>
            </ul>
            </td>
        </tr>
    </tbody>
</table>
</div> 

Para abrir dos con diferentes estilos ponlo de la siguiente forma y pon el estilo que necesites:

Código HTML:
#list3 ul, li {
 
}




<div id="list3">
<table align="left" border="1" cellpadding="0" cellspacing="0" style="height:271px; width:1000px">
    <tbody>
        <tr>
            <td colspan="2">
            <p><strong><a id="transporte" name="transporte"></a>Medios de Transporte / Meio de Transporte</strong></p>
            </td>
        </tr>
        <tr>
            <td>
            <ul>
                <li>Equipaje / Bagagem</li>
                <li>Valija / Mala</li>
                <li>Changador / Carregador</li>
                <li>Pasaje / Passagem</li>
                <li>C&eacute;dula de Identidad / Carteira de Identidade</li>
                <li>Certificado de Vacuna / Certificado de Vacuna&ccedil;&atilde;o</li>
                <li>Aduana / Alf&aacute;ndega</li>
                <li>Ventanilla / Guich&eacute;</li>
                <li>Primera Clase / Primeira Classe</li>
                <li>Sala de Espera / Sala de Espera</li>
            </ul>
            </td>
            <td>
            <ul>
                <li>Guarga Equipaje / Guarda-Bagagem</li>
                <li>Deseo dejar esas cosas aqui / Gostaria de deixar estas coisas aqui</li>
                <li>A qu&eacute; hora parte el pr&oacute;ximo tren/micro/avi&oacute;n? / A que hora parte o pr&oacute;ximo trem/ &oacute;nibus/avi&atilde;o?</li>
                <li>A que hora parte el tres/micro para... / De que plataforma parte o trem/&oacute;nibus para...</li>
                <li>Cu&aacute;l es la puerta del embarque? / Qual &eacute; a porta de embarque?</li>
                <li>Quiero un boleto / Gostaria de uma passagem</li>
                <li>Cu&aacute;nto cuesta el boleto? / Quanto custa a passagem?</li>
                <li>Hay lugar todav&iacute;a / Ainda tem lugar?</li>
                <li>Esta es la &uacute;ltima estaci&oacute;n? / Esta &eacute; a &uacute;ltima esta&ccedil;&atilde;o?</li>
                <li>D&oacute;nde es la salida? / Onde fica a sa&iacute;da?</li>
            </ul>
            </td>
        </tr>
    </tbody>
</table>
</div> 
De esta forma no se te mezclaran :)

Etiquetas: html, listas
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 13:54.