Header image not showing

[Anonymous]

Greetings,

What am I doing wrong that is preventing the header image from displaying on this page?

Best Regards.

[Paulie_D]

If you mean the h2 with a class of .header…it’s not in the CSS, apparently.

.header {
position: absolute;
margin: 30px 0 0 505px;
height: 51px;
overflow: hidden;
}

I’ve got to say, I don’t like the use of absolute positioning here (except for the logos) or the HTML structure. It looks like you are using h tags where you should be using divs.

[Paulie_D]

I’ve played with it a bit to tidy up the CSS and restructure a little: http://codepen.io/Paulie-D/pen/jqJlr

It’s a hatchet job as I feel that this structure could be simplified even more to eliminate even more of the absolute positioning and uncomplicate the padding/margins.

[Anonymous]

Greetings Paulie,

I was just getting ready to post when I noticed your last. I’m trying to understand headers, logos, etc. I used the source for the header that Paulob did for me here. Would you please explain why it’s alright to use it on the main page, but not on the engines page. I think using a div would be simpler for me as I better understand styling them now (I hope).

I don’t want the coding to be a hatchet job as I very much want to learn the correct way of using CSS. As I’ve been playing around with the coding to try to understand how it works, it’s amazing the coding isn’t butchered more than it is. Anyway, this is what I got trying to correct it using what’s there and as you see it isn’t right.

Best Regards.

[Paulie_D]

When I said hatchet I just meant rushed.

Certainly I prefer the way I have structured it, it’s just that I feel it could be improved with a little more TLC.

For instance, I am pretty sure we could eliminate the logo divs and substitute in pseudo elements which would simplify the HTML greatly and move all of the styling elements into the CSS.

[Paulie_D]

When I said hatchet I just meant rushed.

Certainly I prefer the way I have structured it, it’s just that I feel it could be improved with a little more TLC.

For instance, I am pretty sure we could eliminate the logo divs and substitute in pseudo elements which would simplify the HTML greatly and move all of the styling elements into the CSS.

[Paulie_D]

Regarding the h1/logo issue…it’s a tough one to explain to someone not well versed in the HTML/CSS mileiu.

There is a logic in having your logo be the “primary” thing on the page…it makes Search Engines give your page higher priority ranking. For a long time, the consensus was that you should only have one h1 to a page and that would have your logo and site name wrapped up in it.

Search engines prioritised this in their algorithms but those days are long past.

HTML5 allowed us to have multiple h1 on page provided each was the primary heading of a section or specific article.

Now, on the page you linked, the ‘logo` is a primary reference…as it should be for the main page of a website…however, on internal or more specific pages (such as we have here), the primary focus is on the heading of the page, not the whole website.

The most important thing you want a page to be is found on a google search so, in a limited page like this, and it makes sense for the primary piece of information (the page name / descripton) to be in a format like the top level h1 in the top level header of the page….hence the way it structured it.

I tried to avoid multiple h tages because, in this instance, there was no need for them…divs worked much better (barring my comments in the previous post) and since the divs in question have no actual content they will not affect an Search Engine rankings in a negative way.

Now, this is my (amateur) thinking but the general principals are, I think, sound.

I’m going to have see if I can find a way to reproduce your borders without the need for multiple backgrounds/borders/elements…I’m sure it can be done ….it’s just bugging me at the moment.

[Paulie_D]

Ahh….that’s better

http://codepen.io/Paulie-D/pen/lGDgn

No use of divs to create borders, no extra divs to add the logos…I feel better now. :)

[Anonymous]

Greetings Paulie,

Great stuff! I have a few questions. I’ve been playing with the code a bit and I’m seeing some things I’m unable to remedy thus far and am unsure of.

1.) The .border-a that is around #outer extends past the left edge. I’ve tried to adjust margins, etc, but haven’t been able to fix it. (This is also seen in your codepen.)

2.) The logos aren’t aligning to the outside edges and I assume it’s because the positions are connected to the header, footer. I’ve tried to adjust them but the way they are connected the bottom logos adjust with the upper ones. I’m not sure if the CSS needs to be rewritten or how to do it so this won’t occur. (This is also seen in your codepen.)

3.) The bottom space between the #inner and #outer is larger than the other three. I’m not sure why this is as the nav is within the footer and shouldn’t effect it. (This is also seen in your codepen.)

4.) I’m getting an alert in DW that the <h1 class="page-title"><h1> is invalid. Why?

5.) The header and logo images aren’t showing in DW. I know the design view has issues as we’ve discussed before. Is this part of that?

6.) Perhaps related to number 5, I notice that when tools>page info>media is viewed in Firefox, the logo image isn’t shown. How is this possible? This could be a potential tool to deter theft of images.

Best Regards.

[Paulie_D]

1) The .border-a that is around #outer extends past the left edge. I’ve tried to adjust margins, etc, but haven’t been able to fix it.

Extends by how much? I’m not entirely sure what that means.

2) The logos aren’t aligning to the outside edges and I assume it’s because the positions are connected to the header, footer.

You can tweak the exact ‘alignment’ by adjusting these values. Try adjusting them a pixel at a time until you get them exactly where you want.

.logos:before {
  top:-7px; 
  left:-7px;
}

.logos:after {
  top:-7px;
  right:-7px;
}

3) The bottom space between the #inner and #outer is larger than the other three.

I’m not sure it is….they look the same to me…as can be seen by the way the logos line up with the bottom of the #inner. However, the Codepen http://codepen.io/Paulie-D/pen/lGDgn has been updated to separate out the header and footer sizes so you tweak them if you want to.

4) I’m getting an alert in DW that the <h1 class="page-title"><h1> is invalid. Why?

My fault, updated to <h1 class="page-title"></h1>. Theh1 wasn’t closed properly.

5.) The header and logo images aren’t showing in DW. I know the design view has issues as we’ve discussed before. Is this part of that?

Probably.

6) Perhaps related to number 5, I notice that when tools>page info>media is viewed in Firefox, the logo image isn’t shown. How is this possible?

I’m not sure how that works but my GUESS is that it shows images actually in the HTML….which is not what we are doing here. We are using background images in the CSS.

This could be a potential tool to deter theft of images.

Actually no…as evidenced by the fact that I am using your images. I went to the site you gave in a link and using Chrome’s Web Inspector I can see the image folder on the server and any images inside. That gave me a link and I used that. It’s quite scary really.

Whether it’s possible to lock down the image folder so that what I just did is harder/impossible, I don’t know.

Theft of images is almost impossible to stop. Search engines will reveal them to the world. The most you can really do is embed some kind of watermark or other ownership indicator in the image itself but even then unless you really make a concerted effort a reasonable user of Photoshop can probably do a pretty good job of removing those.

[Anonymous]

Greetings Paulie,

I’ve created a screen grab to show the problems.

The .border-a issue is indicated with red arrows. The spacing is indicated in blue, but is now fixed. I realized that separating out the footer and header would allow independent adjusting. I’m still confused as to why they were unequal.

Regarding the logo issue: If I make the following changes:

.logos:before {
  top:-11px;
  left:-11px;
}

The top left and bottom left logos move up and to the left. That’s wanted in the upper left logo, but for the lower left it needs to move down and to the left. As these are corners, I don’t see a way of being able to adjust each one without separating all.

Regarding the alert; Doh! I should have seen the h1 wasn’t closed!

It is quite scary that the files are so easily seen. I would assume my host would have something on their side to prevent that. There was a time when having a “home.html” file in each folder would prevent access into a complete file using a browser, but I’m not sure that’s true today.

Is there a one size fits all code for a logo and page title? For some reason this, and placement of divs on a page are giving me the biggest headaches. I’ve read and re-read sites regarding this, but I inevitable make mistakes and get blocked.

Best Regards.

[Paulie_D]

Looks like it was a Firefox only issue with the outline property.

Adding overflow:hidden to #outer seems to have fixed it.`

The footer height might have been a padding/margin reset issue with the nav but I didn’t have time to look at it. There should be no need to set the height differently from the header but if it works for you to do it that way then it’s fine.

If you want to address the corner logos independently you can do it like this:

/* top left  */
header.logos:before {
  top:-0px;
  left:-0px;
}
/* top right  */
header.logos:after {
  top:-0px;
  right:-0px;
}

/* bottom left  */
footer.logos:before {
  bottom:0px;
  left:-0px;
}
/* bottom right  */
footer.logos:after {
  bottom:-0px;
  right:-0px;
}

Just tweak the numbers as desired.

[Paulie_D]

Figured out the footer height difference.

I had added margin-top to the nav instead of padding-top.

Starting to come along now….

http://codepen.io/Paulie-D/full/lGDgn

[Anonymous]

Greetings Paulie,

Adding overflow:hidden to #outer seems to have fixed it.`

Very strange. I couldn’t see anything that could explain it and was stumped.

If you want to address the corner logos independently you can do it like this:……

Is this the only way around that?

Best Regards.

[Paulie_D]

In the latest iteration of the Codepen I did away with the outline property and substituted an outer box shadow.

That solved the overflow issue and, coincidentally allowed the logos to sit on top of the borders.

As for tweaking the individual logos the answer is ‘yes’. They are all individually placed so you have address them in the same way.. but you would have to do that with divs too.

[Author]

Posts