Prototyping...

[Bob Schroeck]

Okay, all the fun with the Yuku skins and CSS and whatnot -- plus a new IDE to play in at work that includes website development -- has motivated me to try redesigning my website again.

So here's a prototype to look at: http://www.eclipse.net/~rms/test]Dummy home page. It's all CSS and no tables (except for a webring widget at the bottom). It's got a few problems, as I'm still learning what the hell I'm doing -- for instance, I'd really like that right-hand column to automatically stretch to the same length as the left-hand column, and to make sure the copyright notice floats at the bottom. I'm not sure about fonts yet, and I'd really like a menu with dropdowns, although I'll settle for what I've constructed if I need to.

Any suggestions, advice, code, whatever to help me refine this prototype would be very welcome.

Thanks!
-- Bob
---------
Then the horns kicked in...
...and my shoes began to squeak.

[Bob Schroeck]

Well. That certainly doesn't work right in Mozilla...
-- Bob
---------
Then the horns kicked in...
...and my shoes began to squeak.

[Morganite]

I know in firefox, there is no right-hand column. '.'

The way the buttons look kind of throws me... I'm using the ImgLikeOpera extension, and they looked more like placeholders for images that hadn't been
loaded than like buttons. Then I told it to load images, and realized they weren't anything to do with images. '.'

-Morgan, doesn't really see what's so wrong with tables. '.'

[CattyNebulart]

Well since you are asking for suggestions, section 508 compliance would be nice. (Basicly give each image a description, No javascript required, though you can
use it for non-critical things, etc.)

And valid html is always a plus.

you might like this site: http://totalvalidator.com/
E: "Did they... did they just endorse the combination of the JSDF and US Army by showing them as two lesbian lolicons moving in together and holding hands and talking about how 'intimate' they were?"
B: "Have you forgotten so soon? They're phasing out Don't Ask, Don't Tell."

[Bob Schroeck]

You know, when I get to the point where this is more than just a learning exercise, I'll certainly make sure it passes. You cite "valid html" as
though you had a problem, though -- the validation tool in the development environment I was using has no problems with it as it stands; was there something it
overlooked?

Morgan -- right, they're just text at the moment, fairly simple. Like I said, I'm learning. I'm playing with the idea of moving over the green
marble bitmap that I use on my current site as the button background and tiling it under the menu items, but haven't actually gone ahead with it yet. And
like I said, I'd really prefer to have real dropdowns.
-- Bob
---------
Then the horns kicked in...
...and my shoes began to squeak.

[Bob Schroeck]

Just ran the validator on it. I didn't do too badly -- mostly it was "" that it didn't like.
-- Bob
---------
Then the horns kicked in...
...and my shoes began to squeak.

[CattyNebulart]

Bob Schroeck wrote:

---

You know, when I get to the point where this is more than just a learning exercise, I'll certainly make sure it passes. You cite "valid html"
as


though you had a problem, though -- the validation tool in the development environment I was using has no problems with it as it stands; was there something
it


overlooked?








No it's just that I stumbeled across this thread shortly after having an argument with some other people about website design.




They contend that looks is the most important part, as long as it looks good in IE at the resolution they are using it's fine.




To me usability trumps looks, and ideally the site should be browser independent too. A reflowing layout should be used, rather than the fixed with junk so
common on websites.


your website is better than most and most of the problems are cosmetic in nature. I just wanted to state it beforehand so your site doesn't devolve into
one of those sites.




Sorry if I offended, think but this and all is mended....

E: "Did they... did they just endorse the combination of the JSDF and US Army by showing them as two lesbian lolicons moving in together and holding hands and talking about how 'intimate' they were?"
B: "Have you forgotten so soon? They're phasing out Don't Ask, Don't Tell."

[Bob Schroeck]

Oh, no offense -- and the whole point of the redesign was to get it out of late-1990s table-based layout. The problem is I'm learning the CSS and DHTML
piecemeal, finding things I need as I need them. And I'm stumped on how to make the two columns of this thing flow next to each other on the page.

And believe me, I'm trying very very hard not to turn it into something IE-specific.

Mm. While I'm posting, a specific question for anyone who wants to answer it: I seem to recall some way of doing the equivalent of "include" in
HTML; I would like to put the menu in an external file and just call that file instead of reproducing it on every page. Can anyone point me at what it is I
need to know to do that?

Thanks.
-- Bob
---------
Then the horns kicked in...
...and my shoes began to squeak.

[CattyNebulart]

That depends on the serverside scripting language that you use, AFAIK there is no way in pure html to do includes.
E: "Did they... did they just endorse the combination of the JSDF and US Army by showing them as two lesbian lolicons moving in together and holding hands and talking about how 'intimate' they were?"
B: "Have you forgotten so soon? They're phasing out Don't Ask, Don't Tell."

[Bob Schroeck]

Ah. I'm probably remembering something I investigated at some point in the 90s and decided I wouldn't (or couldn't) use. Thanks.
-- Bob
---------
Then the horns kicked in...
...and my shoes began to squeak.

[Sweno]

If you are interested I can dig up a pure CSS expandable menu template. Last time I checked it worked on both IE and firefox without a problem.

That should allow you to minimize the code duplication (as most of it is in the css file).
-Terry
-----
"so listen up boy, or pornography starring your mother will be the second worst thing to happen to you today"
TF2: Spy

[Bob Schroeck]

That'd be great! Please!
-- Bob
---------
Then the horns kicked in...
...and my shoes began to squeak.

[Sweno]

here you go

The page uses the menus itself, so you can easily see what looks like out of the box.
Colors and whatnot can be tweaked to your hearts content, the css file itself is heavily commented
-Terry
-----
"so listen up boy, or pornography starring your mother will be the second worst thing to happen to you today"
TF2: Spy

[Bob Schroeck]

Excellent, thank you! I've grabbed the page and the stylesheet, and will study them today when I get the chance.

If I can make that work the way I want -- and I see no reason why I can't -- then the only big issue left for me is the damned two-column thing. I see it
all the time on other websites, why can't I make it work?
-- Bob
---------
Then the horns kicked in...
...and my shoes began to squeak.

[Bob Schroeck]

Sweno, thanks again! It took me a while to work things out properly, but I got the menus working the way I want them.

Consequently, a new prototype top page for my site is at the URL given in the first message. I'd really appreciate it if folks would check it out again -- particularly Morgan, because I still need help with the coding. Specifically, I have two questions now:

1) Why is my content starting several lines up from the menu, and under it and the pagetop banner?

2) Is there any way at all I can get two columns in the content section under both IE and Firefox without resorting to tables?

Thanks!
-- Bob
---------
Then the horns kicked in...
...and my shoes began to squeak.

[Morganite]

I haven't tricked you into thinking I know what I'm doing, have I? '.'

*Looks*. Hmmm. If I'm understanding what you mean by 1... well, I don't know. Here the content starts a line below the menu. They overlap it when
it's open, but that's not really an issue.

At least... that's what it does in firefox.

In both version of IE I have around, the layout of the whole page is mangled in a way that's really quite spectacular. '.';;; It was definitely *not* doing
that with the first version I saw, so I don't really know what could have happened. (The only thing I remember for certain that changed is now you have
images for the top level of the menu, but that shouldn't blow up the rest of the page...)

-Morgan.

[robkelk]

2) Is there any way at all I can get two columns in the content section under both IE and Firefox without resorting to tables?

This is supposed to work in all modern browsers (I use it on a couple of my FAQ pages), but I haven't looked at it under IE:


first half of content goes here

second half of content goes here



The first part creates a "floating" box that sits on the left-hand 49% of the page.

The second part creates a "floating" box that sits on the right-hand 49% of the page.

You'll need to play with the content a bit to get the two columns balanced.

That last "br" line is important - without it, the content following the floating boxes in your HTML would be squeezed into the 2% of the page between those two floating boxes.

Edit: If the browser doesn't support CSS, the layout "degrades" to the one-column display you have now...

 
--
Rob Kelk
"Governments have no right to question the loyalty of those who oppose
them. Adversaries remain citizens of the same state, common subjects of
the same sovereign, servants of the same law."

- Michael Ignatieff, addressing Stanford University in 2012

[Morganite]

Oh, and here's what it shows me when I look at the site in IE.

http://www.accessdenied-rms.net/forums/forumimportfiles/d8526 ... ff5c8d.jpg]

Also, when hovering over any of the menus, they *all* are appearing.

-Morgan.

[Bob Schroeck]

This is supposed to work in all modern browsers (I use it on a couple of my FAQ pages), but I haven't looked at it under IE:

I'll give it a try. Thanks, Rob.

I haven't tricked you into thinking I know what I'm doing, have I? '.'

Well, you seemed to be doing so well with the forum layout...

Oh, and here's what it shows me when I look at the site in IE.

Well, that's very weird. I'm testing it in IE at work, haven't even looked at the latest version under Mozilla yet. (Moments later) Even weirder. In Mozilla, the text lines up right, vertically, although the right column material is at the bottom, just as others are seeing it.
-- Bob
---------
Then the horns kicked in...
...and my shoes began to squeak.

[Morganite]

Could be a version difference. On one computer I have IE6, and on the other I have a different version of IE6. '.'

Still, it seems strange. The css menu on GRC works fine in it, and the layout you had for your first prototype had the side by side columns in it. So why does
this one end up mangled? o.O

-Morgan.

[Bob Schroeck]

Mmm. I'm on IE7 here at work. That probably makes all the difference.
-- Bob
---------
Then the horns kicked in...
...and my shoes began to squeak.

[Wolff]

Well, Bob, FWIW, it's looking just like it should in Opera 9.22. The menu dropdowns appear when and where they should, and go away when they should.

-WFalling out of aeroplanes and hiding out in holes

Waiting for the sunset to come, people going home

Jump out from behind them and shoot them in the head

Now everybody dancing the dance of the dead

[Bob Schroeck]

Cool.

Rob's code snippets, btw, made the difference in getting the side-by-side columns. Thanks, Rob! And I found what was making the tops of those columns hide
themselves under the masthead, so that's fixed now, too.

The latest version of the prototype is at the same location as of a couple minutes ago.

So now I'm just down to one single question:

How do I make the right-hand column, with its green background, stretch all the way down to match the height of the left-hand column, without using lots of
nasty
s that won't space out right in every browser?
-- Bob
---------
Then the horns kicked in...
...and my shoes began to squeak.

[Bob Schroeck]

And yay, it works under Mozilla. Except the subhead "A World of Difference..." is no longer visible. Argh.

No one has an idea or suggestion on the column length thing? I was afraid of that...
-- Bob
---------
Then the horns kicked in...
...and my shoes began to squeak.

[Morganite]

I've tried a few things, but can't find anything that helps.

Also did some experimentation on the IE6 issues. I think there's got to be something wrong in the menu code, but I'm not sure what. I might do some
more tomorrow.

-Morgan.