Coding Error

Everything todo with programming goes HERE.
Post Reply
User avatar
Ritsuka
Round Winner
Posts: 379
Joined: Sun Sep 26, 2010 6:49 am

Coding Error

Post by Ritsuka »

A friend of mine is currently trying to set up a new home page for our guild on Ragnarok Online 2 / Final Fantasy 14, and he's mucked up the coding a bit. I'm not really well versed in such things, but I know for a fact that Armagetron is home to quite a few extremely talented coders. Sooooo, yeah. Help pls!


http://beta.collision-guild.com/

User avatar
Light
Reverse Outside Corner Grinder
Posts: 1664
Joined: Thu Oct 20, 2011 2:11 pm

Re: Coding Error

Post by Light »

I don't see any errors, so would you like to give a little more information?

User avatar
Ritsuka
Round Winner
Posts: 379
Joined: Sun Sep 26, 2010 6:49 am

Re: Coding Error

Post by Ritsuka »

I suppose I worded that incorrectly. It's not so much an error as a placement issue. The Final Fantasy image overlaps the Ragnarok one, when the intention was for them to be equally sized and separated at the middle. We're perfectly aware of what this issue is, we just lack the experience to pinpoint the source and fix it. We're designers, not programmers. Such is our downfall. :(

Thanks for the response, I hope this helps.

User avatar
Light
Reverse Outside Corner Grinder
Posts: 1664
Joined: Thu Oct 20, 2011 2:11 pm

Re: Coding Error

Post by Light »

The reasons it's overlapping is because you have an absolute position set on two divs with a width of 1075 px. That means your resolution would need a width of 2150 px to view it correctly. If you have a larger display, you could stick your browser maximized and see parts of them covering each other.

So, I used an absolute position setting left of 50% to the two on the right and a max-height of 100% so it doesn't run off the screen. Put it inside a div and centered that just so it didn't look so dumb left-justified.

Also, I couldn't help but fix the horrid code formatting. And some of it was just plain wrong like your links, even though they would work on most browsers.

So, here's a demo so you can tell me if I got what you were wanting or not:
http://lightron.tk/Ritsuka/

And here's the source:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Untitled Document</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			html, body
			{
				margin: 0px;
				background-color: #000;
			}
			
			#wrapper
			{
				margin: 0px auto;
			}
			
			img.bottom, img.top
			{
				max-height: 100%;
				
				width: 50%;
				position: absolute;
				
				-webkit-transition: opacity 1s ease-in-out;
				-moz-transition: opacity 1s ease-in-out;
				-o-transition: opacity 1s ease-in-out;
				transition: opacity 1s ease-in-out;
			}
			
			#ro2 img
			{
				left: 0px;
			}
			
			#xiv img
			{
				left: 50%;
			}
			
			img.top:hover
			{
				opacity: 0;
			}
		</style>
	</head>
	
	<body>
		<div id="wrapper">
			<div id="container1">
				<div id="ro2">
					<a href="http://forums.collision-guild.com">
						<img class="bottom" src="http://www.beta.collision-guild.com/GFX/RO2_over.jpg" />
						<img class="top" src="http://www.beta.collision-guild.com/GFX/RO2.jpg" />
					</a>
				</div>
			</div>
			<div id="container2">
				<div id="xiv">
					<a href="http://ffxiv.collision-guild.com">
						<img class="bottom" src="http://www.beta.collision-guild.com/GFX/XIV_over.jpg" />
						<img class="top" src="http://www.beta.collision-guild.com/GFX/XIV.jpg" />
					</a>
				</div>
			</div>
		</div>
	</body>
</html>

User avatar
LOVER$BOY
Match Winner
Posts: 725
Joined: Thu Jan 24, 2008 12:46 pm
Contact:

Re: Coding Error

Post by LOVER$BOY »

You know its easier to store these styles in a css format file and link onto your site header right?
Image

User avatar
Light
Reverse Outside Corner Grinder
Posts: 1664
Joined: Thu Oct 20, 2011 2:11 pm

Re: Coding Error

Post by Light »

LOVER$BOY wrote:You know its easier to store these styles in a css format file and link onto your site header right?
It's how he was setting it up, so I didn't bother to change it. I always keep scripts and styles separate from the page source. I couldn't help but add some formatting though. That drives me mad.

User avatar
LOVER$BOY
Match Winner
Posts: 725
Joined: Thu Jan 24, 2008 12:46 pm
Contact:

Re: Coding Error

Post by LOVER$BOY »

Light wrote:
LOVER$BOY wrote:You know its easier to store these styles in a css format file and link onto your site header right?
It's how he was setting it up, so I didn't bother to change it. I always keep scripts and styles separate from the page source. I couldn't help but add some formatting though. That drives me mad.
Ya I understand and I feel sometimes like that too :)
Image

User avatar
Light
Reverse Outside Corner Grinder
Posts: 1664
Joined: Thu Oct 20, 2011 2:11 pm

Re: Coding Error

Post by Light »

LOVER$BOY wrote:Ya I understand and I feel sometimes like that too :)
lol At this point, I just wonder if I understood what they wanted. No response and it going unused makes me think they either forgot about it, didn't bother to copy/paste, or waiting for some help on what they thought they were asking. Wouldn't be the first time I completely misunderstood what someone wanted in coding. :P

User avatar
LOVER$BOY
Match Winner
Posts: 725
Joined: Thu Jan 24, 2008 12:46 pm
Contact:

Re: Coding Error

Post by LOVER$BOY »

Oh I'm sure you are onto the point but maybe the person is just busy to come on to check. That's "normal" since I am busy myself and didn't come on during the weekend to check my mails or online stuff.
Image

Post Reply