Shoutbox

What do you think? - Printable Version

-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: What do you think? (/showthread.php?tid=82748)

What do you think? by Baggins on 03-29-2008 at 02:21 AM

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.


RE: What do you think? by Svip on 03-29-2008 at 02:35 AM

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.


RE: What do you think? by Baggins on 03-29-2008 at 02:38 AM

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

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.


RE: What do you think? by Svip on 03-29-2008 at 02:43 AM

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

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?
RE: What do you think? by Baggins on 03-29-2008 at 02:49 AM

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:
:-O:P
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:
:P 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.

RE: What do you think? by Svip on 03-29-2008 at 02:56 AM

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.


RE: What do you think? by vaccination on 03-29-2008 at 08:22 AM

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.


RE: What do you think? by Baggins on 03-29-2008 at 11:42 AM

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.
RE: What do you think? by Sunshine on 03-29-2008 at 01:17 PM

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;
}

RE: What do you think? by Svip on 03-29-2008 at 02:43 PM

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.
RE: What do you think? by Sunshine on 03-29-2008 at 03:40 PM

quote:
Originally posted by Svip
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.
Yes, I am very well aware of lowercase tags, I merely copy/pasted the example (I did not code that).

If you check out my website you will see that my xhtml and css validates, so up yours!  :P

But hey, go help the guy out, you won't let anyone else...so in that sense yea i'll get lost.
RE: What do you think? by Svip on 03-29-2008 at 06:26 PM

quote:
Originally posted by Sunshine
quote:
Originally posted by Svip
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.
Yes, I am very well aware of lowercase tags, I merely copy/pasted the example (I did not code that).

If you check out my website you will see that my xhtml and css validates, so up yours!  :P

But hey, go help the guy out, you won't let anyone else...so in that sense yea i'll get lost.
Just because your code is valid, doesn't mean you are using the tags correctly.  The parser can only check so much.  It does not know what is inside the data.  The parser does not understand English.

Tables are bad practise for making a layout.  Not only is it bad, it is wrong.  But the parser cannot detect if you used the tables for layout or tabular data.

To be a good webdesigner, you must learn the following things;

Understand your technologies, specifically; HTML, CSS and JS.
Understand their use and how you should not mix them.
Understand what each part of these technologies do, specifically in HTML, where tags are defined for specific purposes.  Understand these purposes and use them correctly.

Also, dt would probably help, because he knows not to use tables for layout.
RE: What do you think? by Eljay on 03-29-2008 at 06:33 PM

quote:
Originally posted by Svip
Also, dt would probably help, because he knows not to use tables for layout.

But dt can't design to save his life :P