Layering

  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

Ok now here I come again with question :). I have a menu that is going across my screen. I want to have like a bar going across and buttons on top of it . I have .jpg for the bar which I will repeat along the X. I want to put the buttons on top. How can I do that ??
I also have a logo in the left corner ....
Kind of the same way as the OZZU's top menu ...
thanks for the help. :)


edit: After a quick look at the code of Ozzu.com I realize that you are using tables and I do not want to do that. Any suggestiongs ?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

just use an empty div, that is the right height (width will automagically by 100%). Then apply the background image.

The logo can be placed using position:absolute and give it a high z-index so that it will sit on top of the other elements.
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

yes I thought about that but I also have buttons ?
I am kind of anxious about using absolute positioning. What if someone is seeing the page at different resolution ? Or in resized window ? They wont be able to see all of it.... What abou this:
[code]
div.menubar
{
height: whatever;
width: 25%;// lets say I will have 4 menu options
background-image: myimage.jpg
backgound-repeat: x;
text-align: center;
margin-left:0; //so that there is no space between
margin-right: 0;
float: left; //so that they are on the same line.
float: right;
z-index: 1;//visible
}
That was on the fly :) I will try it, seems it might
work.
div.logo
{
z-index: 2;//so it is on the top of the menu
width: 10%;
//do I need to float it ?
position: absolute;
top: "whatever";
left: "default" ;
}
Hmm sorry about me posting all that, just inspiration :D

edit: BTW thanks for the help. I was hoping that you post an answer :).
Thanks man.


another edit :) :
my background-image won't include the file. The URL is right, when I paste it in the browser the image comes up. I think my browser hates me. :) I had the same problem before. I also notice that when I update something in the CSS and refresh the old property is still active. I guess it is pulling from the cashe and I do not want that .... I'm running apache. Do you know if thats from the server or the browser ??
Thanks.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 56 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.