CSS positioning issue...

TouCHiNG_CLoTH · 05-01-2005, 10:21 AM

Hi everyone,

I was just wondering if anybody out there can help me with a problem I'm having with CSS positioning?
????: NamePros.com http://www.namepros.com/web-design-discussion/86714-css-positioning-issue.html

http://www.johnpaterson.org/test/index.html
http://www.johnpaterson.org/test/jpstyle1.css

Can anybody tell me why the light grey border at the bottom does not meet the rest of the site?

There is a big unwanted dark grey panel, this is not part of the website.

The site is just my experimentation with CSS positioning.

Cheers,
John

Brian · 05-01-2005, 02:42 PM

Code:

#textarea
{	
	height: 480px;
	width: 620px;
	background-color: #FFFFFF;
	position: relative;
	left: 100px;
	bottom: 480px;
}

problems arise with the 480px bottom, cause thats exactly how much space is between the two elements, don't have time to fiddle with it to get it working right now, cause i gotta go. Will take a shot at it when i get home, unless someone has already helped you out before then.

Rowan W · 05-01-2005, 06:21 PM

The links were pushing the content down. So how do you stop an element pushing another one? Float it over the top.

Code:

#links
{
	height: 480px;
	width: 100px;
	position: static;
	background-color: #CCCCCC;
float:left;
}

#textarea
{	
	height: 480px;
	width: 620px;
	background-color: #FFFFFF;
	position: relative;
	left: 100px;
}

I haven't checked this in IE yet so you'd better check.

TouCHiNG_CLoTH · 05-02-2005, 10:57 AM

Rowan, thanks very much for your input.

I figured out that the 'float: left; command was needed in the #links section. But that was not enough...

I had to include 'top: 0px;' in the #textarea section and I had to change the positioning of the links section from static to absolute in order for the page to work in both Firefox and IE5/6.

Thanks again Rowan, all is well now. Now to commence with my learning of CSS positioning..........well, after the snooker

Cheers,
J

df-sean · 05-03-2005, 06:16 PM

Just in case you don't already know about it. There are lots of insanely useful CSS tutorials here:
http://www.alistapart.com

Here's a nice one for CSS layout ideas:
http://www.alistapart.com/articles/practicalcss/

05-01-2005, 10:21 AM	THREAD STARTER #1 (permalink)
TouCHiNG_CLoTH New Member Join Date: Apr 2005 Location: Tyne & Wear, UK Posts: 8	CSS positioning issue... Hi everyone, I was just wondering if anybody out there can help me with a problem I'm having with CSS positioning? ????: NamePros.com http://www.namepros.com/web-design-discussion/86714-css-positioning-issue.html http://www.johnpaterson.org/test/index.html http://www.johnpaterson.org/test/jpstyle1.css Can anybody tell me why the light grey border at the bottom does not meet the rest of the site? There is a big unwanted dark grey panel, this is not part of the website. The site is just my experimentation with CSS positioning. Cheers, John __________________ Composer \| Sound Designer \| Producer http://www.johnpaterson.org

05-01-2005, 02:42 PM	#2 (permalink)
Brian Senior Member Join Date: Sep 2003 Location: Charlottesville Virginia Posts: 2,317 Follow @laughtodeath	Code: #textarea { height: 480px; width: 620px; background-color: #FFFFFF; position: relative; left: 100px; bottom: 480px; } problems arise with the 480px bottom, cause thats exactly how much space is between the two elements, don't have time to fiddle with it to get it working right now, cause i gotta go. Will take a shot at it when i get home, unless someone has already helped you out before then. __________________ Free Games Funny Jokes and Pictures

05-01-2005, 06:21 PM	#3 (permalink)
Rowan W NamePros Regular Join Date: Dec 2004 Location: QLD, Australia Posts: 713	The links were pushing the content down. So how do you stop an element pushing another one? Float it over the top. Code: #links { height: 480px; width: 100px; position: static; background-color: #CCCCCC; float:left; } #textarea { height: 480px; width: 620px; background-color: #FFFFFF; position: relative; left: 100px; } I haven't checked this in IE yet so you'd better check. __________________ Flash is bad for websites Why tables for layout is stupid IE IS BAD

05-02-2005, 10:57 AM	THREAD STARTER #4 (permalink)
TouCHiNG_CLoTH New Member Join Date: Apr 2005 Location: Tyne & Wear, UK Posts: 8	Rowan, thanks very much for your input. I figured out that the 'float: left; command was needed in the #links section. But that was not enough... I had to include 'top: 0px;' in the #textarea section and I had to change the positioning of the links section from static to absolute in order for the page to work in both Firefox and IE5/6. Thanks again Rowan, all is well now. Now to commence with my learning of CSS positioning..........well, after the snooker Cheers, J __________________ Composer \| Sound Designer \| Producer http://www.johnpaterson.org

05-03-2005, 06:16 PM	#5 (permalink)
df-sean NamePros Member Join Date: May 2005 Location: Osaka, Japan Posts: 37	Just in case you don't already know about it. There are lots of insanely useful CSS tutorials here: http://www.alistapart.com Here's a nice one for CSS layout ideas: http://www.alistapart.com/articles/practicalcss/ __________________ :::: ÂDataFly.Net Â:::: Rock-Solid Linux Web Hosting http://www.datafly.net

	NamePros Design Contests	Forum Sponsorship
	Join in on the FUN! You can start an affordable design contest and pick from entries talented members submit or you can enter a design contest for a chance to win CASH PRIZES! What are you waiting for? Get started in the fun TODAY! - Banners, Logos, Mascots, and MORE! (Please READ the design Contest section rules Prior to starting or entering a contest)

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Layout Issue In I.E. (figures)	XX7509	Web Design Discussion	3	03-25-2005 11:34 PM
div positioning + css + IE problem?	countcobolt	Programming	0	12-22-2004 06:55 AM
Mozilla/Firefox (css) width: 100%; issue.	FieroGT	Web Design Discussion	3	08-07-2004 12:06 AM
CSS positioning :(	gwx	Programming	6	12-30-2003 12:31 PM
CSS help please... positioning issue	ivcho	Programming	7	02-11-2003 03:23 PM