/    Sign up×
Community /Pin to ProfileBookmark

auto width menu

Copy linkTweet thisAlerts:
Mar 15.2010

Greetings,

I’m not sure how to explain this, but I want a menu that will automatically size based on the browser window size.

Here’s the HTML and CSS:

[CODE]<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css”>
<style type=”text/css”>
.nav {background: #000; width: 100%;}
ul {width: 100%;}
ul li {background: #ccc; border: solid 1px #aaa; float: left; line-height: 1.4em; padding: 0 1em; text-align: center;}
.clear {clear: both;}
</style>
</head>
<body>
<div class=”nav”>
<ul>
<li><a href=”#”>Menu item 1</a></li>
<li><a href=”#”>short</a></li>
<li><a href=”#”>Menu item 3</a></li>
<li><a href=”#”>Longer menu item should work too</a></li>
<li><a href=”#”>Menu item 5</a></li>
</ul>
<div class=”clear”></div>
</div>
</body>
</html>[/CODE]

It should look like the attached image.

The goal is to find a way to stretch the menu items across the nav div so that no black would be showing. Almost like you would set % widths to them. I want the content inside to determine the width though…I don’t want them all to be 20% wide.

  • – I don’t want them to be all the same width

  • – I want it to stretch to 100%

  • – The size needs to be determined by the content within

    • What would be the best way to achieve this?

    Thanks in advance.

    [upl-file uuid=20ad8262-4bef-457e-a5f4-092960c2ed31 size=36kB]test.jpg[/upl-file]

    to post a comment
    CSS

    2 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @tirnaMar 16.2010 — When you float or display:inline block level elements they are taken out of the normal page flow.

    To get the effect you want it's probably easier, at least for me, to use a table since table cell widths are influenced by their content which is what you want.

    The code below makes an elastic horizontal menu filling the containing div's width.

    I put a blue 1px border around the td's so you can where each menu item starts and ends

    It works ok in IE8


    [CODE]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
    <html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="[URL]http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css[/URL]">
    <style type="text/css">
    .nav {border: 1px solid green; background: #000; width: 100&#37;;}
    ul {border: 1px solid red; width: 100%;}
    ul li {background: #ccc; border: ipx solid blue; display: inline; line-height: 1.4em; padding: 0 1em; text-align: center;}
    .clear {clear: both;}

    table {
    width: 100%
    }

    table td {border: 1px solid red}

    .cells {background: #ccc; border: 1px solid blue; line-height: 1.4em; padding: 0 1em; text-align: center;}
    </style>
    </head>
    <body>
    <!--
    <div class="nav">
    <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">short</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Longer menu item should work too</a></li>
    <li><a href="#">Menu item 5</a></li>
    </ul>
    <div class="clear"></div>
    </div>
    -->

    <div class="nav">
    <table>
    <tr>
    <td class="cells"><a href="#">Menu item 1</a></td>
    <td class="cells"><a href="#">short</a></td>
    <td class="cells"><a href="#">Menu item 3</a></td>
    <td class="cells"><a href="#">Longer menu item should work too</a></td>
    <td class="cells"><a href="#">Menu item 5</a></td>
    </tr>

    </table
    </div>

    </body>
    </html>

    [/CODE]

    btw - you got my attention when I saw

    [CODE]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
    <html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]" xml:lang="en" lang="en">
    [/CODE]

    at the top of your html - I like it ???
    Copy linkTweet thisAlerts:
    @cbVisionauthorMar 16.2010 — Thanks for the suggestion! It sounds like tables or the use of the table-cell CSS properties is the only way to go. I suppose ONE table won't hurt.

    Glad you like my script doctype. That's the only way to go!
    ×

    Success!

    Help @cbVision spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...