Hello

 

I'm minifying a website for use on mobile platforms. If that wasn't a bummer in itself, I'm having a bit of an elementary problem. I know there are resolutions for this, but thanks to my tired head and silly code, I can't make it work. I'd like to be able to centre this unordered list which sits within a div.

 

Here's the css

div#navigation{

width: 99%;

margin-bottom: 2px; }

 

ul.postnav,ul.postnav li{margin:1px 0;padding:0;list-style-type:none}

ul.postnav li{float:left; padding: 1px;}

ul.postnav a{display:block;width:99%;padding:1px 0;font: bold 100% Verdana,Arial,sans-serif;

background: #C0DCA3;color: #295245;

text-decoration:none;text-align:center}

ul.postnav a:hover{background: #DAF2F2;color:#295245}

 

And here's the html

 

<div id="navigation">

<ul class="postnav">

<li id="home"><a href="#">Home</a></li>

<li id="qualitative"><a href="./main/qualitative.html" title="course section on qualitative data">Qualitative</a></li>

<li id="quantitative"><a href="./main/quantitative.html" title="course section on quantitative data">Quantitative</a></li>

<li id="instructions"><a href="main/instructions.html" title="link to the course instructions">Help</a></li>

<li id="contact"><a href="./main/contact.html" title="link to contact information">Contact</a></li>

</ul>

</div>

 

If anyone is a happy mini mobile coder, if you can let me know if there's any issues with the above html/css for mobile platforms too, that would be so helpful.

 

Thank you

sorry this might just be a wild stab in the dark but perhaps the problems lies with using float:left for your list items. try using display:inline instead.

Thanks for your reply. When I remove float: left and substitute it for display: inline, I get the buttons displaying vertically and taking up the whole width

sorry. do you have a page i can see it on? it's hard to know how the nav looks in context otherwise.

Hello, try this: http://www.mscrow.com/analysethis/mobile/

 

Please remember though it's a mobile version so it'll look a bit odd I guess. Though if you have any feedback on size/layout catering for mobile devices I'd be really grateful.

 

Thank you

ul.postnav,ul.postnav li{margin:1px 0;padding:0;list-style-type:none;}
ul.postnav li{ padding: 0px; width: 20%; float:left; margin-bottom:3px; text-align:center;}
ul.postnav a{ display:block;width:99%;padding:1px 0;font: bold 100% Verdana,Arial,sans-serif;
background: #C0DCA3;color: #295245;
text-decoration:none;text-align:center}
ul.postnav a:hover{background: #DAF2F2;color:#295245}

 

is probably not what you are looking for but should instead at least stretch the links across the entire navigation element... obviously this is useless if you want to change the amount of links on each page.

 

sorry i haven't had the time to look at it properly - if you have the nav centered on a normal html page it should work well on a mobile page too - the main thing that needs to change with mobiles in my experience is to use dynamic sizes and remove any static... ie, use width:50%; instead of width:50px; etc etc.

coincidently ala just wrote an article about designing for mobiles: http://alistapart.com/articles/returnofthemobilestylesheet

 

it's interesting reading.

Thank you so much for looking at this, I'll try your fix as the links at the top will remain the same on all pages. I had a much more in depth menu but for a mobile version, it seemed very space hungry to use. I'll definitely look at the article, thank you for posting the link. This is all new to me and I'm grateful for CS3's inbuilt device central for testing. I'll take on board the thing about fixed widths. I usually work to a liquid layout anyway but for this I've also been streamlining the css right back, so no nice curved corners and stripping out all javascript. Phew.

haha who thought have that doing less would be so much more work.