Teaching myself CSS... is not working out.

[Kingsly]

I am thoroughly confounded. I tried very hard to conquer this on my own - I feel like I keep falling back to the superb advice here to fix issues for me. But this probably deceptively simple issue has destroyed me...

In site 1.0 I used absolute positioning to center my objects. That was great, but obviously wasn't consistent between browsers/devices.

position:absolute;
left:159px;
top:0px;

In version 1.1 I used

margin-left: auto ;
margin-right: auto ;

to center all my elements. Great! They center automagically.

However...

Everything would vertically position however it pleased.

So:

margin-top:[x]px;

Arranges things nicely. Yay!

Then...

The site loads. The site logo loads in its proper spot, at the top of the page. After a slight delay, a script does it's thing and fades in a vimeo container. The logo jumps to the bottom of the page! Everything goes all crazy! No!

Here's the full stylesheet:

<style type="text/css">
.logo {
width: 800px ;
margin-left: auto ;
margin-right: auto ;
z-index:3;
}
</style>

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

<style type="text/css">
.contact {
font-size:40px;
font-family: 'Quicksand', sans-serif;
text-align:center;
}
</style>


<style>
a:link {color:#696969;}     
a:visited {color:#696969;} 
a:hover {color:#919191;}  
a:active {color:#696969;} 
</style>

Attached is my working HTML file containing the full page.

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

Thanks!

[Darwin]

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.

[fig]

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

[AlexCC]

Yes, that'll fix it.

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

<p><img src="http://hangar504.com/hangar504-helvitca-stencil.png" /></p>

[SrWebDeveloper]

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.

[Mike Sprawson]

Originally Posted by Kingsly

<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!

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

[Efrem]

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.

[AFPoster]

Originally Posted by Efrem

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 is right, create a stylesheet (ie stylesheet.css) and link it inside your header using this line of 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.

[Efrem]

Originally Posted by AFPoster

Efrem is right, create a stylesheet (ie stylesheet.css) and link it inside your header using this line of 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.

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.)

[AFPoster]

Originally Posted by Efrem

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.)

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.