Page 2 of 3
Posted: 2005-06-02 10:53am
by haas mark
Comosicus wrote:verilon wrote: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.
Posted: 2005-06-02 03:18pm
by Fleet Admiral JD
I added some alternate designs to the bead site, in case the first wasn't liked.
Posted: 2005-06-04 01:14pm
by 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.
Posted: 2005-06-05 06:03pm
by Comosicus
Two more layouts for two projects I'm working on these days:
Accounting firm
Firm developing software for Symbian phones
Posted: 2005-06-27 04:15pm
by 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.
Posted: 2005-06-27 04:53pm
by 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.
Posted: 2005-06-29 02:54pm
by Fleet Admiral JD
Well, I completley redesigned The Admiral's Site...
http://www.jdroger.com/taweb/TAS
Posted: 2005-06-29 05:18pm
by 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).
Posted: 2005-06-29 05:21pm
by Comosicus
Interesting designs: simple and to the point.
Posted: 2005-06-30 08:54am
by 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).
Posted: 2005-06-30 03:14pm
by haas mark
Comosicus wrote:
Interesting designs: simple and to the point.
Thanks.
I prefer my sites to be more minimalistic, because that's just how I am.
Posted: 2005-06-30 03:54pm
by Comosicus
Dooey Jo wrote: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.
Posted: 2005-07-01 02:53pm
by Dooey Jo
Comosicus wrote:
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
Posted: 2005-07-01 05:06pm
by 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.
Posted: 2005-07-01 07:27pm
by Dooey Jo
haas mark wrote: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.
Posted: 2005-07-01 08:57pm
by 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.
Posted: 2005-07-02 01:15am
by Comosicus
haas mark wrote: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":
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
Posted: 2005-07-02 04:54pm
by 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!
Posted: 2005-07-02 05:39pm
by haas mark
Okay, got another question.
See the multicoloured tables
here? Is it possible that I can do that with divs?
Posted: 2005-07-02 09:14pm
by Beowulf
haas mark wrote: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.
Posted: 2005-07-02 09:53pm
by haas mark
Beowulf wrote:haas mark wrote: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?
Posted: 2005-07-03 07:06am
by Dooey Jo
haas mark wrote:Beowulf wrote: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.
Posted: 2005-07-03 10:48pm
by haas mark
...Once I figure that out, I'll let you know.
In the meantime, I just got
this done.
Posted: 2005-07-09 04:18am
by 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)
Posted: 2005-07-09 05:12am
by 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 %)