10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

CSS Help with layouts

by Knxtt
9 replies
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???
#css #layouts
  • Profile picture of the author Gman101
    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.
    {{ DiscussionBoard.errors[9021915].message }}
  • Profile picture of the author Kasparas
    Also, the margin properties. For example, a widely used method to center objects is to set both margin-left and margin-right to auto.
    {{ DiscussionBoard.errors[9024760].message }}
    • Profile picture of the author Knxtt
      thanks guys I am getting a better understanding of how its done.
      {{ DiscussionBoard.errors[9024803].message }}
  • Profile picture of the author K Meier
    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.
    {{ DiscussionBoard.errors[9026438].message }}
    • Profile picture of the author jmartinez
      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.
      {{ DiscussionBoard.errors[9029481].message }}
  • Profile picture of the author TechIntuit
    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!
    Signature
    Entrepreneurs & Internet Marketers...

    Looking for a professional team of WordPress plugin developers? Well, you have just found them. Click here to learn more.
    {{ DiscussionBoard.errors[9034502].message }}
  • Profile picture of the author sham2
    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.
    {{ DiscussionBoard.errors[9037607].message }}
  • Profile picture of the author theneikid
    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
    {{ DiscussionBoard.errors[9044708].message }}

Trending Topics