overlapping images

[richard]

I'm working on a card game that will be utilized in RunBasic.
For the problem I have uploaded 3 photos showing the problem and what
I want to show.

http://1littleworld.net/images/cardshot2.jpg
http://1littleworld.net/images/cardshot3.jpg
http://1littleworld.net/images/cardshot4.jpg

In photo 1 the red border indicates the div the 3 images are in.
I am attempting to narrow the gap as in photo 2. Yes the cards are
duplicated purely to show the second division.
At the moment, I am using position:relative to get the overlapping.
If I change the width of the division to anything less, the cards do
not display properly.

During the play of the game results as shown in photo 3 are only to
easy to happen. That is what I am trying to duplicate.

Anyone have any ideas on how I could simulate the same results within
html?

 

[dorayme]

I'm working on a card game that will be utilized in RunBasic.
For the problem I have uploaded 3 photos showing the problem and what
I want to show.

http://1littleworld.net/images/cardshot2.jpg
http://1littleworld.net/images/cardshot3.jpg
http://1littleworld.net/images/cardshot4.jpg

In photo 1 the red border indicates the div the 3 images are in.
I am attempting to narrow the gap as in photo 2. Yes the cards are
duplicated purely to show the second division.
At the moment, I am using position:relative to get the overlapping.
If I change the width of the division to anything less, the cards do
not display properly.

During the play of the game results as shown in photo 3 are only to
easy to happen. That is what I am trying to duplicate.

Anyone have any ideas on how I could simulate the same results within
html?

I won't look now in detail but I did do this sort of thing once, it
might give you an idea to adapt, change the dimensions, use images in
the DIVs etc...

..book div {
float: left;
width: 10em;
height: 15em;
border-top: .1em dotted transparent;
border-left: 2em dotted transparent;
}

<div class="book">
<div style="background: red">
<div style="background: green">
<div style="background: blue">
<div style="background: gray">
<div style="background: purple">
<div style="background: orange">
<div style="background: brown">
<div style="background: crimson">
<div style="background: violet">
<div style="background: red">
<div style="background: green">
<div style="background: blue">
<div style="background: gray">
<div style="background: purple">
<div style="background: orange">
<div style="background: brown">
<div style="background: green">
<div style="background: red;">
</div></div></div></div></div></div></div></div></div></div></div></div><
/div></div></div></div></div></div>
</div>

 

[richard]

I won't look now in detail but I did do this sort of thing once, it
might give you an idea to adapt, change the dimensions, use images in
the DIVs etc...

Thanks. That just might actually work.

 

[richard]

I won't look now in detail but I did do this sort of thing once, it
might give you an idea to adapt, change the dimensions, use images in
the DIVs etc...

.book div {
float: left;
width: 10em;
height: 15em;
border-top: .1em dotted transparent;
border-left: 2em dotted transparent;
}

Just played with it a little and to get the "images" to overlap as I
want, I had to remove the "border-top".
Without a border they are all displayed in the same space.

 

[dorayme]

Just played with it a little and to get the "images" to overlap as I
want, I had to remove the "border-top".
Without a border they are all displayed in the same space.

I had a top border because I was making pictures of books with DIVs and
it was useful to generate a view of the top...

It was part of a project of DIV art for the Queen of England. But she
refused to invest enough capitol, even insinuated at one stage I was a
mere colonial... She had some redcoats storm my office... but never
mind.

I notice the Poms are 2 for 36 in the test that has just begun...
that'll learn 'er.

 

[richard]

I won't look now in detail but I did do this sort of thing once, it
might give you an idea to adapt, change the dimensions, use images in
the DIVs etc...

Don't know why, but when I try to use an image as the background,
runbasic won't show it for some reason. Worked fine in standard html.

 

[richard]

I had a top border because I was making pictures of books with DIVs and
it was useful to generate a view of the top...

It was part of a project of DIV art for the Queen of England. But she
refused to invest enough capitol, even insinuated at one stage I was a
mere colonial... She had some redcoats storm my office... but never
mind.

I notice the Poms are 2 for 36 in the test that has just begun...
that'll learn 'er.

This little old colonial wants me to invest ten quid? Why that no
good.........I'll teach her. Charles! Send in my storm troopers with
swords drawn! Break a few things.


Yeah sounds about right. Now Obama would have given you a few million
at least.

 

[richard]

Found out I had to use the full path name in order to use the
background:url() method. At least now it will work in runbasic.

 

[dorayme]

Found out I had to use the full path name in order to use the
background:url() method. At least now it will work in runbasic.

You might even be able to have a normal image in the HTML and be rid of
background, it was only a consideration for me because I had no real
images, I was drawing with pure colours.

 

[richard]

I'm working on a card game that will be utilized in RunBasic.
For the problem I have uploaded 3 photos showing the problem and what
I want to show.

http://1littleworld.net/images/cardshot2.jpg
http://1littleworld.net/images/cardshot3.jpg
http://1littleworld.net/images/cardshot4.jpg

In photo 1 the red border indicates the div the 3 images are in.
I am attempting to narrow the gap as in photo 2. Yes the cards are
duplicated purely to show the second division.
At the moment, I am using position:relative to get the overlapping.
If I change the width of the division to anything less, the cards do
not display properly.

During the play of the game results as shown in photo 3 are only to
easy to happen. That is what I am trying to duplicate.

Anyone have any ideas on how I could simulate the same results within
html?

Finally getting it to work halfway decent.
Using dorayme's technique works.
Had to mickey mouse the url a bit but that's fine now.