Styling the <h1> tag.

minute44 · #1 Jul 28th, 2006, 13:23

I have a question.

On this site:
http://chrisgarrettmedia.com/

This guy's <h1> is styled to be his logo but it also has text that is not visible when his CSS is applied. So when you remove all style information it displays the text and nothing seems broken.

How do you achieve this? It's a really cool effect and is super accessible.

Anyone?

Cheers in advance.

Dan.

craig · #2 Jul 28th, 2006, 14:33

It seems he's defining the words to be displayed off the page. He has it set at -9000px to the left.
I woudn't call it accessible, you cant resize the font of the logo

http://chrisgarrettmedia.com/index.p...ntation/screen

Craig

minute44 · #3 Jul 28th, 2006, 14:43

Quote:

Originally Posted by craig

It seems he's defining the words to be displayed off the page. He has it set at -9000px to the left.
I woudn't call it accessible, you cant resize the font of the logo

http://chrisgarrettmedia.com/index.p...ntation/screen

Craig

Hmm, surprised that doesn't cause a horizontal scrollbar... you'd think it would wouldn't you?

moojoo · #4 Jul 28th, 2006, 15:20

Probably something like this.

h1#foo {
width:;
height:;
background:url("foo.jpg") top left no-repeat;
}

h1#foo a {
visibility:hidden !important;
}

minute44 · #5 Jul 28th, 2006, 15:21

Ahh yes, you're probably right there.

Question: Why do you call everything "foo" when you post on here?

moojoo · #6 Jul 28th, 2006, 15:24

Foo is a generic term used to specify items in an example.

Here is a definition of the term:

"A metasyntactic variable is a placeholder name, or a kind of alias term, commonly used to denote the subject matter under discussion, or a random member of a class of things under discussion. The term originates from computer programming and other technical contexts, and is commonly used in examples by hackers and programmers. The use of a metasyntactic variable is helpful in freeing a programmer from creating a logically named variable, although the invented term may also become sufficiently popular and enter the language as a neologism. The word foo is the canonical example"

minute44 · #7 Jul 28th, 2006, 15:26

oh right, so it's not some idiosyncrasy you have or something... lol

Not being that much of a geek, I didn't know that...lol

moojoo · #8 Jul 28th, 2006, 15:30

LOL well yeah. It is something I picked up a long time ago from hanging out on various web design/dev and programming channels on IRC.

Legacy_Staff · #9 Jul 28th, 2006, 15:56

Quote:

"A metasyntactic variable is a placeholder name, or a kind of alias term, commonly used to denote the subject matter under discussion, or a random member of a class of things under discussion. The term originates from computer programming and other technical contexts, and is commonly used in examples by hackers and programmers. The use of a metasyntactic variable is helpful in freeing a programmer from creating a logically named variable, although the invented term may also become sufficiently popular and enter the language as a neologism. The word foo is the canonical example"

Demmit!
I didn't need the dictionary before you explained it!

moojoo · #10 Jul 28th, 2006, 16:01

LOL I think we got way off topic. *hides*

Ryan Fait · #11 Aug 14th, 2006, 10:12

I do that on a lot of my sites like this:

HTML: Select all

<style type="text/css">
    h1 {
        width: 300px;
        height: 100px;
        margin: 0;
        text-indent: -5000px;
        background: #fff url("logo.jpg") no-repeat 0 0;
        display: block;
    }
</style>
<html>
    <h1>My Hidden Header Text</h1>
</html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
help with styling my blog please	alexgeek	Website Planning	12	Sep 23rd, 2007 01:25
CSS border styling	RZX Developer	Web Page Design	6	Aug 10th, 2007 14:25
<HR> Styling	RZX Developer	Web Page Design	18	Jul 31st, 2007 22:15
RSS Styling question	Daniel	Other Programming Languages	4	Apr 8th, 2007 00:28
Styling up with CSS	gwx03	Webforumz Suggestions and Feedback	10	Oct 14th, 2003 20:21

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Styling the <h1> tag.