ansaurus

Question

How do I make my CSS/HTML category menu minimize gracefully when a user minimizes the browser window?

Answer 1

+1 A:

I haven't got the time to finish this but after working on it this is what I got: (Posting here cause the save function didn't seem to work).

<!DOCTYPE html>
<html>
  <head>
    <title>
      Categories DIV Problem
    </title>
    <style type="text/css">
      /*** GLOBAL ***/

      *
      {
        padding: 0;
        margin: 0 auto;
        outline: none;
      }

      html, body
      {
        height: 100%;
        font: .9em Arial ,san-serif;
      }

      ul, li
      {
        list-style: none;
      }

      .clear
      {
        clear: both;
      }  

      /*** PAGE ***/

      #container
      {
        max-width: 1000px;
        width: 85%;
        height: auto;
        min-height: 100%;
        margin: 0 auto;
      }

      /*** CATEGORIES ***/

      #categories
      {

        height: 100%;
        /* padding: 20px; */
        margin: 5px 0 0 0;
      }

      #main
      {
        background: orange;
        height:50px;

      }

      #sub
      {
        background: yellow;
      }

      #cat-main
      {

      }

      #cat-sub
      {
        float: left;
      }

      .cat-name-box
      {
        float: left;
        height: 100%;
        background: #ddd;
      }

      .cat-choice-box
      {
        width:auto;
        background: purple;

      }


      #categories li
      {
        float: left;
        padding: 3px 8px;
        margin: 1px;
      }

      #cat-main li
      {
        background: #D7B0FF;
      }

      #cat-main li:hover
      {
        cursor: pointer;
        background: #9A38FF;
        color: #fff;
      }  

      #cat-sub li
      {
        background: #85FF87;
      }

      #cat-sub li:hover
      {
        cursor: pointer;
        background: #00C403;
        color: #fff;
      }    

    </style>
  </head>
  <body>
    <div id="container">
      <div id="categories">
        <div id="main">
          <div class="cat-name-box">Main Categories</div>
          <ul class="cat-choice-box" id="cat-main">
            <li>Technology</li>
            <li>Politics</li>
            <li>Business</li>
            <li>Science</li>
            <li>Music</li>
            <li>Film</li>
            <li>Art</li>
            <li>Health</li>
            <li>Sports</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

Problem is the height set on the container of the text + ul, it has to be set for the p-element(I changed it to div I think, can't remember why)to inherit the 100% height.

Hope this kind of helps though I know this isn't the entire solution.

Rakward 2010-08-07 12:38:25

@Rawkward thanks but the problem is that the height can not be set to a fixed hieght like 50px because 1.) If there are only a few categories then we have space for two rows of categories when we only need space for one row. This is the case when the browser window is maximized. 2.) If there are more categories added later and the window is minimized we may need more than 2 rows for the <li> elements to fall into. What I am seeking is a way for the height of the #sub and #main divs to expand in height when the window is minimized so it can fit extra <li> elements that squish.

J3M 7OR3 2010-08-07 20:24:04

I know, like I said, not an entire solution.You could probably do it easily with jQuery if CSS doesn't allow this behaviour. If so make a fixed width version first, then if javascript is disabled you'd still have a decent menu, only with a horizontal scrollbar on smaller windows.Question, is this html structure neccesary or will any other do? if the result is the same?

Rakward 2010-08-07 20:45:25

Answer 2

A:

What I had to do was to add display: table; to the ul element and get rid of float:left. Now it minimizes as I would like across Firefox, Chrome, IE, Opera and Safa Here is the link to the new updated code

J3M 7OR3 2010-08-08 08:23:48

ansaurus

tags:

views:

answers:

How do I make my CSS/HTML category menu minimize gracefully when a user minimizes the browser window?

My Problem

The Solution I Seek

related questions