Proportionally resize horizontal unordered list menu made of images

Question

This is driving me crazy. I have an horizontal menu that is an ul with many li elements inside. The li elements contain img elements that are links. I want the menu to be as wide as possible, proportionally maintaining its entire ratio. Resizing the page should proportionally resize the menu as well.

How it is now ---> How it should be

JSFiddle

I've tried a lot of stuff, but couldn't find anything that works. This is my current, horrible, CSS:

#container {
    display: inline;
    padding: 0 0;
    margin: 0 0;height: 20px;
    display: block;
}
#container ul {
    display: inline;
    list-style: none;
    white-space: nowrap;
    padding: 0 0;
    margin: 0 0;
    height: 100%;
    width: auto;
}
#container ul li {
    display: inline;
    list-style-type: none;
    padding: 0 0;
    margin: 0 0;
    float: left;
    height: inherit;
    max-width: 100%
}
#container ul li img {
    height:100%;
    max-width: 100%
}

please add jsfiddle, so we can fiddle with it. but your `ul` element is not set for 100% width, neither is your container — Elen, Sep 13 '13 at 10:44
@Elen: sorry: here's a [JSFiddle](http://jsfiddle.net/bAFWv/1/) — Vittorio Romeo, Sep 13 '13 at 10:52

score 3 · Accepted Answer · edited May 23 '17 at 12:24

Ok, I looked at you code and come up with a different solution:

I have downloaded 2 column flexible layout from - http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm

Then used this trick to fit your menu in - Stretch horizontal ul to fit width of div

code is too long, so here is jsFiddle - http://jsfiddle.net/GF9Lr/

but the main bit:

/* reset image and allow center align */
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#menu {
    clear:both;

}
#menu ul {
    display: table;
    float:left;
    width:100%;
    list-style:none;
    margin: 0;
    padding:0;
    margin-bottom: 20px; /*this is for top margin of content */
}
#menu ul li {
    display: table-cell;
/*  display:inline; your old code*/
    list-style:none;
    text-align:center;
    background:#eee;
    border: 1px solid red;
    margin:0;
    padding:0;
}
#menu ul li a {
    display:block;
    color:#000;
    text-decoration:none;
    position:relative;
    margin: 0 ;
}

I put borders there, so you can see how your layout is positioned. You can remove them once clear on how it works.

Still not what I want: try resizing the page horizontally - menu items either disappear or their padding increases - I want them to be resized as shown in my example pictures. — Vittorio Romeo, Sep 13 '13 at 12:30
I can't see problems resizing horizontaly. Put min-width for col1 so menu don't disappear. All I did is a start for **your own** code. If you want images to resize - look into http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries - see updated version - http://jsfiddle.net/GF9Lr/1/. next time make your question clearer — Elen, Sep 13 '13 at 12:48

Avdhut · Answer 2 · 2013-09-13T12:15:01.087

0

Try and add proper width to the will help, try to change the code as:

#container ul li img {
    height:100%;
    width: 30px;
}

Note: A jsfiddle will help more and will be helpful to give a specific solution

[Update]

Hope the following jsfiddle solves your problem: http://jsfiddle.net/avdhut/bAFWv/2/

edited Sep 13 '13 at 12:15

answered Sep 13 '13 at 11:08

Avdhut

150
4
15

Thanks for providing a jsfiddle. Here is the answer I have tried some code changes : http://jsfiddle.net/avdhut/bAFWv/2/ – Avdhut Sep 13 '13 at 12:12
not what I want. The images are stretched and do not resize if the container is resized by enlarging the browser. – Vittorio Romeo Sep 13 '13 at 12:15

Proportionally resize horizontal unordered list menu made of images

2 Answers2