Bottom bar - display at bottom with variable length pages?

Mobile
1

I’m developing my first iPhone ‘web app’, a web site for a DVD movie database using HTML, CSS, and PHP. It’s designed to be added to ‘home screen’. To give it the feel of a native app, it is using the iWebKit which is basically a set of CSS and graphics files designed to make a web page look similar to an iPhone native app.

My problem is with the bottom bar which has ‘Prev’, ‘Home’, and ‘Next’ buttons on it for navigation. When there are 6 results or more on a page the bottom bar will be displayed nicely at the end of the HTML content at the bottom of the iPhone screen. But when a page has -say- just 2 results, the bottom bar is displayed below the results but with a big gap to the bottom of the screen. In these cases I would like the bottom bar to still be displayed at the bottom of the screen. I do not want the bottom bar to always be visible regardless of how far down a page the user has scrolled. When scrolling down is required I want the bottom bar to be only visible at the bottom of the page - but when only 1 or 2 results are displayed on a page, and the bottom bar is currently displayed half way down the page, I would like to make the bottom bar appear at the bottom.

I have no idea how to achieve this - can you guys help?

Here are 3 screen shots, not from my iPhone but from a resized Chrome window which shows almost exactly the way the app looks on the iPhone.

Image 1 - Lots of results, top part of page:

Image 2 - Lots of results, bottom part of page:

Image 3 - 2 results, whole page - how to get bottom bar to bottom?

Many thanks.

2

If you know the height of the screen (and presumably you do—480px, is it?) then you could try setting a minimum height on the content above the footer to push it down. E.g.

Content {min-height: 440px; /* assuming the footer is 40px tall */}

3

Thank you so much Ralph. I feel like such a novice that the solution is so simple. It works perfectly, the actual min-height value needed fine tuning, but with a little trial-and-error I found 372 was the magic number. :slight_smile:

Thanks again.

4

Great, I’m glad that helped. This can be a tricky area, but it’s nice in this case that we are just dealing with one browser. Would it were so more often!

5

I feel a bit bad asking another trivial question, but I can not work it out and can’t bring myself to start a new thread for something so obviously a beginner’s query. I should mention that I’m not a designer but a software developer, and that this is a personal project so I have to do the CSS myself, that is to say modify the iWebKit (iPhone styling) CSS to suit my needs.

iWebKit has buttons for the bar which my previous post was about, but only left and right (button groups too but I am not using them). As you can see in the screen caps I’m using 3 buttons, Prev, Home, and Next - Prev is a leftbutton, Next is a rightbutton, and for Home in the middle I modified the leftbutton.

The characteristics for the leftbutton is in several places in the iWebKit CSS but the positioning is defined like this:

#leftnav, #leftbutton, #blueleftbutton {
position: absolute;
font-size: 12px;
left: 9px;
font-weight: bold;
}

To make my centerbutton I just did this:

#leftbutton.centerbutton {
left: 43%;
}

The 43% is about the right amount so that the ‘Home’ text of the centerbutton appears in the center. It works ok but it doesn’t help me learn how I should actually center something. The CSS ‘position:’ has no center property and I can’t work out how to make a button appear exactly centered in the CSS. Can you advise me how?

Thanks again and sorry for the triviality of my questions.

6

I think we’d need to see all of the html(?) and css you are using, but assuming that the right and left buttons are positioned absolutely, you could just remove the position:absolute style for the Home button and let it be the only ‘in-flow’ part within that footer, and then just apply text-align: center to it.

.centerbutton {
    text-align: center;
}

Could you show the full code you are using for that footer?

7

I can’t seem to get it right despite 2 hours trying. The problem is that the iWebkit CSS file defines styles for different classes/elements in so many places, getting to grips with it is a nightmare. Since I’ve got it centered with the “left: 43%;” I’ll just leave it at that as what I need to be spending my time on is finishing the PHP code which is coming along nicely.

Thanks again for the help with the bottom bar, it looks good.

PS. At some point I should spend a couple of days really learning the ins-and-outs of CSS. :slight_smile: