Showing h1 Element in Home Page Header if Images are Turned Off

HTML & CSS
1

Hello everyone,

I’ve been trying to learn what is demonstrated at this page: http://www.pmob.co.uk/temp/headerreplacement3.htm, and I want to use a related technique to put a h1 element under the home page you all have seen a hundred times now at [URL=“http://www.atlantareviewgroup.com”]http://www.atlantareviewgroup.com. I don’t want to have a link there in the header for the home page, but I do want to have a h1 element to fall back on if images and/or CSS is turned off.

Can you help me?:smiley:
I’m not quite sure how to do it.

2

If I am understanding you correctly you DON’T want a link in your H1?

If that’s the case this is my method for image replacement, which is pretty clean markup side and offers good browser support:


h1{
	position:relative;
	overflow:hidden;
	zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);
}
h1:after, h1 .after{
	position:absolute;
	height:inherit;
	width:inherit;
 	top:0;
	left:0;
	right:0;
	left:0;
	z-index:10;
	content:"";
       background: url(faux.gif) left top no-repeat;
}

/* since you might be using different images on different pages, you might want to to give the BODY tag an  ID or UNIQUE CLASS, you must have at least some sort of image and size filled in below or this wont work!!*/
/*default*/
h1 { height: (height of your default image)px; width: (width of your default image)px; }
h1:after, h1 .after{ background-image: url(your default image url);}
/* home.htm , assuming the BODY has an ID of #home*/
#home h1 { height: (height of your home image)px; width: (width of your home image)px; }
#home h1:after, #home h1 .after{ background-image: url(your home image url);}
/* other.htm , assuming the BODY has an ID of #other*/
#other h1 { height: (height of your other image)px; width: (width of your other image)px; }
#other h1:after, #home h1 .after{ background-image: url(your other image url);}
/*ad as amny pages as needed*/

I am assuming that you only have ONE H1 per HTML page… as you are supposed to.

AM 50/50 on this idea, but you could make a sprite … that is ALL the H1 you intend to replace THROUGHOUT your site in ONE FILE ( GIF/JPEG)… and set that as your image… in the first part of the code ( background: url(sprite.gif) left top no-repeat; ) then on the pages you’d change the background-position, instead of the background-image.

Hope that helps

(oh I forgot…lol… you dont have to do anything special on the HTML, just have the H1 tag… and that’s it!

And now that I think about it , i would separate the #home h1 .after{ background-image: url(your other image url);} from the #home h1:after{ background-image: url(your other image url);}… putting those on a conditional comment for IE lt8 ( since IE 8+ supports :after, anyway)

3

Thank you for your post, Dresden_Phoenix.

I think I need to elaborate further here. Yes, it is correct, I don’t need a link there on the home page. I have one home page image that won’t have any rollover effects. So, I only want there to be the h1 to fall back on if images are disabled.

4

Paul has a non-linked version here:

http://www.pmob.co.uk/temp/headerreplacement2.htm

Make sure to check the other thread where you first asked about this, as a solution to your footer link has been posted. :slight_smile:

5

Well, I’ve attempted to do this at my updated page at http://www.atlantareviewgroup.com/index.html. It works, however There is some positioning problem caused by the other floats that surround the middle body content. The middle of the page has been pushed way down the page.

6

The main thing I see there is the need for

h1 {margin: 0;}

I don’t see any large pushing down in Firefox.

7

Gosh, I keep forgetting to update my files each time I come to ask a question. If you see the page again, you will see the middle column shoved way down to the bottom of the screen. I tried adding margin:0 to the h1, but no dice…

8

Not in Firefox. What browser are you viewing this in?

9

Hmm… weird…

Google Chrome v15.0.874.106 m,
IE8

Both are showing gaps for me.

10

OK, I see it in Chrome. You could change that by widening the container a bit:

#container {
  height: 770px;
  margin: 0 auto;
  overflow: visible;
  [COLOR="#FF0000"]width: 1165px;[/COLOR]
}

Otherwise you’ll have to position those side bits some other way—maybe with pos absolute.

11

Hmm… I had the side panels nested right up against that metal bar inside the body of the middle content. Now, if my side panels protrude the blue background by even 1 pixel, the middle div falls to the bottom of the page.

I want those side panels nested right up against there where it appears it should go!

So you’re saying I could ditch the floated columns and go back to absolute positioning of the two side windows and the email box to achieve its old, rightful positioning?

12

Hm, there is a problem in Firefox, where the header is being pushed right by the top margin on the left sidebar. Chrome etc instead just drop the whole center bit below the sidebars instead, because they don’t have room. It probably would be easier just to AP those sidebars, to be honest.

13

All right, it’s done. I got rid of the containing div, too (I think that was the right thing to do). Hopefully that resolves any issues. Effect achieved!

14

No, better to leave it, as you need its positioning context. Without it, the sidebars will not move with the rest of the page when you resize the browser window. You need that container with position: relative on it. :slight_smile:

15

Done and uploaded new files :slight_smile:

16

That’s better. :slight_smile: That seems to be a more reliable approach.