Web Design [Archive] - Team17 Forum

View Full Version : Web Design

SomePerson

31 Aug 2007, 05:42

Well some of you may know my website, http://brian.kentosh.com but it's really really ugly so now I've been working on updating it and trying to make it look cleaner. So far I've come up with this (http://brian.kentosh.com/new/index.php?pg=hcmk2) design. In the right panel I hope to have thumbnails for photos, videos and plans. So the filler text in there isn't quite what will actually be there...

Please criticize!:) I'd actually like to try and make it look decent this time...

Also, does anyone know how to do a PHP switch case for if the variable doesn't exist, other than using default? What I mean is that I want the home page to be index.php without any ?pg= after it, but then I'd also like to have an error page under "default:" so that if "pg" points to something non-existant I can have an error page. Right now I have an if statement before the switch case to check if _GET['pg'] exists, but I'd like to be able to put all of this in the switch case if at all possible... Here's my current code: (I cut out all the Lorem Ipsum to save space)

<?php
if ($_GET['pg']) {

switch ($_GET['pg']) {

case 'hcmk2':
$media = '<Lorem ipsum>';
$title = 'Hovercraft Mk II';
$content = '<Lorem ipsum>';
break;

default:
$media = 'Nothing in the media bar yet because this page does not exist';
$title = 'No Page';
$content = 'This page does not yet exist...';

}} else {
$media = 'these are the links for when the person is at the home page!...';
$title = 'Home';
$content = 'This is where the content of the site will be displayed. Lorem Ipsum and all that crap...';
}
?>

bloopy

31 Aug 2007, 09:42

Also, does anyone know how to do a PHP switch case for if the variable doesn't exist, other than using default?

Use case null:

AndrewTaylor

31 Aug 2007, 10:20

I usually use isset($GET...), which works fine but can't be used in a switch.

Nice clean layout. It'd be improved by a few tiny images, I reckon. Maybe a subtle gradient on the title bar and a small drop-shadow below it, nothing too fancy. That's what I'd do, anyway. Speaking of which, I must get round to doing my own site properly...

Xinos

31 Aug 2007, 11:11

What about something like this?
http://img362.imageshack.us/img362/899/webdesigngv3.jpg
Kind of reminds me of the OpenTTD site now that I think about it. I must have done it subcontiously :)

But for your current site, consider having a light background color that isn't white, much like theese forums have. I dislike compleatly white bg's.

AndrewTaylor

31 Aug 2007, 13:06

It is kinda funky, although I personally would prefer a proportional font.

SomePerson

31 Aug 2007, 19:31

Use case null:

Thank you! It's so simple; I don't get why none of the PHP tutorials I could find would tell me that...:confused:

Nice clean layout. It'd be improved by a few tiny images, I reckon. Maybe a subtle gradient on the title bar and a small drop-shadow below it, nothing too fancy. That's what I'd do, anyway. Speaking of which, I must get round to doing my own site properly...

I was sorta considering a gradient in the title bar, but I'd never even thought of a drop-shadow...

What about something like this?
http://img362.imageshack.us/img362/899/webdesigngv3.jpg
Kind of reminds me of the OpenTTD site now that I think about it. I must have done it subcontiously :)

Ooh, that's pretty dang shmexy! I might have to do something with drop down menus now. When I first started redesigning the page I didn't know any CSS (hence why the previous version is entirely table-based...and totally falls apart under IE) and as such was entirely overwhelmed by the tutorials for that, but now I think I might be able to give it a shot.

[background] much like theese forums have.

You mean retro purple?;)

Xinos

31 Aug 2007, 23:08

It is kinda funky, although I personally would prefer a proportional font.

Well, it's just a quick sketch. Actually, the reason the text is a different font is that I had to take a screenshot of the text from notepad to get it in the right shape and place (trouble with photoshops text tool).

SomePerson

5 Oct 2007, 03:26

FutureWorm

5 Oct 2007, 03:29

Hey, I know I'm kinda reviving an "older" thread, but I started working on the site again, and I have a question about the CSS.

You see how on this page (http://brian.kentosh.com/new/index.php?pg=handgun) the items have that kind of margin on the left? I think it's because I'm using <ul> tags, but I still don't know why that happens... Does it have something to do with it wanting to put those little bullets next to the list or something?

ul tags include a padding value, so if you want to get rid of that padding, just put in

ul { padding-left: 0px; }

or whatever you want your padding value to be (5px seems pretty decent to me)

by the way, looking at your stylesheet, i notice that you have "list-style: none" under all of your sub-li's, this is redundant and it would make a lot more sense to put that in your ul tag (unless you need bullets for some other unordered list)

while you're at it, you might as well add a 5px left padding to your header as well

SomePerson

5 Oct 2007, 03:37

Oh, yay, thanks!:D Globally doing that to all ul did the trick. I tried that, but only in the classes specifically, so like .category { padding-left: 0px; }

FutureWorm

5 Oct 2007, 03:42

one other thing: get rid of that nasty border around your linked images with

.thumb img { border: none; }

i think that should do it, anyway

SomePerson

5 Oct 2007, 04:36

Done.:)

Although I did it for global img because I hate those borders just in general.

I'm actively fiddling with things so if you randomly see it with something awkwardly out of place, that's probably why. (It's easiest for me to simply upload the page every time I change the file than try to figure out how to render php offline, or to save a sample page as html)