Solved

Background image inside a tag

Posted on 2011-09-04
10
288 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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…

786 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