CODEWITHSUNDEEP
javascriptjqueryhtmlcss
pcproff
pcproff

Reputation: 622

CSS position change on image next to it

So, I have the same image that I need to overlap each other. The first one as you can see has an z-index:1 and the others of 0. But, as the images keep repeating I have to keep creating a new style to make the next one 115px to the right. Is there a css pseudo method to automate this or do I have to revert to using jquery or js to bump it to the right?

<style>
img.overlap{z-index:1;position:absolute;left:670px;}
img.underlap{z-index:0;position:absolute; left:785px;}
</style>

<div class="span12">
     <a href="#"><img src="img/blue_btn.png" alt="Home" class="overlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="About" class="underlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Services" class="underlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Portfolio" class="underlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Blog" class="underlap"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Contact" class="underlap"/></a>
</div>

UPDATE: I was cropping the image as I read this post as I knew that it would be hard to visualize. Here is the nav area. I have cropped the first one and I will repeat them and later change the alpha with jquery.

http://weslice.com/images/nav_complete.jpg

Upvotes: 0

Views: 214

Answers (4)

Jasper
Jasper

Reputation: 76003

How about using display : inline-block to get your elements to sit next to each-other, then use margin : -*px to overlap the elements:

.span12 a {
    display : inline-block;
    margin  : 0 0 0 -20px;/*this margin is responsible for the overlap between elements*/
    
    /*IE 6&7 Compatibility*/
    *display : inline;/*only read by IE7*/
    zoom     : 1;/*give the element the `hasLayout` property since you can't give it to an element directly*/
    _height  : 50px;/*only read by IE6, but is necessary to specify a height for IE6*/
}

Here is a demo: http://jsfiddle.net/WJKS5/2/

Update

To stack the element from left to right instead of right to left:

.span12 a {
    float  : right;
    margin : 0 -10px 0 0;/*this margin is responsible for the overlap between elements*/
}

Here is a demo: http://jsfiddle.net/WJKS5/4/

Upvotes: 2

ScottS
ScottS

Reputation: 72261

I think this fiddle http://jsfiddle.net/2vUzp/9/ achieves the effect without the need for classes (though it does reverse the order of the menu in the html, but not in what is displayed to the average user). After looking at your sample image, you may not want the "hover" effect in my example, but that can be removed.

CSS

.span12 {
    float: left;
}

.span12 a {
    position: relative;
    margin-right: -30px;
    display: block;
    float: right;
}

.span12 a:first-child {
    margin-right: 0;
}

.span12 a:hover {
    z-index: 1;
}

.span12 img { /*for demo*/
    display: block;
    width: 100px;
    height: 20px;
    border: 1px solid blue;
    background-color: cyan;
}

HTML

<div class="span12">
     <a href="#"><img src="img/blue_btn.png" alt="Contact"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Blog"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Portfolio"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="Services"/></a>
     <a href="#"><img src="img/blue_btn.png" alt="About" /></a>
     <a href="#"><img src="img/blue_btn.png" alt="Home" /></a>
</div>

Upvotes: 1

Randy Hammons
Randy Hammons

Reputation: 1

Since you are trying to accomplish an overlap, floating's probably not going to work. I would recommend you use CSS sibling selectors and write rules specifically for 'img', 'img + img', 'img + img + img', etc. that would increase incrementally. I think that should be the only pure CSS way around it. Doing this with JavaScript would be a breeze.

Upvotes: 0

kitti
kitti

Reputation: 14814

You should try using float and margins instead of absolute positioning.

http://www.w3schools.com/css/css_float.asp

Upvotes: 2

Related Questions