graphic menu boxes in css?

  • Indulge
  • Beginner
  • Beginner
  • Indulge
  • Posts: 53
  • Loc: Germany

Post 3+ Months Ago

Hi there,
I am just starting to get the hang of css as a design-tool.
What I would like to do is this:
A menu box (graphic) with a top-part (where it has a logo and the header of the menu), a middle part (where it uses a few-pixel-high graphic as a background) with the links in it and a bottom part (rounded corner thing).

I thought it would be easy to do with something like this:

Code: [ Select ]
#menuboxtop1 {
     background-repeat: no-repeat;
     background-image: url(pics/menubox_top.gif);
        }

  #menuboxcenter {
     background-repeat: repeat-y;
     background-image: url(pics/menubox_bg.gif);
     height: 100px;
          }

  #menuboxbottom {
     background-repeat: no-repeat;
     background-image: url(pics/menubox_bottom.gif);
          }

  1. #menuboxtop1 {
  2.      background-repeat: no-repeat;
  3.      background-image: url(pics/menubox_top.gif);
  4.         }
  5.   #menuboxcenter {
  6.      background-repeat: repeat-y;
  7.      background-image: url(pics/menubox_bg.gif);
  8.      height: 100px;
  9.           }
  10.   #menuboxbottom {
  11.      background-repeat: no-repeat;
  12.      background-image: url(pics/menubox_bottom.gif);
  13.           }


(I also tried to put another Div around it as a container. But that doesn't help me either.)
And in the HTML just arrange it via div style...
But it just shows me the text I put between the div tags of the menuboxcenter-div.

I found some tutorials about round corners but I thought, it should be possible to put a three-part-menubox together this way.

Can anyone tell me if it is possible? And if it is...what did I do wrong?

Thank you, guys

PS: Excuse my french, I'm German :D
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • monoheinz
  • Student
  • Student
  • User avatar
  • Posts: 79
  • Loc: Norway

Post 3+ Months Ago

Are you sure the path to the gifs are correct? Also, you should set the height of the top and bottom divs.
Edit: Setting the width is also a good idea :)

This should work, just change the values:
Code: [ Select ]
#menuboxtop1 {
background-repeat: no-repeat;
background-color:#0000ff;
width:100px;
height:20px;
}

#menuboxcenter {
background-repeat: repeat-y;
background-color:#00ff00;
height:100px;
width:100px;
}

#menuboxbottom {
background-repeat: no-repeat;
background-color:#ff0000;
width:100px;
height:20px;
}
  1. #menuboxtop1 {
  2. background-repeat: no-repeat;
  3. background-color:#0000ff;
  4. width:100px;
  5. height:20px;
  6. }
  7. #menuboxcenter {
  8. background-repeat: repeat-y;
  9. background-color:#00ff00;
  10. height:100px;
  11. width:100px;
  12. }
  13. #menuboxbottom {
  14. background-repeat: no-repeat;
  15. background-color:#ff0000;
  16. width:100px;
  17. height:20px;
  18. }
  • Indulge
  • Beginner
  • Beginner
  • Indulge
  • Posts: 53
  • Loc: Germany

Post 3+ Months Ago

Thanks for the reply...
Something is wrong, but I can't figure it out. If I give the container a backgroundcolor and write some text in it, it shows the text but not the color.
The image paths are correct (triple-checked) ...
I thought it was such a good Idea. Easy boxes without graphics I can do...but this seems to be different....
Thanks anyways...I'll keep on trying...
  • monoheinz
  • Student
  • Student
  • User avatar
  • Posts: 79
  • Loc: Norway

Post 3+ Months Ago

Do you have a link to the problem? Because this sounds too weird...
  • Indulge
  • Beginner
  • Beginner
  • Indulge
  • Posts: 53
  • Loc: Germany

Post 3+ Months Ago

Oh.... It works....I'm sorry.
but I am ashamed to even say it...how can any one woman be so stupid?
I put a Div style and not <div id=....> in the HTML.
So sorry...pleeeeeeez delete this proof of my shame ...
Thank you mono...anyways....
*goes to stick her head into the oven*
  • Truce
  • Guru
  • Guru
  • Truce
  • Posts: 1477
  • Loc: Washington DC

Post 3+ Months Ago

No shame should be felt. Everyone makes mistakes here and there! Just remember the kind of things that happen when an element isn't correctly referenced to the id or class!

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 72 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.