Img id/Div

[hallsofvallhalla]

i will try this tonight when I get back to my laptop. If this works I will deem you king of CSS and even give you the forum title for I have searched the internet over and found no solutions.

[hallsofvallhalla]

no go





as you can see all the icons are placed by the query to the DB

I am placing them using

Code: Select all

document.getElementById(newplayer).src="images/" + netplayers[picslot] + ".png";
	document.getElementById(newplayer).style.top=netplayers[topslot] + "px";
	document.getElementById(newplayer).style.left=netplayers[leftslot] + "px"

netplayers[topslot] is the number the database gets and I have checked it and they come out correct.

The icons are suppose to end up int he red box but position absolute does what it is suppose to do and places them absolutely to the screen. The only way to make them fall into a div is relative which then goes with the flow of the page and causes push.

i was trying this for my html

Code: Select all

<div id="test1"><img src="" id="C1"/></div>
<div id="test2"><img src="" id="C2" /></div>
<div id="test3"><img src="" id="C3" /></div>
<div id="test4"><img src="" id="C4" /></div>
<div id="test5"><img src="" id="C5" /></div>
<div id="test6"><img src="" id="C6" /></div>

if i do not id the image nothing shows up, as in I cannot match the icon getelementby and the actual div.


maybe I am doing it wrong?

[PaxBritannia]

What I was thinking was to:

<div class='AAA'>
!!!insert stuff here!!!
</div>

AAA has a fixed width.
Images will appear relative to the edges of AAA so even when the window gets resized, the objects do not get crushed.
The divs inside have different z-indexes

It seems simple enough. Too simple... So simple it just won't work!

Pax.

[hallsofvallhalla]

it is not about squishing the pics with re-size. It is how the flow is offsetting them.

See below. All those images have a left of 0 and a top of 0 yet they do not stack. ...



now my page has those white gaps in it, i have never had this kinda trouble with css before. Makes no sense.

[Chris]

Wrong doc type? And I think your problem is the fact that you are using top and left, rather than marginTop and marginLeft

[Falken]

Wrong doc type? And I think your problem is the fact that you are using top and left, rather than marginTop and marginLeft

Also you can try giving the images different z-index (Depth) values to get them to stack.

[Rastan]

I'm pretty new at this so sorry if this is dumb or you covered it earlier. Can you make everything absolute inside a container like say the play screen and then make that container relative to some part of the site that keeps it in place or does the actual game screen change sizes?

[hallsofvallhalla]

Wahoooo!!!! I finally got it! Thanks for all the help. It was a mix of things. I did not use the div fix but did the marginTop and the marginLeft along with a few other things

this is me logged in to two different machines both updating each others movements per second, no refresh.


Will keep working on it and see what I can make of it.

Thanks again Chris, you rock!

[Torniquet]

i have mentioned this many times in other posts.

when using absolute divs, contain them in a relative div.

The absolute positionings will mark from the sides of the surrounding relative div rather than the screen,

for eg.

Code: Select all

<div style="position:relative;width:500;height:500;">
<div style="position:absolute;left:0;top:50;width:50px;height:50px;">content A here</div>
<div style="position:absolute;left:100;top:50;width:50px;height:50px;">Content B Here</div>
<div style="position:absolute;right:150;bottom:50;width:50px;height:50px;">Content C Here</div>
</div>

this will make content A will be 0 px from the left and 50px from the top of the relative div and not the screen.

same will go for content B and C.

ergo no matter what size the screen is, the content placed is going to remain in the right places

[hallsofvallhalla]

that did not work for me for I am dynamically moving all the images every second.