Shoutbox

Just looking for some comments on this design I made for a little something I may be making. (The title actually will be blah)

Could someone also tell me how to get the title and subtitle closer together?

EDIT: hmm, attachment won't work right.

No seriously, you are using tables for layout.  Which is utterly wrong.  HTML is content, CSS is presentation and JS is behaviour, do NOT mix them.

Tables are exclusively for tabular data.  And a layout is NOT tabular data.

W3C gave you <div> and <span> tags for styling generally unstyled elements.  Using CSS of course.  If you want to be a real webdesigner, you'll have to learn the difference and live by those rules.

If not, then I will never be impressed by your design.

If I change the DTD to HTML 4.0 will it make you happy?

I know what I did was wrong and belonged back in web 0.5, but it is a simple site and I didn't think it would matter much. I guess I will redo it.

EDIT: Only first tell me how to make the two title things closer using CSS.
EDIT2: Also, I was kinda looking for an opinion on the look, not my code.

quote:

---

Originally posted by Bilbo
If I change the DTD to HTML 4.0 will it make you happy?

I know what I did was wrong and belonged back in web 0.5, but it is a simple site and I didn't think it would matter much. I guess I will redo it.

EDIT: Only first tell me how to make the two title things closer using CSS.
EDIT2: Also, I was kinda looking for an opinion on the look, not my code.

---

Yeah, well, I suppose, but since we can only see the code and not the "look" I guess I can only comment on that.  Why don't you upload it somewhere where we can actually view it?

http://files.1337z.com/dev/blahxter.html

quote:

---

Adam / MeEtc - says:
watch this
Adam / MeEtc - says:
http://local.meetcweb.com/yass
Adam / MeEtc - says:
just as an example
Adam / MeEtc - says:
tell me when its loaded
Billy says:
now?
Billy says:
it was instant
Adam / MeEtc - says:
cool. my server's slow on my side...
Billy says:

Adam / MeEtc - says:
now, refresh
Billy says:
still fast
Adam / MeEtc - says:
but
Adam / MeEtc - says:
the style should be gone
Adam / MeEtc - says:
ctrl-f5
Billy says:
WOAH!
Billy says:
k. I get your point.
Adam / MeEtc - says:
all i did was rename style.css
Billy says:
But I see how dependent on CSS style    should     be.
Adam / MeEtc - says:
yup
Billy says:
Will you let me off with inline CSS?
Adam / MeEtc - says:
no
Billy says:
darn
Adam / MeEtc - says:
put it all in the header, or a seperate file
Adam / MeEtc - says:
you need to learn 2 HTML attributes
Adam / MeEtc - says:
class and id
Adam / MeEtc - says:
oh, and also, make sure the DTD is XHTML Strict
Billy says:
Okay.

---

Okay, now I can see the layout and the colours.  And to be frank, the colour scheme is not good.  Light green, clouded sky blue and dark grey never go good together.  The blue and dark grey could in some cases work, but you'll have to fix the green.

Your post boxes are too far in colours from the background, so make some borders around them.  Alternative, make them in a similar colour as the background, in which case no border is needed.  Because making your foreground looking somewhat like your background might actually be a good idea.

I am not impressed by the choice of typeface.  But I guess I have no better answers.  Also, you might want to style the input and button fields.  Other than that it is fine.  Besides the use of tables, of course.

http://local.meetcweb.com/yass = timeout ;[

Anyway, CSS > tables

Once you get a good handle on CSS you will find making sites a lot easier, not only that but it will make editing the site a lot easier too. You can also have multiple 'looks' to your site by using multiple stylesheets and allowing the visitor to choose too.

Tables are just messy
--

If you're going to use a dark background like that, bright green wouldn't be my first choice for a foreground colour. You want your colours to be similar* - a dark background, dark foreground(this doesn't mean it has to be grey or black or anything, just not bright and in your face)

Gradients can usually be very helpful for this. Also, adding a border to your different sections can help sometimes help to separate up the different colours. (you just gotta experiment, tbh)

*for example, my site is dark on dark.

Which is better to use in this case, <p> or <div>?

code:

---

<div id="left">
<p class="meta">on 01/01/70 at 00:00:04</p>
<p class="post">&gt; randomspam</p>
<p class="meta">on 01/01/70 at 00:00:03</p>
<p class="post">&gt; randomspam</p>
<p class="meta">on 01/01/70 at 00:00:02</p>
<p class="post">&gt; randomspam</p>
<p class="meta">on 01/01/70 at 00:00:01</p>
<p class="post">&gt; randomspam</p>
</div>

---

I suppose <p> would be better when not formatted.

Design Coding....rap

To answer your question about <p>, yes for styling text different than declared in css for <body>..don't wanna overdo the amount of divs. A DIV is an empty element, meaning you will still have to use <p></p> tags etc. inside them.

Edit: looking at what you are using it for, why don't you use a table with classes set on the <td>? Nobody says you can't use a table inside a div. You can style <td> etc in CSS (stylesheet) too.

Here's an example on howto with the stylesheet (pabox stylesheet):

code:

---

/*
paBox 2.0 Style: Default Grey and White
Created by Todd: http://www.phparena.net
*/

BODY {
    /*Basic formatting: background color, text font, size and color.*/
    background: #FFFFFF;
    font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000000;
}
TD.main {
    /*Color of the bottom of the shoutbox: where the add new shout area is*/
    background: #FFFFFF;
    color: #000000;
}
TD.row1 {
    /*paBox uses alternating rows when displaying shouts. This is the background and text color of the first row*/
    background: #AAAAAA;
    color: #000000;
}
TD.row2 {
    /*Text and bg color of second row*/
    background: #CCCCCC;
    color: #000000;
}
TD.border {
    /*This is the color of the table border. For thin, 1px borders, paBox uses a table within a table, so although this says background, it really controls the border color*/
    background: #000000;
}
A:LINK, A:VISITED, A:ACTIVE {
    /*Attributes for links, active links, and visited links*/
    font-family : Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size : 10px;
    color : #555555;
    text-decoration: underline;
}
A:HOVER {
    /*Make some uber-cool hover effects right here*/
    font-family : Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size : 10px;
    color : #DDDDDD;
    text-decoration : underline;
}

---

Yeah, but Sunshine, you are aware that W3C encourages lowercase tags both in HTML and CSS?  Especially in XHTML, where uppercase tags aren't allowed.

Edit:  Sunshine, are you seriously suggesting him to use tables for layout?  You are not worthy of webdesign, get lost.  And I mean that.

As for Bilbo, understand what your content is about, I would recommend something similar:

code:

---

<div id="content"><!-- notice the use of "content" rather than "left", it gives you an idea where the content is -->
  <div class="post">
    <p class="info">Date, etc.</p>
    <p>Content</p>
  </div>
  <div class="post">
    <p class="info">Date, etc.</p>
    <p>Content</p>
  </div>
  ...
</div>

---

Don't listen to Sunshine, you can use a lot of <div> tags.  Because they are exactly what they are; empty elements, which are just lying there ready for you to style.  The entire concept of limiting your use on <div> tags simply because it feels like you have a lot of them is simply silly.

Now with the way I have designed it, your hierarchy is also a lot better, for instance, should you ever want to use JS to remove a specific post (or just hide it), you can easily by going through all your div elements in side #content, and hide them, rather than those list of p elements you had before.

You must learn to understand your content while writing it.  Think about it abstract.