Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Image in jQuery Mobile Header

I am trying to add an image in the header of my jQuery Mobile based web page.

I want the image to be aligned to the right edge and using CSS for this purpose. But the results are not satisfactory.

(Problem*)There is a big gap between the image and the edge and it is also not aligned with the header text.

Here is the header code:

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

and here is the CSS code for class align-right:

.align-right{ 
    float:right; 
    margin-right: 5px;
}
like image 501
user1107888 Avatar asked Mar 15 '12 14:03

user1107888


3 Answers

No need to add custom styling or such. Jquery-Mobile already has built-in solutions for this. Just add the class 'ui-btn-left' or 'ui-btn-right' to your image (as if it were a button) and you're all set.

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

I know the question has been asked way before, but I figured this might help those who are still looking for solutions. Besides, the question wasn't set as answered.

like image 52
Gilly Avatar answered Nov 17 '22 16:11

Gilly


Based on your code example, you need a space between the alt attribute and the class attribute.

You have:

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

Should be:

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

Also, it is probably better to not have the <img /> tag inside of your <h1> element.

Check out the docs for more information on custom headers: http://jquerymobile.com/test/docs/toolbars/docs-headers.html

like image 3
shanabus Avatar answered Nov 17 '22 17:11

shanabus


Something like this should work:

<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>
like image 1
greatwitenorth Avatar answered Nov 17 '22 18:11

greatwitenorth