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?
newbie14 0 Posting Pro
gujinni 0 Junior Poster in Training
use margin-top,margin-left,margin-right,margin-bottom(px and %)...
newbie14 0 Posting Pro
Dear Gujinni,
How much of the margin to set ? So the for the div or image?
gujinni 0 Junior Poster in Training
It depends on you. Just do the trial and error until you got the right position of your div or image.
newbie14 0 Posting Pro
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> gujinni 0 Junior Poster in Training
gujinni 0 Junior Poster in Training
<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>
hgtech02 0 Newbie Poster
Thanks for share! I need it :)
newbie14 0 Posting Pro
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.
Skorpio07 0 Newbie Poster
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> Skorpio07 0 Newbie Poster
missed this though, you need to end all CSS statements with a semicolon
left:10px;
Skorpio07 0 Newbie Poster
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> gujinni 0 Junior Poster in Training
increase the size of your top,left,..;
newbie14 0 Posting Pro
Dear Skorpio,
I am very suprise my codes got only 3 images but end up is showing me 5 images here http://183.78.169.53/tyre2/swap3.html
gujinni 0 Junior Poster in Training
increase the size of top,left..,etc
newbie14 0 Posting Pro
Dear Gujini,
Increase by how much exactly? Thank you.
gujinni 0 Junior Poster in Training
it depend on you,just do trial and error...
Skorpio07 0 Newbie Poster
try this, you had the CSS and part of the Body twice, always check your code, i removed the css just so that you could see it all together without spaces
<body>
<span><img src="http://183.78.169.53/tyre2/tyre2.png" alt="Tire"/><img src="http://i56.tinypic.com/8y956h.jpg" alt="T Axel" /><img src="http://183.78.169.53/tyre2/tyre2.png" alt="Tire" /></span>
</body>
</html> Skorpio07 0 Newbie Poster
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>
gujinni 0 Junior Poster in Training
I think skorpio07 is right.
newbie14 0 Posting Pro
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>
Skorpio07 0 Newbie Poster
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.
newbie14 0 Posting Pro
Dear Skorpio,
So in this case the whitespace is not cause by my images is it? Thank you.
Skorpio07 0 Newbie Poster
apparently...
you can mark this closed i think
Arkinder 93 Posting Pro in Training
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
Arkinder 93 Posting Pro in Training
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
newbie14 0 Posting Pro
Dear Arkinder,
Why do we need the top to be in negative?
Arkinder 93 Posting Pro in Training
Hi newbie14,
Because of where you have placed the h6 in your HTML, and from your relatively positioned image.
Regards
Arkinder
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.