Programming Forums > Web Development and Design > HTML / XHTML / CSS

brokenhope · Dec 18th, 2006, 11:53 PM

Alright, this is a really important question, and I really need help, Ive been stumped for awhile.

What I need is to have the "map" div somewhere, and in it have several other divs, but each of the divs within needs to have a relative position starting at 0; thats the only real way my MMORPG can be browser compadible, because otherwise I will have to caculate exact measurements of where the map displays (for position absolute), and that wont be constant.

I have the image of the map floated, because anytime I tried to add a div everythings relative position matched it, so I had to just float the image, adding the image as a background-image attribute to map was a failure because the image file is updated constantly (via php and gd) and the background would be cached.

Anyways heres what I have:

(Toggle Plain Text)

<style type="text/css">
#map {
	float: left;
	width: 512px;
	height: 384px;
	border: 1px solid;
	border-color: #000;
	margin-right: 3px;
}

#dispobj {
	position: relative;
	width: 16px;
	height: 16px;
	top: 0px;
	left: 0px;
	background-image: url('tiles/littleroot/sign.jpg');
	border: 1px solid;
	border-color: #FFF;
}
</style>

<div id="map" name="map">
	<img src="map.jpg" style="float: left;">
	<div style="float: left; position: relative; top: 32px; left: 32px;"><img src="trainerimgs/lady_small.gif"></div>
	<div class="dispobj" id="dispobj" name="dispobj"></div>
</div>

dispobj did display perfectly fine until I added in the div containing the image, then that div and dispobj div's relative position moved to below the map. What can I do? Absolute positioning is what I REALLY want to stay away from.

titaniumdecoy · Dec 19th, 2006, 12:17 AM

I cannot comprehend exactly what your problem is. Posting a before and after image of what you are trying to accomplish would definitely help.

From what I understand, it sounds like you are trying to align objects in a certain way, perhaps in a grid. If this is a case, you should use an HTML <table>.

Arevos · Dec 19th, 2006, 2:27 AM

It may be that he wants to display certain images on top of other images, and relative positioning doesn't inherently allow overlaps. I wonder; what happens if you float your #dispobj?

brokenhope · Dec 19th, 2006, 4:43 PM

Sorry, I know my explanation was really confusing. What im trying to accomplish is have the map image layered [at the bottom layer] at relative position 0, 0 within the map div. Then each div layer ontop of the map, I want to be able to position with the top and left values from the top and left within the map div, not from the page, and not relative to the object before it. A table would be too much loading, too much for the browser to download [and actually wouldnt even work, as some tiles are bigger than others].

Absolute positioning is sort of what I want, except I want the absoluteness to start at the top left corner of the map div, not of the page.

(Toggle Plain Text)

<div class="map">
  <div style="position: ??; top: 16px; left: 16px;"></div>
  <div style="position: ??; top: 17px; left: 16px;"></div>
  <div style="position: ??; top: 25px; left: 15px"></div>
</div>

Something of that effect, where each of those divs would position absolute, within the div "map", not of the page (since the div will display at diffrent places)... javascript calculation is something I dont want, position absolute and manually adding in a number to compensate for the maps offset on the page is also something I dont want.

DaWei · Dec 19th, 2006, 6:32 PM

Absolute positioning is not always relative to the page. If the enclosing container is positioned relative, the enclosed container, if positioned absolute, will be absolute with respect to the enclosing container. Sounds sort of confusing, I know.

Here is some sample code. The page div has relative positioning so that absolute positioning will be relative to it. The menuContainer div is positioned relative for the same reason. The menu, a contained list, is positioned only with padding. The menu shadow, a div, is positioned absolute. The positioning is relative to the enclosing menu container (which is positioned inside the page div only by margin). The shadow is z-indexed below the page so that text is above it. The menu is z-indexed above the page. Text wraps around the menu container because the container is floated left. Its width is fixed, so that the shadow, though contained, can extend beyond it, to the right, into the text.

I don't know if this will be of any help, I just thought I'd toss it out here. Bear in mind that IE has box dimensioning problems in that margin/padding numbers don't accumulate properly. It also has problems with determining the correct enclosing container. I didn't have to hack that in this particular instance, but sometimes it's necessary. It did give me problems with the shadow matching the menu when an item in the menu expands.

Forgive the large tabs. I just copied and pasted portions of this into Wordpad; should have used another editor.

You can see this at either of the Contributor's Corner links in my signature.

(Toggle Plain Text)

<body>
<div class="page">
	***********************************
	The page css, for reference, not actually present in this spot.
	.page
	{
		margin: 2em;
		background-image: url(../images/paper.jpg);
		border: 1px outset #000000;
		padding: 2em;
		position: relative;  Because this is relative, an internal absolutely positioned container will be relative to this
	}
	************************************
	<div class="masthead" id="masthead"> Only positioning for this is via padding
		...stuff here...
	</div>
	<div class="leadin" id="leadin"> Only positioning for this is via padding
		...stuff here...
	</div>
	<div class="intro" id="intro"> Only positioning for this is via padding
		...stuff here...
	</div>
	<br/>
	<div class="menuContainer" id="mc">
		***********************************
		menuContainer css, for reference
		.menuContainer
		{
			background-color: #ffffee;
			color: #000000;
			border: 1px outset #000000;
			width: 15em;
			position: relative;  Because this is relative, an internal absolutely positioned container will be relative to this
			float: left;
			margin: 0px 10px 0px 0px;
			z-index: 2;
		}
		****************************************
		<ul class="menu"><center>Contents</center>
			****************************
			menu CSS
			.menu
			{
				list-style-position: inside;
				list-style-type: none;
				background-color: #ffffee;
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: smaller;
				line-height: 1.75;
				font-weight: bold;
				margin: 0px;
				padding: 10px;
				z-index: 2;
				Not positioned, therefore at 0, 0 in the menu container, plus the padding
			}
			************************************			
			<hr style="padding: 0px; margin: 0px; border: 1px solid #888888; width: 100%;"/>
			<li class="item">
				<a href="pointers.php?page=0-0" style="color: #888888;">What is a pointer?</a>
			</li>
			...more stuff here...
		</ul> <!-- end of the menu -->
		<div class="shadow">
			******************************
			shadow CSS, for reference
			.shadow
			{
				position: absolute;  Absolute with respect to the enclosing container, the menu container
				top: 15px;
				left: 15px;
				background-color: #000000;
				border: 1px inset #000000;
				width: 15em;
				opacity: .5; 
				filter: alpha(opacity=50);
				z-index: -1;
			}
			*******************************
			<ul class="shadowmenu">Contents
				<hr style="padding: 0px; margin: 0px; border: 1px solid #000000; width: 100%;"/>
				<li class="item" id="0-0">
					<a href="#">&nbsp;</a>
				</li>
				...more stuff here...
			</ul>
		</div> <!-- end of the shadow -->
	</div> <! end of the menu container -->
	<div class="section"><strong class="sectionhead">What is a pointer?</strong><p>
		A pointer is a programming language datatype whose value is used to  
		...more content....
	</div>
	...more content.....
</div> <!-- end of the page -->
</body>

<body>
<div class="page">
	***********************************
	The page css, for reference, not actually present in this spot.
	.page
	{
		margin: 2em;
		background-image: url(../images/paper.jpg);
		border: 1px outset #000000;
		padding: 2em;
		position: relative;  Because this is relative, an internal absolutely positioned container will be relative to this
	}
	************************************
	<div class="masthead" id="masthead"> Only positioning for this is via padding
		...stuff here...
	</div>
	<div class="leadin" id="leadin"> Only positioning for this is via padding
		...stuff here...
	</div>
	<div class="intro" id="intro"> Only positioning for this is via padding
		...stuff here...
	</div>
	<br/>
	<div class="menuContainer" id="mc">
		***********************************
		menuContainer css, for reference
		.menuContainer
		{
			background-color: #ffffee;
			color: #000000;
			border: 1px outset #000000;
			width: 15em;
			position: relative;  Because this is relative, an internal absolutely positioned container will be relative to this
			float: left;
			margin: 0px 10px 0px 0px;
			z-index: 2;
		}
		****************************************
		<ul class="menu"><center>Contents</center>
			****************************
			menu CSS
			.menu
			{
				list-style-position: inside;
				list-style-type: none;
				background-color: #ffffee;
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: smaller;
				line-height: 1.75;
				font-weight: bold;
				margin: 0px;
				padding: 10px;
				z-index: 2;
				Not positioned, therefore at 0, 0 in the menu container, plus the padding
			}
			************************************			
			<hr style="padding: 0px; margin: 0px; border: 1px solid #888888; width: 100%;"/>
			<li class="item">
				<a href="pointers.php?page=0-0" style="color: #888888;">What is a pointer?</a>
			</li>
			...more stuff here...
		</ul> <!-- end of the menu -->
		<div class="shadow">
			******************************
			shadow CSS, for reference
			.shadow
			{
				position: absolute;  Absolute with respect to the enclosing container, the menu container
				top: 15px;
				left: 15px;
				background-color: #000000;
				border: 1px inset #000000;
				width: 15em;
				opacity: .5; 
				filter: alpha(opacity=50);
				z-index: -1;
			}
			*******************************
			<ul class="shadowmenu">Contents
				<hr style="padding: 0px; margin: 0px; border: 1px solid #000000; width: 100%;"/>
				<li class="item" id="0-0">
					<a href="#">&nbsp;</a>
				</li>
				...more stuff here...
			</ul>
		</div> <!-- end of the shadow -->
	</div> <! end of the menu container -->
	<div class="section"><strong class="sectionhead">What is a pointer?</strong><p>
		A pointer is a programming language datatype whose value is used to  
		...more content....
	</div>
	...more content.....
</div> <!-- end of the page -->
</body>

brokenhope · Dec 19th, 2006, 6:45 PM

Thank you! Problem solved!

titaniumdecoy · Dec 19th, 2006, 8:34 PM

Quote:

Originally Posted by brokenhope

A table would be too much loading, too much for the browser to download

Somehow, I doubt that would be a problem. But since a table won't work for you for other reasons, I'm glad you found an answer to your question.

DaWei · Dec 19th, 2006, 9:43 PM

It is entirely possible to make a table with tiny cell sizes and adjust it accordingly by combining certain numbers of columns and rows. There was a time when it was the only reasonable solution. Those days are gone. Tables are not evil, but they should be use to present tabular material. Don't tune your carburetor by enlarging the jet with chewing gum. It may work, but it's schlocky , unprofessional, and subject to unanticipated failures.

brokenhope · Dec 21st, 2006, 7:38 AM

Yeah, but what im saying is my map is 32 x 24, so multiply that, and thats the amount of TD's generated minimaly. Now each TD call will include a class name too, so thats about 15 bytes each sent to the browser, now multiply 15 bytes x 24 x 32... way more than some simple divs. Plus if any tile were to be bigger than 16 x 16 [which currently half the tiles are], tables would completely not work.

Dec 18th, 2006, 11:53 PM	#1
brokenhope Hobbyist Programmer Join Date: Apr 2005 Posts: 126 Rep Power: 4	CSS Div Question Alright, this is a really important question, and I really need help, Ive been stumped for awhile. What I need is to have the "map" div somewhere, and in it have several other divs, but each of the divs within needs to have a relative position starting at 0; thats the only real way my MMORPG can be browser compadible, because otherwise I will have to caculate exact measurements of where the map displays (for position absolute), and that wont be constant. I have the image of the map floated, because anytime I tried to add a div everythings relative position matched it, so I had to just float the image, adding the image as a background-image attribute to map was a failure because the image file is updated constantly (via php and gd) and the background would be cached. Anyways heres what I have: (Toggle Plain Text) <style type="text/css"> #map { float: left; width: 512px; height: 384px; border: 1px solid; border-color: #000; margin-right: 3px; } #dispobj { position: relative; width: 16px; height: 16px; top: 0px; left: 0px; background-image: url('tiles/littleroot/sign.jpg'); border: 1px solid; border-color: #FFF; } </style> <div id="map" name="map"> <img src="map.jpg" style="float: left;"> <div style="float: left; position: relative; top: 32px; left: 32px;"><img src="trainerimgs/lady_small.gif"></div> <div class="dispobj" id="dispobj" name="dispobj"></div> </div> <style type="text/css"> #map { float: left; width: 512px; height: 384px; border: 1px solid; border-color: #000; margin-right: 3px; } #dispobj { position: relative; width: 16px; height: 16px; top: 0px; left: 0px; background-image: url('tiles/littleroot/sign.jpg'); border: 1px solid; border-color: #FFF; } </style> <div id="map" name="map"> <img src="map.jpg" style="float: left;"> <div style="float: left; position: relative; top: 32px; left: 32px;"><img src="trainerimgs/lady_small.gif"></div> <div class="dispobj" id="dispobj" name="dispobj"></div> </div> dispobj did display perfectly fine until I added in the div containing the image, then that div and dispobj div's relative position moved to below the map. What can I do? Absolute positioning is what I REALLY want to stay away from.

Dec 19th, 2006, 4:43 PM	#4
brokenhope Hobbyist Programmer Join Date: Apr 2005 Posts: 126 Rep Power: 4	Sorry, I know my explanation was really confusing. What im trying to accomplish is have the map image layered [at the bottom layer] at relative position 0, 0 within the map div. Then each div layer ontop of the map, I want to be able to position with the top and left values from the top and left within the map div, not from the page, and not relative to the object before it. A table would be too much loading, too much for the browser to download [and actually wouldnt even work, as some tiles are bigger than others]. Absolute positioning is sort of what I want, except I want the absoluteness to start at the top left corner of the map div, not of the page. (Toggle Plain Text) <div class="map"> <div style="position: ??; top: 16px; left: 16px;"></div> <div style="position: ??; top: 17px; left: 16px;"></div> <div style="position: ??; top: 25px; left: 15px"></div> </div> <div class="map"> <div style="position: ??; top: 16px; left: 16px;"></div> <div style="position: ??; top: 17px; left: 16px;"></div> <div style="position: ??; top: 25px; left: 15px"></div> </div> Something of that effect, where each of those divs would position absolute, within the div "map", not of the page (since the div will display at diffrent places)... javascript calculation is something I dont want, position absolute and manually adding in a number to compensate for the maps offset on the page is also something I dont want.

Dec 19th, 2006, 6:32 PM	#5
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Absolute positioning is not always relative to the page. If the enclosing container is positioned relative, the enclosed container, if positioned absolute, will be absolute with respect to the enclosing container. Sounds sort of confusing, I know. Here is some sample code. The page div has relative positioning so that absolute positioning will be relative to it. The menuContainer div is positioned relative for the same reason. The menu, a contained list, is positioned only with padding. The menu shadow, a div, is positioned absolute. The positioning is relative to the enclosing menu container (which is positioned inside the page div only by margin). The shadow is z-indexed below the page so that text is above it. The menu is z-indexed above the page. Text wraps around the menu container because the container is floated left. Its width is fixed, so that the shadow, though contained, can extend beyond it, to the right, into the text. I don't know if this will be of any help, I just thought I'd toss it out here. Bear in mind that IE has box dimensioning problems in that margin/padding numbers don't accumulate properly. It also has problems with determining the correct enclosing container. I didn't have to hack that in this particular instance, but sometimes it's necessary. It did give me problems with the shadow matching the menu when an item in the menu expands. Forgive the large tabs. I just copied and pasted portions of this into Wordpad; should have used another editor. You can see this at either of the Contributor's Corner links in my signature. (Toggle Plain Text) <body> <div class="page"> ********************************* The page css, for reference, not actually present in this spot. .page { margin: 2em; background-image: url(../images/paper.jpg); border: 1px outset #000000; padding: 2em; position: relative; Because this is relative, an internal absolutely positioned container will be relative to this } ******************************** <div class="masthead" id="masthead"> Only positioning for this is via padding ...stuff here... </div> <div class="leadin" id="leadin"> Only positioning for this is via padding ...stuff here... </div> <div class="intro" id="intro"> Only positioning for this is via padding ...stuff here... </div> <br/> <div class="menuContainer" id="mc"> ******************************* menuContainer css, for reference .menuContainer { background-color: #ffffee; color: #000000; border: 1px outset #000000; width: 15em; position: relative; Because this is relative, an internal absolutely positioned container will be relative to this float: left; margin: 0px 10px 0px 0px; z-index: 2; } ************************************ <ul class="menu"><center>Contents</center> ************************ menu CSS .menu { list-style-position: inside; list-style-type: none; background-color: #ffffee; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: smaller; line-height: 1.75; font-weight: bold; margin: 0px; padding: 10px; z-index: 2; Not positioned, therefore at 0, 0 in the menu container, plus the padding } ******************************** <hr style="padding: 0px; margin: 0px; border: 1px solid #888888; width: 100%;"/> <li class="item"> <a href="pointers.php?page=0-0" style="color: #888888;">What is a pointer?</a> </li> ...more stuff here... </ul> <!-- end of the menu --> <div class="shadow"> ************************** shadow CSS, for reference .shadow { position: absolute; Absolute with respect to the enclosing container, the menu container top: 15px; left: 15px; background-color: #000000; border: 1px inset #000000; width: 15em; opacity: .5; filter: alpha(opacity=50); z-index: -1; } *************************** <ul class="shadowmenu">Contents <hr style="padding: 0px; margin: 0px; border: 1px solid #000000; width: 100%;"/> <li class="item" id="0-0"> <a href="#"> </a> </li> ...more stuff here... </ul> </div> <!-- end of the shadow --> </div> <! end of the menu container --> <div class="section"><strong class="sectionhead">What is a pointer?</strong><p> A pointer is a programming language datatype whose value is used to ...more content.... </div> ...more content..... </div> <!-- end of the page --> </body> <body> <div class="page"> ******************************* The page css, for reference, not actually present in this spot. .page { margin: 2em; background-image: url(../images/paper.jpg); border: 1px outset #000000; padding: 2em; position: relative; Because this is relative, an internal absolutely positioned container will be relative to this } ******************************** <div class="masthead" id="masthead"> Only positioning for this is via padding ...stuff here... </div> <div class="leadin" id="leadin"> Only positioning for this is via padding ...stuff here... </div> <div class="intro" id="intro"> Only positioning for this is via padding ...stuff here... </div> <br/> <div class="menuContainer" id="mc"> ******************************* menuContainer css, for reference .menuContainer { background-color: #ffffee; color: #000000; border: 1px outset #000000; width: 15em; position: relative; Because this is relative, an internal absolutely positioned container will be relative to this float: left; margin: 0px 10px 0px 0px; z-index: 2; } ************************************ <ul class="menu"><center>Contents</center> ************************ menu CSS .menu { list-style-position: inside; list-style-type: none; background-color: #ffffee; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: smaller; line-height: 1.75; font-weight: bold; margin: 0px; padding: 10px; z-index: 2; Not positioned, therefore at 0, 0 in the menu container, plus the padding } ******************************** <hr style="padding: 0px; margin: 0px; border: 1px solid #888888; width: 100%;"/> <li class="item"> <a href="pointers.php?page=0-0" style="color: #888888;">What is a pointer?</a> </li> ...more stuff here... </ul> <!-- end of the menu --> <div class="shadow"> ************************** shadow CSS, for reference .shadow { position: absolute; Absolute with respect to the enclosing container, the menu container top: 15px; left: 15px; background-color: #000000; border: 1px inset #000000; width: 15em; opacity: .5; filter: alpha(opacity=50); z-index: -1; } *************************** <ul class="shadowmenu">Contents <hr style="padding: 0px; margin: 0px; border: 1px solid #000000; width: 100%;"/> <li class="item" id="0-0"> <a href="#"> </a> </li> ...more stuff here... </ul> </div> <!-- end of the shadow --> </div> <! end of the menu container --> <div class="section"><strong class="sectionhead">What is a pointer?</strong><p> A pointer is a programming language datatype whose value is used to ...more content.... </div> ...more content..... </div> <!-- end of the page --> </body> __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers**

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Attitudes	Oddball	Coder's Corner Lounge	29	Mar 18th, 2006 9:34 PM
C++ template and namespace question	Soulstorm	C++	3	Jan 22nd, 2006 2:46 PM
How to post a question	nnxion	C++	10	Jun 3rd, 2005 11:53 AM
How to post a question	nnxion	C++	0	Jun 3rd, 2005 8:55 AM
How to post a question	nnxion	C	0	Jun 3rd, 2005 8:55 AM

Dec 19th, 2006, 12:17 AM	#2
titaniumdecoy Expert Programmer Join Date: Nov 2005 Posts: 843 Rep Power: 3	I cannot comprehend exactly what your problem is. Posting a before and after image of what you are trying to accomplish would definitely help. From what I understand, it sounds like you are trying to align objects in a certain way, perhaps in a grid. If this is a case, you should use an HTML <table>.

Dec 19th, 2006, 2:27 AM	#3
Arevos Programming Guru Join Date: Aug 2005 Location: England Posts: 1,499 Rep Power: 5	It may be that he wants to display certain images on top of other images, and relative positioning doesn't inherently allow overlaps. I wonder; what happens if you float your #dispobj?

Dec 19th, 2006, 6:45 PM	#6
brokenhope Hobbyist Programmer Join Date: Apr 2005 Posts: 126 Rep Power: 4	Thank you! Problem solved!

Dec 19th, 2006, 9:43 PM	#8
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	It is entirely possible to make a table with tiny cell sizes and adjust it accordingly by combining certain numbers of columns and rows. There was a time when it was the only reasonable solution. Those days are gone. Tables are not evil, but they should be use to present tabular material. Don't tune your carburetor by enlarging the jet with chewing gum. It may work, but it's schlocky , unprofessional, and subject to unanticipated failures. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Dec 21st, 2006, 7:38 AM	#9
brokenhope Hobbyist Programmer Join Date: Apr 2005 Posts: 126 Rep Power: 4	Yeah, but what im saying is my map is 32 x 24, so multiply that, and thats the amount of TD's generated minimaly. Now each TD call will include a class name too, so thats about 15 bytes each sent to the browser, now multiply 15 bytes x 24 x 32... way more than some simple divs. Plus if any tile were to be bigger than 16 x 16 [which currently half the tiles are], tables would completely not work.

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

Programming Forums > Web Development and Design > HTML / XHTML / CSS

CSS Div Question