Aiming for 2-column layout

@CarolWFeb 04.2005

Dear All,

I think I’m aiming for a basic two-column layout. Not sure, because I’m not really sure of what’s involved, or how I’ll end up wanting things; might change to a three-column layout later, but for now, I’m thinking of two.

So far, I’ve looked at several places suggested here – wonderful, great places. It’s not surprising if I’m confused, because I’m working way beyond my competence, but I feel very sure I will gradually learn and become half-competent with HTML and CSS.

I took a day to make a page on my site to sketch out what I’m thinking of; did that because I can’t ask a simple question here, don’t know enough to! And I wanted to put up a sketch (took me many hours to make the sketch, but I did it all with vector layers and drawing in Paint Shop Pro, so also, learned more about very simple vector drawing in that program, and I’ve been meaning to do that – very useful of you’re making a web site).

Anyway, my questions are on that page, and if you’d like to comment or offer assistance, I’ll come here to find out what you can help with. Thanks in advance!

P.S. Is this a reasonable way to ask questions on this forum? Thanks again <g>.

P.P.S. Almost forgot:

~~[url]~~http://www.islandnet.com/~cwhitney/layout.htm[/url]

to post a comment

CSS

11 Comments(s) _↴

@CouvFeb 04.2005 — #Carol,

Just on first glance, here are some thoughts.

There's really no point in having a "Liquid" or "Fluid" content area as you have sketched out if the other elements on your page are static and absolutely positioned. The concept of liquid layouts is to make the content area conform to the user's viewport (i.e. 'scale' to fit the page width) Therefore if you're already constraining information to a specific width (banner, footer, etc.), you are dictating to the user what the viewable area of your site is. This isn't a problem if it's what you intend [B]and[/B] you don't make that constricted size larger than will fit within the user's preferred browser width. It is best to assume that your user is looking at it on a 13" monitor with minimum screen resolution.

As to what layout to use, you're right there are a ton of sites out there with great layouts. It can get confusing. I suggest thinking about all of the content you want to provide on the page, prioritize their importance to determine positioning, and then go with a layout that you think will accomplish what you want to do. Here are just a few good links to templates that you can freely use. Experiment with them by tweeking the CSS. (Download [URL=http://www.mozilla.org/products/firefox/]Firefox[/URL] and install the [URL=http://www.chrispederick.com/work/firefox/webdeveloper/]WebDeveloper[/URL] extension from Chris Pederick - it's a great way to see your changes in action)

Hope this helps more than confuses.

Sites to check out for layouts, liquid and otherwise:

[URL=http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html]Little Boxes[/URL] - great basic templates

[URL=http://www.maxdesign.com.au/presentation/page_layouts/index.cfm]Max Design Layouts[/URL]

[URL=http://www.bluerobot.com/web/layouts/]The Layout Resevoir[/URL]

and of course

[URL=http://glish.com/css/]Glish[/URL]

@TriumphFeb 04.2005 — #[i]Originally posted by Couv [/i]

[B]There's really no point in having a "Liquid" or "Fluid" content area as you have sketched out if the other elements on your page are static and absolutely positioned.[/B][/QUOTE] There's also nothing wrong with it. ? I think an absolutely positioned "picture frame" around the content would be just fine and kinda jazzy. Idea #1...coming up: (don't expect pretty...lol!)

@TriumphFeb 04.2005 — #Just an idea about the frame:

http://www.imaginekitty.com/patterns/strip.html

just an idea...

@CouvFeb 04.2005 — #[i]Originally posted by Triumph [/i]

[B]There's also nothing wrong with it. ? I think an absolutely positioned "picture frame" around the content would be just fine and kinda jazzy. Idea #1...coming up: (don't expect pretty...lol!) [/B][/QUOTE]

I stand corrected, although my personal feeling is that it's a nightmare usability-wise. (and, you're right, not very pretty ? )

@TriumphFeb 04.2005 — #[i]Originally posted by Couv [/i]

[B]...although my personal feeling is that it's a nightmare usability-wise. [/B][/QUOTE] Explain.

I made it very exaggerated and used up a bit much of the available space but I don't know what you mean by a usability nightmare. ?
[i]Originally posted by Couv [/i]

[B](and, you're right, not very pretty ? ) [/B][/QUOTE] Hey! ? I used the images I had laying around. ?

@CarolWauthorFeb 04.2005 — #No mistake; you guys are just great! Couv, thanks for your teaching about stuff remaining static (I understood what you said; amazing!) - and trying to combine it with fluid stuff.

Right now, I have only one absolute-positioning on my site; that is the first headings in the photo galleries, where I jolted them out of the normal flow by positioning them at the top center, so they'd lie over the banners, which I left mostly open to receive these headings. Because those headings are near the top of the file even if you lose the CSS, it seems to work okay. But my experience with browsers is also very limited (I'm getting there, though), so I don't assess things well yet. Same with terminology, concept, and just plain old knowledge and experience.

But this is so much fun that I know in time I'll "get there!"

And Triumph, thanks again for more of your wonderful comments and ideas and links. It was MaxDesign that started me thinking in this direction - an article by Russ Weakley. Somebody here referred me there.

Fortunately, I don't mind being confused, because in my so-far-long-life, I've learned that being confused is a path to real learning, though it can be frustrating at times <hehe>

So, you guys are helping me ask my next question.

When I put a page together, let's say I put the top banner first, literally, as I type the page code. And that I put the footer-photo-strip next-to-last, and the copyright notice (included file, server-side include) last.

Then also, the decorative image on the left, the 20px-wide stripe, is the background image, which is literally 20px wide, and using a repeat-y only (no x).

If I stick to that kind of structure, however Mr/Ms Visitor resizes windows, that, I'd think, would cause those three areas of the page to remain relatively where I suggest in the sketch.

Does that make sense?

So then after that, well, I need to study Russ Weakley's stuff, and the many other tips you people are pointing me to, to continue with the idea of a fluid layout. I'll also check into the Accessibility forum, and follow up on numbers of tips in that direction. I found Ryan Brill's personal site (for the third time; a great site!) - and picked up something about accesskey; which I don't yet know how to code, but I'll learn <g>. Got code snippets from Ryan Brill; thanks so much! I can sort of see how it should work.

In my very brief foray into absolute positioning for anything except those headers I mentioned, I ran into difficulties very fast. Later, I could play with it to see its effects, but I'll probably wait to do that till I have more work done on my site. (Someday, I'll need to get the content in there, too! - sure, I have some photos up, and some content, but that stuff isn't necessarily the main focus of my site <g>.)

Best, you're helping me learn to ask questions.

Many, many, many thanks!

Fri, 04 Feb 2005 06:46:07

@TriumphFeb 04.2005 — #I was looking for a much better example of what I was talking about and found it here:

http://www.stunicholls.myby.co.uk/layouts/frame.html

?

That's fun!

@CarolWauthorFeb 04.2005 — #[i]Originally posted by Triumph [/i]

[B]Just an idea about the frame:

http://www.imaginekitty.com/patterns/strip.html

just an idea... [/B][/QUOTE]

TOO FUNNY! Love it! Thanks!

Fri, 04 Feb 2005 06:56:50

@CarolWauthorFeb 04.2005 — #[i]Originally posted by Couv [/i]

[B]I stand corrected, although my personal feeling is that it's a nightmare usability-wise. (and, you're right, not very pretty ? ) [/B][/QUOTE]

I think it would be a nightmare for me. I did find it funny,though. I saved the source code - am sort of learning how to do that. Looks as though Triumph has top, left and bottom images fixed into position in some way; I didn't look to find out if that's absolute positioning (Triumph?). I still have trouble seeing code and understanding it.

Some of you apparently know how to get the whole external CSS, assuming, of course, it's available in the www directory or one of its subdirectories. I leave mine in the www directory, because I'm not competent yet to put it elsewhere and make sure somebody's browser will find it.

Besides, at this point, anybody who "stole" my CSS would find themselves in difficulties <hehe>

Couv, I'll be looking at the links you suggested. Learning so much with tips like that! And talk about fun!

Fri, 04 Feb 2005 07:03:30

@CarolWauthorFeb 04.2005 — #[i]Originally posted by Triumph [/i]

[B]I was looking for a much better example of what I was talking about and found it here:

http://www.stunicholls.myby.co.uk/layouts/frame.html

?

That's fun! [/B][/QUOTE]

Yes! (Still laughing!)

I began to learn the meaning of "fixed" when I was trying to work with my left-side background-image strip. Then I tried it when I was first trying to place headings in the photo galleries on top of the top banner.

I posted my errors, because I really do want to encourage my friends to learn how to build their own web sites, and also, I adore visual jokes!

You can see a couple of my booboos:

http://www.islandnet.com/~cwhitney/collapse.htm

http://www.islandnet.com/~cwhitney/prancydesktest2.htm

It's this last that taught me something about what "fixed" means.

Fri, 04 Feb 2005 07:29:34

@CarolWauthorFeb 05.2005 — #Thanks for all the help, suggestions, and pointers to strange and funny places; what a blast!

I can see I now need to revise my layout.htm page, to update it, because with your help, I learned that the three areas I said I wanted to be fixed, I do not want to be fixed into position <hehe>. Learning what words mean is probably half the job of learning to make a web page <g>.

Strange, how these things go, but I'm perfectly happy for the top banner to scroll off the viewport, and for the bottom banner and copyright notice to stay at the bottom of the page, never to appear till the visitor scrolls the page to its bottom. The only element I'd like fixed is the decorative 20px-wide strip at the left, that is, the background image. And that's fixed already.

So, likely, that's one problem (for me, though not for many people) solved. I can't foresee any difficulty, because it's easy enough to put the top banner first in the <body> and the bottom paired strip-and-notice last.

I've actually been to a site where the top banner takes up half the screen, and is fixed into position, so I learned what not to do to get what I would like.

Thanks again! Looking forward to what I learn next!

Sat, 05 Feb 2005 06:15:47

Also in #CSS _↴

[RESOLVED] Set height of the row when column is hiden css search form styling aligning problem CSS Error somewhere

Success!

Help @CarolW spread the word by sharing this article on Twitter...

Tweet This

Aiming for 2-column layout

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Aiming for 2-column layout

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴