Page 1 of 1

Create three column css file

Posted: Thu 24 May 2012 2:26 am
by LillypillyWeather
I want to edit the weatherstyle.css file to allow two fixed columns on either side for adding graphical links and pictures etc.

Does anyone know how I can do this?

I have tried but have failed to come up with the desired result.

Thanks
Greg

Re: Create three column css file

Posted: Thu 24 May 2012 3:40 am
by TNETWeather
Someone might have already done this before and might be able to give you an example of what they did.

Assuming you want to learn rather than have someone do it for you...

When I want to learn something, I just create some files in /test directory and play with them there, leaving the real site up and running unchanged until I have it figured out.

To help understand one of the ways to do this with CSS. you can look at:

http://cumulus.tnetweather.com/test/3column.php

This is a bare minimum setup to show how you could set up three columns and to understand how they work. You can then tweak this using something like Web Developer (plugin for FF or Chrome) and change the CSS values live to see what they do when you change them.

Find what you like, you can the copy the CSS you have modified, and then save it in the css file that the test page uses so when you reload it has your changes.

There are two files that make up this test...
The css file which you can just click on the link and copy to your site
and the php file which you can click on the source link and copy that and save it to your site.

Note, even though this is a php file, it really has NO php in it, so you could just save it as an HTML file instead. I create all files as php in case I add php content later.

You can put these into ANY sub-directory and they will work as long as they are in the same directory each.

Files:
http://cumulus.tnetweather.com/test/3column.css
http://cumulus.tnetweather.com/test/3column.phps

There is a link in the page where I got the original content from when I first set this up for showing someone else. It goes on to do more concepts which you might find informative. He actually changes content-1 into a left side menu.

Re: Create three column css file

Posted: Thu 24 May 2012 11:27 pm
by Graham64
Greg
I have been trying to get this to work for some time. Judging from the number of comments in forums etc. it is very complicated to achieve a truly flexible 3 column page.
Kevin's solution uses a fixed height for each column, this works if you know how much content there will be in each column. However if your content exceeds the fixed height of any column, it will crash through the footer.
The most flexible and purest solution that I have found is by Matthew James Taylor and can be seen at http://matthewjamestaylor.com/blog/holy ... s-mode.htm
I have modified this slightly on the home page of the village site that my weather data is displayed on see: http://poundstockpacket.org.uk/
This took me a long time to get right and there are still parts that I do not understand - I only got the changes to work by trial and error.
Because I like to understand things and want them simpler I have recently been looking at another solution. This uses an image to fill up any empty columns but it does work. I am still working on my version but the source is at http://www.manisheriar.com/holygrail/fixed.htm
I hope to have this new simpler version live on my site very soon.
I agree with Kevin - use something as a starting point and 'play' so that you understand and can adapt for your own needs.
Enjoy the challenge and the learning!

Re: Create three column css file

Posted: Fri 25 May 2012 6:24 am
by LillypillyWeather
Thank you Kevin and Graham, I will look into both your suggestions and have a little more practice at it as well...thanks