Aw, I don't have Xbox...

Congrats that it's done, though!

Now I push for a WiiWare version =p

Ok, thanks. I'll probably get Alien Hominid for GameCube, then, while I pray for Castle Crashers to be released in another format =p

At 8/25/08 11:06 PM, Noodleboy111 wrote: I think the real question is why Link's hair is pink.

I second that.

Cursor * 10? That game rocked, was fun, and I beat it. Not that hard.

Epsilon was challenging, as well as Portal: The Flash Version.

Forgot to mention, though, that it is a great game, one of my favorites.

Newgrounds needs an edit button. At the very least, not blocking "double-posting" would help alot...

I never beat that game. I got to the final boss and now I can't beat it. I got the Ark summon, I think...maybe? Idk. I just know I'm stuck at the final boss.

I'd go for some Switchfoot, because they're my favorite band. Probably better than that, though, is Kutless--their song "The Feeling" would be so much fun on Rock Band.

What are you talking about? I remember Bongo Bongo.

I could forget the first boss on Oracle of Seasons, GBA. It was a small dragon with no name, and took like two hits to kill.

I have two questions.

First--what's the difference between Alien Hominid for GameCube and Alien Hominid HD for X-box Live Arcade? I mean, is it the same game with different online functionality or not? Also, do you recommend buying Alien Hominid for GameCube? Is it worth it?

Second--since Alien Hominid is available to buy in both X-box Live Arcade and in regular disc format, do you think Castle Crashers will be converted to play on other consoles? Specifically, a Wii game (either disc or WiiWare)?

Sounds good. I've moved away from flash since I made my last game (Legend of Newgrounds). Besides, I need practice.

If I get a few hours free, I'll come up with something to battle about ;)

Sorry, I forgot I posted that in another thread.

Anyways, I fixed it. I don't see anything wrong with my div structure (unless "awesome-looking" is bad div structure).

I just made a new div with the same background as content and used relative positioning to fill the gap.

Ah, the smell of victory!

Thanks for trying to help, sorry I wasn't able to explain enough of what I wanted.

-_-

I've already explained this--I did that, and it made another "gap" below the footer. Plus, if I did that, I would not be able to achieve the effect I was going for (drop shadow)

The reason I can't use background-color is that the div I'm putting the background on is 800px wide, and I want it to only be a 200px background.

Here, I'll post a picture of the problem, then...

The sidebar only stretches to fit the content of itself. I want it to stretch to match the height of the content. I was told to add a 200px wide background image to the wrapper (which wraps both the sidebar and content) with repeat-y. However, when I did this, the sidebar stretched too far down.

Look in the image. The problem is that the wrapper is stretching too far, presumably because of my negative margin on my content div. The wrapper is stretching to fit the entire content div (and is not counting the -25px margin...so it's stretching 25px too far).

If that's not enough for you to understand my problem, then I am incapable of explaining it to you.

Dude, I posted the image...it's the 1 pixel tall gray line. Just copy the code into a notepad file and save as an HTML, and either make the gray image yourself or download it here (reposting at the bottom of this post--it's almost impossible to see, because it's so tiny) and change the code from "bg_gray.png" to "bg_gray.jpg" (because Newgrounds won't let me upload it as a .png).

Seriously, it shouldn't be this hard to get help. I posted everything that's needed...

I can't figure it out :(

If you won't or can't answer the question, can you direct me to a programming forum that's a bid more active? =p

When I post in the Flash forum I have like 500 replies within 20 minutes XD

Anyone know a good site?

-_-

You got my hopes up >_>

My gosh, this forum is SLOW!

Here's the image as a .jpeg. Either change the code or convert it to .png...

Oops, the picture is the wrong file type.

It's just a 200 wide, 1 tall image that's all gray (#333333) to tile (to make it look like the background of #sidebar)

Moved to a new thread, just because the current question is so different from the original...

http://www.newgrounds.com/bbs/topic/9557 05

I'm working on a two-column CSS website. I want to make a nice effect of overlapping boxes, but I can't get one thing to work.

First, here's all the code needed:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>
<style type="text/css">
body {
	background-color: #FFFFFF;
	color: #333333;
	font-family: Arial;
	font-size: 1em;
	text-align: center;
	margin-top: 0px;
}
#wrapper {
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	
	background-image: url(bg_gray.png);
	background-repeat: repeat-y;
}
#header {
	margin-left: auto;
	margin-right: auto;
	background-color: #CCCCCC;
	
	height: 50px;
	width: 700px;
	
	position: relative;
	right: 50px;
}
#sidebar {
	position: absolute;
	
	width: 200px;
	background-color: #333333;
	color: #CCCCCC;
}
*:first-child+html #sidebar {	/* IE7 */
	position: absolute;
	
	width: 200px;
	margin-left: -100px;
	background-color: #2a2a2a;
	color: #CCCCCC;
}
#content {
	background-color: #999999;
	
	position: relative;
	width: 600px;
	left: 200px;
	top: -25px;
}
*:first-child+html #content {	/* IE7 */
	background-color: #999999;
	
	position: relative;
	width: 600px;
	left: 100px;
	top: -25px;
}
#footer {		
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	
	font-size: .75em;
	color: #999999;
}
</style>
</head>

<body>

<div id="wrapper">

<div id="header">
Header
</div>

<div id="sidebar">
Sidebar<br />
Sidebar<br />
Sidebar<br />
Sidebar<br />
Sidebar<br />
Sidebar<br />
Sidebar<br />
Sidebar<br />
Sidebar<br />
Sidebar<br />
</div>

<div id="content">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
</div>

</div>

<div id="footer">
Footer
</div>

</body>
</html>

Put that in a text file and save it as an HTML document to view it. The picture used in the CSS is the one at the bottom of my post--save that in the same location as the HTML.

Alright, now open it up and look at the file. See the problem? The sidebar stretches too far. When I used borders to determine what the problem was, I saw that #wrapper was stretching too far. 25px too far.

I assume it's simply stretching too far because of the negative margins of the content (it's stretching to accommodate the entire #content div, but it only needs to stretch to accommodate #content's height minus the 25px negative margin).

Any thoughts on how I can fix this?

I just used a table to stretch it out. People said I was using tables incorrectly and being "n00bish" for using tables in the layout. But it's the only way I can find to make this work on all browsers with no problems.

It works perfectly with a table.

-_-

I did what the guy above said. He said to tile a background image to make the sidebar appear to stretch out. That's what bg_gray is. The other ones are single-pixel images so I could use transparencies--just change it to colors.

All I want to know is why one div (wrapper) stretches farther than the two contained divs (sidebar and content) and how to prevent it. The images don't matter. All that matters is that wrapper is stretching 25px too much, causing an ugly blank spot.

>_>

I'll just fix it myself. There's only one image in the HTML, and it's just a banner--not to mention that it's nowhere near the problem. The other images are one-pixel images that I already explained.

Seriously, copy and paste into Notepad and save as HTML...

I don't have my own server/space, but I can give you the code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Website</title>
<link href="scripts/css.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div id="header">
<!--It's 50px high->
<img src="images/logo.png" />
</div>

<div id="wrapper">

<div id="sidebar">
test<br />
test<br />
test<br />
test<br />
test<br />
</div>

<div id="content">
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
</div>

</div>

<div id="footer">
<br /><br />
Copyright (C) 2008.  All Rights Reserved.<br />
Site created by Luke.
</div>

</body>
</html>

And the CSS:

body {
	background-color: #FFFFFF;
	color: #333333;
	font-family: Arial;
	font-size: 1em;
	text-align: center;
	margin-top: 0px;
}

#wrapper {
	margin-left: auto;
	margin-right: auto;
	
	width: 800px;
	
	background-image: url(../images/bg_gray.png);
	background-repeat: repeat-y;
}

/* Header + IE hacks */
#header {						/* Not IE */
	margin-left: auto;
	margin-right: auto;
	background-image: url(../images/bg_60.png);
	
	height: 50px;
	width: 700px;
	
	position: relative;
	right: 50px;
}
* html #header {				/* IE6 and below */
	margin-left: auto;
	margin-right: auto;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg_60.png", sizingMethod="scale");
	
	height: 50px;
	width: 700px;
	
	position: relative;
	right: 50px;
}

/* Sidebar + IE hacks */
#sidebar {						/* Not IE */
	position: absolute;
	
	width: 200px;
	background-color: #CCCCCC;
}
*:first-child+html #sidebar {	/* IE7 */
	position: absolute;
	
	width: 200px;
	margin-left: -100px;
	background-color: #CCCCCC;
}

/* Content + IE hacks */
#content {						/* Not IE */
	background-image: url(../images/bg_80.png);
	
	position: relative;
	width: 600px;
	left: 200px;
	top: -25px;
}
*:first-child+html #content {	/* IE7 */
	background-image: url(../images/bg_80.png);
	
	position: relative;
	width: 600px;
	left: 100px;
	top: -25px;
}
* html #content {				/* IE 6 and below */
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/bg_80.png", sizingMethod="scale");
	
	position: relative;
	width: 600px;
	left: 100px;
	top: -25px;
}

#footer {
	background-color: #FFFFFF;
		
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: -25px;
	width: 800px;
	
	font-size: .75em;
	color: #999999;
}

Again, bg_80 and similar filenames are semi-transparent images (80 = 80% opacity, etc)

New question. I'm trying to stretch the left column.

I re-arranged everything to use a tiled background image in #wrapper. It works fine, but because of a "top: -25px;" on my #content, this is leaving an ugly blank spot on the right and the background image is being tiled too many times on the left (25px too much, to be exact).

When I used borders to test it, I found out that the wrapper stretched to accommodate the #content (without the 25px negative margin of #content), making it 25px too tall. Borders also showed me that the #content div didn't contain the blank--it was only in #wrapper.

How can I fix this? I tried moving the footer up by using a -25px margin and adding background-color: #FFFFFF; to it, but that caused a blank to be below that.

Curse IE. Can't people just realize it's terrible and start using Safari? That would make my life infinitely easier >_>

Okay. I changed it to em units.

I can't bring myself to go less than 800 pixels for the wrapper. It's just too small otherwise. If people don't want the horizontal scrollbar, they can get a bigger screen -_-

Thanks! I changed it to position:relative and used "left" instead of "margin-left," etc. It works fine now.

I don't want to use tables to stretch the div, because I got in trouble when I used tables for layouts (people said that it was bad and not to do it). So, how can I stretch the div to the right size? Nesting the content inside of it doesn't work (it messes up the CSS layout because of positioning).

Oh, also...

When I add several lines to "content," the sidebar does not match the height of it. How can I make it the right height based on how tall the "content" div is?

I'm trying to make a nice effect using transparent backgrounds for divs and overlapping them using negative margins. It looks fine in Safari and Firefox, but Internet Explorer won't work.

My only guess is that IE doesn't support negative margins. I looked it up on Google and found something (a supposed "fix" for it) but it didn't work.

Here's my CSS:

body {
	background-color: #FFFFFF;
	color: #333333;
	font-family: Arial;
	font-size: 16px;
	text-align: center;
	margin-top: 0px;
}

#wrapper {
	margin-left: auto;
	margin-right: auto;	
	width: 800px;
}

#header {
	background-image: url(../images/bg_40.png);
	height: 50px;
	margin-left: -50px;
}

#sidebar {
	position: absolute;
	width: 200px;
	margin-left: -50px;
	background-color: #CCCCCC;
}

#content {
	background-image: url(../images/bg_60.png);
	
	width: 700px;
	margin-left: 150px;
	margin-top: -25px;
}

#footer {
	width: 900px;
	margin-left: -50px;
	margin-right: -50px;
	
	font-size: 12px;
	color: #999999;
}

(bg_40 is a background at 40% opacity, bg_60 is the same background at 60%)

And my HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Website</title>
<link href="scripts/css.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div id="wrapper">

<div id="header">
<img src="images/logo.png" />
</div>

<div id="sidebar">
[content]
</div>

<div id="content">
[content]
</div>

<div id="footer">
Copyright (C) 2008.  All Rights Reserved.<br />
Site created by Luke Godfrey.
</div>

</div>

</body>
</html>

How can I work around the glitch? Should I change the whole code and use another method, or is there a "CSS Hack" or something I can use?