Moving things in a page - positioning

Discussion in 'Web Design' started by liverpoolphil, Jul 16, 2012.

to remove all ads.
  1. liverpoolphil

    liverpoolphil New Member

    Messages:
    9
    Originally posted in the CSS positioning thread...but was told to start a new one :confused:

    hi all - new to the forum and going to be spending the next few days browsing its information. In the meantime, perhaps you may be able to help with an issue (or lead to a tutorial to help) I am having with my site. www.top-marks.org.uk, its a basic but functional site and I want to put the facebook "like box" along the right hand side of the page (like the one on www.sillybomb.com). I am also aware of some positioning issues with ff and IE, so again any guidance would be appreciated. In the meantime, great forum, hope to be around a while :)
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    It is not positioning you should use for that, but floats.

    Basically your "positioning" problems are caused by incorrect use of positioning. Position: absolute; in particular.

    But as I can tell from the CSS it is a document created in the WYSI[sometimes]WY[might]G view of Dreamweaver.

    Get out of that view and learn to write code.
     
  3. liverpoolphil

    liverpoolphil New Member

    Messages:
    9
    cheers for the point in the right direction chis - I cant remember where the template come from for the site, but you can see its clearly been "chopped and changed" over the past 12 months or so and I am definitely no coding expert lol. It could probably do with a complete overhaul, but really I would be happy if I could just place the fb likebox in the correct position for now :) :)
     
  4. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Phil you will want to create a simple two column layout. As stated this can be best achieved using floats. There is also a sticky in this forum about using floats. For semantic reasons, I would float the main body (content) left and then follow that with you sidebar floated right. This way, when you look at the markup of your site, the more important information is written first.

    HTML:
    <div class="wrapper">
      <div id="main">
        <!-- Left column -->
      </div>
      <div id="sidebar">
        <!-- Right column -->
      </div>
    </div>
    
    Code:
    div.wrapper {
    width:960px;
    overflow:hidden;
    }
    #main {
    float:left;
    width:70%;
    }
    #sidebar {
    float:right;
    width:25%;
    }
    
     
  5. liverpoolphil

    liverpoolphil New Member

    Messages:
    9
    thanks for this John, very helpful for me. As my site is a bit of a mismatch in terms of coding, I am going to start a fresh and code it correctly (with the help of this forum I hope). I will also address the sticky on this topic, and others, an report back on progress

    thanks again :)
     
  6. liverpoolphil

    liverpoolphil New Member

    Messages:
    9
    ok..some progress. With pixelpusher's help I was able to set up a simple 2 column layout (i think) in my existing code (not ideal I know!). The result of this is a slight movement of the FB plugin in the right direction. What I would like it to do now is move to the top of the page...still playing away but thanks for any help in advance
     
  7. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    Right float elements need to be before left floats in the normal flow.
     
  8. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Incorrect. There is no right or wrong to which you use first.
     
  9. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Phil could you post a link to the new site? I would be easier if we can look at the markup of the page.
     
  10. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    That depends on the layout.

    In this case as you can plainly see from where the right floated element contact point is, putting the right float first WILL allow it to be alongside the header block at the top of the client window.
     
  11. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
  12. liverpoolphil

    liverpoolphil New Member

    Messages:
    9
  13. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    Lose the width applied to the body element, setting a fixed width is one of the reasons for "wrapper" elements.


    And you have the body set at 636 pixels wide while the "wrapper" was set at 960 pixels!
     
  14. liverpoolphil

    liverpoolphil New Member

    Messages:
    9
    thanks chris...although this seems to have just moved everything to the left. Setting the width to 960 pixels seemed to re-align it though
     
    Last edited: Jul 17, 2012
  15. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    You have a strange cas of "divitus" going on with that layout??


    Was this by some change a DW WYSIAWYG layout?

    (The extra 'A' stands for Almost)
     
  16. liverpoolphil

    liverpoolphil New Member

    Messages:
    9
    Lol - I have had the feeling for the last hour that "divitus" was occuring. Apart from manually checking every <div> for its corresponding </div> are there any clever ways of curing divitus?
     
    Last edited: Jul 17, 2012
  17. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    That is not a reason to change which item is floated first, but rather an adjustment to the width values.
     
  18. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Yeah keep the division elements to a min. Use only what you need.
    Here is a quick example of a fixed layout:

    Fixed Layout

    (This keeps the most important info first, ensuring semantic flow to the document)
     
  19. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    Put "sidebar before "main" and set it's width to 28%

    HTML:
    <body>
    <div class="wrapper">
      <div class="sidebar">
    <div id="sidebar">
        <!-- Right column -->
      	<div class="fb-like-box fb_iframe_widget " data-href="http://www.facebook.com/pages/Top-Marks-Private-Tuition-Ltd/116147285117629" data-width="292" data-height="500" data-colorscheme="dark" data-show-faces="true" data-stream="true" data-header="true">	  
    <span style="height: 500px; width: 292px;"><iframe src="index_files/likebox.htm" class="fb_ltr" style="border: medium none; overflow: hidden; height: 500px; width: 292px;" name="f29e74ccb0ceb34" id="f132f7858e0c332" scrolling="no"></iframe></span></div>
      
    </div>
    </div>
      <div id="main">
    
    You just need to play with the margins on the header section.
     
  20. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    I have often found that because floating an element creates a block box and how some rendering engines calculate width, putting the right float first allows the engine to calculate the flow correctly without having to shave extra bits of widths, margins or paddings off the elements in the float plane.
     

Share This Page