[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

How to link inside a css file?

Posted on 2009-04-07
9
Medium Priority
?
583 Views
Last Modified: 2012-05-06
I want to link inside a css file? how? Here I have the 2 codes below:

As seen there is a header.jpg I want to link from that jpg file to our company product page. How?
:::::::: CSS file inside:
 
#navigation
{
	clear: both;
	float: left;
	width: 100%;
	background-image: url(images/header.jpg);
	height: 168px;
}
 
:::::::: PHP file inside:
 
<div id="wrapper2">
 
	<div id="header">
	       
         	<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
			<div class="slogan"><?php bloginfo('description'); ?></div>
			
	</div>
	
 
	<div id="navigation">
 
		
			 <ul>
              		<li class="page_item"><a href="<?php bloginfo('url'); ?>">Home</a></li>
 
	<?php wp_list_pages('depth=1&title_li='); ?>
	
                </ul>
	
	
	</div>

Open in new window

0
Comment
Question by:cemlouis
[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
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 13

Expert Comment

by:numberkruncher
ID: 24088816
What do you mean by linked? Do you mean how to include the CSS into your HTML? or how to place a hyperlink inside a CSS file?

As far as I am aware it is not possible to make something into a hyperlink using the current version of CSS. This has to be specified within the HTML (or XHTML) file.

To include an external CSS file into your HTML simply place a "link" tag into your page's "head" section:
<html>
   <head>
      <title>My Page</title>
      <link rel="stylesheet" type="text/css" href="mysheet.css">
   </head>
   <body>
      ...
   </body>
</html

Open in new window

0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24094447
You cannot link an image using CSS. you need to specifically mention that in HTML or PHP.
You can give styling to the linked image like border through CSS. But linking has to be done in the page itself but not in the CSS.
0
Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

 

Author Comment

by:cemlouis
ID: 24095799
qwerty, can you give a sample with my given code above?
0
 
LVL 13

Expert Comment

by:numberkruncher
ID: 24095917
Links can be styled using the following CSS:
<style type="text/css">
 
/* Make all links green */
a { color: green; }
 
/* Red when mouse is over */
a:hover { color: red; }
 
/* Red also when active */
a:active { color: red; }
 
/* Purple when visited */
a:visited { color: purple; }
 
 
/* Links with class="SpecialClass" are ornage:
a.SpecialClass { color: orange; }
 
</style>

Open in new window

0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24095946
#navigation ul li.page_item a
{
        clear: both;
        float: left;
        width: 100%;
        background-image: url(images/header.jpg);
        height: 168px;
        color: black;
        font-size: 10px;
}

<div id="navigation">
       <ul>
                        <li class="page_item"><a href="<?php bloginfo('url'); ?>">Home</a></li>
 
        <?php wp_list_pages('depth=1&title_li='); ?>
       
                </ul>
       
       
        </div>
0
 

Author Comment

by:cemlouis
ID: 24096600
I want below theme's header image clickable...

http://test.wpthemesfree.com/?preview_theme=blue-business-10
0
 
LVL 13

Accepted Solution

by:
numberkruncher earned 2000 total points
ID: 24097022
Simply replace the Google URL with what you want from the source example #1 below.

However, instead of using "background-image", I would recommend using a proper image element, source #2:
SOURCE #1
=========
<div id="navigation" onclick="window.location.href='http://www.google.com'">
 
 
SOURCE #2
=========
<div id="navigation">
   <a href='http://www.google.com'><img src="yourpicture.png" border="0"></a>

Open in new window

0
 

Author Closing Comment

by:cemlouis
ID: 31567585
Great!!!
0

Featured Post

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

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

It’s a strangely common occurrence that when you send someone their login details for a system, they can’t get in. This article will help you understand why it happens, and what you can do about it.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.
Suggested Courses

656 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