Dear All,
I have a page here http://183.78.169.53/tyre2/page2.html. My only problem is that all the centre T-join I would like to link them together but there is space appearing between them. Any idea how to remove the space such that they appear as joined.
newbie14 0 Posting Pro
newbie14 0 Posting Pro
Dear Gabriel,
What are the changes you did to the images? I have manage it with the vertical-bottom settings vertical-align: bottom; ? Is that ok?
Skorpio07 0 Newbie Poster
your t-join has white space, see this:
<style type=text/css>
.imgpos {
position: absolute;
top: 50px;
left: 150px;
}
</style>
</head>
<body width="auto">
<span class="imgpos">
<img src="http://183.78.169.53/tyre2/tyre2.png" width="30" height="56" ><img src="http://183.78.169.53/tyre2/longJoinAxle.png" border="0" ><img src="http://183.78.169.53/tyre2/tyre2.png" width="30" height="56" ></span>
</body>
</html> newbie14 0 Posting Pro
Dear Skorpio,
How to over come the white space I am editing it via photoshop what should I look out for when I am saving or editing the image?
Skorpio07 0 Newbie Poster
just make sure that your clipping path (press the C key in photoshop, press Shift C to cycle through the toolset until you see the crop icon) and just make sure there is no white space in the t-join. let me know if you still need help on this.
newbie14 0 Posting Pro
Dear Skorpio,
Ok once I press shift C what am I suppose to view? I can see the crop toolset what should be my next step how examine for the white space?
Skorpio07 0 Newbie Poster
just crop the image from there making sure that you don't leave space on the right or left.. i noticed a very small space
or you can use the one that i cropped for you on the other post...
newbie14 0 Posting Pro
Dear Skorpio,
I would like to ask your idea. Now what I do is I prepare each of this images via illustrator then import into photoshop. Do you think I should rather build the whole layout and then cut it into pieces. What is your idea?
Skorpio07 0 Newbie Poster
please review this link:
http://help.adobe.com/en_US/photoshop/cs/using/WSE311D2B1-CA39-4bab-8BEE-25CF899D1486a.html
design in either illustrator or photoshop, then in photoshop with the image loaded, press C and then Shift C until you get the slice tool (as opposed to the crop tool).
divide up your image by right clicking and choose divide. enter horz or vert or both. drag selections to size.
then do a Save for Web, give it a name and it will create the slices for you plus make an html that will load it up intact.
post your finished code so we can see what your working with.
newbie14 0 Posting Pro
Dear Skorpio,
Great that is a big help. Anyway can you check what is wrong with my link here http://183.78.169.53/tyre2/newSet/page5.html. This link has the drag and drop functionality plus the label too. But I will require is something like this http://183.78.169.53/tyre2/page5.html. Why I have the problem where the first two tyres are not on same line. I know the problem is due to extra <div class="droppable"> as like below.
<div class="t1">
<div class="droppable">
<span><b>R11</b>
<img class="draggable" src="tyre2.png" >
<input type=hidden id="positionR12" name="positionR11" value="R11">
<input type=hidden name="tyreIDR11" value="1">
</span>
</div>
<span class="mid"><img src="longJoin1.png"></span>
<div class="droppable">
<span><b>R11</b>
<img class="draggable" src="tyre2.png" >
<input type=hidden id="positionR11" name="positionR11" value="R11">
<input type=hidden name="tyreIDR11" value="1">
</span>
</div>
</div> Skorpio07 0 Newbie Poster
ok how about this:
<body>
<div class="t1">
<span>
<img src="http://183.78.169.53/tyre2/tyre2.png" ></span><span class="mid"><img src="http://183.78.169.53/tyre2/longJoin1.png"></span><span><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span><span style="word-spacing: 0"><br>
<img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span><span class="mid"><img src="http://183.78.169.53/tyre2/centerLongJoinFirstAxle.png" style="word-spacing: 0; display: block" ></span><span style="word-spacing: 0"><b style="position: absolute; left: -230px; bottom: 27px; width: 30px; word-spacing: 0">R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span></div>
<div class="t1"><span style="word-spacing: 0"><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span><span class="mid"><img width="39" height="36" src="http://183.78.169.53/tyre2/shortJoin.png" style="word-spacing: 0; display: block"></span><span style="word-spacing: 0"><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span><span class="mid"><img src="http://183.78.169.53/tyre2/centerJoinLastAxle.png" style="word-spacing: 0; display: block" ></span><span style="word-spacing: 0"><b style="position: absolute; left: -1px; bottom: -72px; width: 30px; word-spacing: 0">R11</b><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span><span class="mid"><img width="39" height="36" src="http://183.78.169.53/tyre2/shortJoin.png" style="word-spacing: 0; display: block"></span><span style="word-spacing: 0"><img class="draggable" src="http://183.78.169.53/tyre2/tyre2.png" ></span></div>
</body> newbie14 0 Posting Pro
Dear Skorpio,
I need the droppable too. Because it works together with the draggable.
Skorpio07 0 Newbie Poster
do you mean to combine the classes?
class="draggable droppable"
if not just re-add the class to the elements needed, if it expands tho then you will have to change the element type (ie block vs inline)
newbie14 0 Posting Pro
Dear Skorpio,
Yes I want to be able to be dragged and droppable. How about a parent div to take of the drag?
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.