adjustable size of menu background

tudor / 2009-10-13 09:48:09   

hello.
i would like to have with my expandable menu the background color to adjust to the minimum size required.

for example:
http://www.lafilladelfotografu.com/

where to start?

thank you.

Vaska A / 2009-10-13 09:57:27   

Could you explain more? I don't understand what you are trying to achieve...

tudor / 2009-10-13 10:07:26   

yes.
as u can see in the site i gave as example, the result is there. the white background of the menu follows the content of the menu..
so when menu is no expanded the white background is smaller and as u start expanding the menues it grows..

Webpage

i hope that is not a very complex procedure..

thanks a lot vaska.

lemathieu A / 2009-10-13 10:47:40   

I encourage you to have a look at the way she does it via her source code (and get firebug for firefox, it's great).
You will see what she done.

tudor / 2009-10-13 11:18:41   

thanks lemathieu.
i was using developer tools with google chrome.
i installed firebug as well..now..
but as i am a beginner it always more helpfull a hint and then i can have a clue what to do..
thanks.

tudor / 2009-10-13 17:03:52   

hello.
sorry, but i was not able to find what is the effect used to get this slide of the background behind the menu bar, when expandable menus extend or shrink..

a direction would be really helpful, so i can look more into that.
thanks.

lemathieu A / 2009-10-13 17:27:59   

that start with "height:auto;" in the #menu

tudor / 2009-10-13 17:35:57   

i did that.
that i figured it out..
the rest is a mystery..
i don't know if it is a j query .js

lemathieu A / 2009-10-13 18:40:41   

not at all… pure css.
it says "the content stay inside the bloc at 20px of th bottom…" so when the expandable menu works (this is a .js/javascipt), the block expand.

what's your site ?

tudor / 2009-10-13 18:42:41   

www.tudorvlasceanu.com
i will have a look at the .css
merci.

tudor / 2009-10-13 19:00:40   


do i need to ad more code in the .css except height: auto (which i already have)
the thing doesn't work with only this.

lemathieu A / 2009-10-13 19:38:53   

ok, better with the link…

So, in your #menu code you have

  1. top: 4px;
  2. left: 10px;
  3. bottom: 0;

If top : 4 px mean your menu start at 4px from the top, left : 10px it start at 10pixels from the left and…

;)

arsondpi / 2009-10-13 19:41:07   

Movebackground:#fff; from #menu to #menu .container

I'm not gonna explain this better. Consider it a part of an excercise.

tudor / 2009-10-13 19:43:47   

uhuuuu.
merci lemathieu.
for patience and guidance...
it works
haha.
thanks

tudor / 2009-10-13 19:55:00   

guys i have only one problem.
the menu works just fine
but when i go to

say hi to me

i get scroll bars..even if i don't need them yet.
i used iframed to put the say hi to me into one exhibit.
any idea how to get rid of this.
thanks.

lemathieu A / 2009-10-13 20:18:30   

search the menu for iframe scroll bar issues…
you will find.

;)

tudor / 2009-10-13 21:28:13   

i moved the background #ffff in
the .container and the scroll issue is solved, but now i have a big area with white transparent color over my random background...
what can i move more
thanks.
Webpage

arsondpi / 2009-10-13 22:14:19   

I mentioned #menu .container not .container only.

tudor / 2009-10-13 22:53:21   

i think i fixed.
many thanks.

tudor / 2009-10-13 23:56:37   

thanks to all.
:)

This thread has been closed, thank you.