First Website - Would like review

S

Sverre

New Member
Hello,

As you can see, this is the first post, and for everyone thinking "NOOB", you're right ;-) . I have just made and uploaded my first web page ever, and now I would like experienced users like you guys to tell me where I went wrong or right, to give suggestions, and even some suggestions for content if you have any. Please keep in mind that the layout is very basic, mostly because I ever heard of CSS 4 days ago. I also know it is missing a top banner, so it looks a little empty. If anyone here knows of a good tool to make a banner/header, then please tell me.

Also, before I give you the link, if anyone knows how to make a "div" in CSS position itself relative to (a certain number of pixels below) another "div", I would be very grateful. The most annoying thing that I found when making a website are the different browsers and screen resolutions. Until I find out the above, I will unfortunately have to say, "Best viewed at 1280x800 "

Main Site:
http://computersecrets.eu.pn/index.htm

CSS file:
http://computersecrets.eu.pn/style2.css
 
zach

zach

Member
The site does look a bit 90's, but I believe you are aware of that.

Like you mentioned there a lot of issues when resizing your browser and/or using different resolutions.

It looks to me like you are using a pretty common layout structure which starts with a header across the top, followed by a navigation bar on left side, main content on right side, then a footer at the bottom.

Here is some basic coding that you may find useful.

HTML: 
<div id="wrapper">
	<div id="header">
		Header Image
	</div>
	<div id="content">
		<div id="cleft">
			Links
		</div>
		<div id="cright">
			Content
		</div>
	</div>
	<br clear="both" />
	<div id="footer">
		Footer Links
	</div>
</div>

body{margin:0;padding:0;}
#wrapper{display:block;height: auto;background: #FFF;}
#header{background:#000000;position:relative;height:110px;color:FFF;text-align:center;}
#content{width:950px;margin:0 auto;}
#cleft{float:left;width:300px;}
#cright{float:right;width:630px;}
#footer{width:950px;margin:0 auto;}

This allows you to have the header re-size no matter the width of the screen but the navigation, content, and footer will always remain 950px.

You can of course switch the header to only go up to 950px or even change 950px to a larger number if you wish for your site to appear wider.
 
S

Sverre

New Member
Thanks for that ;-)

Not sure what you mean by 90's (wasn't online back then), but if you mean unprofessional, you're probably right. However, that's why I post it here, to get suggestions and comments, so if you have an idea on how to make it better, please tell me, and I will do my best to implement it. Whatever you guys find cheap, boring, excessive, etc. will go.

The resolution and browser problems should be fixed now, so if you go to the site, you should find that it works with most screen resolutions ;-) . If you experience any problems, please tell me what it is, your resolution+browser, and if you know, how to fix it.

Thank You.
 
zach

zach

Member
Looks and works good now.

I'm able to view it in my resolution size (1920 by 1080), then when I re size my browser it re sizes perfectly.

When I said it looks a bit 90's, I meant that the site looks similar to sites from the 90's.
 
S

Sverre

New Member
Sounds good.

Now you probably would agree that it doesn't look too professional, but if i were to change that in any way, what should I do? What do you guys consider a professionally looking website?

Thanks for your help ;)
 
G

Geeks

New Member
Getting better just needs a bit more attention. But you have gotten off to a good start as you first site this is perfect.
 
zach

zach

Member
I like the new one better.

I would suggest that you try to add better structure to it. Make everything the same width.

The head ID should be as long as the banner ID and on my resolution it's not, you will need to make it the same width as the banner which seems be 90% not 1152px. In order to achieve a image that will re-size with the banner at any width you need to crop it differently and make it a background element to the DIV container.

HTML: 
<div id="head">
Test
</div>

#head{background:transparent url('bilder/head.png') repeat-x;left:5%;position:absolute;top:130px;width:90%;}

You will need to change the head.png image so that it's a simple gradient. I normally open photoshop make a width of 1 by a height of the DIV container then add the gradient, which will allow you to use it as a background pattern to your DIV container. So at ANY size resolution it will show up properly.
 
G

graphicdesign

New Member
I see your site that it is in need of redesigning and reorganizing. If you have difficulty in using the div, you can used table for the restructuring of your design and layout
 
S

Sverre

New Member
Thanks, I actually thought about that. Thank you very much for providing the code though, much appreciated. Also, thanks for telling me about the resolution, will fix it ASAP.

EDIT: @Graphicdesign, my first layout was similar but with tables. The reason I moved on to divs is because I find it a lot more "readable". It seems clearer, and more understandable. Maybe it just depends on personal flavors.
 
Last edited:
S

Sverre

New Member
Finally, the new layout is up! I made some changes that weren't in the test version. These are:

*All pages are there now
*Links (with hover effects!!!)
*different background
*Should resize to all browsers and Windows (if not, please tell me)

I hope you like it, and I hop it makes my site look a little more professional.

http://computersecrets.eu.pn
 
S

Sverre

New Member
zach said:
I do believe that it would be better if you used pixels instead of % (in the coding I provided you).
Click to expand...

Any specific reason for that? You see, whenever I give a measurement in pixels, I get trouble when viewing it in a different browser and/or resolution.
 
zach

zach

Member
I would stick to pixels for the container div then use percentages for nested div to avoid any rendering issues with IE6 and it's curious approach to the box model.
 
S

Sverre

New Member
Yet another new design is up, this time it should look even better ;-)

@Zach: I've tried to do that, but mostly I have used what works best. Page is tested a little better this time so it shouldn't re-size the content to a thin column.

Tell me if anyone has any problems viewing it. Thanks ;-)

http://computersecrets.eu.pn/
 
zach

zach

Member
It's looking much better!

I would say that you need to add a max width to it. Because, on my screen your right panel with the ads is very wide on my screen (I have a widescreen).
 
zach

zach

Member
Much better..

Only thing left to do is center the whole site, it's off to the left on my screen.
 
You must log in or register to reply here.
Top