By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,198 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

H1, FIR, display:inline?

P: n/a
Hello,

The way of swapping standard mark-up tags (h[1-6]) with images is a
common knowledge and as such does not need any recommendation. No
mess, no fuss, a image with fancy font is displayed instead of
"arialy" heading. Nice.

Now, methods I know uses "display:none" rule. It prevents the content
of being displayed. Now, what if I want to make something like

My heading goes here (it's, hence two lines)
My heading goes here menu tabs by Dan
--------------------------- a bottom border, hugged to the heading -----

The effect I am talking about can can be seen on
http://www.dwarfscorner.com/ but I achieved it in a "hackish" way. The
Dwarf's Corner logo is not displayed as a h1 but rather a
background-image rule is used whilst h1 is hid from the eyes of user.
Not very nice since I can't make any roll-over effect at all (or I am
not aware of the way this can be achieved). Can h1 be displayed in
inline way and still be not visible? Is there a way to attach a link
to a logo on my site? Any help will be appreciated, thanks in advance.

--
Lukasz Grabun
(reply-to field is fake, use grabek (at) acn dot waw dot pl to reply)
Jul 20 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
Lukasz Grabun <gr****@purgatory.abyss> wrote:
The way of swapping standard mark-up tags (h[1-6]) with images is a
common knowledge and as such does not need any recommendation. No
mess, no fuss, a image with fancy font is displayed instead of
"arialy" heading. Nice.

Now, methods I know uses "display:none" rule. It prevents the content
of being displayed.


Dumb method, it's simple:

<h1><img src="headertextgraphic.png" alt="headertext"></h1>

--
Spartanicus
Jul 20 '05 #2

P: n/a
Lukasz Grabun <gr****@purgatory.abyss> wrote:
The way of swapping standard mark-up tags (h[1-6]) with images is a
common knowledge and as such does not need any recommendation. No
mess, no fuss, a image with fancy font is displayed instead of
"arialy" heading. Nice.

Now, methods I know uses "display:none" rule. It prevents the content
of being displayed.


Dumb method, it's simple:

<h1><img src="headertextgraphic.png" alt="headertext"></h1>

--
Spartanicus
Jul 20 '05 #3

P: n/a
On Tue, 13 Apr 2004 21:47:54 +0100, Spartanicus wrote:
Dumb method, it's simple:

<h1><img src="headertextgraphic.png" alt="headertext"></h1>


Hm, this way I am including visual tags into structural code.

Currently, I am biased towards float:right for the menu section
(included on the right of h1). I hope it'll work...

--
Lukasz Grabun
(reply-to field is fake, use grabek (at) acn dot waw dot pl to reply)
Jul 20 '05 #4

P: n/a
On Tue, 13 Apr 2004 21:47:54 +0100, Spartanicus wrote:
Dumb method, it's simple:

<h1><img src="headertextgraphic.png" alt="headertext"></h1>


Hm, this way I am including visual tags into structural code.

Currently, I am biased towards float:right for the menu section
(included on the right of h1). I hope it'll work...

--
Lukasz Grabun
(reply-to field is fake, use grabek (at) acn dot waw dot pl to reply)
Jul 20 '05 #5

P: n/a
Lukasz Grabun <gr****@purgatory.abyss> wrote:
On Tue, 13 Apr 2004 21:47:54 +0100, Spartanicus wrote:
Dumb method, it's simple:

<h1><img src="headertextgraphic.png" alt="headertext"></h1>
Hm, this way I am including visual tags into structural code.


If the heading is part of the content then it 100% belongs in the
HTML.

Have you looked at a FIR page with CSS on but image loading off? No
headings at all. :-(
Currently, I am biased towards float:right for the menu section
(included on the right of h1). I hope it'll work...


That would involve placing the menu before the heading in the HTML,
not ideal.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #6

P: n/a
Lukasz Grabun <gr****@purgatory.abyss> wrote:
On Tue, 13 Apr 2004 21:47:54 +0100, Spartanicus wrote:
Dumb method, it's simple:

<h1><img src="headertextgraphic.png" alt="headertext"></h1>
Hm, this way I am including visual tags into structural code.


If the heading is part of the content then it 100% belongs in the
HTML.

Have you looked at a FIR page with CSS on but image loading off? No
headings at all. :-(
Currently, I am biased towards float:right for the menu section
(included on the right of h1). I hope it'll work...


That would involve placing the menu before the heading in the HTML,
not ideal.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #7

P: n/a
*Lukasz Grabun* <gr****@purgatory.abyss>:
On Tue, 13 Apr 2004 21:47:54 +0100, Spartanicus wrote:
<h1><img src="headertextgraphic.png" alt="headertext"></h1>


Hm, this way I am including visual tags into structural code.


I've not yet seen a working and accessible CSS image replacement technique
that wouldn't require additional nonsense mark-up. Can't think of one
either. 'img' with 'alt' is surely the best solution, if you don't count no
image at all.

--
"The scientific name for an animal that doesn't
either run from or fight its enemies is lunch."
Michael Friedman
Jul 20 '05 #8

P: n/a
*Lukasz Grabun* <gr****@purgatory.abyss>:
On Tue, 13 Apr 2004 21:47:54 +0100, Spartanicus wrote:
<h1><img src="headertextgraphic.png" alt="headertext"></h1>


Hm, this way I am including visual tags into structural code.


I've not yet seen a working and accessible CSS image replacement technique
that wouldn't require additional nonsense mark-up. Can't think of one
either. 'img' with 'alt' is surely the best solution, if you don't count no
image at all.

--
"The scientific name for an animal that doesn't
either run from or fight its enemies is lunch."
Michael Friedman
Jul 20 '05 #9

P: n/a
*Steve Pugh* <st***@pugh.net>:

Have you looked at a FIR page with CSS on but image loading off?


JFTR: I usually do surf that way, despite the multiple Mbit/s connection.

--
"I have opinions of my own -- strong opinions --
but I don't always agree with them." - George Bush
Jul 20 '05 #10

P: n/a
*Steve Pugh* <st***@pugh.net>:

Have you looked at a FIR page with CSS on but image loading off?


JFTR: I usually do surf that way, despite the multiple Mbit/s connection.

--
"I have opinions of my own -- strong opinions --
but I don't always agree with them." - George Bush
Jul 20 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.