Working on a website project with my own design, I ran into an issue regarding the positioning of the menu style. Describing this problem can be challenging, so let's start by looking at some images.
What it should look like:
https://i.sstatic.net/XFi8O.jpg
Current appearance:
https://i.sstatic.net/miOnb.jpg
The menu is a simple horizontal setup with separators between items, but the tricky part lies in the corners. When everything appears perfect in one image, I'm utilizing a messy code that isn't compatible with lists, which I plan to use for drop-down menus later.
This is the messy code:
<div class="menu" id="menu-item">
<img src="images/top_menu_edge.png" style="margin-left:-23px;"/> <span style="margin-right:10px"> 1aaaa <span class="ms"></span> 2bbbb <span class="ms"></span> 3 </span>
</div>
The span.ms serves as the menu separator. For all other elements, the CSS code will be provided.
#menu-item
{
position: absolute; /* Absolute positioning shouldn't be an issue since everything is contained within div#header and its position is relative. */
bottom: 12px;
right: 0;
height: 34px;
background-position: bottom right;
z-index: 5;
color: #192c51;
}
.menu
{
position: absolute;
bottom: 0;
right: 0;
height: 34px;
background-image: url('images/top_menu_bg.png');
background-position: bottom right;
z-index: 5;
color: #192c51;
}
This revised code seems to work fine, except for the fact that the image is not displaying correctly:
<div class="menu" id="menu-item">
<div class="menu-item">
<img src="images/top_menu_edge.png" style="margin-left:-23px;"/>
<ul id="nav">
<li> Home </li>
<li> About Us </li>
<li> Services </li>
<li> Contact </li>
</ul>
</div>
</div>
Additional CSS lines for ul and li elements:
#nav
{
list-style:none;
float:left;
}
#nav > li {
float: left;
}
#nav li+li
{
background:url('images/top_menu_sep.png') no-repeat top left;
padding-left:10px;
}
This sums up the issue, and I'm puzzled as to why the tag is causing problems even though it's necessary. Any suggestions on how to fix this or guidance would be greatly appreciated.
Thank you :)