CODEWITHSUNDEEP
htmlcss
Jessi
Jessi

Reputation: 1

how to prevent overlapping empty span tags?

Basically, I have a div container, with two main span tags. The first span tag is for the menu, in which I have page 1 span, page 2 span, and so on. Each page span has a display:block and a background image (which is it's sole purpose, no content preferred).

My issue is is that they overlap. I've made sure the main menu span is big enough.

Upvotes: 0

Views: 1707

Answers (1)

cesarsalazar
cesarsalazar

Reputation: 708

So, if I understood correctly, you have something like this:

<div id="container">
  <span id="menu">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
  </span>
  <span>
    Something else...
  </span>
</div>

The problem could be that you are trying to render a box (span with display:block) inside a span, which is natively inline. So, you might benefit from actually using boxes inside of boxes. I suggest something like this.

In your styles:

     ul#menu{
       display: block;
       padding: 0;
       list-style: none;
       overflow: hidden;
     }

     #menu li{
       float: left;
       padding-right: 20px;
     }

In your markup:

<div id="container">
  <ul id="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <span>
    Something else...
  </span>
</div>

This way, you are keeping the semantics in your markup, stating that a menu is actually a list, but you are rendering something that looks like a horizontal navigation.

Inline elements inside boxes should always work properly, but the other way around you will find some funky effects in some browsers.

Upvotes: 2

Related Questions