My Halfway Finished Site

[tgrk35]

Ok, I lied, it's not really halfway done, but it's getting there.

Could somebody critique it for me a little...or a lot ;).

It would be much appreciated.

http://www.summel.net/index.php

Thanks a lot :)

[Daniel T]

http://www.hotdesign.com/seybold/

And you need some sort of HTML-alternative for those people who can't see the navigation because they aren't using a Flash-enabled browser.

In the buttons (links) in the flash navigation, go into their "Hit" state and make a rectangle that is the same width and height of the text in that button (I like to use a green rectangle, because it stands out and is easy to pick out from everything else). The rectangle will not appear in the final product, but it is a guide to tell Flash where the hotspot for the link is. By using the rectangle, users can click anywhere within that rectangle instead of having to click right on the text (which is annyoing because text has gaps, and it's sometimes difficult to position the pointer right overtop of the text itself).

[tgrk35]

What would you suggest for a navigation alternative in HTML?

I thought about having that, however I couldn't quite think of where/how to implement it.

Thanks

[Daniel T]

Inman Flash Replacement (http://www.shauninman.com/mentary/past/ifr_revisited_and_revised.php)

And make sure you visit that link in my last comment ;)

[tgrk35]

Ok, I just got done reading over that tables link you posted.

Uh, yeah, I'm retarded...'cause I don't really understand any of it :-$.

Any help?

Thanks :P

[Daniel T]

Lol. Well, the main idea it's trying to get at is TABLES FOR LAYOUT IS WRONG.

Tables were meant for displaying tabular data (information such as statistics that should be stored in a table) and not for laying out a website. Using the CSS-based alternative is a much cleaner, shorter way to get the job done, and is more accessible to text-only browsers (the kind you might find on cell phones or PDAs).

Your site you have there should actually be very easy to convert to CSS. To get a general idea of CSS-based design, go through the W3C's CSS Tutorial (http://www.w3schools.com/css/css_intro.asp).

EDIT
Oh, and by the way, if you are using Internet Explorer to test your sites, don't! Download Firefox (http://mozilla.org/firefox/) (a safer, standards-compliant browser).

[tgrk35]

Originally posted by tgrk35
Ok, I just got done reading over that tables link you posted.

Uh, yeah, I'm retarded...'cause I don't really understand any of it :-$.

Any help?

Thanks :P

Let me see if I'm understanding this correctly, because from that site it was fairly difficult for me to figure it out.

1. Use tables.
2. Only use <table class="xxx"> basically.
3. Define all the table classes within CSS.

That's it?

Wouldn't that still be...using tables...?

[Daniel T]

Originally posted by tgrk35
Let me see if I'm understanding this correctly, because from that site it was fairly difficult for me to figure it out.

1. Use tables.
2. Only use <table class="xxx"> basically.
3. Define all the table classes within CSS.

That's it?

Wouldn't that still be...using tables...? Yes, that would be. That's how you should do tables if they're being used for tabular data. A website layout is NOT tabular data. Did you do the tutorial I linked to in my previous post?

[tgrk35]

Yeah, I've been through all that stuff, didn't help.

Basically I was reading some more about all this and decided that I should go with <div> tags instead of tables...

However, I can't seem to find a complete reference (even on w3schools.com) that includes all the attributes I can use with a div class in CSS.

Any place that has that?

I'm confusedjf;laksjf;lksf

[Daniel T]

Yep. The W3C one is probably the best... http://www.w3.org/TR/REC-CSS2/propidx.html

[tgrk35]

I hate to quit being such a 'newb,' but I've been trying to convert my main page to divs instead of tables.

Here's what I have so far...and it's nowhere close to the layout I'm looking for:

<div class="border">
<div>
Hello
</div>
<div>
<div class="left">asdf</div>
<div>asdf</div>
<div class="right">asdf</div>
</div>
</div>

Here's the css I've thrown in an external file:

div.border
{
border-style: solid; border-width: 1px; width: 750px;
}

div.left
{
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
}

div.right
{
border-left-style: solid;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
}

I'm no where close to what the tables looks like :P.

Any ideas :(?

[Daniel T]

Ah yes. CSS is one of those minute-to-learn, lifetime-to-master things. Here is a condensed version of the CSS you had that will do the same thing:div.border
{
border: 1px solid #000;
width: 750px;
}

div.left, div.right
{
border: 1px solid #000;
}
Now, as for redoing that site you got there, you will want to do something like the following:<div id="container">
<h1 id="header">Flash banner here</h1>
<div id="middle">
This is the middle column.
</div>
<div id="left">
This is the left column.
</div>
<div id="right">
This is the right column.
</div>
</div>
And for the CSS:div#container {
width: 750px;
border: 1px solid #000;
position: relative;
margin: 0 auto;
background: #999;
}
h1#header {
width: 750px;
height: 200px;
}
div#middle {
position: relative;
width: 400px;
left: 150px;
top: 200px;
}
div#left {
position: relative;
width: 150px;
left: 0px;
top: 200px;
}
div#right {
position: relative;
width: 150px;
right: 0px;
top: 200px;
}
Now, that's just teh basic outline of the layout. I haven't got any of the exact measurements, so you'll have to do that part.

[tgrk35]

So...yeah, heh...

I tried all that, doesn't work.

http://www.summel.net/tableless.html

The columns aren't lining up right...and I have no borders...

[Daniel T]

Originally posted by tgrk35
So...yeah, heh...

I tried all that, doesn't work.

http://www.summel.net/tableless.html

The columns aren't lining up right...and I have no borders... Yes, I tested it after I posted that, then I sent you a PM (http://www.webdeveloper.com/forum/private.php) regarding it ;)

[Jona]

Just FYI, in Firefox, I can't click any of the links in the Flash navigation; it shows the pointer instead of the hand, and when I click, nothing happens. Not sure if you're aware of this, though.

[tgrk35]

Originally posted by Jona
Just FYI, in Firefox, I can't click any of the links in the Flash navigation; it shows the pointer instead of the hand, and when I click, nothing happens. Not sure if you're aware of this, though.

Yeah, are you talking about all the links to the right of the first twolinks (feature and messageboard)? I haven't finished those yet :p.

[Jona]

Originally posted by tgrk35
Yeah, are you talking about all the links to the right of the first twolinks (feature and messageboard)? I haven't finished those yet :p.

Um, oh. :D Like I said, I wasn't sure if you were aware of that. The first two links are still very hard to click, though; it takes a lot more effort than I'd like to give in order to browse your site. The "x" button is easier to click, to be blunt.

[Daniel T]

Originally posted by Jona
Um, oh. :D Like I said, I wasn't sure if you were aware of that. The first two links are still very hard to click, though; it takes a lot more effort than I'd like to give in order to browse your site. The "x" button is easier to click, to be blunt. Yeah, I explained this problem in one of my earlier posts and how to fix it. It's just because since he has no HIT state for the button, the user must land the cursor right on the actual text instead of within a rectangle around it. If he needs help with fixing it, I've got him on MSN ;)

Rite now, though, I'ma hit the hay.

[tgrk35]

Ok, I've revamped the page a little.

I've replaced all of the table tags in the main "table" with divs.

I've finished the flash header basically. All the links work (some don't quite have pages for them yet, but the links work). I created a "Hit" state in all the flash links so people don't have a panic attack trying to click them.

I just had a couple quick questions:

What could I add/change to the flash header that would make it suck less?

In Firefox, how can I get rid of that blank space at the top of the page? In IE it doesn't show that.

At the bottom of my page, I created a white box (thru DIVs) to surround my "legal" message I guess you could call it. I had to center it by putting 3 <br /> in front of it. How would I go about getting rid of those and centering that div VERTICALLY within its parent DIV?

I believe that's about it for now.
If you see anything else about the site/page that sucks ass and needs to be fixed, PLEASE let me know.

:) Thanks for your help so far :)
Will

[BeachSide]

To center the text in your DIV down there you need to add

#div {
text-align: center;
}

#div being your div id

[tgrk35]

centering that div VERTICALLY

[Jona]

This is just one of those terribly common "FYI" things, but, the "post subject" is optional...

[Daniel T]

Originally posted by tgrk35
In Firefox, how can I get rid of that blank space at the top of the page? In IE it doesn't show that.
That's because of the empty anchor (<a>) tags before the flash object. You can just remove them, as they serve no purpose.Originally posted by tgrk35
At the bottom of my page, I created a white box (thru DIVs) to surround my "legal" message I guess you could call it. I had to center it by putting 3 <br /> in front of it. How would I go about getting rid of those and centering that div VERTICALLY within its parent DIV?Well, since the footer text has a static height (2em), you can position it absolutely within the footer DIV. In the div.footer styles, add in this line:position: relative;And in the div.footer_text styles, add these lines:position: absolute;
top: 50%;
margin-top: -1em;
Also, since you are using Flash on your site, you should read these articles... (don't be scared away by the length of the page on the second one; there's about a gazillion comments after it ;))

http://alistapart.com/discuss/flashsatay/
http://www.shauninman.com/mentary/past/ifr_revisited_and_revised.php

[tgrk35]

Originally posted by Jona
This is just one of those terribly common "FYI" things, but, the "post subject" is optional...

I HAVE used a messageboard before...

[Jona]

Originally posted by tgrk35
I HAVE used a messageboard before...

Well, what was "asdf" in the title for? Sorry, people have actually thought that it was a required field before.

[tgrk35]

Originally posted by Jona
Well, what was "asdf" in the title for? Sorry, people have actually thought that it was a required field before.

Yeah, I just threw that in there...sorry.

I didn't mean to go off...just in a bad mood :(. Sorry.

[Jona]

Originally posted by tgrk35
Yeah, I just threw that in there...sorry.

I didn't mean to go off...just in a bad mood :(. Sorry.

Not a problem. Just wanted to make you aware of the fact since it appeared you weren't. ;)