jquerymobile cambiar css en las listas

pithon · #1 (**permalink**) 13/06/2013, 12:33

hola, utilizo el framevorks jquerymobile, donde utilizo el widget listview (lista ul), en esta lista se puedo insertar imagenes en miniatura, pero estas imagenes por defecto son de 80px de alto por 80px de ancho, esta imagen es la que quiero cambiar a 120px tanto alto y ancho, pero no consigo con exito.
muestro el codigo html completo de un sencillo ejemplo por si alguien quiere ayudarme con el css.

Código HTML:

Ver original<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
 
<body>
 
<div data-role='page'>
 
    
    <div data-role='content'>
        <ul data-role='listview' data-inset='true'>
            <li><a href='#'><img src='imagenes/4234346325.jpg'><h3>cars</h3><p>text</p></a></li>
            <li><a href='#'><img src='imagenes/78972389798.jpg'><h3>hotels</h3><p>text</p></a></li>
            <li><a href='#'><img src='imagenes/i789797243.jpg'><h3>restaurant</h3><p>text</p</a></li>
        </ul>
    </div>
    
 
</div>
 
</body>
</html>

tonigomila1988 · #2 (**permalink**) 14/06/2013, 03:12

Cita:

Iniciado por pithon

hola, utilizo el framevorks jquerymobile, donde utilizo el widget listview (lista ul), en esta lista se puedo insertar imagenes en miniatura, pero estas imagenes por defecto son de 80px de alto por 80px de ancho, esta imagen es la que quiero cambiar a 120px tanto alto y ancho, pero no consigo con exito.
muestro el codigo html completo de un sencillo ejemplo por si alguien quiere ayudarme con el css.

Código HTML:

Ver original<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
 
<body>
 
<div data-role='page'>
 
    
    <div data-role='content'>
        <ul data-role='listview' data-inset='true'>
            <li><a href='#'><img src='imagenes/4234346325.jpg'><h3>cars</h3><p>text</p></a></li>
            <li><a href='#'><img src='imagenes/78972389798.jpg'><h3>hotels</h3><p>text</p></a></li>
            <li><a href='#'><img src='imagenes/i789797243.jpg'><h3>restaurant</h3><p>text</p</a></li>
        </ul>
    </div>
    
 
</div>
 
</body>
</html>

Hola pithon:

Yo pondria un css que modificara el tamaño de las imagenes de las listas. Quedaria de la siguiente manera:

Código CSS:

Ver originalli a img
{
width: 120px;
height: 120px;
}

Pruebalo y me dices cosas.

Saludos