5
Contributors
27
Replies
28
Views
7 Years
Discussion Span
Last Post by Arkinder
0

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

0

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

0

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>
0
<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>

Edited by pyTony: fixed formatting

0

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.

Edited by mike_2000_17: Fixed formatting

0

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>
0

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>
0

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>

0

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>

1

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.

0

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

0

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

0

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

0

Hi newbie14,

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

Regards
Arkinder

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.