Solved

How to link inside a css file?

Posted on 2009-04-07
9
580 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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 

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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
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 custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

688 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