Solved

How to link inside a css file?

Posted on 2009-04-07
9
577 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
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 7

Expert Comment

by:Sappbrosts
ID: 24088793
0
 
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
3 Use Cases for Connected Systems

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

 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

815 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

8 Experts available now in Live!

Get 1:1 Help Now