Wanted: site testers

[yoshida]

Hey guys,I made this site which is going to air 'soon', and I'd like to know how you feel about it. I tried to use as much css as possible to create a site that's attractive to read and easy to maintain (no serverside scripting involved). It's compatible with IE6 and Firefox 1.5.If you have a 'not so everyday browser' (such as Opera or Safari) would you please take a look at the site to see if everything shows as intended? If not, can someone recommend some bug fixes or compatibility notes?I'm not in any kind of contest, and there's no banner ads on my site. I don't benefit from you visiting my site, all I want is your informed opinion to create the best site possible. So suggestions are very welcome.PS framehaters: I had no option but to use frames, bc I can't use serverside scripting and iframes s-u-c-k.

[snowboard01]

Awesome in all browsers except for one tiny opera slip up. In opera the line that has links cover it is to low. You used relative poitioning and it looks hot. and there are those curved corners I never got right. Congrats! I'd like to see any new work you make.

[yoshida]

Awesome in all browsers except for one tiny opera slip up. In opera the line that has links cover it is to low. You used relative poitioning and it looks hot. and there are those curved corners I never got right. Congrats! I'd like to see any new work you make.

<{POST_SNAPBACK}>

Thanks. You are free to investigate those borders and use them any way you like. They're a stack of DIVs, displaying a block (height is one pixel), and the margins are descending at the top and ascending at the bottom.CSS (edited):

#r1 {display: block;overflow: hidden;height: 1px;background: #fafaff;margin: 0px 8px;}#r2 {display: block;overflow: hidden;height: 1px;background: #f9f9ff;margin: 0px 6px;}#r3 {display: block;overflow: hidden;height: 1px;background: #f8f8ff;margin: 0px 4px;}#r4 {display: block;overflow: hidden;height: 1px;background: #f7f7ff;margin: 0px 3px;}#r5 {display: block;overflow: hidden;height: 2px;background: #f6f6ff;margin: 0px 2px;}#r6 {display: block;overflow: hidden;height: 3px;background: #f5f5ff;margin: 0px 1px;}#inhoud {background: #f4f4ff;padding: 5px;}

HTML (edited):

<div id=r1></div><div id=r2></div><div id=r3></div><div id=r4></div><div id=r5></div><div id=r6></div><div id=inhoud>---content goes here, may include other divs or anything you could possibly think of. You may rename the divs, it doesn't matter. This just seemed covenient at the time (inhoud is Dutch for 'content')---</div><div id=r6></div><div id=r5></div><div id=r4></div><div id=r3></div><div id=r2></div><div id=r1></div>

About that line in Opera: seems like I gotta download that browser and try to find a way to get it right. Thanks for the info.*off to look for hr tags*STATUS: fixed. Replaced HR by a div which displays a block. No one will ever see the difference. Opera doesnt support color attributes for hr tags.

[boen_robot]

There are A LOT of code tips I could give you, but for the sake of good relationships, I'll begin with the more "urgent" ones...instead of using a bunch of nested divs, you could just use one div and use 4 classes to define 4 backgrounds to each of the four sides of the div's corners. I'm not sure if it works, but if it doesn't, you could always do the same with 4 divs instead.Instead of using a scripted image and anchor, you could just style the anchor and it's :hover state.The only tableless thing you've got is the main content. Are you planning to "tablelesslise" the rest of the page(s)? By the way, you've got some "align" attributes left on some of your "p"s. You should export them to CSS.There's always a choise to what to use and what not. Frames aren't the only server-side-scriptless way, though I admit they are the easiest. I mean, there's always AJAX Includes, XML&XSLT, etc.Nevertheless, it looks good though. It only has code based problems to work around. Maybe only the background color... I don't know... the site looks as if it's "nude". Nothing major. Nudity is good anyway (khm...).

[yoshida]

instead of using a bunch of nested divs, you could just use one div and use 4 classes to define 4 backgrounds to each of the four sides of the div's corners. I'm not sure if it works, but if it doesn't, you could always do the same with 4 divs instead.

<{POST_SNAPBACK}>

Thanks. Your suggestions give me a direction to improve. I'll bookmark this post for future reference.What are your recommended css reference pages?What's the difference between divs and classes? (classes look just the same to me to be honest, but I've been wondering about them for a while)

[boen_robot]

A class is a group of elements that shares special properties. It's practically the same thing as the ID you give to a div with the difference it's suppose to be used multiple times, while ID is suppose to be used only once per page (and therefore has higher priority).And div is just an element to define a division (box), you know. It's styled by using classes and IDs.Using multiple classes saves a lot of code. Instead of having

<div class="1"> <div class="2"> <div class="3"></div> </div> </div>

You simply have

<div class="1 2 3"></div>

Isn't that A LOT less code?As for CSS references, I use the one in Dreamwaver and W3Schools. I use other sites only for their demos. Such sites include cssplay.co.uk, quirksmode.org, positioniseverything.net, etc.[edit] Asking how to define classes is the noobiest question you could have asked, sorry to tell you that. The W3Schools' CSS tutorial shows how. [/edit]

Edited May 28, 2006 by boen_robot

[yoshida]

A class is a group of elements that shares special properties. It's practically the same thing as the ID you give to a div with the difference it's suppose to be used multiple times, while ID is suppose to be used only once per page (and therefore has higher priority).And div is just an element to define a division (box), you know. It's styled by using classes and IDs.Using multiple classes saves a lot of code. Instead of having

<div class="1"> <div class="2"> <div class="3"></div> </div> </div>

You simply have

<div class="1 2 3"></div>

Isn't that A LOT less code?

<{POST_SNAPBACK}>

You're right. I'm going to try that when I have another few spare hours.I'll use Google on how to use them. thnx.

[SillyBilly]

You're right. I'm going to try that when I have another few spare hours.I'll use Google on how to use them. thnx.

<{POST_SNAPBACK}>

My preference is to have no scrolling except for the entire page. I don't like clicking in each window and then scrolling.

[SillyBilly]

You're right. I'm going to try that when I have another few spare hours.I'll use Google on how to use them. thnx.

<{POST_SNAPBACK}>

My preference is to have no scrolling except for the entire page. I don't like clicking in each window and then scrolling.

[yoshida]

Sooo important you had to say it twice? ^^I already tried alternatives like iframes and loading the menu bar and header to every page. But that's only a good solution if pages are generated by serverside scripting IMO. I can do that, but my host won't let me and buying/renting hosting space that does isn't a solution.So there ya go: frames. But overall I'd agree with you if there was a solution that doesn't require more maintenance.

[snowboard01]

You know how long I struggled with those round corners! You just made me look like an idiot! But I'm glad about it!

[reportingsjr]

Can classes be used that way? doing:class="1 2 3" or would you need commas or somethin..

[boen_robot]

Class names aren't allowed to have spaces, so because of that, when you have a space, it's treated as if you have two or more classes. Commas aren't allowed, or at least I don't think so. Multiple classes are not supported by older browsers OR have problems (for example, old IEs apply only the last class). But in general, it's supported, so there aren't that many problems with it.Oh, and yoshida, did you thought about AJAX Includes maybe?

[yoshida]

Oh, and yoshida, did you thought about AJAX Includes maybe?

<{POST_SNAPBACK}>

I did think about that, but I didn't know how to do it and didn't really have the time to learn it.It looks neat. But can I have control of it's width? Does the length automatically adjust to the content, without any glitches at all? I will try to find the time to investigate. It looks like one step beyond a 'scripted iframe'. At best I'll use it to display the header and menu bar, and maybe the main content, but wouldn't that be just like the way I'm using frames right now?Again, I'm going to investigate this, and will use it if this makes things beter and/or easier.

[boen_robot]

You need to call the script two times in each of your main pages, remove the frame and call the actual homepage instead. The result is the same as if would have been if you were writing the code in the included files directly at that spot.

[yoshida]

Sounds nice. I'll give it a spin and will let you know if it works for me.