Grouping elements in a link

I’m trying to figure out how to properly group a bunch of <span> elements inside a link.
I have a link with a bunch of spans inside of it, but when I force a hover over the link, this happens


But here’s the hlml

		  <a class="one-six-eight jqeasytooltip" href="rooms/data.php" data-tiptheme="tipthemewhite"  data-tipcontent='Room #168<br>Data Center'>>
		  <span class="s1"></span>
		  <span class="s2"></span>
		  <span class="s3"></span>
		  <span class="s4"></span>
		  <span class="s5"></span>
		  <span class="s6"></span>
		  <span class="s7"></span>
		  </a>	

heres the CSS

#floor-plan a, #floor-plan span {
	position:absolute;
	text-decoration:none;
}
.one-six-eight {
	left: 9.7%;
    top: 5.8%;
    width: 37.5%;
    height: 12.1%;
}	
span.s1 {
    left: 2.1%;
    top: -14.5%;
    right: 3.7%;
    height: 20%;
}
span.s2 {
    left: 0%;
    top: 95%;
    right: 10.5%;
    height: 10%;
}
span.s3 {
    left: 13.7%;
    top: 100%;
    right: 10.1%;
    height: 72%;
}
span.s4 {
    left: 25.1%;
    top: 143%;
    right: 10.1%;
    height: 72%;
}
span.s5 {
    left: 25%;
    top: 200%;
    right: 38.6%;
    height: 71%;
}
span.s6 {
    left: 86.2%;
    top: 216.1%;
    right: 1.44%;
    height: 15.2%;
}
span.s7 {
    left: 86.2%;
    top: 215.1%;
    right: 10%;
    height:5%;
}

The <span> s inside the link simply fill up the room in the floorplan but how do I get them to group inside the link?

for starters… “this happens”.

I don’t know what i’m looking at. Tell me what has gone wrong.

1 Like

ok, I’m trying to apply a bunch of CSS rules to the link, but when I do, it seems to ignore the <span>s, I think its beause of the positioning, but I’m not sure if I set it up right

what does your style viewer tell you when you select a Span, instead of the link?

when I put the mouse over the span, I get

Telling me its absolutelly positioned, is there a better way to position spans to keep them nested?
Would relativelly be better?

From what I can see from the code above your spans are being absolutely spaced but you don’t show any dimensions for the anchor element therefore the percentages have nothing on which to base themselves.

The anchor needs a width and height for the percentage on the spans to take effect.

the anchor element is the one-six-eight classed element. It’s got a width and height, but they’re percentages of IT’s parent…

1 Like

Ah thanks. Missed that :slight_smile:

We obviously need to see more code and context to answer properly.:wink:

1 Like

Sorry (not too good at explaining)
What im trying to do is create a hover effect on certain rooms in the floorplan.
Some of the rooms are odly shaped so I nest spans inside the link, like

<a href="">
<span></span>
<span></span>
</a>

Im trying to make it so that when I add the styles

a:hover {
background-color:red;
border:black;
}

so that when the mouse hovers the link, the a and its nested spans are highlighted. I dont think absolutelly positioning the spans works though,

Code says more than a thousands of images. :slight_smile:

Please give more code. :wink:

1 Like

Can anchor tags take a background-color property? They’re not… really… containers…(I’m stating that badly. They’re not generally space-consuming block elements themselves. Usually you’d wrap an anchor tag around something else, like a div, to make the div a link.)

1 Like

Anchors are inline by default so they would normally only give a background to the text inside of the anchor. It will render the background. An easy solution around that is inline-block though. Tons of ways to make an anchor a “space-consuming block”, so to speak :slight_smile: .

3 Likes

Yes correct and as Ryan said by default anchors are inline elements and even when you nest a div inside you may find the background still doesn’t cover the element inside unless you set the anchor to display:block.

However absolutely positioned elements are automatically given a display of block even if they are inline elements and will contain in flow children. Of course absolutely placed children are again removed from the flow and the anchor will be empty if all it contains are absolutely placed elements and is not sized in any way.

I’ve thrown the above code into a codepen and it all seems to work as expected from the code on offer.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.