Div or span in ul li stracture?

HTML & CSS
1

Hi everybody,

I’m quite new in css and I was wondering, how I can style a menu with a ul li structure so as each li incorporates 3 pictures as a background. e.g.

<ul>
  <li><a href="test-link">List1</a></li>
  <li><a href="test-link">List2</a>
    <ul>
      <li><a href="test-link">List21</a></li>
      <li><a href="test-link">List22</a></li>
      <li><a href="test-link">List23</a></li>
    </ul>
  </li>
  <li><a href="test-link">List3</a></li>
  <li><a href="test-link">List4</a></li>
</ul>

With this structure I can’ have three pictures inside each li, since I only have two non-block objects, i.e. li and a

One suggestion that I had was to use span inside <a> i.e.

<ul>
  <li><a href="test-link"><span class="some-image">List1</span></a></li>
  <li><a href="test-link"><span class="some-image">List2</span></a>
    <ul>
      <li><a href="test-link">List21</a></li>
      <li><a href="test-link">List22</a></li>
      <li><a href="test-link">List23</a></li>
    </ul>
  </li>
  <li><a href="test-link"><span class="some-image">List3</span></a></li>
  <li><a href="test-link"><span class="some-image">List4</span></a></li>
</ul>

Although, I tried really hard to put 3 images, I couldn’t manage it. I don’t know why but every picture was influenced by its inherited one.

What I have used finally and worked was the following

<ul>
  <li>
    <div class="background">
      <div class="vertical-line">
        <div class="arrow-line">
          <a href="test-link">List1</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="background">
      <div class="vertical-line">
        <div class="arrow-line">
          <a href="test-link">List2</a>
        </div>
      </div>
    </div>
    <ul>
      <li><a href="test-link">List21</a></li>
      <li><a href="test-link">List22</a></li>
      <li><a href="test-link">List23</a></li>
    </ul>
  </li>
  <li>
    <div class="background">
      <div class="vertical-line">
        <div class="arrow-line">
          <a href="test-link">List3</a>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="background">
      <div class="vertical-line">
        <div class="arrow-line">
          <a href="test-link">List4</a>
        </div>
      </div>
    </div>
  </li>
</ul>

It seems a little bit scary but in this way I managed to write only a few lines of css without having to destroy the layout of the nested ul li.

So my question is which of the above methods is the most appropriate and efficient for my needs and if there is something else I could do.

Thanks in advance.

2

Seems like overkill to me, but it’s hard for me to think in pure code like some of the real code warriors around here. I’d need to see it in action. There’s got to be a better way than those repeating divs…

3

Why not just incorporate all the images into one file and then just set it on the <li>

CSS3 has multple background images but only webkit supports that so it’s not feasible. Besides heavy nesting that’s the only thing you are going to get (besides heavy divitis)

4

So you are saying that the best way is the last method, or this with the span? Actually I’m using drupal as cms and these nested divs is something normal. Thought I don’t find it so efficient

5

Well it would certainly be very good to reduce the HTTP requests by puttingg it all in one file and avoiding the use of extra markup…so yes I’m saying its the best way.

6

It’ s difficult to do this since the width of the menus do not have the same width, e.g.

menu1 | menu222 | menu33333333 |
\/ \/ \/

The first image is for the background of each menu, which can not have a fixed width, but only fixed height. So I use background:url(…) repeat-x;

The second is for the vertical bar, which has some design and so I can’t use a border command but something like this background:url(…) no-repeat 100% 0

An the third picture is for the arrow, where I use a command like this: url(…) no-repeat 50% 100%

I have asked someones about the span method, for which they claimed is the best way, though I can’t handle them. Maybe I’m too newbie in css but I did with the div way only ten minutes. Nevertheless I just wanted to take a second opinion

7