SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

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

    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 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?
    I'm not quite sure how to do it.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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:

    Code:
    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. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The main thing I see there is the need for

    h1 {margin: 0;}

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

  7. #7
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by etidd View Post
    If you see the page again, you will see the middle column shoved way down to the bottom of the screen.
    Not in Firefox. What browser are you viewing this in?

  9. #9
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hmm... weird...

    Google Chrome v15.0.874.106 m,
    IE8

    Both are showing gaps for me.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    OK, I see it in Chrome. You could change that by widening the container a bit:

    Code:
    #container {
      height: 770px;
      margin: 0 auto;
      overflow: visible;
      width: 1165px;
    }
    Otherwise you'll have to position those side bits some other way—maybe with pos absolute.

  11. #11
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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. #13
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by etidd View Post
    All right, it's done. I got rid of the containing div, too (I think that was the right thing to do).
    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.

  15. #15
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Done and uploaded new files

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    That's better. That seems to be a more reliable approach.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •