Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Hyperlink Image in CSS or skin for theme

Posted on 2007-11-20
4
Medium Priority
?
571 Views
Last Modified: 2008-02-01
I've created several themes using css and skins.

In my master page, I want to have the logo dependent upon the current theme being used. So within each theme directory, I have a logo named: Logo.gif

Currently, I just have this within the master page.

                        <a href="<%= ResolveClientUrl("~/default.asp")%>">
                    <img src='<%= ResolveClientUrl("logo.gif")%>' width='228'
                                height='77' style='border: none'></a></td>

How do I change it to setup the logo.gif within the skin or style sheet, and then display it (hyperlinked as above) within my master page?

thanks!
0
Comment
Question by:Starr Duskk
  • 2
  • 2
4 Comments
 
LVL 29

Accepted Solution

by:
Göran Andersson earned 2000 total points
ID: 20325913
If you specify the image as a background in the css, the browser will get the image relative to the css file instead of relative to the page.

If you put the logo image in the theme filder where the css file is, this will use it:
css:
 
.Logo { width: 228px; height: 77px; background: url(logo.gif); }
 
html:
 
<a href="<%= ResolveClientUrl("~/default.asp")%>" class="Logo"></a>

Open in new window

0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 20326031
hmmm. I tried this:

<asp:HyperLink ID="HyperLink1" runat="server" CssClass="Logo" NavigateUrl="~/Default.aspx">[HyperLink1]</asp:HyperLink>

and this:

<a href="<%= ResolveClientUrl("~/default.asp")%>" class="Logo"></a>

This does display the logo, but no hyperlink:

                    <div class="Logo"></div>

What am I doing wrong?

thanks!



0
 
LVL 29

Assisted Solution

by:Göran Andersson
Göran Andersson earned 2000 total points
ID: 20326054
Ah, I missed that the link has to be a block element in order for one to specify the size.
.Logo { display: block; width: 228px; height: 77px; background: url(logo.gif); }

Open in new window

0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 20330230
yay, thanks!
0

Featured Post

Hire Technology Freelancers with Gigs

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

916 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