Dear All,
I have page here http://183.78.169.53/tyre2/page4.html. I have manage put label into the first two tyre images as RI11. But the problem now I cant make both of them to be align together on one line with the blue image of the T-join? How can I make it look like the rest below?

use margin-top,margin-left,margin-right,margin-bottom(px and %)...

Dear Gujinni,
How much of the margin to set ? So the for the div or image?

It depends on you. Just do the trial and error until you got the right position of your div or image.

Dear Gujinni,
For example one of the row codes is as below. So I must add the margin for each of the div and image is it? Is it some thing like this margin-top:0px etc.

<div class="newline">
	<div class="droppable">
	<span>
  <p>
  R11
	<img class="draggable" src="tyre2.png" >
	<input type="hidden" name="position1" value="1">
  </p>
  </span>
	</div>
	<img src="longJoinAxle.png" >
	<div class="droppable">
	<span>
  <p>
  R11
	<img class="draggable" src="tyre2.png" >	
	<input type="hidden" name="position2" value="2">
	</p>
  </span>
	</div>
</div>

<style type="text/css">
div.newline{
margin-top:10px
margin-left:10px
margin-right:10px
margin-bottom:10px
}
div.droppable{/*you can use this one if you are not satisfied with the margin.*/
left:10px
right:10px
top:10px
bottom:10px
}

</style>
<div class="newline">
    <div class="droppable">
    <span>
  <p>
  R11
    <img class="draggable" src="tyre2.png" >
    <input type="hidden" name="position1" value="1">
  </p>
  </span>
    </div>
    <img src="longJoinAxle.png" >
    <div class="droppable">
    <span>
  <p>
  R11
    <img class="draggable" src="tyre2.png" > 
    <input type="hidden" name="position2" value="2">
    </p>
  </span>
    </div>
</div>

Thanks for share! I need it :)

Dear Gujni,
I have my latest codes here http://183.78.169.53/tyre2/swap3.html . The problem both tyre images are on left now. I have tried to use float:left no changes too.

start quote:

<style type="text/css">
div.newline{
margin-top:10px
margin-left:10px
margin-right:10px
margin-bottom:10px
}
div.droppable{/*you can use this one if you are not satisfied with the margin.*/
left:10px
right:10px
top:10px
bottom:10px
}

</style>
<div class="newline">
    <div class="droppable">
    <span>
  <p>
  R11
    <img class="draggable" src="tyre2.png" >
    <input type="hidden" name="position1" value="1">
  </p>
  </span>
    </div>
    <img src="longJoinAxle.png" >
    <div class="droppable">
    <span>
  <p>
  R11
    <img class="draggable" src="tyre2.png" > 
    <input type="hidden" name="position2" value="2">
    </p>
  </span>
    </div>
</div>

end quote.

try this:

<style type="text/css"> 
div.newline{
left:10px
right:10px
top:10px
bottom:10px
float:left
}
div.droppable{/*you can use this one if you are not satisfied with the margin.*/
left:10px
right:10px
top:10px
bottom:10px
float:left
}
span.prop {
	width:270px;
	text-align:center;	
}
</style>
<body>
	<div class="newline">
	<p><span>
	<img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" width="30" height="56" >
	</span>
	<img src="http://183.78.169.53/tyre2/longJoinAxle.png" width="205" height="80" >
	<span>
	<img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" width="30" height="56" >
	</span></p>
	<div class="droppable">
	<span class="prop">
	<img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" width="30" height="56" >
	</span>
	</div>
	</div> 
</body>
</html>

missed this though, you need to end all CSS statements with a semicolon

left:10px;

so the code should look like this:

<style type="text/css"> 
div.newline{
left:10px;
right:10px;
top:10px;
bottom:10px;
}
div.droppable{/*you can use this one if you are not satisfied with the margin.*/
left:10px;
right:10px;
top:10px;
bottom:10px;
}
.prop {
	width:280px;
	text-align:center;	
}
</style>
<body>
	<div class="newline prop">
        <p>
            <span>
                <img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" width="30px" height="56px" >
            </span>
            <img src="http://183.78.169.53/tyre2/longJoinAxle.png" width="205" height="80px" >
            <span>
                <img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" width="30px" height="56px" ><br>
                <span><img src="http://183.78.169.53/tyre2/tyre2.png" alt="tyre" width="30px" height="56px" class="draggable">
                </span>	
            </span>
        </p>
    </div> 
</body>
</html>

increase the size of your top,left,..;

increase the size of top,left..,etc

Dear Gujini,
Increase by how much exactly? Thank you.

it depend on you,just do trial and error...

i took out the css code (so that there was no white space, and i fixed the t-axle so that it didn't have white space, so try this:

<body>
<div align="center"> <p><span>
<img src="http://183.78.169.53/tyre2/tyre2.png" width="30" height="56" ><img src="http://i56.tinypic.com/8y956h.jpg" width="204" height="39" ><img src="http://183.78.169.53/tyre2/tyre2.png" width="30" height="56" ><br>
<img src="http://183.78.169.53/tyre2/tyre2.png" width="30" height="56" ></span></p> </div> </body>

I think skorpio07 is right.

Dear Skorpio,
Which css code are you referring to which cause the space to be there? Anyway what is normally the main cause of the space? Thank you.

i took out the css code (so that there was no white space, and i fixed the t-axle so that it didn't have white space, so try this:

<body>
<div align="center"> <p><span>
<img src="http://183.78.169.53/tyre2/tyre2.png" width="30" height="56" ><img src="http://i56.tinypic.com/8y956h.jpg" width="204" height="39" ><img src="http://183.78.169.53/tyre2/tyre2.png" width="30" height="56" ><br>
<img src="http://183.78.169.53/tyre2/tyre2.png" width="30" height="56" ></span></p> </div> </body>

only css adds space (or inline styling)

see below:

<style type="text/css">
div.newline{
margin-top:10px
margin-left:10px
margin-right:10px
margin-bottom:10px
}
div.droppable{/*you can use this one if you are not satisfied with the margin.*/
left:10px
right:10px
top:10px
bottom:10px
}

</style>
<div class="newline">

your first div has the class newline, which has a margin (ie whitespace) for any element inside the div or subsequent div's.

remove the newline class from any div and the whitespace will go away.

Dear Skorpio,
So in this case the whitespace is not cause by my images is it? Thank you.

apparently...

you can mark this closed i think

I'm entirely too confused by this thread.

To fix your original issue here...


Remove these:

style="margin: 0; padding 0;"

And just add this to your CSS:

* {margin: 0; padding: 0;}

Remove the float: left; from:

<div class="image"style="float:left;display:inline">

Change the value of top to -9.

.image h6 {
    color: #FFFFFF;
    left: 0;
    position: absolute;
    top: -9px;
    width: 100%;
}

Regards
Arkinder

only css adds space (or inline styling)

Browsers add their own margin and padding, or whitespace, by default. To set this to 0 for all elements use a universal rule.

* {
    margin: 0;
    padding: 0;
}

His problem was that the float property overrides the display property. Removing them causes everything to fall into place because there are now three inline elements (images are inline by default).

Regards
Arkinder

Dear Arkinder,
Why do we need the top to be in negative?

Hi newbie14,

Because of where you have placed the h6 in your HTML, and from your relatively positioned image.

Regards
Arkinder