make header img clickable [solved]

[lowellg]

If this is my stylesheet header code, how do I make my header image clickable so that it links to the homepage?

{
background: url(images/header.png) no-repeat left top;
width:310px;
height: 150px;
font-size:12px;
font-weight: bold;
padding:80px 70px 20px 580px;
color:#fff;
line-height: 1.6em;
display:block;
float:left;
margin-bottom:2px;

}

[M@rtijn]

This is CSS code, you can use it to style your website.

If you want the header to be clickable, first it would help to have a link to the website, or maybe you could explain how your page template looks like.
Somewhere there will probably be a div called ''header" which you have to edit to a link.

Again, linky to your website would help

[mike-r]

if there is a link in the header, use:
#header a {
display:block;height:150px;
}

[Dr.CSS]

Try looking at one of the many default template that come with CMSMS as everyone comes with this...

[M@rtijn]

Did you even read any of the posts in this topic?

[lowellg]

Yes in fact I read them all. Sorry I'm not an expert. I now understand what you were asking in your first response... however the issue is that I'm in the design phase so I don't believe that you can see my site. I can only see it on my computer. My friend set my CMS up for me fyi. Now I'm left with the learning curve and tinkering around... I need serious help obviously. What can I do to aid in getting your help?

[mike-r]

Yes in fact I read them all.

You havent readed anything.

[uniqu3]

lowellg:
As nobody knows how your site is structured we can only play guessing game here.
You could of pasted part of your template where you want it to be linked...

As DrCss said if you have a look at one of default templates for example NCleanBlue you will find following.

Layout->Templates->NCleanBlue

Code: Select all

{* logo image that links to the default start page. Logo image is changed in the style sheet  "Layout: NCleanBlue" *}
          <div id="logo" class="core-float-left">
            {cms_selflink dir="start" text="$sitename"}
          </div>

and in Layout->Stylesheets->Layout:NcleanBlue

Code: Select all

#logo a {
/* adjust according your image size */
	height: 75px;
	width: 215px;
/* forces full link size */
	display: block;
/* this hides the text */
	text-indent: -9999em;
	margin-top: 0;
	margin-left: 0;
/* you can set your own image here, note size adjustments */
	background: url(../../uploads/NCleanBlue/logo.png) no-repeat left top;

So as you see answer has been there all of the time you should of just took 5 min. reading and other 10min. looking at sample templates (thats why these are for).

So if above doesn't help you figure it out then no one can help you.
If your friend has setup the site for you, then ask your friend or do you let your friend build a PC for you and then call at DELL or whatever company and ask them where is USB plug and how OS works??

Now please stop moaning at moderators (in case you didn't know Mod's are not payed for doing their job and they or other Community members can only help with some information!!) and go look at your template.

If you still dont get it read through WIKI:
http://wiki.cmsmadesimple.org/index.php ... d/Designer
Learn some CSS (you dont go buy a car and ask car dealer to learn you driving it):
http://www.w3schools.com/css/default.asp
Learn about XHTML:
http://www.w3schools.com/html/default.asp
Learn about Smarty:
http://www.smarty.net/

[lowellg]

Uniqu3 I appologize. Thanks for the advice on the code. Here is a link to my site. I had my friend help me get it online. He's helped me a lot so I don't want to bug him everyday with too many questions. I figure if there's a forum for this then great!

Anyway here's the link to my site: http://6e4c350c.c28.servage.net/

I understand completely how to do this in the NCleanBlue templates/CSS but it's different in the Greenhills templates/CSS... is it not?

I managed to get the header image to be clickable as you can see, and it DOES lead to "home" but I cannot get rid of all that space underneath it.

I see this in the GreenHills : GreenHills template:

Code: Select all

{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "Layout: Top menu + 2 columns" *}
      <div id="header">
{* a link back to home page and the header left image/logo, text is hidden using CSS *}
        <h1>{cms_selflink dir="start" text=""}</h1>
        <hr class="accessibility" />
      </div>
{* End Header *}

It says

Logo image is changed in the stylesheet "Layout: Top menu + 2 columns"

but where exactly? I have it at

div#header h1

.


I see this in the Layout: Top menu + 2 columns (you can see my header image in here":

Code: Select all

/* header, we will hide h1 a text and replace it with an image, we assign a height for it so the image wont cut off */
div#header {
/* adjust according your image size */
	height: 100px;
	margin: 0;
	padding: 0;
	/* you can set your own image here, will go behind h1 a image */
	background: #f4f4f4 url(uploads/ngrey/bg_banner.png) repeat-x left top;
/* border just the bottom */
	border-bottom: 1px solid #D9E2E6;
}
div#header h1 a {
/* you can set your own image here */
	background: url() no-repeat left top;
/* this will make the "a" link a solid shape */
	display: block;
/* adjust according your image size */
	height: 100px;
/* this hides the text */
	text-indent: -999em;
/* old firefox would have shown underline for the link, this explicitly hides it */
	text-decoration: none;
}
div#header h1 {
	margin: 0;
	padding: 0;
/*these keep IE6 from pushing the header to more than the set size*/
	line-height: 0;
	font-size: 0;
/* this will keep IE6 from flickering on hover */
	background: url(images/header.png) no-repeat left top;
}
div#header h2 {
/* this is where the site name is */
	float: right;
	line-height: 1.2em;
/* this keeps IE6 from not showing the whole text */
	font-size: 1.5em;
/* keeps the size uniform */
	margin: 35px 65px 0px 0px;
/* adjust according your text size */
	color: #f4f4f4;
}

I see this in the Style Sheet GreenHills : GreenHills:

Code: Select all

div#header {
	height: 264px;
	margin: 0;
	padding: 0;
	/* you can set your own image here, will go behind h1 a image */
}
div#header h1 a {
	background: url() no-repeat left top;
	display: block;
	height: 264px;
	text-indent: -999em;
	text-decoration: none;
}
div#header h1 {
	margin: 0;
	padding: 0;
	line-height: 0;
	font-size: 0;
	background: url(images/header.png) no-repeat left top;
}
div#header h2 {
	float: left;
	line-height: 1.2em;
	font-size: 1.5em;
	margin: 10px 65px 0px 5px;
	color: #f4f4f4;
}

div#header h2 a
{
color:#fff;
text-decoration: none;
display:block;
float:left;
}

div#header h2 a:hover
{
text-decoration: none;
}

Thanks in advance for any help you can give me!

[lowellg]

Does anyone have any advice on this? I am really racking my brain about how to fix this.

[uniqu3]

looks like you have a problem with your site? It's loaded without any style and links lead to nirvana.
Can't see what space underneath you mean

[lowellg]

Okay whooops I guess the link I posted was temporary. Try this one...?

http://6e4c350c.c28.servage.net/

[lowellg]

Well it seems this was my issue but PLEASE correct me if my code or site isn't doing this the correct way. But in any case I found this code in the Stylesheet GreenHills: GreenHills

Code: Select all

/* top banner*/
div#top
{
	background: url() no-repeat left top;
	width:310px;
	height: 0px;
	font-size:12px;
	font-weight: bold;
	padding:0px 0px 0px 0px;
	color:#fff;
	line-height: 1.6em;
display:block;
float:left;
margin-bottom:2px;

}

I changed the height to 0px and all of the padding to 0px and that fixed the issue.

[Dr.CSS]

A great way to see how all this works is to use Firefox with the Web Developer tool bar, it will let you edit the css and has an outline current element tool that shows what is what when you hover it, hover header see how big it is, edit the css for the header, looks good, copy/paste that css into your style sheet...

[lowellg]

Dr. Css thanks that is a great tool.