Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive

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

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

CSS problem - not directly Silverstripe


Reply

5 Posts   8103 Views

Avatar
alingham

1 February 2008 at 9:49am (Last edited: 1 February 2008 9:50am), Community Member, 4 Posts

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:
[url=http://www.10thwellington.bb.org.nz/themes/tenth-v10/css/layout.css]Layout.css[/url]
[url=http://www.10thwellington.bb.org.nz]Homepage-News[/url]

Avatar
Wojtek

1 February 2008 at 9:55am Community Member, 149 Posts

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...

Avatar
Wojtek

1 February 2008 at 10:01am (Last edited: 1 February 2008 10:02am), Community Member, 149 Posts

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 =]

Avatar
alingham

1 February 2008 at 3:54pm Community Member, 4 Posts

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.

Avatar
Wojtek

1 February 2008 at 9:25pm Community Member, 149 Posts

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