Link to home
Start Free TrialLog in
Avatar of cemlouis
cemlouisFlag for Türkiye

asked on

How to link inside a css file?

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

Avatar of Sappbrosts
Sappbrosts
Flag of United States of America image

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

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.
Avatar of cemlouis

ASKER

qwerty, can you give a sample with my given code above?
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

#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>
I want below theme's header image clickable...

http://test.wpthemesfree.com/?preview_theme=blue-business-10
ASKER CERTIFIED SOLUTION
Avatar of numberkruncher
numberkruncher
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Great!!!