Jump to content

Fun fact with <a> and <span> tags


Recommended Posts

Posted

 

I just wonder for how many of you this isn't any surprise ?

I didn't know any better than that back-ground images are only used with <div> tags.
But today I bumped into a html template where I saw highly surprised that both a <a> and a <span> tag
where css configured with a background-image :o

.info a {
    background: url(../images/msg-icon.png)1px 2px no-repeat;
}

.info span {
    background: url(../images/c-icon.png) 0px 0px no-repeat;
}

Doing so the content inside the <a> tag has an email icon on the left
and the <span> tag a mobile phone icon on the left.

To be honest I never saw this before in websites, tutorials, the forum, etc.
so I guess this is a case where one out of habit uses css in a limited way ;)

 

 

Posted
6 minutes ago, pwired said:

I just wonder for how many of you this isn't any surprise ?

No surprise here..

6 minutes ago, pwired said:

I didn't know any better than that back-ground images are only used with <div> tags.

:)

 

6 minutes ago, pwired said:

I saw highly surprised that both a <a> and a <span> tag
where css configured with a background-image

I guess I am from the old school. A 'long time' ago, logos used to be background images set on anchors (<a> tags). Menu items (<a> tags) used to have background images called sprites that would 'shift' on hover to create a nice hover effect...;)

  • Like 6
Posted

Yeah, I remember making logos for a tags using:

<h1><a href="/">COmpany Name</a></h1>


a.logo {
	width: 350px;
	height: 75px;
	text-indent: -9999px;
	background: url(logo.png) no-repeat left top;
}

I never used many backgrounds with spans however. 

  • Like 1
  • 4 weeks later...
Posted

If someone is interested, here is example how to automatically assign icon to file depends on file type.
No images or empty HTML tags "<i class="fa..."></i>", only CSS pseudo elements.

Link to Codepen

Regards.

 

 

 

  • Like 2
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...