Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Sep 27, 2012, 01:55 PM   #1
Kingsly
macrumors 68040
 
Kingsly's Avatar
 
Join Date: Aug 2005
Location: Either in front of a computer or behind a camera.
Teaching myself CSS... is not working out.

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.
Code:
position:absolute;
left:159px;
top:0px;
In version 1.1 I used
Code:
margin-left: auto ;
margin-right: auto ;
to center all my elements. Great! They center automagically.

However...

Everything would vertically position however it pleased.

So:
Code:
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:
Code:
<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!
Attached Files
File Type: zip home.html.zip (1.4 KB, 28 views)
Kingsly is offline   0 Reply With Quote
Old Sep 27, 2012, 03:09 PM   #2
Darwin
macrumors 65816
 
Darwin's Avatar
 
Join Date: Jun 2003
Location: round the corner
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.
Darwin is offline   0 Reply With Quote
Old Sep 27, 2012, 04:12 PM   #3
fig
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
Yup, you simply have the vimeo content in a container before the logo.
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Sep 28, 2012, 07:06 AM   #4
AlexCC
macrumors newbie
 
Join Date: Mar 2012
Location: Netherlands
Yes, that'll fix it.

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

Code:
<p><img src="http://hangar504.com/hangar504-helvitca-stencil.png" /></p>
__________________
2011 Macbook Pro 13" 2.8Ghz i7, 2009 Mac Mini 2.0Ghz C2D, 2011 iPad 2 16GB
AlexCC is offline   0 Reply With Quote
Old Sep 28, 2012, 10:51 AM   #5
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   1 Reply With Quote
Old Sep 29, 2012, 01:51 AM   #6
Mike Sprawson
macrumors newbie
 
Join Date: Jul 2012
Location: Brisbane, QLD, Aus.
Quote:
Originally Posted by Kingsly View Post

<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.
Mike Sprawson is offline   0 Reply With Quote
Old Jan 7, 2013, 09:11 AM   #7
Efrem
macrumors member
 
Join Date: Jul 2009
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 offline   0 Reply With Quote
Old Jan 7, 2013, 09:39 AM   #8
AFPoster
macrumors 65816
 
Join Date: Jul 2008
Location: Charlotte, NC
Quote:
Originally Posted by Efrem View Post
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:
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.
__________________
2012 15" MacBook Pro 2.3Ghz i7
iPad 2 32gb (white)
iPhone 5s 16gb x2
AFPoster is offline   0 Reply With Quote
Old Jan 8, 2013, 07:31 AM   #9
Efrem
macrumors member
 
Join Date: Jul 2009
Quote:
Originally Posted by AFPoster View Post
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.
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 is offline   0 Reply With Quote
Old Jan 8, 2013, 10:21 AM   #10
AFPoster
macrumors 65816
 
Join Date: Jul 2008
Location: Charlotte, NC
Quote:
Originally Posted by Efrem View Post
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.
__________________
2012 15" MacBook Pro 2.3Ghz i7
iPad 2 32gb (white)
iPhone 5s 16gb x2
AFPoster is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Teaching and games. Riddle train intelmarket1 iPad Apps 3 Mar 18, 2014 02:26 AM
Teaching Dictation new words on-the-fly Buran OS X Mavericks (10.9) 1 Nov 17, 2013 06:25 AM
All iPads: iPad in teaching: Hdmi or Apple TV? norwaypianoman iPad Accessories 11 Feb 14, 2013 04:06 AM

Forum Jump

All times are GMT -5. The time now is 06:48 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC