Interlopers.net - Half-Life 2 News & Tutorials

by **krainert** on Thu Jun 18, 2009 1:53 pm

Blink wrote:I am looking at the right site.
Code: Select all
<body onload="Initialize()";> <div id="contact" onmouseover="Contact_Show()" onmouseout="Contact_Hide()">

Wow. I didn't even know that is an issue... How should it be done properly?

Blink wrote:And there are 21 <div> elements on the page, which seems wildy excessive.

Why? What does it mean in practise?

Blink wrote:You've even got a few empty ones.

I know, those are part of a work-around method for, well, making shit not look like shit; I need to use float for each map div (containing all of the screenies and stuff for each map) to let maps appear next to each other (two columns) - but at the same time I need the container div to expand downwards. Thus, I'm forced to use an empty clear:both div... So I've been told, at least

Please let me know if there's a better way to do this - I'm not too experienced in HTML/CSS.

Blink wrote:Personally I would find more semantic HTML to use but not everyone is as obsessive as me.

Explanation and examples, please

I don't think I'm following you.

by **Jasard** on Thu Jun 18, 2009 2:49 pm

Having learned a lot from Blink myself I'm quickly becoming as obsessive as him (and thats saying something! :wink:

).

Its really pays off in the long run to make your HTML as semantic as possible, else your going to come across problem after problem when it comes to browser compatibility. And really, its just good practice and people respect you more for it.

My prefered way of working is to write just the HTML first. No Javascript, no CSS, nothing. Try and make your site look they way it should with Styles turned off. So thats proper use of headers, lists where you have a list if things etc. This is a big step in having good markup. (You navigation would ideally be an unordered list http://phoenity.com/newtedge/horizontal_nav/)

Theres a good list of resources here -> viewtopic.php?f=28&t=27339

by **krainert** on Thu Jun 18, 2009 4:10 pm

I take it you're thinking of all the poor search engines that will crawl through my site?
In that case I don't think I have a problem; there are two possible things to list, menu items and maps, and both of the categories under which those fall are located within their own divs meaning that they are logically handled as elements on the same level... Or am I missing something?

About the layout without CSS:
http://www.ovrkll.com/private/v3/nocss.html
That looks fairly recognizable.

by **Blink** on Thu Jun 18, 2009 4:52 pm

zombie@computer wrote:well, if the definition of 'new fashion' is to put everything in jquery, id prefer the old fashion

Events should still be initiated from external files, regardless of whether jQuery or any other library is involved. It's called Unobtrusive Javascript.

jQuery just gets rid of the hassle

http://www.google.co.uk/search?hl=en&sa ... arch&meta=

OVRKLL, I wouldn't worry too much about the code to be honest. Being who I am I can't help pick out the smallest flaws but for the kind of site you're making it's probably not worth you stressing over.

However, a little float clearing tip to help you. Give the containing element the property overflow: auto and it'll wrap around the floated children once again. No need for pointless markup :smt023

by **krainert** on Thu Jun 18, 2009 6:17 pm

Okay, I'll stick with the code I have and skip some of the technical corrections... As you said, I don't need a 100 % idealistically coded site - I just need a working portfolio, and I have no wish of working with front-end web design other than this.
Now back to the more relevant issues... Thanks a lot for the float hint it took care of the problem.

A new thought: To add some written details to each map I'm considering introducing a little rectangular button to the right of the smaller screenshots for each map that will, when rolled over, trigger a description box appearing above the screenies. Comments?

Also, any other thoughts about the layout? I may start writing JS for the various elements soon (might need some help there - Blink!) so it'd be nice to get some input before doing the stuff that takes a lot of time to change.

by **vcool** on Thu Jun 18, 2009 8:34 pm

I have a tendency to place my cursor at the screenshot I am looking at. And it always annoys me when I am staring at a picture, and a second later a textbox pops up, obscuring the picture.

But that's just me, I don't actually know whether I am the only one with that habit.

by **krainert** on Thu Jun 18, 2009 9:12 pm

vcool wrote:I have a tendency to place my cursor at the screenshot I am looking at. And it always annoys me when I am staring at a picture, and a second later a textbox pops up, obscuring the picture.
But that's just me, I don't actually know whether I am the only one with that habit.

I think you naturally let the cursor follow your eyes... It won't matter here, though, as you'll need to use the cursor anyway - when held over a small screenshot, that shot will appear on top of the larger one. Also, each picture is a link to a full-scale one (if you really wanna see the details).

by **mat_de_b** on Thu Jun 18, 2009 10:23 pm

I would say make your bars flatter, your using gradiants which make everything look roundded, and in my head i never see a web page as round... your welcome to use bevels to fake depth but gradiants, if done wrong, look very childish and amateur.

And finally i would say use bold outlines around your objects and lighter colour, the template you drew came across as ordered and friendly due to tis obvious layout and simple colour base. I think thats what you should be going for

by **krainert** on Thu Jun 18, 2009 11:45 pm

mat_de_b wrote:I would say make your bars flatter, your using gradiants which make everything look roundded, and in my head i never see a web page as round... your welcome to use bevels to fake depth but gradiants, if done wrong, look very childish and amateur.

You're right, the gradient does look somewhat childish. Do you have any good examples of depth or another alternative? I like the current gradient, but I agree that it could surely be better.

mat_de_b wrote:And finally i would say use bold outlines around your objects and lighter colour, the template you drew came across as ordered and friendly due to tis obvious layout and simple colour base. I think thats what you should be going for

Actually, the colors are pretty much the same - except, obviously, for the screenshots which are rather dark (because I used just one for all screenie previews, and that one is extremely murky). I'll look into those borders... I generally prefer to use slim ones, but this might just be an exception. Perhaps a 4px teal/turquoise frame would do the trick...

Anyway, thanks, I have a lot of stuff to think through.

by **krainert** on Sat Aug 22, 2009 7:14 pm

I've done a lot of thinking and carried out some modifications so this is how the site looks at present:
http://www.ovrkll.com/v3/

What do you think? And yes, I kept the gradient deliberately; I may change it later, but I'm happy with it for now. Feel free to suggest alternatives, though.

EDIT:

Another quick note: I will make a new banner with the proper width once I get the last stand-alone map I'm working on finished. That'll also be when I get the final screenshots up.

Interlopers.net - Half-Life 2 News & Tutorials

Site Navigation

Suggestions regarding new website

Re: Suggestions regarding new website

Re: Suggestions regarding new website

Re: Suggestions regarding new website

Re: Suggestions regarding new website

Re: Suggestions regarding new website

Re: Suggestions regarding new website

Re: Suggestions regarding new website

Re: Suggestions regarding new website

Re: Suggestions regarding new website

Re: Suggestions regarding new website

Who is online