Page 2 of 3
Re: Img id/Div
Posted: Sun Jun 27, 2010 9:59 pm
by 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.
Re: Img id/Div
Posted: Mon Jun 28, 2010 2:47 pm
by 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?
Re: Img id/Div
Posted: Mon Jun 28, 2010 3:01 pm
by 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.
Re: Img id/Div
Posted: Mon Jun 28, 2010 3:36 pm
by 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.
Re: Img id/Div
Posted: Mon Jun 28, 2010 6:10 pm
by Chris
Wrong doc type? And I think your problem is the fact that you are using top and left, rather than marginTop and marginLeft
Re: Img id/Div
Posted: Mon Jun 28, 2010 7:55 pm
by Falken
Chris wrote: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.
Re: Img id/Div
Posted: Tue Jun 29, 2010 2:39 am
by 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?
Re: Img id/Div
Posted: Wed Jun 30, 2010 3:29 pm
by 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!
Re: Img id/Div
Posted: Wed Jun 30, 2010 5:22 pm
by 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
Re: Img id/Div
Posted: Wed Jun 30, 2010 5:37 pm
by hallsofvallhalla
that did not work for me for I am dynamically moving all the images every second.
