Topic: New layout "CSS-ized"

I got a little bored this morning and decided to play around with some CSS layouts for a while. Well, one thing lead to another and about 9 hours in front of the computer later...
http://www.11oh1.net

All CSS layout with a little help from www.bluerobot.com to get started on the 3-columns. It wasn't nearly as tough as I thought it would be. I've checked it in Opera, IE 6, and Firebird and all checks out OK. Actually, I'm pretty happy because it looks exactly the same in all of them!

I still have some CSS-izing to do on the wallpaper and contact layout. The wallpaper page is one big table but I saw a tutorial on Alistapart on how to achieve the same thing with CSS floating. I'll dive into that tomorrow. I just wanted to get everything going and start getting some input on it.

So, let me have it. Thoughts? Browser issues? Foibles?

Cheers and it's time for bed!

:::11oh1:::

Looks good, nice to see another loonie move towards the table free realm

First thing I noticed that might need changing is the menu. Nothing big, just that the link leading to the current page should not be a link and it should be styled differently. There are meny god reasons for this, but you probably know about them allready so I won't repeat them. Another thing with the menu is the 'photo section'. The link looks like all the other menu links, but it is different in the regard that the photo-page changes the layout. As it is now I expcted only the content to change, so it would be better if it looked different in some way to give the user a warning that 'this is a special link'. Not really sure how to do that, but one solution might be to have the menu link lead to a normal page showing the x-newest photos. On this page you could provide a link to the complete photogallery.

Another thing is that the page don't validate. The first problem is that the doctype isn't recognised. I think the doctype need to be in partially capital letters to be accepted. You should also specify the encoding. I would also advice you to use one of the XHTML (prefarably XHTML1.1 or XHTML1.0 Strict) to support the newest standards etc, but that might juts be me...

Except from those two minor things the page looks great

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

http://www.bluerobot.com/web/css/fouc.asp


Jason

Thanks Jason, fixed that. I was wondering if there was an easy way to do that.
http://validator.w3.org/check?uri=www.11oh1.net

I'm getting some error messages I just don't understand when I try to validate. I have no idea what's going on.

:::11oh1:::

Looking pretty good.

As Veneficuz said though, there's an issue wiuth the Doctype. This can cause a whole variety of problems. You also seem to be using an HTML doctype, but with an XHTML namespace. If you straighten that and the encoding out, you'll be in pretty good shape. I would also recommend going right to XHTML strict, as you are pretty much doing what's needed for that already.

The only problem I encountered was with the background-image for the 'top' div is partially covered up by the photos on the top left at 800x600 (which is what I'm stuck on at work).

Everything else seemd to be problem free. Viewing in Mozilla 1.3.x (it is different from firebird, so it's good to make sure it works in oth).

{edit - you snuck some things in while I was typing....


Ok, ther errors -

the 'border' attribute is no longer valid for the img tag. It should be specified in the CSS

img {
border:none;
}

The UL - you have two <ul> tags in a row. If the intention is to nest them, you need to do it like this -

<ul>

  <li>

     <ul>

         <li></li>

     </ul>

   </li>

</ul>

The li - you do need to close all <li>'s

The others that follow are fallout from those issues which confuse the validator. Fix those couple things, and the other errors should go away.

[This message has been edited by DL-44 (edited 09-26-2003).]

Thanks DL, I fixed the doctype (looked at your page to see where my error was.)

The only issue I'm having now with validation is with my list that controls the layout of the CSS menu. I think I might have it mis-formatted.

EDIT: Ah, there we go, I chopped out some li tags when I made the menu a php include. Woops. Validates now though.

EDIT EDIT: heh And you snuck in while I was typing! Got it all fixed. Thanks.

:::11oh1:::

[This message has been edited by krets (edited 09-26-2003).]

You still got one error in the code. On line 53 you got '<a class="piclink" a rel="nofollow" href="javascript:...', there is an a too much in there.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

Also, I noticed that in IE5/Mac, the menu links stick out of the container a little, and hang off the right edge by about 10px or so. Not a big deal, though, and it actually looks kinda neat, even if unintentional.

[EDIT: Or is that intentional? I didn't see it yesterday on my PC, but you may have changed it since then.]



[This message has been edited by ozphactor (edited 09-26-2003).]

Vene: Thanks, smashed it.

Oz: Not intentional but with as many hits as I get from IE 5 on a Mac I'll take it.

:::11oh1:::

Odd - I also get that same issue viewing it in Mozilla now. =(

Don't know off hand waht's causing it, but one thing I would recommend - don't make it a nested list.

Make the <h2> just a regular old <h2> above the list. The header is just that - a header, while the links themselves are actually the list.

If there were sub-links associated with the links, it would make sense to nest a list for them.

{{edit - I wonder if this:

html>body #menyou {

	width: 115px;

	}

Is meant to be this -

html>body #menyou ul a {

	width: 115px;

	}

?

[This message has been edited by DL-44 (edited 09-26-2003).]

[This message has been edited by DL-44 (edited 09-26-2003).]

That's exactly what it was DL. I was just fixing that as you looked probably. I moved some things around a bit when I started playing with the style switcher and totally left off the ul and the a.

Wooops.

:::11oh1:::

[This message has been edited by krets (edited 09-26-2003).]