SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to move the box ?

    Over recent weeks you have all helped me with my project to update my site.

    The club like what you have done for them very much, but have a query. They woud like to mov ethe seven boxes from the right hand side to the lext hand side of the container.

    Though I have learned quite a bit these last three months.

    This is beyond me.

    Can anyone help ? One of the pages is http://www.c5d.co.uk/coursehistory.php

    The css is at

    <link rel="stylesheet" href="http://www.c5d.co.uk/clubstyle.css" type="text/css" media="screen">
    <link rel="stylesheet" href="http://www.c5d.co.uk/MenuMatic.css" type="text/css" media="screen">


    Thanks

    Antony

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    normally if this markup were simple and regular, you'd be able to wrangle it in the CSS alone by floating the span-13 box (the stuff on the left side) to the right instead of the left, and leave the 7 boxes span floated left. In fact that might still work.

    But if you add some borders or outlines to your boxes, you'll see something weird: you're trying to have a TARDIS or something. The container boxes are smaller than their children inside.

    span-13 is only 510px wide. I don't know why that is-- inside it is a child called #content who is 700px wide! How's that to fit?

    You can absolutely only fit so many highschoolers in a phone booth.

    But if you don't want to touch the markup now, you can try my suggestion above first, since it might work.
    So in clubstyle.css, after this line:
    .column, div.span-4, div.span-7, div.span-11, div.span-13, div.span-14, div.span-24 {float:left;margin-right:10px;}

    you could add
    div.span-13 {float: right;}

    it'll override the earlier float: left so long as somewhere further down the float:left doesn't get repeated or something.

  3. #3
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply. It has gone some way to doing what we want.

    The boxes have moved half way to the left, but not all the way. See my test page at http://www.c5d.co.uk/addresschangefour.php
    with these revised sheets


    <link rel="stylesheet" href="http://www.c5d.co.uk/clubstyle.css" type="text/css" media="screen">
    <link rel="stylesheet" href="http://www.c5d.co.uk/MenuMatic.css" type="text/css" media="screen">

    But it has had the additional unintended effect of removing the links from the menu bar, and the drop down list has gone below the footer.

    If there is a simpler mark up that you can think of to do what I want to do, I'd be happy to learn. I'm keen t gain more knowledge of CSS

    Antony

  4. #4
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been working on this and have not got somewhere, but needs a bit of finishing off.

    I am stuck with three bits.

    The facebook and twitter image links do not quite work and the footer is awry

    Here is the problem page: www.c5d.co.uk/barfour.php
    and a good one www.c5d.co.uk/bar.php where the images and footer are OK, but the images are on the right not the left

    Any thounghts

    Antony


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
  •