How Do I Make My Header Image Clickable?
with demo here: Wordpress
My problem is I want the mario image clickable linking to a certain inner webpage of my website. I have been searching for a solution for 4 hours straight, still no luck.
header.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <meta name="description" content="<?php bloginfo('description') ?>" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/nivo-slider.css" media="screen" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/glide.css" media="screen" /> <?php wp_enqueue_script('jquery'); wp_enqueue_script('Tabs', get_stylesheet_directory_uri() .'/js/jquery-ui-personalized-1.5.2.packed.js'); wp_enqueue_script('sprinkle', get_stylesheet_directory_uri() .'/js/sprinkle.js'); wp_enqueue_script('jquery.easing.1.1', get_stylesheet_directory_uri() .'/js/jquery.easing.1.1.js'); wp_enqueue_script('easing', get_stylesheet_directory_uri() .'/js/rm_script.js'); wp_enqueue_script('nivo', get_stylesheet_directory_uri() .'/js/jquery.nivo.slider.pack.js'); ?> <script type="text/javascript"><!--//--><![CDATA-[//><!-- sfHover = function() { if (!document.getElementsByTagName) return false; var sfEls = document.getElementById("menu").getElementsByTagName("li"); var sfEls1 = document.getElementById("catmenu").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } for (var i=0; i<sfEls1.length; i++) { sfEls1[i].onmouseover=function() { this.className+=" sfhover1"; } sfEls1[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover1\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> <?php wp_get_archives('type=monthly&format=link'); ?> <?php //comments_popup_script(); // off by default ?> <?php wp_head(); ?> </head> <body> <div id="wrapper"><div id="casing">
/* Theme Name:gamepress Description: A free premium games WordPress theme from binuthemes Author: binu Author URI: www.binuthemes.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, center, u, b, i, marquee { margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: normal; font-style: normal; font-size: 100%; vertical-align: baseline; } body { margin:0 auto; padding:0px 0px 0px 0px; background:#333232; font-family:Century gothic, Arial,Tahoma,sans-serif; color:#161514; font-size:13px; } img { border:0; margin: 0 0; } a { color:#6F615A; text-decoration:none; outline:none; } a:hover { color:#d53030; text-decoration:none } h1,h2, h3, h4, h5, h6 { line-height:125%; font-weight: bold; } blockquote { padding-left:10px; color:#444; font-style: normal; } .clear { clear:both; } img.centered { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; padding: 0px; } img.alignnone { padding: 5px 5px; margin: 0px 0px 10px 0px; display: inline; background:#eee; border: 1px solid #DDDDDD; } img.alignright { padding: 5px 5px; margin: 0px 5px 10px 10px; display: inline; background:#eee; border: 1px solid #DDDDDD; } img.alignleft { padding: 5px 5px; margin: 5px 10px 10px 0px; display: inline; background:#eee; border: 1px solid #DDDDDD; } .aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; } .alignright { float: right; margin: 0px 0px 10px 10px; } .alignleft { float: left; margin: 0px 10px 10px 0px; } .wp-caption { border: 1px solid #DDDDDD; text-align: center; background-color: #ffffff; padding: 4px 0px 5px 0px; margin: 5px 5px ; } .wp-caption img { margin: 0px 0px 5px 0px; padding: 0px; border: 0px; } .wp-caption p.wp-caption-text { margin: 0px; padding: 0px 0px 0px 0px; font-size: 11px; font-weight: normal; line-height: 12px; } /* The Outer cover */ #wrapper { width:1000px; margin:0 auto; } #casing { padding:0px 0px 0px 0px; background:url(images/rightcol.jpg) repeat-y; height:100%; display:block; } /* The Header */ #top { height:550px; margin:auto; } .blogname { font-family:Century gothic,Tahoma,Georgia,Verdana,sans-serif; margin:0px 0 0 0px; text-align:center; padding:10px 0 0 0px; } .blogname h1 { font-size:36px; padding:0px 0 0px 0; color:#cacccd; } .blogname h1 a:link, .blogname h1 a:visited{ color: #fff; font-weight:bold; } .blogname h1 a:hover { color: #fff; } .blogname h2 { padding:10px 0px 0px 0px; font-size:16px; color:#fff; } /*Search*/ #search { height:30px; width:325px; margin-top:10px; margin-bottom:10px; margin-left: 10px; padding:3px 0px 5px 5px; float:left; display: inline; background: url(images/search.jpg); } #search form { margin: 0; padding: 0; } #search fieldset { margin: 0; padding: 0; border: none; } #search p { margin: 0; font-size: 85%; } #s { float: left; width:215px; padding: 4px 5px 4px 5px; background:#ececec; border:1px solid #fff; font: normal 100% "Tahoma", Arial, Helvetica, sans-serif; color:#000; margin-right:2px; margin-top:3px; } input#searchsubmit { width:80px; float: right; background:#ffe404; border:1px solid #ffe404; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #582b11; height:24px; line-height:20px; margin-right:8px; margin-top:4px; } /* menu*/ #catmenucontainer{ height:30px; background: #00a5f5; display:block; padding:0px 0 0px 0px; font: 10px Tahoma,Century gothic,verdana, Arial, sans-serif; font-weight:bold; text-transform:uppercase; width:649px; float:left; } #catmenu{ margin: 0px; padding: 0px; width:651px; background: #00b9f9; height:30px; } #catmenu ul { float: left; list-style: none; margin: 0px; padding: 0px; } #catmenu li { float: left; list-style: none; margin: 0px; padding: 0px; } #catmenu li a, #catmenu li a:link, #catmenu li a:visited { color: #fff; display: block; margin: 0px; padding: 9px 10px 9px 10px; font-weight:bold; } #catmenu li a:hover, #catmenu li a:active { background:#fff; color: #444; margin: 0px; padding: 9px 10px 9px 10px; text-decoration: none; } #catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited { background: #00a5f5; width: 150px; border-bottom:1px solid #eee; color: #fff; font-size: 10px; font-family: tahoma, century gothic,Georgia, sans-serif; font-weight: bold; text-transform: uppercase; float: none; margin: 0px; padding: 9px 10px 9px 10px; } #catmenu li li a:hover, #catmenu li li a:active { background:#fff; color: #000; padding: 9px 10px 9px 10px; } #catmenu li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0px; padding: 0px; } #catmenu li li { } #catmenu li ul a { width: 140px; } #catmenu li ul a:hover, #catmenu li ul a:active { } #catmenu li ul ul { margin: -31px 0 0 170px; } #catmenu li:hover ul ul, #catmenu li:hover ul ul ul, #catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul { left: -999em; } #catmenu li:hover ul, #catmenu li li:hover ul, #catmenu li li li:hover ul, #catmenu li.sfhover ul, #catmenu li li.sfhover ul, #catmenu li li li.sfhover ul { left: auto; } #catmenu li:hover, #catmenu li.sfhover { position: static; } /* Main Content*/ #content { float:left; width: 630px; height:100%; padding:10px 0px 0px 10px; } #content h1{ float:left; width: 630px; height:100%; padding:10px 0px 0px 10px; font-size:20px; font-weight:bold; } .title{ margin: 0 0 0 0px; padding: 0px 0px 0px 10px; color: #000; } .date { font-size:10px; font-family:Tahoma, century gothic,Arial,Verdana,Helvitica,sans-serif; padding:5px 5px 0px 0px; color:#000; text-transform: uppercase; } .single { margin: 5px 5px 0px 0px; height:100%; color:#707070; font: 13px tahoma, georgia, century gothic,Arial,verdana, sans-serif; } .title h2 { margin: 0px 0 5px 0; padding: 5px 0px 5px 0px; text-align: left; font: 24px Georgia,century gothic,Arial,verdana, sans-serif; font-weight:normal; overflow:hidden; border-bottom:1px solid #ffba00; } .title h2 a, .title h2 a:link, .title h2 a:visited { color:#000; background-color: transparent; } .title h2 a:hover { color: #222; background-color: transparent; } .author{ color:#535353; padding:5px 5px 5px 0px; } .clock{ color:#535353; padding:5px 5px 5px 5px; } .comm{ padding:5px 5px 5px 5px; margin-left:5px; } .comm a:link, .comm a:visited { color:#535353; } .comm a:hover{ color:#f36c03; } .more{ padding:5px 0 2px 10px; background:url(images/add.png) no-repeat; margin-right:5px; float:right; width:77px; height:20px; font: 10px Tahoma,century gothic,Arial,verdana, sans-serif; } .more a:link, .more a:visited { color:#fff; } .more a:hover{ color:#fff; } .single ul, .single ol{ margin: .4em 0 1em; line-height: 150%; } .single ul li, .single ol li{ list-style-position:outside; margin-left: 1.6em; } .singleinfo { height:auto; margin:0px 0px; padding: 0px 0px 5px 0px; font:12px Georgia, Arial,century gothic,verdana, sans-serif; } .postmore{ padding:0px 5px 2px 25px; float:left; font-weight:bold; background:url(images/pmore.jpg) left no-repeat; } .postmore a:link, .postmore a:visited { color:#fff; } .postmore a:hover{ color:#fff; } .category{ font-size:10px; font-family:Tahoma, century gothic,Arial,Verdana,Helvitica,sans-serif; text-transform: uppercase; padding:3px 5px 3px 10px; } .category a:link,.category a:visited{ color:#222; } .category a:hover{ color:#940707; } .entry { margin:0 0; padding: 0px 5px 5px 5px; } .entry a:link, .entry a:visited { color: #AC0604; background-color: transparent; } .entry a:hover { color:#f9a112; background-color: transparent; text-decoration: none; } .entry img{ float:left; margin:5px 10px; border:4px solid #fff; height: 150px; width:200px; } .entry p{ margin:5px 5px; padding:5px 0px; line-height:22px; color:#3d3c3c; } h3.sidetil{ padding: 15px 0px 0px 55px; color:#fff; font-size: 16px; font-style: bold; } .sidetitl{ padding: 5px 0px 5px 10px; color:#fff; font-size:16px; width:316px; height:20px; background: url(images/search.jpg); position:relative; font-weight:bold; font-family:tahoma,Georgia,Century gothic, Arial, sans-serif; text-transform:uppercase; } /* right column */ #rightcol{ background:#0075cd url(images/casing.jpg) no-repeat; float:left; display:block; width:349px; padding:0px 0px; margin-bottom:10px; height:100%; } .sidebarleft{ width:160px; display:inline; float:left; } .sidebarright{ width:160px; display:inline; float:right; } .readmore { width: 100px; height: 20px; background: url(images/readmore.jpg); float: right; padding-top:4px; margin-right:10px; margin-right:10px; text-align:center; color: #fff; } .readmore a:link,.readmore a:visited { color:#fff; } /* The Sidebar1 */ .sidebar1{ float:left; width:160px; font-size:10px; font-family:Tahoma,Georgia,Century gothic, Arial, sans-serif; padding-left:10px; } .sidebar1 h2 { line-height:30px; font-size:14px; color:#fff; margin:5px 0 0px 0 ; padding:0px 0 0 5px; background: url(images/search.jpg); font-weight:bold; font-family:tahoma,Georgia,Century gothic, Arial, sans-serif; text-transform:uppercase; } .sidebar1 ul { list-style-type: none; margin: 0 ; padding: 0; text-transform:uppercase; } .sidebar1 ul ul { list-style-type: none; margin: 0; padding: 0px 0px 10px 0px; background-repeat:no-repeat; } .sidebar1 ul ul ul { list-style-type: none; margin: 0; padding: 0; border:0; } .sidebar1 ul ul ul ul { list-style-type: none; margin: 0; padding: 0; border:0; } .sidebar1 ul li { height:100%; line-height:18px; float: left; clear: left; width: 160px; } .sidebar1 ul li a:link, .sidebar1 ul li a:visited { text-decoration: none; padding: 5px 0px 5px 5px; display:block; border-bottom: 1px dotted #aaa; color:#222; background:#f4f6f6; } .sidebar1 ul li a:hover { font-weight:bold; color: #222; } .sidebar1 p { padding: 7px 10px; margin:0; } .sidebar1 table { width:100%; text-align:center; color:#787d7f; } /* The Sidebar2 */ .sidebar2{ float:right; width:160px; margin-right:10px; font-size:10px; font-family:Tahoma,Century gothic, Arial, sans-serif; } .sidebar2 h2 { line-height:30px; font-size:14px; color:#fff; margin:5px 0 0px 0 ; padding:0px 0 0 5px; background: url(images/search.jpg); font-weight:bold; font-family:tahoma,Georgia,Century gothic, Arial, sans-serif; text-transform:uppercase; } .sidebar2 ul { list-style-type: none; margin: 0 ; padding: 0; text-transform:uppercase; } .sidebar2 ul ul { list-style-type: none; margin: 0; padding: 0px 0px 10px 0px; background-repeat:no-repeat; } .sidebar2 ul ul ul { list-style-type: none; margin: 0; padding: 0; border:0; } .sidebar2 ul ul ul ul { list-style-type: none; margin: 0; padding: 0; border:0; } .sidebar2 ul li { height:100%; line-height:18px; float: left; clear: left; width: 160px; } .sidebar2 ul li a:link, .sidebar2 ul li a:visited { text-decoration: none; padding: 5px 0px 5px 5px; display:block; border-bottom:1px dotted #aaa; color:#222; background:#f4f6f6; } .sidebar2 ul li a:hover { font-weight:bold; color: #222; } .sidebar2 p { padding: 7px 10px; margin:0; } .sidebar2 table { width:100%; text-align:center; color:#787d7f; } /*calendar*/ #wp-calendar{ width: 100%; padding: 0 0 15px; } #wp-calendar caption{ padding: 5px 5px ; font-size:16px; color:#4A4A49; } #wp-calendar th, #wp-calendar td{ padding: 5px; text-align:center; color:#EFA768; } #wp-calendar td a{ background:#fff; padding: 5px 0px; } #wp-calendar td a:hover{ color:#3172B4; } #wp-calendar td{ background:transparent; } #wp-calendar td, table#wp-calendar th{ padding: 2px 0; } /* --- FOOTER --- */ #footer { height:40px; padding:20px 0 0 0px; color:#fff; font-size:12px; font-weight:normal; letter-spacing:1px; font-family: Tahoma,georgia,Century gothic, Arial, sans-serif; width:100%; text-align:center; background: #0075cd; } #footer a:link , #footer a:visited{ color:#eee; } #footer a:hover { color:#f47405; } .fleft{ float:left; padding: 0 0 0 15px; line-height:18px; } .fright{ float:right; padding: 0 15px 0 0; line-height:18px; text-align:right; } /* The Navigation */ #navigation{ width:600px; margin:0px auto 10px 0px; padding:0px 15px 10px 12px; } /* The Attachment */ .contentCenter { text-align:center; } /* The Page Title */ h2.pagetitle { padding:5px 5px; margin:0px 0 10px 5px; font-size:16px; text-align:center; color:#3b3b3b; font-family:Georgia,Century gothic,Arial, Helvetica, sans-serif; } #comment{ height:100%; padding:0px 10px; margin:0px 0px; } h3#comments { padding:5px 10px; margin:10px 0px; font-size:20px; font-weight:normal; color:#fff; background:#476bb2; font-family:Georgia,Century gothic,Arial, Helvetica, sans-serif; } #respond{ height:100%; padding:0px 5px; margin:10px 0px; background:#476bb2; border:1px solid #fbffd6; } #respond h3{ padding:5px 10px 5px 10px; margin:10px 0px; font-size:22px; font-weight:normal; color:#fff; font-family:Georgia,Century gothic,Arial, Helvetica, sans-serif; } #commentform { padding:0px 10px 10px 10px; margin:0px 0px 0px 0px; color:#BFAFA7; font-family:tahoma,Century gothic,Arial, Helvetica, sans-serif; } #commentform p { color:#fff; padding:5px 0px; font-size:10px; } #commentform p a{ color:#fff; padding:5px 0px; font-size:10px; } #commentform input { background:#fff; border:1px solid #ddd; color:#444; padding-left:10px; } #commentform textarea { background:#fff; border:1px solid #ddd; color:#444; width:95%; padding:5px 5px; } .comments input#submit { width:auto; line-height:25px; padding:3px 5px; background: url(images/readmore.jpg); border:1px solid #dd7f17; color:#fff; font-family:tahoma,Century gothic,Arial, Helvetica, sans-serif; } .comments input#submit:hover{ width:auto; line-height:25px; padding:3px 5px; color:#fff; font-family:tahoma,Century gothic,Arial, Helvetica, sans-serif; } ol.commentlist { list-style:none; margin:0; padding:0; text-indent:0; } ol.commentlist li { border:1px solid #DEDCDD; margin:0 0 10px; padding:5px 7px 5px 57px; position:relative; } ol.commentlist li div.comment-author { padding:0 170px 0 0; } ol.commentlist li div.vcard { font:20px Georgia, helvetica,arial,sans-serif; padding:5px 0px; } ol.commentlist li div.vcard cite.fn { font-style:normal; } ol.commentlist li div.vcard cite.fn a.url { color:#000; text-decoration:none; } ol.commentlist li div.vcard cite.fn a.url:hover { color:#000; } ol.commentlist li div.vcard img.avatar { border:5px solid #ddd; left:7px; position:absolute; top:7px; } ol.commentlist li div.comment-meta { font:12px Tahoma, helvetica,arial,sans-serif; position:absolute; right:10px; text-align:right; top:5px; } ol.commentlist li div.comment-meta a { color:#222; text-decoration:none; } ol.commentlist li div.comment-meta a:hover { color:#000; } ol.commentlist li p { font:normal 12px Tahoma, helvetica,arial,sans-serif; margin:0 0 1em; line-height:18px; } ol.commentlist li ul { font:normal 12px/1.4 helvetica,arial,sans-serif; list-style:square; margin:0 0 1em; padding:0; text-indent:0; } ol.commentlist li div.reply { background:#5C7736; border:2px solid #728F47; color:#fff; font:bold 9px/1 Tahoma, Georgia,arial,sans-serif; padding:5px 10px; text-align:center; width:36px; } ol.commentlist li div.reply a { color:#fff; text-decoration:none; text-transform:uppercase; } ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; } ol.commentlist li ul.children li.depth-2 { margin:0 0 .25em; } ol.commentlist li ul.children li.depth-3 { margin:0 0 .25em; } ol.commentlist li ul.children li.depth-4 { margin:0 0 .25em; } ol.commentlist li.even { background:#afdfff; border:1px solid #afdfff; } ol.commentlist li.odd { background:#afdfff; border:1px solid #afdfff; } ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; } #navigation span .pages { background: #4c7ab8; } .wp-pagenavi span.current{ background:#897c02; border: 1px solid #897c02; color:#fff; padding:3px 7px; display: block; text-align: center; float: left; margin-right: 4px; } .wp-pagenavi span.pages{ background:#897c02; border: 1px solid #897c02; color:#fff; padding:3px 7px; display: block; text-align: center; float: left; margin-right: 4px; } .wp-pagenavi a.page{ text-decoration: none; background:#897c02; border: 1px solid #897c02; color:#fff; padding:3px 7px; display: block; text-align: center; float: left; margin-right: 4px; } .wp-pagenavi a.nextpostslink{ text-decoration: none; background:#897c02; border: 1px solid #897c02; color:#fff; padding:3px 7px; display: block; text-align: center; float: left; margin-right: 4px; } .wp-pagenavi a.previouspostslink{ text-decoration: none; background:#897c02; border: 1px solid #897c02; color:#fff; padding:3px 7px; display: block; text-align: center; float: left; margin-right: 4px; }
image is 'casing.jpg'
the section that i wanted to be clickable is #top
the whole left hand column is labeled #rightcol and no matter what I try to change in the values and codes for both in the header and styles files, the layout always becomes jumbled.
Please forgive me as I am no expert in programming or coding.
[A Must Have!] URL Shortener with Powerful Features (A REAL Adf.ly Clone) - PM me if your interested!
[A Must Have!] URL Shortener with Powerful Features (A REAL Adf.ly Clone) - PM me if your interested!