The "WEB DESIGN" thread

[haas mark]

I just spent about 8 hours this morning putting this together. I'm quite proud of it.

Looking good. However you might try to reduce the contrast in the background pattern, like reducing the opacity for the pattern layer. At this point it creates some distraction when trying to read the text, especially on the left column.

Well, I got rid of the background entirely on the left column. Though, in the iframe, I'm leaving it there, because for the most part, it's okay; on a lot of the pages, it's not really going to be seen to begin with.

[Fleet Admiral JD]

I added some alternate designs to the bead site, in case the first wasn't liked.

[Utsanomiko]

I like *my* website. It makes me feel all jangly inside:

www.geocities.com/tonberimuyo/transformers/UTPP.html

Hand-coded in Notepad using less than a dozen html fuctions I learned from reverse-engineering old webpages my brother did back in highschool.

I really need to do my main project website, Head Cancer Productions, so I can list all my good photoshop artwork, maybe three or four videos, and links to that TF junk with all my various comics and stuff that I still have sitting around.

[Comosicus]

Two more layouts for two projects I'm working on these days:

Accounting firm

Firm developing software for Symbian phones

[Comosicus]

I finally managed to finish the site for the Symbian Software Company. The page can be seen here. I'll just be waiting for the final OK in order to deliver them the files.

[Fleet Admiral JD]

My newest: www.jdroger.com

I KNOW THE LINK TO TAWEB DOESN'T WORK YET. We haven't finished moving the forums and the CMS. So don't bug me about it.

[Fleet Admiral JD]

Well, I completley redesigned The Admiral's Site...http://www.jdroger.com/taweb/TAS

[haas mark]

I just revamped one of my sites to a simple fanlisting collective.

I also recently put up a La Résistance fanlisting (forgive the fact that I'm wrestling-obsessed).

[Comosicus]

I just revamped one of my sites to a simple fanlisting collective.

I also recently put up a La Résistance fanlisting (forgive the fact that I'm wrestling-obsessed).

Interesting designs: simple and to the point.

[Dooey Jo]

These "sites" are more focused around the technology, XHTML and PHP, so the design wasn't the primary concern. They did both, however, ahem, get the highest grade *bragsbrags*.

XML/XHTML school project
(Check out the Japanese in the "About us" section)

PHP school project "moonvampirism.net"
There isn't a single image in the design of this page. I'm fairly proud of that, and I rather like the colour scheme, too. There's actually quite a lot of nifty little features on this site that might take some time to notice. It's almost completely database driven.

BTW, Comosicus, I like it how all of your sites are standards compliant! Mine are too, but they had to be (at least the first one).

[haas mark]

I just revamped one of my sites to a simple fanlisting collective.

I also recently put up a La Résistance fanlisting (forgive the fact that I'm wrestling-obsessed).

Interesting designs: simple and to the point.

Thanks. I prefer my sites to be more minimalistic, because that's just how I am.

[Comosicus]

These "sites" are more focused around the technology, XHTML and PHP, so the design wasn't the primary concern. They did both, however, ahem, get the highest grade *bragsbrags*.

XML/XHTML school project
(Check out the Japanese in the "About us" section)

PHP school project "moonvampirism.net"
There isn't a single image in the design of this page. I'm fairly proud of that, and I rather like the colour scheme, too. There's actually quite a lot of nifty little features on this site that might take some time to notice. It's almost completely database driven.

BTW, Comosicus, I like it how all of your sites are standards compliant! Mine are too, but they had to be (at least the first one).

Some small nitpicks

The first site has the background repeating itself on larger resolutions. You could try to have that image fading to black on the right and setting it with "repeat:no-repeat" or "repeat:repeat-y".

About the second site ... do you intend to fill it further with content? Or will it just remain as it is?

I've tried hard in the last year to have my code standard compliant, as I consider it a goal in my career. Recently I have also started to make tableless layouts, although I do find them more difficult to set up in a consistent way across multiple browsers.

[Dooey Jo]

Some small nitpicks

The first site has the background repeating itself on larger resolutions. You could try to have that image fading to black on the right and setting it with "repeat:no-repeat" or "repeat:repeat-y".

Yes, I know. I was going to make the background tileable, but I figured it wouldn't really matter to the teacher so I left it the way it is now.

About the second site ... do you intend to fill it further with content? Or will it just remain as it is?

It will probably remain in its current state for some time. But I plan to eventually add more stuff, and make a better "home" page. Maybe have something in the right column too...

I've tried hard in the last year to have my code standard compliant, as I consider it a goal in my career. Recently I have also started to make tableless layouts, although I do find them more difficult to set up in a consistent way across multiple browsers.

Yes, I know. It can be a real pain (damn you IE ). But it makes the code so much easier to read. And it does also make it very easy to change the design later on, or having changing the CSS completely change the layout of the page... Well, I'm sure you already know what the advantages of a tableless layout are

[haas mark]

Do either of you have tips on how to go about creating a tableless layout? I've wanted to try but have yet to really figure it out.

[Dooey Jo]

Do either of you have tips on how to go about creating a tableless layout? I've wanted to try but have yet to really figure it out.

Well, you'll have to use various CSS positioning techniques. For instance, if you wanted to do your La Résistance fanlisting site without tables, you could make a div-tag that wraps the whole page and in the CSS write something like

html, body {
text-align: center;
}

div#wrapper {
width: 652px;
text-align: left;
}

This would put a 652 pixels long section in the middle of the page, in which you would then put the rest of the stuff.

I think the trick is to create sections using divs, instead of table cells (think, because I've never really used tables for layout so I don't know how one would plan such a site). Absolute positioning (position: absolute) is probably the easiest way of doing this. However, a certain browser have a tendency to screw things up, so you will probably have to add margin and padding values (which that very same browser will not interpret in accordance with the specifications, which in turn can cause you much headache).

W3Schools have many examples.
Positioning is everything has some useful articles and discussions and tips on how to make stuff work in IE.

[haas mark]

Okay, because I've never actually worked with divs in CSS styles outside of classes, what is this:

Code: Select all

div#wrapper { 
width: 652px; 
text-align: left; 
}

I don't understand how that works, or what it does.

[Comosicus]

Okay, because I've never actually worked with divs in CSS styles outside of classes, what is this:

Code: Select all

div#wrapper { 
width: 652px; 
text-align: left; 
}

I don't understand how that works, or what it does.

div#wrapper is the rule for a div with the id "wrapper":

Code: Select all

<div id="wrapper">
</div>

YOu can also find some nice tricks regarding CSS on css.maxdesign.com.au. There are tutorials for styling lists, floating and CSS selection. For examples of the power of CSS, you can check www.csszengarden.com. There are a lot of interesting css designs there, as well as a link to some very usefull CSS resources (check around the end of the menu).

I think that is enough for a start. Let me know when you've "digested" these sites and I can send you more

[haas mark]

Thanks. I've gotten this page done in completely no tables. It looks exactly like the main site so I'm happy with it. Again, thanks!

[haas mark]

Okay, got another question.

See the multicoloured tables here? Is it possible that I can do that with divs?

[Beowulf]

Okay, got another question.

See the multicoloured tables here? Is it possible that I can do that with divs?

Yeah, you just put each section in a different div, and style the divs such that you have one set as one color, the other the other, put no border around it, and stick all 4 divs in another one which does have a border.

[haas mark]

Okay, got another question.

See the multicoloured tables here? Is it possible that I can do that with divs?

Yeah, you just put each section in a different div, and style the divs such that you have one set as one color, the other the other, put no border around it, and stick all 4 divs in another one which does have a border.

Okay, now how about getting it so that the smaller div w/border isn't below the picture?

[Dooey Jo]

Yeah, you just put each section in a different div, and style the divs such that you have one set as one color, the other the other, put no border around it, and stick all 4 divs in another one which does have a border.

Okay, now how about getting it so that the smaller div w/border isn't below the picture?

You could try making the image left-floating, like so:
float: left;

However, since those multicoloured tables are, in fact, tables, the best thing to use might actually be tables (after all, that is what they are for). You could have a div with a border wrapping the image and and the table. Then you'd assign every second table-row a class that gives it a different background (or you might have to assign that class to the table-cells instead. Whichever that works...). Tables aren't evil when used to display tabularly information


Oh, and I noticed that I forgot one thing in my example up there. In order to get the div in the center, you'd have to add the line "margin: 0px auto;" somewhere in the div#wrapper section.

[haas mark]

...Once I figure that out, I'll let you know.

In the meantime, I just got this done.

[Comosicus]

This is one project I've finished last week:

Nova Epoc Systems

As the previous ones, it is tableless (except for the contact form, where I got lazy - and pressed by the deadline)

[Comosicus]

And the last one, that I've finished a couple of days ago:

Accounting firm

This is just made as a template, because the client didn't have the content prepared yet. And due to lazyness, top menu (and the relatively low payment) I decided to made it using plain old tables. In fact I used the table structure exported by ImageReady when I sliced the layout.



Also, this month, is the first one when the number of Firefox hits on my site is greater than IE:


Firefox - 789(57 %)
MS Internet Explorer - 530 (38.3 %)