SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Beginners best bet on layouts?

    Hi I'm new here however I know html and CSS and learning JavaScript. My lever on a scale of 1-10 is in my opinion a 6.5. I totally understand everything, however when it comes to creating a layout or floats or positioning I'm bad. Can you give any pointers as to better understand position/float & layouts. Please refrain from other CSS style sheet such as normalize (forget the name), grids, etc. my simple base is an .html and .css style sheet. Any help is appreciated, contact here or Skype : AndreeU17

    -Jonathan

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi AndreeU17. Welcome to the forums.

    when it comes to creating a layout or floats or positioning I'm bad. Can you give any pointers as to better understand position/float & layouts.
    There's no grand science to it. If you want elements side by side, float them. As a rule, forget positioning for major layout elements.

    Because there's an infinite way to skin a site (as well as a cat), it's better to present an actual layout and ask how it might be laid out. And, of course, it's worth studying sites you like and seeing how they were done. It's easy to look under the hood.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    North Carolina
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome Andree! To better understand how to learn how to or build immaculate layouts, then you need to grasp the core concepts of floats, margins, padding, and borders or else you will find yourself pulling your hair out. Understand how floats work and how to clear them, and not just with the clearfix hack. If you choose to not go that route then I can assure you that your page layout will break before you've even finished putting it together.

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi AndreeU17. Welcome to the forums.



    There's no grand science to it. If you want elements side by side, float them. As a rule, forget positioning for major layout elements.

    Because there's an infinite way to skin a site (as well as a cat), it's better to present an actual layout and ask how it might be laid out. And, of course, it's worth studying sites you like and seeing how they were done. It's easy to look under the hood.
    I have a great understanding on borders,margin & padding as well as the width on how everything should be added to a specific number, Exampe be the 960. however lets say I have an "article" and "aside" tags.
    I want both tags (not sure what the specific names are) next to each other. I would float the article left and the aside right, and anything after the "aside" would be "clear:both" right?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AndreeU17 View Post
    say I have an "article" and "aside" tags. I want both tags (not sure what the specific names are) next to each other. I would float the article left and the aside right, and anything after the "aside" would be "clear:both" right?
    You could. But rather than clear: both; I would tend to wrap the floated elements in a container, like a div. That's a neater solution than clearing other elements. Make sure to give the floated elements a width, and give the container overflow: hidden to force it to wrap around its floated contents.

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could. But rather than clear: both; I would tend to wrap the floated elements in a container, like a div. That's a neater solution than clearing other elements. Make sure to give the floated elements a width, and give the container overflow: hidden to force it to wrap around its floated contents.
    thank you thank you very much as that is a very neat way of doing it. Im a Senior High School student learning all this on my own from books and asking and testing. Its hard to learn all this the best way and the great way since theyre is a bunch of different forms however im taking down every step to reach a well clean markup with a nice css that produces a GREAT Website for my level.
    Thank You!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •