Solved

Background image inside a tag

Posted on 2011-09-04
10
286 Views
Last Modified: 2012-06-27
Hello experts.
I need help to position a background image (in this case a ui framework icon ) on the left of a text .
The result must look like the image.

Any help?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.ui-icon-custom-link {background-image:url(js/ui/development-bundle/themes/ui-lightness/images/ui-icons_ef8c08_256x240.png);background-repeat:no-repeat; overflow:hidden; text-indent:-99999px; display:inline;width: 16px; height: 16px;position: absolute;margin: 0 10px 0 0;}
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.linksblack a,linksblack a:visited{text-decoration:underline;color:#171717;font-size:12px;}
.linksblack a:hover{text-decoration:underline;color:#c77405;}
</style>
</head>

<body>
<div class="linksblack">
  <a href="#"><span class="ui-icon-custom-link ui-icon-triangle-1-e"></span>testlink</a>
</div>
</body>
</html>

Open in new window

test.gif
0
Comment
Question by:Panos
  • 6
  • 4
10 Comments
 
LVL 6

Expert Comment

by:c1nmo
ID: 36480101
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

.ui-icon-triangle-1-e { background-image:url(tri.png);
background-repeat:no-repeat;
  url(tri.png);
padding-left:10px; }

.linksblack a,linksblack a:visited{text-decoration:underline;color:#171717;font-size:12px;}
.linksblack a:hover{text-decoration:underline;color:#c77405;}

}


</style>
</head>

<body>



<div class="linksblack ui-icon-triangle-1-e">



  <a href="#">testlink</a>
</div>
</body>
</html>
0
 
LVL 2

Author Comment

by:Panos
ID: 36480126
Hi c1nmo.
It is not what i'mlooking for.
I need something with a main background image :.ui-icon-custom-link class

and using the position attribute show a part of te main image (like the ui framework works)
0
 
LVL 6

Expert Comment

by:c1nmo
ID: 36480180
More like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.ui-icon-custom-link {background-image:url(js/ui/development-bundle/themes/ui-lightness/images/ui-icons_ef8c08_256x240.png);background-repeat:no-repeat; overflow:hidden; text-indent:-99999px; display:inline;width: 16px; height: 16px;position: absolute;margin: 0 10px 0 0;}
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.linksblack a,linksblack a:visited{text-decoration:underline;color:#171717;font-size:12px;}
.linksblack a:hover{text-decoration:underline;color:#c77405;}
</style>
</head>

<body>
<div class="linksblack">
  <a href="#"><span class="ui-icon-custom-link ui-icon-triangle-1-e"></span><span style="margin-left:15px">testlink</span></a>
</div>
</body>
</html>
0
 
LVL 2

Author Comment

by:Panos
ID: 36480188
The problem with this solution (i have tried it myself) isthat  the arrow is underlined too.
I think that the arrow must be set in the div class with a padding or margin ,and not in the "a" tag to solve this.

What to you think?
0
 
LVL 6

Expert Comment

by:c1nmo
ID: 36480202
The arrow isn't underlined in my test, which browser are you using?
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 2

Author Comment

by:Panos
ID: 36480225
FF6
0
 
LVL 2

Author Comment

by:Panos
ID: 36480230
It is underlined in FF and SAFARI

there are noproblems in : IE,Chrome,iron,opera  
0
 
LVL 6

Accepted Solution

by:
c1nmo earned 500 total points
ID: 36480333
Works on FF and IE, could do with a tidy of the inline styles:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.ui-icon-custom-link {background-image:url(css/ui-lightness/images/ui-icons_ef8c08_256x240.png);background-repeat:no-repeat; overflow:hidden; text-indent:-99999px; display:inline;width: 16px; height: 16px;
}
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.linksblack a,linksblack a:visited{text-decoration:underline;color:#171717;font-size:12px;}
.linksblack a:hover{text-decoration:underline;color:#c77405;}
</style>
</head>

<body>
<div class="linksblack">
  <div class="ui-icon-custom-link ui-icon-triangle-1-e" style="margin-left:15px;float:left;"></div><div style="float: left"><a href="#">testlink</a></div>
</div>
</body>
</html>
0
 
LVL 2

Author Comment

by:Panos
ID: 36480496
Yes .
This is working perfect now.
thank you very much
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 36480497
thank you
regards
panos
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now