Solved

Background image inside a tag

Posted on 2011-09-04
10
287 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

943 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

6 Experts available now in Live!

Get 1:1 Help Now