I currently have an image with an unordered list that links to various parts of the image using imagemapster. When a list item is clicked, relevant information displays on the right side without any issue.
However, I am facing a challenge where the list is appearing at the bottom of the image instead of the expected position. I am utilizing Bootstrap for this project.
<div class="img_beef row col-lg-5 col-md-4 col-sm-4">
<img class="beef_img img-responsive" id="beef_cut" src="images/beef.png" width="138px" height="357px" usemap="#imageMap" >
<div class="cut_list col-lg-5 col-md-4 col-sm-4">
<p>List of cuts</p>
<ol>
<li><a item="chuck_li" href="">Chuck , Hump</a></li>
(rest of the list items)
</ol>
</div>
</div>
Even after applying col-lg-5 to the cut_list div, the issue persists.
.img_beef {
border-right:solid thin #dbdbdb;
margin-right: 70px;
z-index:1000;
}
.img_beef img {
}
.hidden-phone >.img_beef> border-right {
display:none;
}
.cut_list {
float:right;
}
.cut_list p {
}
.img_beef ol {
text-decoration:none;
color:#777777;
font-size:10px;
}
.img_beef a {
text-decoration:none;
color:#777777;
}
.img_beef a:hover {
text-decoration:none;
color:#777777;
}
If additional information is required, please feel free to ask. Any assistance or guidance would be greatly appreciated in resolving this issue.