Jump to content

Archived

This topic is now archived and is closed to further replies.

Ricklord

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

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

×

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.