Hiding Absolutely Positioned <h1> Text, Left Side Layout Breaking at Small Widths


I’m struggling through this, but I’m making progress. I think my style sheet is kind of bloated :hot_face:. I’m at 172 lines now, and the “portrait” header isn’t even totally complete, though the content portion will not be terribly large and fairly plain.

RE: firstratefreight.net

The first issue that I’m struggling with is what properties I should assign to totally hide the <h1> underneath the logo image. Top? Left? Shall I use pixels or percentages?
Below is what I have currently:

/* line 104 */
.logocontainer {
	background:url("headerlogo.png") no-repeat 0 0;
	margin:0 auto;

/* line 159 */
h1 {
    padding:25px 10px 0;

The second issue I have is that the left column of the box gets crushed when the browser width is small. I thought that was because of the min-width assigned to the middle container div, .headerMC, but I haven’t yet figured out why this is (shown below).
snip .

I also have some other concerns about using a large .png file to simply achieve a hover effect on the <div> since it currently has so much code attached to it (though it looks very nice). I’m doing the best I can.

Thanks in advance for any suggestions I might receive.

-ty :smashy:

There are a few ways to hide an element, and another few to “hide” them:

  • To hide it completely as if it didn’t exist, use display: none;
  • To hide it but keep it’s dimensions and allow clicking elements behind it, use opacity: 0;
  • To hide it but keep it’s dimensions and block clicking elements behind it, use visibility: none;
  • To keep it visible but hide it from view, use left: -999999px;

Normally, I would just display: none;. I almost never use visibility (honestly, I can’t recall ever using it), and opacity: 0; is useful when you want do fading based animations.

To address your other concerns:

That’s totally fine, especially since it’s a visual element! It’s not a huge deal but the only thing I would recommend is splitting up your spritesheet into 4 groups of 2’s. You have the right idea with using spritesheets, but you’re currently loading the whole image regardless of browser size.

1 Like

Hi, Tensormonkey,

Informative reply. Much appreciated.

To hide that header element, I’ll just go with display:none as long as it is accessible to screen readers. That seems like a sensible solution that would eliminate a few more lines of code in the CSS.

As for the image, the main reason I put the 4 states of 2 into one large image is to limit the HTTP requests to save on bandwidth space… or whatever (I don’t know :grinning:) . A div element was the only way to display the handsome hover effect as I could not find any method on changing the background-position using an <img> element in the markup. If I forego the hover effect (that I’m very much infatuated with :smiling_face_with_three_hearts:), I can use an image element and assign a percentage value for the size and limit it to 2 states. It really just seems to me that a 916KB .png image along with all the extra lines of styles to cover the media queries is an awful lot for an effect that I just happen to like a lot. I’ll do some reading to see what I might want to target for a total page download size.

I’ll still wait and see if anyone else knows why the left side gets smushed at narrow widths (or figure it out myself somehow).

-ty :smashy:

It’s not accessible to screen readers



Very good link, Ray.
I went to that page and applied the following styles directly from it (hiding the text using absolute positioning and throwing it off stage left):
h1 { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.