• Categories

  • Backlog

Scrollable Layout

Well, a guy from BlogMad was talking about how he was making a site of some kind and mentioned how he wished to do something. This was Friday or Saturday night, of last week, so minute details are forgotten at this point. I hop on over via the link he gave me, and about fall out of my chair. Why?

One word, frames. As part of my job, I help my boss with web accessibility checking. For those of you that do not know what it is, it is where you check for valid code, proper conventions, screen reader friendly, and things like color schemes. You can check out this page for a some more information. On this post, for example, I talked about concerns I had about the in-browser implementation of GTalk in GMail.

So I said 'hey man, ditch the frames, use CSS.' After learning that he is working on relearning CSS, I volunteered to basically rip out the frames and make him a full CSS-driven layout. I said 'oh, this should be nothing, give me 30 minutes.' Well, I spoke quite a bit too fast. See I started out at 9 pm, and it took quite a bit longer than my 30 minute time estimate.

First I had issues of the elements that I told to stay put, kept moving. I settled that and made the rest. I think I went to bed around 4 am. You can look at the layout first here. If you are able to, I would like those of you that are reading this to test it on a few browsers. I just looked at it on a Windows XP machine in Internet Explorer and Firefox. The look that I was wanting is what displayed in Internet Explorer 6.0. If you cannot or choose not to look in multiple browsers, I was trying to have the space where the blue-ish boxes are, scroll, and everything else stay in place. What happens in Firefox, is only the top part stays in place, and the other parts move.

For the first time, I prefer Internet Explorer's version over the others. I did a post on a CSS forum that I browse and post now and then. Sadly the Guru that commented on my post didn’t offer his knowledge about css that gives him that status. He basically made my question into a statement and called it good. I just wanted to say, “no shit? really? Thaaaaaaaanks.” Instead of saying that, I just said, “Yeah, I was thinking that, but never got it working. Can I have a review or a place to learn that?” I never got a reply.

So I just said this should be a good enough layout. Just as I was about to show the guy, he messages me saying he had another layout up. I was like hahaha funny. Well, he wasn’t joking, I still gave him my layout. He seemed amazed that I actually did it.

Next, I took a look and another freak out moment. Why? Well, this time no frames were used. I freaked because a link that is in the sidebar, was 7 levels deep. I am counting level 1, as the <body> tag. I told him I could pretty the code up. This time I knew what I was doing and such. So I was able to get that link from seven layer deep to just four. That layout is here. This isn’t the original I did of layout #2, I moded it just a smidge.

technorati tags: , , , , , , , positioning, ,

Advertisements

6 Responses

  1. I am going to have to learn css.

  2. It’s not too bad once you get the basics…

  3. The i shall start with the basics.
    What are the basics?

  4. You should check out: CSS Tutorial. I assume you know a bit of HTML currently. If you don’t CSS is basically pointless.

  5. Posts like this should make it plain why your ## code scared the heck outta me, Ryan.

    I wanna learn CSS so bad. One of these days…

  6. Nicole I probably add in I have basic to advanced knowledge in like 7 computer languages…;-)
    I would recommend you checking out that tutorial, after you know html.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: