?
Solved

Menubar doesn't resize with the page

Posted on 2006-03-24
6
Medium Priority
?
250 Views
Last Modified: 2008-02-26
Thanx for looking at my question. I've been struggeling with this website for days now and can't find the solution to it. The problem is like this.
I created, in my stylesheet, 3 containers (#container, #content and #menu). This works fine and is just like I want it because I don't want my divisions to go deeper than 3 levels.
But whenever i look at it in IE the menu doesn't go further (backgroundcolor of the menu) if the text goes further than the menu. And even worse if I look at it in Firefox.

Can anybody give me a lead how to solve this because I tried all kinds of forums and nobody can answer my question.

This is my stylesheet:
/** ALGEMEEN *********************************************/
html, body{
      height: 100%
}
body{
      background-color: #978C84;
      font: 0.8em Verdana, Arial, Helvetica, sans-serif;
      height: 100%;
      margin: 10px;
      padding: 0;
}
/*********************************************************/
/** CONTAINERS *******************************************/
#container{
      background-color: #FFFFFF;
      border-bottom: 10px solid #1772A7;
      border-top: 10px solid #1772A7;
      height: 100%;
      width: 900px;
}
#content{
      background-color: #FFFFFF;
      height: 100%;
      float: left;
      padding: 5px;
      width: 680px;
}
#menu{
      background-color: #272727;
      float: right;
      height: 100%;
      width: 200px;
}
/*********************************************************/
/** NAVIGATIE ********************************************/
#menu ul{
      border: 0;
      list-style: none;
      margin: 0 0 10px 0;
      padding: 0;
}

#menu ul li {
      border-top: 1px solid #444;
      font-size: 1.0em;
      text-align: left;
      margin: 0 0 0 0;
}

#menu ul li a {
      color: #ccc;
      display: block;
      margin: 0;
      padding: 8px 5px 8px 10px;
      text-decoration: none;
      width: 185px;
}
#menu ul li a:hover {
      background: #444;
      color: #fff;
}
#menu .menuheader {
      border-top: 0;
      color: #888;
      font: normal 1.0em Arial, Helvetica, sans;
      letter-spacing: 0.2em;
      margin: 0 0 1px 0;
      padding:12px 5px 12px 10px;  
      text-transform: uppercase;
}
#menu .menuheader a {
      border-top: 0;
      color: #888;
      display: block;
      margin: 0;
      padding:0;
      width: 175px;
}
#menu .menuheader a:hover {
      background: none;
      color: #ccc;
}
/*********************************************************/

This is the temporary url of the page: http://www.df5ea.com/projects/projecten_inont/vakfotografiewimstad.nl_3/

I'm not new with CSS and XHTML but some things I just don't get the answer to so I have to ask some experts ;)
0
Comment
Question by:Sander Stad
  • 3
  • 3
6 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 16278218
To have firefox not use height as maximum and minimum height at the same time, you can use instead of height:100% :

height: auto !important;
min-height: 100%;
height : 100%;

Firefox supports !important, msIE not.

-r-
0
 
LVL 9

Author Comment

by:Sander Stad
ID: 16278240
OK that works great already, but how do i get the menu to be the same height as the content page ?
0
 
LVL 49

Accepted Solution

by:
Roonaan earned 700 total points
ID: 16278260
You would have to create a two-coloured background image and assign it to the container div and let it have background-repeat:repeat-y;

Then remove the backgroundcolor on the menu and content div, such that the background image shines through.

Finally add a clearing div (<div style="clear:both"></div>) just in front of the </div> of your container div. This makes sure that the container is as high as the highest one out of the menu and content div.

-r-
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Author Comment

by:Sander Stad
ID: 16278338
Thanx that works perfect !

0
 
LVL 9

Author Comment

by:Sander Stad
ID: 16278346
Do you have any websites where I can get this kind of information about across browser positioning?

I read a lot of articles about CSS so that could help me in the future.
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16278355
csszengarder; positioneverything. There are many.

Doesn't css.pagina.nl exist btw?

-r-
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses
Course of the Month14 days, 4 hours left to enroll

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question