Jump to content

best CSS rule for multiple images? <<<solved>>>


Ricklord

Recommended Posts

Hi Guys,

Ok im having a problem with the layout of my images.

I have got a number of images which will be on top of each other ie navigation bar background styled in style sheet and then the text and links which is also in the style sheet.

Which would be the best rule to use for these to over lap and work in other browsers apart from IE, as i can get them to work in IE but not Firefox, they appear misaligned so im recoding the the site to work in firefox.

Some body suggested the float style but this puts the image behind my nav bar. ive tried using z-index but dont fully understand how that works apart from i guess z-index:1 is furthest in the background and z-index:2 would be on top of index 1. if this is the case it doesnt seem to be working.

Any suggestions are welcome.

Rick
Link to comment
Share on other sites

Why use inaccessible images for navigation when text can be so simple and beautiful?

http://ccc.maxdesign.com.au - look over the various list tutorials that offer navigation alternatives that function cross-browser reliably and simply.
Link to comment
Share on other sites

it is text but when i style it, it comes up behind the nav bar image.

I have totally messed around with things i don't have a clue about and this is what ive now got which doesnt work at all but will hopefully better explain what im trying to do.

This is the nav bar image
[code]#top_bar {
  position:absolute;
  text-align: right;
  height: 35px;
  width: 100%;
  padding: 150px 0 0 0;
  background-position: bottom;
  background-image: url(../web_design/images/top_bar.gif);
  background-repeat:repeat-x;
  z-index:20;
}[/code]
within in the div tags in the html ive not got anything.


This is the nav bar text
[code]#navigation {
  float: right;
  text-align: right;
  height: 5px;
  padding: 150px 0 0 0;
  width: 100%;
  z-index:21;
}[/code]
In the div tag here i have got text links.

I have played around with many variations of different rules which postion teh image/text and i cant get any to work properly for me.

What is the best one to use and what is the best way to posiotion it around the page. is padding the only way?

Hope someone can help me as this one is starting to annoy me.  :(

Cheers

Rick
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.