4 replies [Last post]
Goldy
Offline
newbie
Last seen: 13 years 46 weeks ago
Joined: 2006-11-13
Posts: 2
Points: 0

Hi there,
My quest as you see is to create a 3 column layout, but it seems I run into different problems.
The main principles I want to consider in mind are:
- The page has 3 columns, leftCol(fixed), middleCol(fluid), rightCol(fixed);
- The page must have 1000px minimum width
- At the bottom of the leftCol there is another segment that should be in the same vertical line as the footer(that is into the content on the bottom)

Here is a skeleton of what I want to accomplish
[/url]http://www.flickr.com/photos/[email protected]/296699930/[url]

Anyone that knows tips about this kind of problem?

oley
oley's picture
Offline
Regular
Silicon Valley
Last seen: 13 years 27 weeks ago
Silicon Valley
Timezone: GMT-7
Joined: 2006-10-17
Posts: 28
Points: 0

http://www.glish.com/css/7.as

http://www.glish.com/css/7.asp

... or you can always ask Google for more help Smile

oley aka Olga Bobrova
http://dragonia.info/

Goldy
Offline
newbie
Last seen: 13 years 46 weeks ago
Joined: 2006-11-13
Posts: 2
Points: 0

I give up, this is way to

I give up, this is way to hard even impossible to make, it requires a lot of css-hack for different browsers.
I'll start creating it with tables just for the main skeleton (the 3 columns)

N333
Offline
newbie
Last seen: 12 years 46 weeks ago
Joined: 2006-10-05
Posts: 9
Points: 0

Not impossible, just takes getting used to

First of all, let me say that I'm still learning CSS myself. It does seem hard at times, but I've found that CSS is a truly amazing tool. I can't actually visit the flikr link that you have for your site (I'm on a work computer that blocks certain content), but if you take the link that oley posted, copy/paste the code at the bottom into a new html doc and tweak it from there you should be able to get it done. I don't know what your level of experience is with CSS, but I'd start by taking all the base css and linking it to an external document. That way you can apply the basic css styling over all you pages properly. Learn to use div tags nd lists, they are the key in CSS layout. This site has good advice for learning how to properly use divs.

Does your site have to be a minimum of 1000px? That 3-col template from that link will auto resize the center column which makes it display OK in any size browser window. Creating the size at 1000px will cause the user to have to scroll if they are using a smaller monitor setting. After all, a big part of CSS is all about accessibility.

As far as browser tweaks goes, I don't think that battle will be ending no matter if you use html or CSS. Even tables display differently in different browsers. It looks like the 3-col layout in that link takes into account some of the compatibility issues. Find a site that has a good reference to which tags work in what browsers too. W3 Schools has a great reference site at http://www.w3schools.com/default.asp which can help out with that. Under the References section in the left column you can find a list of CSS attributes with notes on which browsers support them, and the site itself has a decent CSS tutorial as well. http://www.htmldog.com/ and http://www.webmonkey.com/ both are excellent resources as well. One of the main keys is to use tags and attributes that are supported across as many browsers as possible.

My suggestion is to give it a shot, then if you can't get it working, post the code for folks here to help you with. One thing that I've found on forums (and not just these ones) is that folks are more willing to pitch in and help if they can see that you've tried to work it out. Without seeing the code, most folks will assume that you are trying to get someone else to do the work for you and will be less inclined to post help.

Don't give up! CSS is no harder to learn than html is... you can learn the basics quickly, and just like html you have to start with that. Take it one step at a time. If you are a beginner with CSS start with a good tutorial. Advanced use will come in time. The best way to learn is to get in there and spend time monkeying around with the code. Don't be afraid to save backup copies to try different things on either. That way if you truly wreck your code you haven't lost completely. Take that 3-col code and start adding your web page info into it. You may find that it isn't as hard as it looks. Oh yeah, one other thing that works for me is to ignore the browser compatibility issues to a certain extent, get the basic code in place and then tweak it from there for compatability... that way you aren't trying to implement a huge block of code all at once. It makes it easier to catch subtle mistakes that way.

Hopefully that helps. The important thing is not to give up!!

Triumph (not verified)
Anonymous's picture
Guru

Goldy wrote:I give

Goldy wrote:
I give up...

Well, at least you gave it more that one day...oh, what...

Come on, at least give it a chance. Smile