Member Avatar for SimonIoa

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>
  • 4 Contributors
  • 10 Replies
  • 276 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by SimonIoa
Member Avatar for DaveAmour

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

Member Avatar for SimonIoa

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

Member Avatar for DaveAmour

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>
Member Avatar for Troy III

<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

    }
Member Avatar for Troy III

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?!

Member Avatar for alisajjad160

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

Member Avatar for SimonIoa

@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

Edited by SimonIoa because: mark
Member Avatar for Troy III

@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!

Member Avatar for SimonIoa

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...

Edited by SimonIoa because: marked
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.