CSS Help with layouts

by 9 replies
10
Okay so I've been learning html and css for the past week its alot easier than I thought I know how to animate and make things look good, but my only problem is layouts and positioning things exactly where I want them to go.

Can anybody give me a basic rundown or point me in the right direction to overcome this challenge I am having???
#programming #css #layouts
  • CSS uses the float property to align page elements.

    The easiest way to think about the float property is to imagine that all your layout blocks are in a line in the HTML. When none of them are floated, they all appear in the order they are written in the HTML, one after the other. When an element is floated, it becomes like a rock in a stream: float:right; pushes that block to the right, and all other elements flow around it to the left. float:left; pushes that block to the left, and all other elements float around it to the right.
  • Also, the margin properties. For example, a widely used method to center objects is to set both margin-left and margin-right to auto.
    • [1] reply
    • thanks guys I am getting a better understanding of how its done.
  • Are you familiar with CSS resets? A reset is something you should do before doing anything else. Because different browsers (especially IE) have different default values for padding, margin, cellspacing, cellpadding etc. layouts often look different when checking them with different browsers.
    That's why it's highly recommended do to a CSS reset before starting on any layout. A CSS reset basically takes all CSS attributes and assigns them a new value so that this value is being used rather than the default one by the browser, thus your website will look the same in all different browsers.
    • [1] reply
    • I would recommend learning two main things.

      1. The cascade, specificity, and inheritance.
      2. The box models of css.

      The box models are the primary things to learn since that is how positioning works in css. It's one of those things you want to study briefly, then practice for a while.

      And to point #1 above, be sure you know this too. css rules override other rules and you will want to know how this works.

      Also, be sure to use firebug or one of the other dev tools when working with css. Pick one, and it will be your best friend, I promise.
      • [1] reply
  • On top of all the advice I would also recommend you to look into twitter bootstrap framework, since it could make things extremely easier for you - then you would worry about design/architecture rather than about small details.

    However if you are just starting off then it would pay off to know about the intricate details to get a better understand. But just keep in mind that if you start a serious project it would be much easier to use a framework than to create everything on your own.

    Good luck with everything!
  • I want to describe my question with example. I hope it will be helpful for you.
    <div id"main">
    <p>This is the main div.Open this div after body start and close it before body ended.</p>
    </div>
    Now we are going to align center this div.
    <style type"stylesheet">
    #main{
    with:1024px;
    margin:0 auto;
    }
    </style>
    After giving this style the "main" will be align center.
  • Agree with jmartinez, the box model is the most important lesson I've learned to know & then master CSS.
    Here is another favorite course of mine:
    10 Days Course to Master CSS - Tech Hamlet
Join the discussion

Next Topics on Trending Feed

  • 10

    CSS Help with layouts

    Okay so I've been learning html and css for the past week its alot easier than I thought I know how to animate and make things look good, but my only problem is layouts and positioning things exactly where I want them to go. Can anybody give me a basic rundown or point me in the right direction to overcome this challenge I am having???