Teaching myself CSS... is not working out.

Are you wanting the logo "Hanger504" to remain at the top?

If that's the case you need to have your logo div above the vimeo one otherwise once the vimeo player loads it will occupy the div which has been setup at the top of the page.

Yup, you simply have the vimeo content in a container before the logo.

Yes, that'll fix it.

And while we're at it. Your forgot these:

RE: Understanding the concepts to help you make sense of the syntax!

CSS is all about containers within the document flow.

Good UI folks learn how to use div's as wrappers which define regions of a web page which then define wells inside, which then define columns and rows inside of that, and specific content inside of those. Use additional wrappers when multiple rows/columns or regions are in groups so you can establish control in layout and positioning of major elements.

Think of a page from the top left flowing to the right and down, all the way to the bottom right. That's the default document flow. If you just set a bunch of div's in sequence, they'll flow that way. But position absolute places elements outside that the document flow entirely, so things will either move around or display out of sequence or even on top of each other as they still naturally flow within the document. Float also affects the document flow as well, i.e. if elements should allow other elements to exist to the left or right thus changing the default document flow. Other styles help clear floats and restore or remove document flow, i.e. clear:both; float: none, and still others allow positioning within its current container, i.e. position: relative.

Grasp this basic concept in your mind and all the commands and properties begin to suddenly make sense. They simply affect style or positioning within the document flow.

Due to cross-browser support issues some CSS styles or combinations do not render the same between browsers, so hacks exist - but honestly if you design your page properly (divs, containers, know how to float/position and maintain document flow) you will require far less hacks and your sites will render far better between browsers.

Kingsly said:

<style type="text/css">
#fade_reel {
width: 800px ;
margin-left: auto ;
margin-right: auto ;
margin-top:200px;
</style>

I'd love to figure this out and learn exactly why I hit a wall.

Thanks!

Click to expand...

Good one SrWebDeveloper, and, for what it's worth, there's a missing closing curly bracket in the above style type.

As a separate comment, you don't need each style rule in its own style sheet (between a <style></style> pair). You just need one style sheet with all of them.

Efrem said:

As a separate comment, you don't need each style rule in its own style sheet (between a <style></style> pair). You just need one style sheet with all of them.

Click to expand...

Efrem is right, create a stylesheet (ie stylesheet.css) and link it inside your header using this line of code:
That way you can put all the css inside 1 separate document so that your html file isn't cluttered.

AFPoster said:

Efrem is right, create a stylesheet (ie stylesheet.css) and link it inside your header using this line of code:

Code:

<link rel="stylesheet" href="css/stylesheet.css">

That way you can put all the css inside 1 separate document so that your html file isn't cluttered.

Click to expand...

The choice between internal and external style sheets is a separate issue. External style sheets are great when you plan to use the same styles on several pages, either to give a site a consistent look and feel or just to save rewriting. However, if one is learning CSS and only has one page, an internal style sheet is probably easier to start with.

(When and if you go to external style sheets, remember that they don't use <style> </style> tags to enclose the rules.)

Efrem said:

The choice between internal and external style sheets is a separate issue. External style sheets are great when you plan to use the same styles on several pages, either to give a site a consistent look and feel or just to save rewriting. However, if one is learning CSS and only has one page, an internal style sheet is probably easier to start with.

(When and if you go to external style sheets, remember that they don't use <style> </style> tags to enclose the rules.)

Click to expand...

Even if 1 page I'd still work on an external stylesheet. It's the way things are being done now and if he/she ever chooses to help someone out with their site 9/10 it will more than likely be external. So knowing how to navigate through that is probably the best choice from the beginning.