Solved

How to link inside a css file?

Posted on 2009-04-07
9
576 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
 

Author Comment

by:cemlouis
ID: 24095799
qwerty, can you give a sample with my given code above?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

867 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

16 Experts available now in Live!

Get 1:1 Help Now