Jump to content


Photo

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


  • Please log in to reply
2 replies to this topic

#1 Ricklord

Ricklord
  • Members
  • PipPipPip
  • Advanced Member
  • 60 posts

Posted 02 August 2006 - 05:34 PM

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

#2 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 02 August 2006 - 05:38 PM

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.
Legend has it that reading the manual never killed anyone.
My site

#3 Ricklord

Ricklord
  • Members
  • PipPipPip
  • Advanced Member
  • 60 posts

Posted 02 August 2006 - 05:54 PM

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
#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;	
}
within in the div tags in the html ive not got anything.


This is the nav bar text
#navigation {
  float: right;
  text-align: right;
  height: 5px;
  padding: 150px 0 0 0;
  width: 100%;
  z-index:21;
}
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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users