How to make accessible h1 with logo

Question

How can I have a logo linked to homepage and also have h1 but invisible

I have layout like this

 <header id="pageHeader">
                    <h1>
                        <a href="<?php bloginfo('url'); ?>">
                        <?php bloginfo('name'); ?>
                        </a>
                    </h1>

Then I've used the css to for image as background but the logo is not loading, anyone?

  header#pageHeader h1 a {
  width:130px;
  height:70px;
  text-indent:-9999px;
  background:url(/pict/logo.png);
  background-repeat: no-repeat;
}

http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/ — Fabrizio Calderan, Oct 18 '13 at 12:00

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

Your missing display:inline-block;

compare this fiddle with this one

differences highlighted in this question, quoted below:

inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box. inline
This value causes an element to generate one or more inline boxes.

sorry to explain why this works:

Inline means only take up as much space as you need and allow other elements to sit in the flow with me. Your a tag has no text in it. So it does not need to take up any space, so it doesn't.

inline-block means take up whatever space I'm configured to take up (defined in the CSS) and also allow elements to flow next to me. So this applies the width and height, where as inline doesn't

The other option is block, this means take up an entire row and don't let anything flow next to me

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 18 '13 at 12:04

Liam

27,717
28
128
190

Thanks Liam that worked, Can you please explain me about inline-block thing. – Fred Erim Oct 18 '13 at 12:13
@frederim This seems to cover it pretty succinctly: http://stackoverflow.com/a/14033814/542251 – Liam Oct 18 '13 at 12:15
Arg, sorry, I've just relaised what you mean't in the previous question, added some detail. Hope it makes sense – Liam Oct 18 '13 at 13:04

score 1 · Answer 2 · answered Oct 18 '13 at 12:09

A simple display:block or display:inline-block is the answer

JSFiddle Demo

#pageHeader h1 a {
    width:130px;
    height:70px;
    text-indent:-9999px;
    background:url(http://lorempixel.com/output/abstract-q-c-130-70-8.jpg);
    background-repeat: no-repeat;
    display:block;
}

score 0 · Answer 3 · answered Oct 18 '13 at 14:00

0

The accessible way is

<h1><a href=...><img src=... alt=... border=0></a></h1>

answered Oct 18 '13 at 14:00

Jukka K. Korpela

195,524
37
270
390

Where do I put heading1 text in this one? – Fred Erim Oct 18 '13 at 23:16
Into the `alt` attribute. If you mean that the link should contain a logo *and* a heading text (and not logo *as* a heading), then you would use `
heading
`. – Jukka K. Korpela Oct 19 '13 at 06:03

score -1 · Answer 4 · answered Oct 18 '13 at 12:06

-1

for a javascript fix, could always add onclick="location.href='yourblog';" to your h1 tag

answered Oct 18 '13 at 12:06

DJB

257
2
11

How to make accessible h1 with logo

4 Answers4

heading