Making the Whole Header Clickable but Hide Title

  • Hey,
    I’m using this article:
    https://codex.www.ads-software.com/Designing_Headers
    and it’s section Making the Whole Header Clickable (method 2).
    My goal now is to hide Blog Title correctly.

    Here’s what they say and code from the article:

    The CSS would then be styled something like this to enlarge the clickable link area and hide the header text (optional), customized to your own design needs. 

    #header h1 a {
	width: 400px;
	height: 100px;
	display: block;
	background: url(images/headerimage.gif) no-repeat top left;
	}
#header h1 a span { display: none; }

    And here’s what I did so far in my stylesheet:

    #header h3 a, #header h1 a {
position:relative;
margin-left: 28px;
font-size:0px; //to hide Blog Title
width: 528px;
height: 85px;
display: block;
}

    I got the “Making the Whole Header Clickable” part working great!
    But I’m having problems hiding Blog Title
    I don’t have this function in my stylesheet and doesn’t do anything when I put it there:
    #header h1 a span { display: none; }

    So for now I’m trying to use font-size:0px BUT I know it’s a bad idea + small text shows up in Safari (Chrome, Firefox, IE are fine – but this all can change).

    Is there a better way to make Blog Title in this case invisible (remember, I cannot move it using this method – it affects clickable area)?

    Here’s the whole CSS file in case you want to look at it

    [code moderated as per forum rules - a link to your site is sufficient to access the stylesheet(s)]

Viewing 7 replies - 1 through 7 (of 7 total)

  • a link to your site might help to get you more replies.

    css/formatting can best/only be discussed in connection with the underlying html structure – i.e. seeing the live site.

    Thread Starter maxminzer

    (@maxminzer)

    https://teensatsalvation.com

    to your style:

    #header h3 a, #header h1 a {
margin-left: 28px;
font-size:0px;
position:relative;
width: 528px;
height: 85px;
display: block;
}

    add:
    text-indent:-9999px;

    Thread Starter maxminzer

    (@maxminzer)

    I changed font-size to 1px because when you add text-indent:-9999px; with font-size:0px; – it was shifting the clickable area to the left somehow.

    so I have now:

    #header h1 {
position:relative;
margin-left: 28px;
font-size:1px;
width: 528px;
height: 85px;
display: block;
text-indent:-9999px;
}

#header h3 a, #header h1 a {
margin-left: 28px;
font-size:1px;
position:relative;
width: 528px;
height: 85px;
display: block;
text-indent:-9999px;
}

    Is everything fine now?

    looks ok to me – IE7 and FF3.6

    Thread Starter maxminzer

    (@maxminzer)

    Oh, I just checked IE and Firefox – it’s shifted to the left.
    It’s fine in Chrome and Safari.

    Should I keep it
    font-size:0px;

    and just change margin-left ?

    Thread Starter maxminzer

    (@maxminzer)

    It only works in Chrome right now.
    margin-left doesn’t change anything in Safari(I was wrong above – it didn’t work), Firefox, and IE.

    Any suggestions?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Making the Whole Header Clickable but Hide Title’ is closed to new replies.