?
Solved

Background image inside a tag

Posted on 2011-09-04
10
Medium Priority
?
292 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month15 days, 8 hours left to enroll

743 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