Need positioning help please!


I am having issues with getting the “Styles Conference” logo to move up (while still floated left). I have checked my code with the authors code on the website I am working with but cannot seem to figure this out. I am trying to get my website to look like Fig. 6.02 shows shayhowe

main.css (4.8 KB)

Above is my CSS, any help would be appreciated.
Thank you for your time,

Hi there. Where is your HTML?

Here it is, sorry about that,

index.html (3.1 KB)

Not sure which element you want to move up - the h1 or the entire header or something else? Also, I can’t see the fig 6.02 you refer to.

The h1 seems a bit bigger than in the example pic.
Also the h2 needs to clear the float.

I am trying to position the h1 (Styles Conference) and the greenish line about it; so they are level with the h3 (the date of the conference).

To see fig. 6.02, it is down towards the bottom of the page shayhowe; just before the title "Using Web-Safe Fonts.

The styling of the element I a trying to move is under the ‘Primary Header’ section in my CSS. I gave it the class name of .logo.

The logo class is applied to the h1. It looks to me like it’s in its place, but the h2 need to clear it and go below.

I’m having trouble seeing what is causing the white space at the top of the page…

The top border on the .tagline (h3 for some reason).

To make it more like the picture, I added padding top to the .tagline and clear:both to the .hero

I’ve not closely studied the tutorial, but I’m not sure about it.
Fixed width, px font sizes, h1 followed by h3, etc…?

1 Like

Just changing margin to padding on .tagline makes it look like the picture. You don’t need to clear:both;

1 Like

Ah, that’s probably what the OP did, confuse margin and padding.

The original article has it wrong.

1 Like

Yup, changing the margin to padding does the trick!

Thanks a lot Dave; and everyone else, I was combing through the HTML and CSS all weekend trying to fix that.

I should probably email the instructor on that site to let him know he has an error.

Thanks again,

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