PDA

View Full Version : Can't seem to get it RIGHT. Need Header as a LINK



BigMillerTime
Oct 15th, 2009, 10:53 PM
Can't seem to get it RIGHT. Need Header graphic (logo and text) as a LINK!

I've searched up and down on different tags to get this to work. I need my Header Graphic to be a link to the home page. Nothing seems to work. Please take a look for me.

HTTP://WWW.IWEBNDESIGNS.COM/GERMANY

Any help would be greatly appreciated! Please email me millerbigb AT G M A I L DOT C O M


<head>
<title>Matrix Energetics</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Matrix Energetics"/>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<script language="JavaScript">
function MM_openBrWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
</script>

</head>
<body>
<div class="bannerArea">
<div class="container">
<div class="bannernav">
&bull; <a href="javascript:;" onClick="MM_openBrWindow('policy.html','template','scrollbars=yes,width=400,height=600')" >Datenschutzrichtlinie <br />

</a> &bull;
<a href="javascript:;" onClick="MM_openBrWindow('contact.html','template','width=300,height=480')" >Kontaktieren Sie uns <br />
</a> &bull;
<a href="http://www.matrixenergetics.com" >English</a>
</div><div style="clear:both;"></div>
</div>
</div>
<div class="topnavigationArea">

<div class="container">
<div class="topnavigationgroup">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Über Matrix </a>
<ul>
<li><a href="whatis.html">Was ist die Matrix? </a></li>
<li><a href="about.html">Über Matrix Energetics</a></li>
<li><a href="stories.html">Transformation Stories</a></li>

</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Seminare &amp; Events <br />
</a>
<ul>
<li><a href="seminars.html">Seminare</a></li>
<li><a href="description.html">Seminar Descriptions </a></li>

<li><a href="studygroup.html">Study Groups</a></li>
</ul>
</li>
<li><a href="bartlett.html">Dr. Bartlett</a></li>
<li style="border-right-style: solid;"><a href="faq.html">FAQ</a></li>
</ul>
</div>

<div style="clear:both;"></div>
</div>

met
Oct 15th, 2009, 11:16 PM
your site is down/link doesnt work for me.

this works assuming you use a background image for the header



#header a {
background-image: url(images/headerimg.jpg);
background-repeat: no-repeat;
display: block;
height: /* set this to your header height */
width: /* set this to width */
}
#header a span {
visibility: hidden;
}
<div id="header"><a href="my-home-page.htm"><span>My Home Page</span></a></div>


voila, clickable backgrounds.

if you use an image, then use:


<a href="homepage.htm"><img src="myheader.jpg" /></a>

Apostropartheid
Oct 15th, 2009, 11:25 PM
Met, couldn't you use a negative text-indent and get rid of that extra span?

met
Oct 15th, 2009, 11:52 PM
probably

haven't tried it

met
Oct 15th, 2009, 11:55 PM
<html>
<head>
<style type="text/css">
#header a {
background-image: url(img.jpg);
background-repeat: no-repeat;
display: block;
height: 200px;
width: 120px;
text-indent:-9000em;
}

</style>
</head>

<body>
<div id="header"><a href="my-home-page.htm">My Home Page</a></div></body>
</html>



yes you can

BigMillerTime
Oct 15th, 2009, 11:57 PM
Dont know what happened to the link... looks like godaddy just had some down time. Should be up, will this work MET?

BigMillerTime
Oct 16th, 2009, 12:20 AM
<html>
<head>
<style type="text/css">
#header a {
background-image: url(img.jpg);
background-repeat: no-repeat;
display: block;
height: 200px;
width: 120px;
text-indent:-9000em;
}

</style>
</head>

<body>
<div id="header"><a href="my-home-page.htm">My Home Page</a></div></body>
</html>



yes you can

Is there a code that I could just insert into my html as it is?

BigMillerTime
Oct 16th, 2009, 08:01 AM
Bump!:thumbsup:

met
Oct 16th, 2009, 12:37 PM
put



#header a {
background-image: url(img.jpg);
background-repeat: no-repeat;
display: block;
height: 200px;
width: 120px;
text-indent:-9000em;
}


in to your CSS - you will need to adapt it for your own header.

essentially you are making the header div a clickable "block" (display:block) when you add an <a> tag as its child.

adapt this code to fit with your own site.



<div id="header"><a href="my-home-page.htm">My Home Page</a></div></body>


I've told you how to make a background image clickable, which is what I assume you require. Adapt it for your needs and learn from it

Scriptet
Oct 16th, 2009, 04:59 PM
Met, couldn't you use a negative text-indent and get rid of that extra span?

There is a SPAN technique that can be used to get rid of the issue that the text-indent has, when a user has CSS turned on, but Images turned off. Where you position the SPAN over the text..say like:


h1{ width:200px; height:200px; position:relative; }
h1 span{ position: absolute; width:100%; height:100%; background:..;)


Although personally I just use text-indent, but depends if you're an accessiblity nut! This can still have a problem if the background image is transparent as the text can show up behind it.

BigMillerTime
Oct 19th, 2009, 08:43 PM
Okay, thanks for all the help but I'm still not getting this to work right.

Here is the html code:

</head>
<body>
<div class="bannerArea">
<div class="container">
<div class="bannernav">
and here is the CSS code:

.bannerArea {
width: 100%;height: 173px;
background-color: #4971a2;

}

.bannerArea .container {
height:173px;
background-image: url(images/banner_bkgd.jpg);
background-repeat: no-repeat;
}

I cannot get the "banner_bkgd.jpg" to become a clickable link.

I have tried <div class="container"><a href="www.google.com"></a>

Please lead me in the right direction. You can check it out www.iwebndesigns.com/germany

any help would be greatly appreciated... i've fooled around with this for soo long.

Thanks
Brandon

met
Oct 19th, 2009, 08:55 PM
you didn't do as suggested



#container a {
height: 980px;
width: 173px;
text-indent:-9000em;
display:block;
}


simply put



<div class="container">
<a href="homepage.htm">My Home Page</a>
<!-- #banner etc -->
</div>


and you should be good to go.
but replace homepage.htm with your respective link.

BigMillerTime
Oct 19th, 2009, 08:56 PM
I tried all late last night, will try again! :)


you didn't do as suggested



#container a {
height: 980px;
width: 173px;
text-indent:-9000em;
display:block;
}


simply put



<div class="container">
<a href="homepage.htm">My Home Page</a>
<!-- #banner etc -->
</div>


and you should be good to go.
but replace homepage.htm with your respective link.

BigMillerTime
Oct 19th, 2009, 09:00 PM
Met, could you please download my index.html from the website and try this yourself..

I am not getting this to work correctly.

Thanks,

Brandon

met
Oct 19th, 2009, 09:07 PM
I didn't see you were using .BannerArea as a parent div, this works:



<!-- HTML LINE 21 -->
<div class="bannerArea">
<div class="container">
<a href="#">Test</a></div> <!-- ADD THIS -->
<div class="bannernav">
<!-- rest of banner nav -->





/* CSS */
.bannerArea .container a { display:block; width:980px; height:173px; }

/* add that below .bannerArea .container */


tested and confirmed.


edit code supplied a post earlier was using #container in the css, I imagine .container would have worked (as you were referring to container as class, not id in the html)

BigMillerTime
Oct 19th, 2009, 09:32 PM
Met, Thank you very much for your help. Now my text on the right hand side has been moved. Any ideas?

when adding </div> it throws off the <div class="bannernav">

met
Oct 19th, 2009, 09:39 PM
my mistake

here



.bannerArea .container a.bg { /* .bg is important (we only want to do this for 1 link */
float:left;
display:block;
width:500px;
height:173px;
text-indent:-9999em;
}





<div class="bannerArea">
<div class="container">
<a class="bg" href="#">test</a> <!-- note the class -->
<div class="bannernav">



and my version of DW auto adds the closing tag when I </ so it inserted an extra div accidentally, typo.

Also, I reduced the width of #container a.bg as if it's 100% it pushes the links down.

You could resolve this with display:inline but then you can't make the entire image clickable ;)

BigMillerTime
Oct 19th, 2009, 09:53 PM
oh Met... I owe u big time. but now the graphic is cut off?

did I miss something?

met
Oct 19th, 2009, 09:56 PM
any chance you can upload the page so I can see it live?

I'm looking at it offline and it displays fine, with 500px of "clickable" background.

BigMillerTime
Oct 19th, 2009, 09:57 PM
sure... 1 moment.

BigMillerTime
Oct 19th, 2009, 09:59 PM
she's up

www.iwebndesigns.com/germany/

met
Oct 19th, 2009, 10:03 PM
yeh

you've set the background of the anchor to be the banner, hence why only 500px is showing.

use this



.bannerArea .container {
height:173px;
background-image: url(images/banner_bkgd.jpg);
background-repeat: no-repeat;
}

.bannerArea .container a.bg { display:block;
width:500px;
height:173px;
float:left;
text-indent:-9999em; }


that essentially says set the background of #container to be the banner (which will be 100% due to .bannerArea being 100%.

it then says "set the anchor with a class of "bg" to be 500px wide" and make it clickable.

you'll have a 500px wide anchor "on top" of the container which has the background image.

i never said to do that ;) the code provided in this post (http://www.codingforums.com/showpost.php?p=878374&postcount=17) would have worked fine without having to change anything else

BigMillerTime
Oct 19th, 2009, 10:11 PM
Met thank you, greatly appreciated. Everything is perfect. I moved the px to 870 for more clickable room!

You were right, your previous post was fine, I just messed it up.

Thank you so much!