CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
user987144
user987144

Reputation: 75

Jquery mobile float:left issue, header-icon blocks the left side of the page

I created with Jquery mobile an header and content part. In the header I added an icon which is bigger than the header height(like on the image). So the problem is..the following content should be below the icon (starts on the left side). Why is the position not below the icon on the left side?The icon should overlap from the header to the content part.

http://s1.directupload.net/file/d/3233/citi5s8r_jpg.htm "Image"

.....
<div data-role="page">
    <div data-role="header">
    <img src="test.gif" style="float:left;" height="75px";/>
    <h1>Testpage</h1>
    <a href="Start.html" rel="external" class="ui-btn-right" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
    </div>

    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
                <li data-role="list-divider" class="middle">Topic 1</li>
                <li>
                    <p class="middle">Mittwoch, 20.04.2013 - 15:00 Uhr</p>

                    <p class="middle" style="margin-top:5px; background-color:transparent;">Stuttgart</p>
                </li>
        </ul>
    </div>
......
</div>
......

Upvotes: 0

Views: 565

Answers (1)

john Smith
john Smith

Reputation: 17906

Why don´t you just add a new div or whatever to <div data-role="header"> with height and width and background-image or <img> inside of your overlapping icon and set css like:

#funkyIcon {
position:absolute;
top:0;
left:0;
z-index:2; ? or two million
}

this should to it

Upvotes: 1

Related Questions