text

[user4fun]

I decided to learn CSS and I am just starting, please bare with me.

body{background-image:url('images/vertical_gradient.jpg');background-repeat:repeat-x;} .BannerFloat{float: center;}

I want to have 4 links over an image that is using class="BannerFloat". The links are gray in color and placed in the top right corner of the image but not outside the image, Also, when onmouseover, the text color will change to bright white.This wil be easy for all of you, and I thank you for your help.

[thescientist]

why not just make the image the background of the element you are putting your links in? And maybe consider using the CSS psuedo-class for your hover effect instead of javascript.

[user4fun]

I already have a background image on the page. The banner is the top of the page with the logo, navigation bar, etc

[dsonesuk]

if you not planning to use any more content in banner, you can get away with using float, else use positioning instead with top: and right: properties.

<style type="text/css">.BannerFloat{background:url(SmallToLargeImageGallery/klematis3_big.jpg) no-repeat; width:381px; height:296px; margin:0 auto; /*position:relative;*/}.BannerFloat #links {float:right; /*position:absolute; right:0; top:0;*/}.BannerFloat #links a{display:block; float:left; padding: 0 5px; height:22px; color:#999999;}.BannerFloat #links a:hover{color:#FFFFFF;}</style><div class="BannerFloat"><div id="links"><a href="#">Link1</a><a href="#">Link2</a><a href="#">Link3</a><a href="#">Link4</a></div></div>

[user4fun]

That is awesome, it tought me a few more things, Just for learning purposes, if I wanted to ahve morethings on the banner. What would the other methods be?

[dsonesuk]

<style type="text/css">.BannerFloat{background:url(SmallToLargeImageGallery/klematis3_big.jpg) no-repeat; width:381px; height:296px; margin:0 auto; position:relative;}.BannerFloat #links {position:absolute; right:0; top:0;}#item { position:absolute;left:0; top:0;}#item2 { position:absolute;left:0; bottom:0;}#item3 { position:absolute;right:0; bottom:0;}.BannerFloat #links a{display:block; float:left; padding: 0 5px; height:22px; color:#999999;}.BannerFloat #links a:hover{color:#FFFFFF;}</style><div class="BannerFloat"><div id="links"><a href="#">Link1</a><a href="#">Link2</a><a href="#">Link3</a><a href="#">Link4</a></div><div id="item"><p>Item</p></div><div id="item2"><p>Item2</p></div><div id="item3"><p>Item3</p></div></div>

[user4fun]

You guys are awesome. Thank you

[Howdy_McGee]

could just use z-indexes and put the header image having a z-index of -1

[dsonesuk]

No, not to background image, you could add it to .BannerFloat, but it would probably put it behind the body, and then you won't see anything of .BannerFloat or its child elements. Same with using z-index: -1; on a img with position: relative.you would have to use<style type="text/css">.BannerFloat{width:381px; height:296px; margin:0 auto; position:relative;}.BannerFloat img {width:381px; height:296px; position:absolute; left:0; top:0; z-index:10;}.BannerFloat #links {position:absolute; right:0; top:0; z-index:20; width:100%;}#item { position:absolute;left:0; top:0;z-index:20;}#item2 { position:absolute;left:0; bottom:0;z-index:20;}#item3 { position:absolute;right:0; bottom:0;z-index:20;}.BannerFloat #links a{display:block; float:left; padding: 0 5px; height:22px; color:#999999;}.BannerFloat #links a:hover{color:#FFFFFF;}</style>