I’m struggling through this, but I’m making progress. I think my style sheet is kind of bloated . 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.
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:
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). .
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.
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.
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 ) . 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 ), 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).
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; }
. 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.
.
) . A div element was the only way to display the handsome hover effect as I could not find any method on changing the 
), 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.