Anchor <a> problem

Question

SimonIoa 77 Master Poster

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

html-css web-design

4 Contributors
10 Replies
294 Views
4 Days Discussion Span
Latest Post 11 Years Ago Latest Post by SimonIoa

Dani AI

Generated 9 Months Ago

The real cause here is selector scope, not a mysterious browser bug. When each image is wrapped in an <a>, the rule img:nth-child(...) is being evaluated relative to the image’s immediate parent (the anchor), so every wrapped image can match the same nth-child test. That breaks the intended “satellite” positioning once you add anchors. Also remember anchors without an href are not interactive links, so add an href if you expect normal link behavior.

How to fix (conceptually)

Target the anchors as the children of the container instead of the images inside them, and apply your positional offsets to the anchors. That makes the nth-child count refer to the siblings inside .poster, which is what you intended.
Give the anchors layout (for example by making them inline-block or block) so width/height and positioning behave predictably. Alternatively, apply sizing to the anchor and make the img fill it (img as block with width:100%).
For a more robust, responsive layout, make .poster the positioned container (position: relative) and absolutely place the satellite anchors around the center; use transforms to center/rotate items rather than relying on fragile percentage offsets.

Quick troubleshooting checklist

Inspect the DOM with devtools to confirm which element is the nth child of .poster.
Check computed display and position values for the anchor and image.
Fix any malformed HTML (the sample srcs look garbled) and ensure images use proper src attributes and anchors have hrefs if needed.

Credit: pointed out applying the rules at the anchor level; correctly emphasised giving anchors layout; reminded about href semantics. These suggestions combined yield a stable solution.

All 10 Replies

DaveAmour 160 Mmmmmm beer

11 Years Ago

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

DaveAmour 160 Mmmmmm beer

11 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

11 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

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

, 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

Dani AI

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers