Horizontal menu that equalizes

[EricH]

Hello,

I am reworking a mobile version of my site and want to make it as responsive as possible. The backend of my site is dokuwiki and I have a decent knowledge of CSS and PHP. I have looked at some tutorials on this site and others about making a horizontal menu automatically resize links based on page size. I get stuck because my code for the links/menus is a bit more complex than normal and so I am asking for some generous help solving this problem. I think perhaps in the end it will have to do with display: table; or text-align: justify; but am unable to make either of these solutions work. Basically what I want is a menu that resizes just like the one on this website. You can see what I am doing and working on here:

EDIT: I understand how to hard code the width of the links but would like them to adjust based on screen size so that there is some future proofing of the mobile site for newer phones that have larger display sizes than 480 or 320 (for which it is currently optimized)

m.erichowey.ca

Here is the css code that is driving the menu currently, thanks for any and all help:

#tmpl_header {

width: 100%;

border-bottom: 1px solid __border__;

padding: 0;

margin: 0 0 0.6em 0 !important;

}



#tmpl_header #tmpl_header_nav {

font-family: Arial,Helvetica,sans-serif;

font-size: 0.85em; /* 14px (base: 16px) */

background-color: #021F8C; /* Change to desired background color */

}







#tmpl_header #tmpl_header_nav ul {

margin: 0;

padding: 0;

}



#tmpl_header #tmpl_header_nav ul li.level1 {

float: left;

border-right: 1px solid #fff;

list-style: none;

background-color: #021F8C; /* fix MSIE 6, Change to desired background color */

margin: 0;

}



#tmpl_header #tmpl_header_nav ul li.level1 div {

display: inline;

}



#tmpl_header #tmpl_header_nav ul li.level1 a,

#tmpl_header #tmpl_header_nav ul li.level1 a:visited {

color: #fff; /* Change to desired text color */

text-decoration: none;

text-transform: uppercase;

display: block;

padding: 10px 15px;  /*adjusted for mobile */

background: 0 none;

}



#tmpl_header #tmpl_header_nav ul li.level1 a:hover {

color: #ccc;

}

[kMist]

Could you do something with the width of your li ?

For example width: 20%?

I am not a master of mobile design but it seems as if this might be a good starting spot for you.

Kevin

[chrisburton]

Use media queries for mobile sites. Media queries allows you to target smaller screen sizes without targeting a mobile phone using javascript. It also defeats the purpose of having a separate mobile site with a subdomain.

[EricH]

I want to stay away from media queries I think. The problem is not mobile phone detection. I decided against media queries for a variety of reasons and choose to use php to detect the user agent. It fits for my needs. I think when media queries become a bit more standard I may try it out, it is also a bit trickier to use media queries due to the backend I am using for the site.

@kevin: I have tried that before and it works but the challenge is that it works for a specific number of

[Author]

Posts