Solved

How to link inside a css file?

Posted on 2009-04-07
9
575 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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
AngularJS directive issue 6 54
Problem to file 3 50
Video on my site 4 28
Re-position sub-options beneath the TAB 7 43
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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…
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 …

746 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

10 Experts available now in Live!

Get 1:1 Help Now