Making my site

[nightbandit]

So I've just started making my website (http://craptastic.co.cc)

I'm still working on the design a bit, and I'll content later. And in case you're wondering why they're php files is because I plan on adding some php later.

I just wanted to get some recommendations from you guys on how to design/code the site.

I also want to know how I should handle images, if they're too big then it breaks the layout. So I went into my css file and changed the max-width, but how can I make it so that you can click on the "thumbnail" and view the image full size? And any suggestions on how to frame them? Is just having an outline like what I have now good enough or should I change them to something more like what Wikipedia has. One last thing about images, how can I make the spacing between images different (space from text to image)?

Should I leave the layout the same size I have right now, or should I change it? The reason I have it at the size now is so that people with 800x600 res. can see it fine. Or is there a way to change the stylesheet depending on the viewer's resolution (I heard you can find out resolutions with javascript)?

UPCOMING CHANGES (don't comment on these things):

• Make columns same size no matter what (currently hiding it by making wrap the same bg color as sidebar)
• Add content (of course)
• Automatically create thumbnails

This is my first website so I hope I'm not asking stupid questions. :dunno:

 

[WhiteOut]

I don't think the grey header and footer go well with the rest of the design. To make a thumbnail you just have to set an image width and height, and make it a link. For example, if I had an image named imagename.jpg, i would use this code:

[SIZE=-1][COLOR=#800000]<A HREF="http://website.com/images/imagename.jpg"><IMG HEIGHT=50 WIDTH=50 SRC="[/COLOR][/SIZE][SIZE=-1][COLOR=#800000]http://website.com/images/imagename.jpg[/COLOR][/SIZE][SIZE=-1][COLOR=#800000]"></A>

[/COLOR][/SIZE]

 

[wjh2303]

regarding white-out's thumbnail suggestion:

This still loads the whole picture, so if you have a few photos you want to display thumb-nails of, which might be a few meg each, the user will still need to load all of those few meg, which will both make the page load slow, and eat through your bandwidth. So its ok for small pictures, but for anything over a few 100kB, you should probably make some thumbs. Various tools exist for doing this simply and easily, such as the GIMP (what i use, for more control) or the image manager in cpanel, which i havent personally used yet


http://lifeinmegapixels.com

 

[farscapeone]

There are two different approaches for thumbnails. First if you images are constantly (and dynamically) uploaded and second if they are manually uploaded and small in numbers. In both case you have to make small (thumb) image to display as thumbnail. Reducing image size (like wjh2303 said) will still load whole image so that's not an option. So:

1. For dynamic thumbs you first have to upload full image, then use PHP GD library to dynamically create (for example 200px high) thumbs. There are a lot of (even video) tutorials about how to do that, just google it.
2. For static (manually managed) thumbs simply create thumbs form your images, then when somebody clicks show a full size image (I recommend you use LightBox or Facebox).

For spacing use hspace and vspace for horizontal and verticals spacing. Those are properties of img tag and are without units (ex. 10, 20, ...).

Outline is just fine.

You don't have to detect screen resolution with JS, just use percents (%) instead of (pixels) px for your layout. If you put a single table on the page and set the width on 80% it would always be 80% no matter what resolution you use.

A few words about your layout.

1. Color combination is simply hideous.
2. Navigation menu text is not centered. If you don't know how to center it just use tables.
3. Table on the left don't have any kind of style and I really don't like to see the default styled tables.

Hope this was useful.

 

[nightbandit]

Thanks everyone, I'll be changing my layout so that it will be elastic. I'm also changing the color scheme if anyone else has any comments please tell me.

 

[rahulkhatri]

get a a good banner bro

the colors look dull
make it bright

 

[frankfriend]

Good to see you using a css for the format. I agree with Leviathon that you should try using % instead of pixels for the column widths. You may have to experiment a little with this.

The colours are obscuring the content, black on deep olive is virtually invisible. Change those background colours!!!!

Good so far.