Anchor <a> problem

Question

SimonIoa 77 Master Poster

9 Years Ago

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>

web-design

4 Contributors
10 Replies
274 Views
4 Days Discussion Span
Latest Post 9 Years Ago Latest Post by SimonIoa

All 10 Replies

DaveAmour 160 Mmmmmm beer

9 Years Ago

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

DaveAmour 160 Mmmmmm beer

9 Years Ago

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>

Troy III 272 Posting Pro

9 Years Ago

<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

    }

Reply to this topic

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.

SimonIoa 77 Master Poster · Answer 1 · 2015-03-28T19:28:59+00:00

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

Troy III 272 Posting Pro · Answer 2 · 2015-03-29T00:11:34+00:00

...and here is a fiddle http://jsfiddle.net/qyu9q09v/
is this how they used to look?

Troy III 272 Posting Pro · Answer 3 · 2015-03-30T01:14:25+00:00

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

alisajjad160 0 WPUIDEV - CEO · Answer 4 · 2015-03-31T06:52:43+00:00

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

SimonIoa 77 Master Poster · Answer 5 · 2015-04-01T16:32:21+00:00

@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

Troy III 272 Posting Pro · Answer 6 · 2015-04-02T11:17:50+00:00

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

SimonIoa 77 Master Poster · Answer 7 · 2015-04-02T14:48:48+00:00

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

Anchor <a> problem

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers