+ Post New Thread
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
Coding Thread, Hyperlink in CCS in Coding and Web Development; Hi, i have attached the CCS style sheet for out moodle site. I want to make the header hyperlinked. The ...
  1. #1

    FN-GM's Avatar
    Join Date
    Jun 2007
    Location
    UK
    Posts
    15,850
    Thank Post
    877
    Thanked 1,681 Times in 1,460 Posts
    Blog Entries
    12
    Rep Power
    445

    Hyperlink in CCS

    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:

    Code:
    /***
     *** Header
     ***/
     
    #header-bg {
      height:152px;
      background: url("pix/bg/header_right_bg.gif") repeat-x top left;
    }
    How would i achieve this please?

    Thanks
    Attached Files Attached Files

  2. #2
    p858snake's Avatar
    Join Date
    Dec 2008
    Location
    Queensland
    Posts
    1,490
    Thank Post
    37
    Thanked 175 Times in 151 Posts
    Blog Entries
    2
    Rep Power
    51
    you need to do the linking with in the html coding, css is just presentational stuff.

  3. #3

    FN-GM's Avatar
    Join Date
    Jun 2007
    Location
    UK
    Posts
    15,850
    Thank Post
    877
    Thanked 1,681 Times in 1,460 Posts
    Blog Entries
    12
    Rep Power
    445
    Quote Originally Posted by p858snake View Post
    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

  4. #4

    webman's Avatar
    Join Date
    Nov 2005
    Location
    North East England
    Posts
    8,403
    Thank Post
    637
    Thanked 961 Times in 661 Posts
    Blog Entries
    2
    Rep Power
    319
    You can't make something hyperlinkable in CSS. You either need an <a> tag in the HTML or a JavaScript onclick() event on whichever element #header-bg is applied to.

  5. #5

    FN-GM's Avatar
    Join Date
    Jun 2007
    Location
    UK
    Posts
    15,850
    Thank Post
    877
    Thanked 1,681 Times in 1,460 Posts
    Blog Entries
    12
    Rep Power
    445
    ok so this is the HTML code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html<?php echo $direction ?>>
    <head>
        <?php echo $meta ?>
        <meta name="keywords" content="moodle, <?php echo $title ?> " />
        <title><?php echo $title ?></title>
        <link rel="shortcut icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/favicon.ico" />
        <?php include("$CFG->javascript"); ?>
    
    <script src="<?php echo $CFG->themewww .'/'. current_theme() ?>/accordion_course_menu/jquery-1.2.6.min.js"></script>
    	<script>
    	$(document).ready(function(){
    		$("dd").hide();
    		$("dt a").click(function(){	
    		if ($(this).parent().next().is(':visible')) {
    		$(this).parent().next().slideUp("slow");
    		}
    		else {
    			$("dd:visible").slideUp("slow");
    			$(this).parent().next().slideDown("slow");
    		}
    			return false;
    		});
    	});
    	</script>
    </head>
    
    <body<?php
        echo " $bodytags";
        if ($focus) {
            echo " onload=\"setfocus()\"";
        }
        ?>>
    
    <div id="page">
    
    <?php //Accessibility: 'headermain' is now H1, see theme/standard/styles_layout.css: .headermain
          if ($home) {  // This is what gets printed on the home page only
    ?>
    	<div id="header-bg">
    		<div id="header-home" class="clearfix">
        		<div class="header-wrap">
            		<h1 class="headermain"><?php echo $heading ?></h1>
            		<div class="headermenu"><?php echo $menu ?></div>
    			</div>
    		</div>
        
        
    		
    
    <?php } else if ($heading) {  // This is what gets printed on any other page with a heading 
    ?>
    	
    	<div id="header-sml-bg">
    		<div id="header" class="clearfix">
    			<div class="header-wrap">
    				<h1 class="headermain"><?php echo $heading ?></h1>
    				<div class="headermenu"><?php echo $menu ?></div>
    			</div>
    		</div>
        
    <?php } ?>
    
    		
    
    <?php //Accessibility: breadcrumb trail/navbar now a DIV, not a table.
          if ($navigation) { // This is the navigation bar with breadcrumbs  ?>
       
    		</div>	
    	<div class="navbar clearfix">
    		<div class="breadcrumb"><?php print_navigation($navigation); ?></div>
    		<div class="navbutton"><?php echo $button; ?></div>
    	</div>
         				
    <?php } else if ($heading) { // If no navigation, but a heading, then print a line  
    ?>
           </div>
           <div class="navbar clearfix">
    		<div class="mainheading"><b><?php echo $heading ?></b></div>
    		<div class="navbutton"><?php echo $button; ?></div>
    	</div>
    <?php } ?>
        <!-- END OF HEADER -->
    	<div id="content-wrapper">
    		
    		</div>
        <div id="content">
    What do i need to change?

    Thanks

  6. #6
    p858snake's Avatar
    Join Date
    Dec 2008
    Location
    Queensland
    Posts
    1,490
    Thank Post
    37
    Thanked 175 Times in 151 Posts
    Blog Entries
    2
    Rep Power
    51
    Quote Originally Posted by FN-GM View Post
    The image isnt in the HTML code so it wont be possible
    The container for it will be though. eg: look for something like <div id="header-bg"></div> and wrap that in the "a" tags

  7. #7

    Hightower's Avatar
    Join Date
    Jun 2008
    Location
    Cloud 9
    Posts
    4,920
    Thank Post
    494
    Thanked 690 Times in 444 Posts
    Rep Power
    241
    Add an <a> tag to <div id="header-bg">

    So it looks something like:

    Code:
    <a href="#"><div id="header-bg">.......
    And don't forget to close it off properly

    Code:
    </div></a>

  8. #8
    mossj's Avatar
    Join Date
    Dec 2008
    Location
    Leicester
    Posts
    1,466
    Thank Post
    157
    Thanked 189 Times in 174 Posts
    Rep Power
    52
    As Hightower stated, I should think

    Code:
     
    <a href="#">
    <div id="header-bg">
    		<div id="header-home" class="clearfix">
        		<div class="header-wrap">
            		<h1 class="headermain"><?php echo $heading ?></h1>
            		<div class="headermenu"><?php echo $menu ?></div>
    			</div>
    		</div></a>
        
        
    		
    
    <?php } else if ($heading) {  // This is what gets printed on any other page with a heading 
    ?>
    	
    	<div id="header-sml-bg">
    		<div id="header" class="clearfix">
    			<div class="header-wrap">
    				<h1 class="headermain"><?php echo $heading ?></h1>
    				<div class="headermenu"><?php echo $menu ?></div>
    			</div>
    		</div>
        
    <?php } ?>
    
    		
    
    <?php //Accessibility: breadcrumb trail/navbar now a DIV, not a table.
          if ($navigation) { // This is the navigation bar with breadcrumbs  ?>
       
    		</div>	
    	<div class="navbar clearfix">
    		<div class="breadcrumb"><?php print_navigation($navigation); ?></div>
    		<div class="navbutton"><?php echo $button; ?></div>
    	</div>
         				
    <?php } else if ($heading) { // If no navigation, but a heading, then print a line  
    ?>
           </div>
           <div class="navbar clearfix">
    		<div class="mainheading"><b><?php echo $heading ?></b></div>
    		<div class="navbutton"><?php echo $button; ?></div>
    	</div>
    <?php } ?>
        <!-- END OF HEADER -->
    	<div id="content-wrapper">
    		
    		</div>
    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.
    Last edited by mossj; 7th October 2009 at 02:04 PM.

  9. #9

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,728
    Thank Post
    3,249
    Thanked 1,049 Times in 971 Posts
    Rep Power
    364
    Quote Originally Posted by mossj View Post
    As Hightower stated, I should think

    Code:
     
    <a href="#">
    <<div id="header-bg">
            <div id="header-home" class="clearfix">
                <div class="header-wrap">
                    <h1 class="headermain"><?php echo $heading ?></h1>
                    <div class="headermenu"><?php echo $menu ?></div>
                </div>
            </div></a>
        
        
            
    
    <?php } else if ($heading) {  // This is what gets printed on any other page with a heading 
    ?>
        
        <div id="header-sml-bg">
            <div id="header" class="clearfix">
                <div class="header-wrap">
                    <h1 class="headermain"><?php echo $heading ?></h1>
                    <div class="headermenu"><?php echo $menu ?></div>
                </div>
            </div>
        
    <?php } ?>
    
            
    
    <?php //Accessibility: breadcrumb trail/navbar now a DIV, not a table.
          if ($navigation) { // This is the navigation bar with breadcrumbs  ?>
       
            </div>    
        <div class="navbar clearfix">
            <div class="breadcrumb"><?php print_navigation($navigation); ?></div>
            <div class="navbutton"><?php echo $button; ?></div>
        </div>
                         
    <?php } else if ($heading) { // If no navigation, but a heading, then print a line  
    ?>
           </div>
           <div class="navbar clearfix">
            <div class="mainheading"><b><?php echo $heading ?></b></div>
            <div class="navbutton"><?php echo $button; ?></div>
        </div>
    <?php } ?>
        <!-- END OF HEADER -->
        <div id="content-wrapper">
            
            </div>
    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??

  10. #10
    mossj's Avatar
    Join Date
    Dec 2008
    Location
    Leicester
    Posts
    1,466
    Thank Post
    157
    Thanked 189 Times in 174 Posts
    Rep Power
    52
    Quote Originally Posted by mac_shinobi View Post
    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.

  11. #11

    FN-GM's Avatar
    Join Date
    Jun 2007
    Location
    UK
    Posts
    15,850
    Thank Post
    877
    Thanked 1,681 Times in 1,460 Posts
    Blog Entries
    12
    Rep Power
    445
    Quote Originally Posted by mossj View Post
    As Hightower stated, I should think

    Code:
     
    <a href="#">
    <div id="header-bg">
    		<div id="header-home" class="clearfix">
        		<div class="header-wrap">
            		<h1 class="headermain"><?php echo $heading ?></h1>
            		<div class="headermenu"><?php echo $menu ?></div>
    			</div>
    		</div></a>
        
        
    		
    
    <?php } else if ($heading) {  // This is what gets printed on any other page with a heading 
    ?>
    	
    	<div id="header-sml-bg">
    		<div id="header" class="clearfix">
    			<div class="header-wrap">
    				<h1 class="headermain"><?php echo $heading ?></h1>
    				<div class="headermenu"><?php echo $menu ?></div>
    			</div>
    		</div>
        
    <?php } ?>
    
    		
    
    <?php //Accessibility: breadcrumb trail/navbar now a DIV, not a table.
          if ($navigation) { // This is the navigation bar with breadcrumbs  ?>
       
    		</div>	
    	<div class="navbar clearfix">
    		<div class="breadcrumb"><?php print_navigation($navigation); ?></div>
    		<div class="navbutton"><?php echo $button; ?></div>
    	</div>
         				
    <?php } else if ($heading) { // If no navigation, but a heading, then print a line  
    ?>
           </div>
           <div class="navbar clearfix">
    		<div class="mainheading"><b><?php echo $heading ?></b></div>
    		<div class="navbutton"><?php echo $button; ?></div>
    	</div>
    <?php } ?>
        <!-- END OF HEADER -->
    	<div id="content-wrapper">
    		
    		</div>
    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

  12. #12
    chrbb's Avatar
    Join Date
    Oct 2005
    Location
    Midlands
    Posts
    1,507
    Thank Post
    141
    Thanked 67 Times in 62 Posts
    Rep Power
    46
    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.

  13. #13

    Hightower's Avatar
    Join Date
    Jun 2008
    Location
    Cloud 9
    Posts
    4,920
    Thank Post
    494
    Thanked 690 Times in 444 Posts
    Rep Power
    241
    Quote Originally Posted by mac_shinobi View Post
    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.

  14. #14
    gibbo_ap's Avatar
    Join Date
    Nov 2007
    Location
    Staffs, UK
    Posts
    937
    Thank Post
    233
    Thanked 81 Times in 64 Posts
    Rep Power
    36
    Quote Originally Posted by Hightower View Post
    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 <a href="#">link</a> 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)

  15. #15

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    9,728
    Thank Post
    3,249
    Thanked 1,049 Times in 971 Posts
    Rep Power
    364
    The title must be a typo because I'm sure it is css not ccs

SHARE:
+ Post New Thread
Page 1 of 2 12 LastLast

Similar Threads

  1. Mass Deployment of CCS build onto Netbooks
    By ndavies in forum Netbooks, PDA and Phones
    Replies: 2
    Last Post: 8th December 2009, 09:20 PM
  2. Excel hyperlink issue...can't solve :(
    By kennysarmy in forum Windows
    Replies: 3
    Last Post: 22nd April 2009, 10:13 AM
  3. CCS Help desk Software - By Crow Canyon
    By burgemaster in forum Windows
    Replies: 4
    Last Post: 24th February 2009, 08:47 AM
  4. Hyperlink Texts in Word display wrong
    By hayjo86 in forum Windows
    Replies: 7
    Last Post: 2nd November 2007, 03:57 PM
  5. Hyperlink from powerpoint to smart notebook (any version)
    By MitchKemp in forum Educational Software
    Replies: 0
    Last Post: 1st July 2007, 04:06 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •