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   8160 Views

Avatar
alingham

Community Member, 4 Posts

1 February 2008 at 9:49am

Edited: 01/02/2008 9:50am

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

Community Member, 149 Posts

1 February 2008 at 9:55am

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

Community Member, 149 Posts

1 February 2008 at 10:01am

Edited: 01/02/2008 10:02am

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

Community Member, 4 Posts

1 February 2008 at 3:54pm

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

Community Member, 149 Posts

1 February 2008 at 9:25pm

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