Jump to content

Interface that changes based on resolution?


LifeInBinary

Recommended Posts

(Don't know if this might need to be in JavaScript forums instead - Moderators feel free to move this if need be).Hey guys, I haven't had to be on here for a while - but I came across a website that was fantastically interfaced. Please check this out for reference:http://www.onrpg.com/Notice how when you restore the page, not only does the ad box at the top change, but also the "Select a Game" box below the banner, and best of all - the image in the banner itself tiles to fit whatever resolution it's being viewed at, even when it is merely restored. Play around with it a little and you will see what I'm talking about.How in the world can I do that?Also, I'm having a problem with something entirely unrelated that I will post pretty soon so check back in the HTML forums. It involves frames and nav buttons.Thanks for all your help guys - This has been a fantastic community for web design - and I appreciate all the helping hands I have received.LifeInBinary.

Link to comment
Share on other sites

regarding the imageThey use a mixture of a background image, which is the bit that 'stretches'. Its a repeated pattern thats a background behind the other images you see. They are in seperate table row thingy's.It looks like they use that program i cant remember the name of..its related to ipb forum software. Speaking of which, their forum is horrible. They haven;t touched on the colours and stuff at all. MKportal, thats the one! Looks like they've used that to create the website.The following code is how they do the 'stretchy' image.

<table border="0" width="100%" cellspacing="0" cellpadding="0" style="background-image: url(/system/design/img/top_pic_bg.jpg); background-position: top; background-repeat: repeat-x;">	<tr>		<td width="306"	rowspan="2"><img src="/system/design/img/top_pic1.jpg" width="308" height="135" alt="" border="0"></td>		<td valign="top"width="89"><img src="/system/design/img/top_pic2.jpg" width="342" height="105" alt="" border="0"></td>		<td width="100%" align="right" valign="top"><img src="/system/design/img/top_pic3.jpg" width="90" height="105" alt="Free MMORPG" border="0"></td>	</tr>

Link to comment
Share on other sites

regarding the image
Thanks for that - I guess I'll toy around with it a little when I'm ready.Speaking of the banner, I have Macromedia Fireworks and I think I'm doing pretty good with designing my own graphics - buttons, website layout, banners... - but I can't figure out how to do more realistic and complicated graphics such as the banner on that RPG site I was talking about. I don't know if you would have any knowledge of graphics, as this IS an HTML forum - but I thought it was worth a shot.Also, I'm wanting to make graphics such as used in Diablo II, StarCraft, Command & Conquer, Age of Empires - don't know if you're familiar with that, but you could check out some screen shots if you want - They are all examples of isometric 3D graphics used in games. I want to be able to design a world for a video game - not worried about all the programming yet and characters - just want to design a level that you could "walk" through - and I have no idea where to start or what to Google for. Any help with that would be awesome.But learning how to do the graphics on that RPG banner is like first place in what I want to do right now - so I can improve my own website asthetics.Thanks again for all the help, (nice site by the way)LifeInBinary.
Link to comment
Share on other sites

(nice site by the way)
thanks :)Regarding images and such, just practise, do a search for "photoshop tutorials", you'll come up with some cool stuff. Go through any tutorials you like, and see what you can do, experiment with things. Thats how i've learnt almost everything to do with web design and images.I suppose you could try to copy some stuff you've seen in like Command & Conquer, Age of Empires etc.. See if you can create similiar effects to what they did, and maybe change a few things, make it different, put your kinda style on things.:)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...