Tabbed ul menu issue with small screens

HTML & CSS
1

Hi,

I’ve made a tabbed type menu with a ul that is automatically generated from php with a list of pages. As seems to be the case with a lot of these things it all goes pear shaped if the screen is not as wide as the menu. I’d really like it to just show all the links, even if the user has to scroll sideways. Particularly as my client wants it to look nice on his shiny iphone…

here’s a link to the site so far…

2

You could make this layout a lot more mobile friendly, but a quick fix might be to set a min-width on the nav container to stop the lit items wrapping:

.nav {
  font-size: 15px;
  height: 89px;
  left: 340px;
  list-style: none outside none;
  position: absolute;
  right: 0;
  top: 0;
  [COLOR="Red"]min-width: 800px;[/COLOR]
}

You really need to optimize the images, too, as it takes ages to load the page even on broadband, so a mobile user won’t be too happy with you eating up all that bandwidth.

3

thanks. I’m new to the idea of mobile friendly design, and I’m aware that I need to get up to speed on it. Thanks for the quick fix.

On the issue of load time, the page shouldn’t be taking that long to load the content outside the slideshow. The slideshow should start before all the images are loaded although the loading bar doesn’t go away until the last image is loaded… is that what you experienced or was the whole thing slow loading?

4

Yes, though I still get suspicious when the load bar takes so long to complete, especially when I think of mobile sites too. The browser does seems to slow down in this state.

5

hmmm maybe I should include the gallery in an iframe or something so it doesn’t affect the rest of the page…

I’ve figured out a solution for the menu. I’ve moved the css for that div over to the actual page rather than the css file so I can use php to set the exact width of the menu based on how many items are in there. He wanted them to have a set width anyway, so it was a fairly straighforward piece of code…