Teaching myself CSS... is not working out.

Discussion in 'Web Design and Development' started by Kingsly, Sep 27, 2012.

  1. macrumors 68040

    Kingsly

    #1
    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:

  2. macrumors 65816

    Darwin

    Joined:
    Jun 2, 2003
    Location:
    round the corner
    #2
    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.
     
  3. fig
    macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #3
    Yup, you simply have the vimeo content in a container before the logo.
     
  4. macrumors newbie

    Joined:
    Mar 24, 2012
    Location:
    Netherlands
    #4
    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" [B]/></p>
    [/B]
     
  5. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
    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.
     
  6. macrumors newbie

    Joined:
    Jul 13, 2012
    Location:
    Brisbane, QLD, Aus.
    #6
    Good one SrWebDeveloper, and, for what it's worth, there's a missing closing curly bracket in the above style type.
     
  7. macrumors member

    Joined:
    Jul 30, 2009
    #7
    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.
     
  8. macrumors 65816

    Joined:
    Jul 14, 2008
    Location:
    Charlotte, NC
    #8
    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.
     
  9. macrumors member

    Joined:
    Jul 30, 2009
    #9
    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.)
     
  10. macrumors 65816

    Joined:
    Jul 14, 2008
    Location:
    Charlotte, NC
    #10
    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.
     

Share This Page