11 {{ upvoteCount | shortNum }}
11 {{ upvoteCount | shortNum }}

Horizontal menu w/ img dividers + dropdown menu

by adamgoldman47
9 replies
  • WEB DESIGN
    • |
Hi warriors

I'm breaking my head here.

Can't seem to stop my error on the horizontal menu:

adam-sites-for-clients.info
/preview/horizontal-menu


If I add padding or margin to space the items, it gets messed up when u zoom in and out.

Any ideas?

Also the dropdown menu should end with the round corners I've inserted. But the ul bg-color covers the round img corners.

It must be cross0browser comp. so I can't use css 3 html 5


damn I;ve busting my head 2 days over this ...
#dividers #dropdown #horizontal #img #menu #w or
  • Profile picture of the author ronc0011
    The last time I built a horizontal drop down menu I believe I got the basic structure and model from "a list apart" after studying his model I found the idea to be pretty versatile. The model I found there didn't rely on CSS 3 It was pretty much built from the basic parts i.e <a> tag using display=inline and images for corners all nested in divs.

    I believe that was the general approach though it's been a while since I've built one.
    {{ DiscussionBoard.errors[5678219].message }}
  • Profile picture of the author adamgoldman47
    ronc,
    thanks for the input. That's what I'm using here but it's not working ...
    {{ DiscussionBoard.errors[5678236].message }}
    • Profile picture of the author ronc0011
      OK O just put one together just to see what I got bassiclly I nested the ul in a div though the only thing I've used the div for so far was just to localize the attrabutes for the <a> tag i.e

      Code:
      .menu
   {
 background-color:Aqua;
 font-family:Tahoma;
 font-size:14px;
 
 
   }
 
 
 .menu li
   {
 list-style:none;
 
 
   }
 
 .menu li a
   {
 display:inline;
 
   }

      HTML markup

      Code:
      <div class="menu">
 
 <ul>
 <li><img src="corner.gif" alt="corner" /><a href="http://www.net2rd.com">Our Link</a></li>
 
 </ul>
 
</div>


      so I've created a img corner.gif I've only applied it to one side of the <li> but it appears to be beheaving correctly.
      {{ DiscussionBoard.errors[5678491].message }}
  • Profile picture of the author adamgoldman47
    Not sure how I can use this with my codes ...
    {{ DiscussionBoard.errors[5678516].message }}
    • Profile picture of the author ronc0011
      Well that's just the basic unordered list "<ul> the top part is the CSS for it and of course the last part is the actual markup. This just gives you the basic structure If you build this in your editor and run it you should be able to observe the results and tweak it to suite.
      {{ DiscussionBoard.errors[5678559].message }}
  • Profile picture of the author adamgoldman47
    btw,
    I (think) know how to put the buttom corners thingie.

    I make 3 divs in this order:

    HTML Code:
    <div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
    Than I float the left one left, and the right div to the right, and for the middle I overflow-hidden it. That seem to work out well.

    Problem is how I wrap it inside the menu. Because the ul of the submenu makes the bg color for the submenu.

    And since the corner divs are inside it, the bg color covers them.

    Can't seem to find a way around this

    Also I still need to fix the horizontal menu as well.
    {{ DiscussionBoard.errors[5678550].message }}
    • Profile picture of the author ronc0011
      Originally Posted by adamgoldman47 View Post

      btw,
      I (think) know how to put the buttom corners thingie.

      I make 3 divs in this order:

      HTML Code:
      <div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
      Than I float the left one left, and the right div to the right, and for the middle I overflow-hidden it. That seem to work out well.

      Problem is how I wrap it inside the menu. Because the ul of the submenu makes the bg color for the submenu.

      And since the corner divs are inside it, the bg color covers them.

      Can't seem to find a way around this

      Also I still need to fix the horizontal menu as well.


      I don't think you need to wrap the img in a div instead wrap it inside your <a> tag. The display=inline should keep it all on the same line. This also removes the need for the floats
      {{ DiscussionBoard.errors[5678587].message }}
  • Profile picture of the author adamgoldman47
    I know it should be simple enough. Don't know what I'm missing here.

    Usually i don't like being "spoon fed" but this time I can't seem to get it right even though I know the "idea"
    {{ DiscussionBoard.errors[5678586].message }}
  • Profile picture of the author adamgoldman47
    it's not a link. anywayz thanks but that doesn't matter if it's a span or div tag.

    I just need it to work
    {{ DiscussionBoard.errors[5678638].message }}

Trending Topics