CSS / Framework / Grid - looking for the right approach & tipps

Hi sharkbait,

I’ve not got very far with any of the css frameworks, simply because as an independent developer I’ve always found it easier to just construct my own grids tailored to each site.

For the top ad, I would be tempted to have the content in a div (width:100%) placed at the end of your html, but positioned at the top using position: absolute. Centre the ad banner within that div. Just remember to add padding or margin to your header to allow for where the ad will appear. The reason I would do this is to prevent any SEO or semantic implications. Content first!

For the right hand ad, that could be inserted effectively as a narrow second ’column’ floated within the centred container div, with your site content within the first column. That way if there is no ad, just make sure there is no second column displayed and it should hopefully line up in the centre.

Again, I’m not sure about best practice for this scenario but that is probably how I would go about it. Let me know if it didn’t make sense!

hey lucas!

thanks for your input

I’ve not got very far with any of the css frameworks, simply because as an independent developer I’ve always found it easier to just construct my own grids tailored to each site.

that’s what i’ve decided for that site now as well. i’m sure a framework will help in certain cases a lot, but i think those sites are already designed with a framewok in mind in the first place (sticking to the grid). i might use a framework for the forms though. + my current layout isn’t too "griddy" anyway

i keep you updated - thanks, j

hi there - me again

got a little CSS ridlle ...

http://kunane.com/linkmore/

the "read more"-arrows of the teaser-boxes should always be positioned at the bottom, therefore i positioned them absoutely within a relative positioned container div. depending on the amount of content, the boxes expand vertically (although only the one with the most content, the vertical 2px lines are a tiled background image -> fake equal heights boxes), resulting in the arrows not be aligned at the bottom. You can see the effect with the lower 3 boxes.

for the three boxes above, i’ve put all three arrow-links underneath the floated, relative positioned wrapper div, so that they will be pushed (all together) to the bottom ...of course this is semantically not right, but it works.

does anyone has an idea how to solve this properly?

thanks, j

As you’Ve already set a height of 202px for the teaser boxes you can give a fixed height for the paragraph <p > and have your "more" arrow on bottom. position abolsute doesn’t work properly in that case aligned to bottom. Btw: the arrow has way to less contrast.

I would have personally set the arrow to be the background of the divs (which would have a set height in my case too) and make the whole div clickable with an onclick, as well as the heading and text would be an anchor just in case.

Probably aint good web standards but it’s quick and it works.

hey, thank you both!

but if i understand it right, both approaches would only work with a fixed height of the containers. i’ll look into display: table-cell, could be working - will report back

Quote from: sharkbait at Mar 08, 2011, 04:28 AM

hey, thank you both!

but if i understand it right, both approaches would only work with a fixed height of the containers. i’ll look into display: table-cell, could be working - will report back

@Mark: This is a no-go

@sharkbait: You’ve already set a height for the teaser container so why not for the p-element? With table-cell would work but that’s not better…

You’ve already set a height for the teaser container so why not for the p-element?

uhm, it wouldn’t solve the problem of the arrows being at the bottom of the other boxes ...or maybe i didn’t get it right. danke

Quote from: sharkbait at Mar 08, 2011, 04:47 AM

You’ve already set a height for the teaser container so why not for the p-element?

uhm, it wouldn’t solve the problem of the arrows being at the bottom of the other boxes ...or maybe i didn’t get it right. danke

It works for me: http://screencast.com/t/gTYXSPt6D

It works for me: http://screencast.com/t/gTYXSPt6D

wow, thanks for your help! nice. one sec, i’ll be back.

*edit* sorry, it won’t work properly if you increase the text-size
btw. almost got the display: table-cell working ...why would this be a bad thing?