Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » CSS problem - not directly Silverstripe

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Page: 1
Go to End
Author Topic: 8087 Views
  • alingham
    Avatar
    Community Member
    4 Posts

    CSS problem - not directly Silverstripe Link to this post

    Hi guys
    The site we're using is managed by Silverstripe, but this is not necessarily a Silverstripe problem... but I didn't know where else to ask.

    I'm trying to add three boxes in 3 columns, each with one news events in it.
    I've done the columns by giving each news box an ID

    #Homepage-AnchorNews {
       position:absolute;
       padding: 0 0 0 0px;
       width: 175px;
    }

    #Homepage-TeamNews {
       position:absolute;
       padding: 0 0 0 180px;
       width: 175px;
    }

    #Homepage-CompanyNews {
       position:absolute;
       padding: 0 0 0 360px;
       width: 175px;
    }

    This uses padding to position the elements with a 5 pixel gap...
    It is also wrapped in a wrapper as follows:

    #Homepage-NewsWrapper {
       margin: 0px;
       padding: 0px;
       overflow:auto;
    }

    The problem is however that this does not display properly as it seems the Content div or layout tag does not fill down the page to incorporate these...

    HELP!?

    The pages concerned are:
    Layout.css
    Homepage-News

  • Wojtek
    Avatar
    Community Member
    149 Posts

    Re: CSS problem - not directly Silverstripe Link to this post

    You know, position:absolute isn't the best way to do this. You'd better use some floats... I'll post you the solution in a few minutes...

  • Wojtek
    Avatar
    Community Member
    149 Posts

    Re: CSS problem - not directly Silverstripe Link to this post

    Ok, so what I recommend you, is to do the following:

    correct the styles in the following lines (replace the existing CSS declarations):

    layout.css (line 274):

    #Homepage-AnchorNews {
    float:left;
    padding:0pt 0pt 0pt 0px;
    width:175px;
    }

    layout.css (line 284):

    #Homepage-TeamNews {
    float:left;
    padding:0pt 0pt 0pt 3px;
    width:175px;
    }

    layout.css (line 294):

    #Homepage-CompanyNews {
    float:right;
    padding:0pt 0pt 0pt 0px;
    width:175px;
    }

    after making these changes, the site should look great =]

  • alingham
    Avatar
    Community Member
    4 Posts

    Re: CSS problem - not directly Silverstripe Link to this post

    THANKS HEAPS!

    Couldn't really get my mind around it. Float has done the trick!

    I will have to read up on float as I don't really understand what it does, but have seen it used quite a few times.

    Thanks for your quick easy and swift response.

  • Wojtek
    Avatar
    Community Member
    149 Posts

    Re: CSS problem - not directly Silverstripe Link to this post

    I recommend you also to use firebug - it's an extremely powerful tool for such things

    8087 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.