Hyperlink in CCS

[FN-GM]

Hi,

 

i have attached the CCS style sheet for out moodle site. I want to make the header hyperlinked. The name of the header is header_right_bg.gif

 

the code that controls the header is:

 

/***
*** Header
***/

#header-bg {
 height:152px;
 background: url("pix/bg/header_right_bg.gif") repeat-x top left;
}

 

How would i achieve this please?

 

Thanks

css.txt

[p858snake]

you need to do the linking with in the html coding, css is just presentational stuff.

[FN-GM]

you need to do the linking with in the html coding, css is just presentational stuff.

 

The image isnt in the HTML code so it wont be possible

[webman]

You can't make something hyperlinkable in CSS. You either need an tag in the HTML or a JavaScript onclick() event on whichever element #header-bg is applied to.

[FN-GM]

ok so this is the HTML code

 

>

   
   
   
   
   javascript"); ?>


<br />
	$(document).ready(function(){<br />
		$("dd").hide();<br />
		$("dt a").click(function(){	<br />
		if ($(this).parent().next().is(':visible')) {<br />
		$(this).parent().next().slideUp("slow");<br />
		}<br />
		else {<br />
			$("dd:visible").slideUp("slow");<br />
			$(this).parent().next().slideDown("slow");<br />
		}<br />
			return false;<br />
		});<br />
	});<br />
	


   echo " $bodytags";
   if ($focus) {
       echo " onload=\"setfocus()\"";
   }
   ?>>



     if ($home) {  // This is what gets printed on the home page only
?>

	
   		
       		
       		
		
	
   
   
	

?>


	
		
			
			
		
	
   


	

     if ($navigation) { // This is the navigation bar with breadcrumbs  ?>
  
		

	
	

    				
?>
      
      
	
	


   

	
	
   

[p858snake]

The image isnt in the HTML code so it wont be possible

The container for it will be though. eg: look for something like

and wrap that in the "a" tags

[Hightower]

Add an <a> tag to <div id="header-bg"> So it looks something like: [code]<a href="#"><div id="header-bg">.......[/code] And don't forget to close it off properly [code]</div></a>[/code]

[mossj]

As Hightower stated, I should think

 

 
[color="red"][/color]

	
   		
       		
       		
		
	[color="Red"][/color]
   
   
	

?>


	
		
			
			
		
	
   


	

     if ($navigation) { // This is the navigation bar with breadcrumbs  ?>
  
		

	
	

    				
?>
      
      
	
	


   

	
	  

 

p.s make sure it's terminated correctly, your code isn't indented properly but you get the idea of where the link should go. Basicly it should encompass the entire header Div and all it's sub Div's.

 

This will give the Link body when you resize it using CSS.

Edited October 7, 2009 by mossj

[mac_shinobi]

As Hightower stated, I should think

 

 
[color=red][/color]
<
       
           
               
               
           
       [color=Red][/color]
   
   
       

?>
   
   
       
           
               
               
           
       
   


       

     if ($navigation) { // This is the navigation bar with breadcrumbs  ?>
  
           
   
       
       
   
                    
?>
      
      
       
       
   

   
   
       
         

p.s make sure it's terminated correctly, your code isn't indented properly but you get the idea of where the link should go.

 

 

what does the hash symbol do with ref to the href??

[mossj]

what does the hash symbol do with ref to the href??

 

Huh?? I just use the hash symbol for an example, not sure when or where I developed that habit.

[FN-GM]

As Hightower stated, I should think

 

 
[color="red"][/color]

	
   		
       		
       		
		
	[color="Red"][/color]
   
   
	

?>


	
		
			
			
		
	
   


	

     if ($navigation) { // This is the navigation bar with breadcrumbs  ?>
  
		

	
	

    				
?>
      
      
	
	


   

	
	  

 

p.s make sure it's terminated correctly, your code isn't indented properly but you get the idea of where the link should go. Basicly it should encompass the entire header Div and all it's sub Div's.

 

This will give the Link body when you resize it using CSS.

 

Ok i tried that, it didnt work. It only made the "You are logged in as.." text in the header be a hyperlink

 

Thanks

[chrbb]

Will this help? css background image as hyperlink? - DesignersTalk

 

If I need to make an image active I usually include the hyperlinks in HTML, using css just to set the parameters.

[Hightower]

what does the hash symbol do with ref to the href??

 

I just use it to show that some kind of address is there, or to create dummy links. The # does nothing really.

[gibbo_ap]

I just use it to show that some kind of address is there, or to create dummy links. The # does nothing really.

 

the # is used for anchor links ie home.asp#news you can also use it in the way you showed link then add java to control the link (some scripts make it a link but not a link if that makes sense, so adding the # makes it look/act link a link)

[mac_shinobi]

The title must be a typo because I'm sure it is css not ccs

[mossj]

I think the has to go below what you've actually given us to work with. As the

is still open when you reach the bottom of the page.