Imagen en jquery Mobile Header

Estoy tratando de agregar una imagen en el encabezado de mi página web jQuery Mobile. Quiero que la imagen se alinee con el borde derecho y usar CSS para este propósito. Pero los resultados no son satisfactorios. Existe una gran brecha entre la imagen y el borde y tampoco está alineada con el texto del encabezado. Aquí es el código de la cabecera:Imagen en jquery Mobile Header

<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>

y aquí está el código CSS para la clase align-right:

.align-right 
    { 
float:right; 
margin-right: 5px; 


    }

Fuente

2012-03-15 user1107888

Algo como esto debería funcionar:

<head> 
    <style> 
    body{ margin: 0; } 
    .align-right{ float:right; margin-right: 0px;} 
    </style> 
</head> 
<body> 
<div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div> 
</body>

Fuente

2012-03-15 15:15:28 greatwitenorth

Este método tampoco funciona – user1107888

Sobre la base de su código Por ejemplo, necesita un espacio entre el atributo alt y el atributo class.

tiene:

alt="Low resolution logo"class="align-right"

debe ser:

alt="Low resolution logo" class="align-right"

Además, es probable que sea mejor no tener la etiqueta <img /> interior de su elemento <h1>.

Mira la documentación para obtener más información sobre las cabeceras personalizadas: http://jquerymobile.com/test/docs/toolbars/docs-headers.html

Fuente

2012-03-15 15:24:02 shanabus

No hay necesidad de añadir un estilo personalizado o tales. Jquery-Mobile ya tiene soluciones integradas para esto. Simplemente agregue la clase 'ui-btn-left' o 'ui-btn-right' a su imagen (como si fuera un botón) y ya está todo listo.

<header data-role="header"> 
<h1>My App</h1> 
<img src="my_logo.png" class="ui-btn-right" /> 
</header>

sé la pregunta se ha hecho mucho antes, pero pensé que esto podría ayudar a los que todavía están buscando soluciones. Además, la pregunta no se estableció como respondida.

Fuente

2012-10-08 13:31:28

Imagen en jquery Mobile Header

Respuesta

Cuestiones relacionadas