My current website design involves using CSS relative and absolute positioning to place a div of links within an image. However, I'm facing an issue where the links shift left or right when zooming in/out or viewing the site on a mobile device. How can I ensure that the links remain fixed in position on the image?
Check out my website at: www.cclandscaping.org
CSS Code:
.header-links {
position: absolute;
z-index: auto;
right: 25%;
top: 43%;
font-size: x-large;
}
.header-pic {
position: relative;
}
Image and Links Code:
<div class="header-pic"; style="text-align: center">
<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Header.png" />
<div class="header-links">
<asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
|
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Pages/About.aspx">About</asp:HyperLink>
|
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/Pages/References.aspx">References</asp:HyperLink>
|
<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/Pages/ContactUs.aspx">Contact Us</asp:HyperLink>
</div>