I have created a cycle image style using CSS. The thing is when i put the images on anchor <a> the style is lost...

This is the css code

.poster {
    width:25%;
    height:25%;
    position:absolute;
    margin-left:20px;
    z-index:0;
}
    .poster a img {
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        height:55px; width:55px
    }
    .poster a img:nth-child(1) {

        position:relative;
        bottom: -57%; left: 33%;
    }
    .poster a img:nth-child(2) {

        position:relative;
        bottom: -15%; right:-6%;
    }
    .poster a img:nth-child(3) {

        position:relative;
        bottom: 18%; left: 10%;
    }
    .poster a img:nth-child(4) {

        position:relative;
        top: 10%; right: -17%;
    }
    .poster a img:nth-child(5) {

        position:relative;
        top: 55%; right: 7%;
    }
    .poster a img:nth-child(6) {

        position:relative;
        top: -20%; right: -40%;
        height:100px;
        width:100px

    }

and this is the HTML. if you remove the anchor tags it works fine

 <div class="poster">
                                <a><img src='http://s2.blomedia.pl/gadzetomania.pl/images/2012/08/ceny-logo-2-304166.jpg' alt='' /></a>
                                <a><img src='http://s2.blomedia.pl/gadzetomania.pl/images/2012/08/ceny-logo-2-304166.jpg' alt='' /></a>
                                <a><img src='http://s2.blomedia.pl/gadzetomania.pl/images/2012/08/ceny-logo-2-304166.jpg' alt='' /></a>
                                <a><img src='http://s2.blomedia.pl/gadzetomania.pl/images/2012/08/ceny-logo-2-304166.jpg' alt='' /></a>
                                <a><img src='http://s2.blomedia.pl/gadzetomania.pl/images/2012/08/ceny-logo-2-304166.jpg' alt='' /></a>
                                <a><img src='http://s2.blomedia.pl/gadzetomania.pl/images/2012/08/ceny-logo-2-304166.jpg' alt='' /></a>
                      </div>

What is a cycle image style? What's the page supposed to look like?

the are 5 images surrounding a bigger image like satellites, if you remove the anchor tags on your editor you should see it.

Does this help?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style>
        .poster
        {
            width: 25%;
            height: 25%;
            position: absolute;
            margin-left: 20px;
            z-index: 0;
        }

        .poster img
        {
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            height: 55px;
            width: 55px;
        }

        .poster a:nth-child(1)
        {
            position: relative;
            bottom: -57%;
            left: 33%;
        }

        .poster a:nth-child(2)
        {
            position: relative;
            bottom: -15%;
            right: -6%;
        }

        .poster a:nth-child(3)
        {
            position: relative;
            bottom: 18%;
            left: 10%;
        }

        .poster a:nth-child(4)
        {
            position: relative;
            top: 10%;
            right: -17%;
        }

        .poster a:nth-child(5)
        {
            position: relative;
            top: 55%;
            right: 7%;
        }

        .poster a:nth-child(6)
        {
            position: relative;
            top: -20%;
            right: -40%;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="poster">
        <a href="#"><img src='http://s2.blomedia.pl/gadzetomania.pl/images/2012/08/ceny-logo-2-304166.jpg' alt='' /></a>
        <a href="#"><img src='http://s2.blomedia.pl/gadzetomania.pl/images/2012/08/ceny-logo-2-304166.jpg' alt='' /></a>
        <a href="#"><img src='http://s2.blomedia.pl/gadzetomania.pl/images/2012/08/ceny-logo-2-304166.jpg' alt='' /></a>
        <a href="#"><img src='http://s2.blomedia.pl/gadzetomania.pl/images/2012/08/ceny-logo-2-304166.jpg' alt='' /></a>
        <a href="#"><img src='http://s2.blomedia.pl/gadzetomania.pl/images/2012/08/ceny-logo-2-304166.jpg' alt='' /></a>
        <a href="#"><img src='http://s2.blomedia.pl/gadzetomania.pl/images/2012/08/ceny-logo-2-304166.jpg' alt='' /></a>
    </div>
</body>
</html>

<a> is not an Anchor Element without a properly initialized href object.
It's the same as if you've written:

_> <z><img.../></z>

so it will inherit from HTMLUnknownElement Prototype.

But, your real problem is the <img> tags being nested into <a> elements.
Which are inline elements; have no layout; and no position in document flow.

Your css targeting images, which are relative. But relative to what?

So to cut the story short, [this] quick tweak of your existing css, will restore the presentation to its previous state:

.poster a img{ width:100%; height:100% }
.poster a { display: inline-block; }
.poster {
    width:25%;
    height:25%;
    position:absolute;
    margin-left:20px;
    z-index:0;
}
    .poster a,.poster img {
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        height:55px; width:55px
    }
    .poster a:nth-child(1) {

        position:relative;
        bottom: -57%; left: 33%;
    }
    .poster a:nth-child(2) {

        position:relative;
        bottom: -15%; right:-6%;
    }
    .poster a:nth-child(3) {

        position:relative;
        bottom: 18%; left: 10%;
    }
    .poster a:nth-child(4) {

        position:relative;
        top: 10%; right: -17%;
    }
    .poster a:nth-child(5) {

        position:relative;
        top: 55%; right: 7%;
    }
    .poster a:nth-child(6) {

        position:relative;
        top: -20%; right: -40%;
        height:100px;
        width:100px

    }

SimonIoa, thanks for the endorsements and all but I think that our vast community would be benefiting a lot more from marking helpful posts and solutions for what they are, because you didn't, - why?!

Troy is right, you must use href attribute in <a href='#'> like that. now this code will work.

@TroyIII you mean that i shouldn't post issues as simple as this one? Or that i should vote for your answer and say that it is the right one? The reason i was late is because i find the solution days before and i didn't visit -as i should- my daniweb account. In any case thanks for your time and your answer

@SimonIoa, you are still late! Because once again you refuse to mark the thread as solved.
Secondly
You say "because (you've found) the solution days before"

Yet, everybody can see that your question was posted:
4 days ago;
and that my solution (to your problem- not mine) was also given:
4 days ago!

Meaning, exactly the same day you've asked the question. So…, people may be scratching their heads while asking:
How is it that you've found the solution days before even having the problem?

Ain't that the most ridiculous lie you've ever heard?

And...
No, SimonIoa - I said "that our vast community would be benefiting a lot more from marking helpful posts and solutions for what they are"
That is: SOLVED! Because you didn't, and I asked - why?

p.s.:
And you still haven't!

Relax. Try to be kind i won't mark it as solved untill you do that. stop acting like a bully. You dont have the authority to tell people what to do...

commented: I am being kind you unthankful lying bitch -2
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.