Solved

Hyperlink Image in CSS or skin for theme

Posted on 2007-11-20
4
485 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:BobCSD
  • 2
  • 2
4 Comments
 
LVL 29

Accepted Solution

by:
Göran Andersson earned 500 total points
Comment Utility
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 1

Author Comment

by:BobCSD
Comment Utility
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 500 total points
Comment Utility
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 1

Author Comment

by:BobCSD
Comment Utility
yay, thanks!
0

Featured Post

Free Trending Threat Insights Every Day

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.

Join & Write a Comment

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
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…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

762 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

12 Experts available now in Live!

Get 1:1 Help Now