DIV with sprite icon in UL tag?

[highergroundstudio]

I am trying to add a icon to a navigation accordion and used a DIV but xhtml 1.0 trans. doesn’t allow for a DIV in a UL tag. What do I do other than a DIV here?

HTML

Subcategories







Sidebar submenu




Sidebar submenu




Sidebar submenu




Sidebar submenu




Sidebar submenu






/*Continued just the same for the nav..*/

CSS

/*ICONS*/

.nav-icon{

float: right;

margin-top: 8px;

}

.icon-small{

background: url('images/icon-sprite-smaller.png') no-repeat left top;

}

.arrow19 { background-position: 0 -59px; width: 19px; height: 19px; }



/*ACCORDION*/

.sidebarmenu {

margin: 0px 0;

padding: 0;

width: 195px;

}

.sidebarmenu a.menuitem {

display: inline-block;

padding: 5px 10px 6px;

margin: 0 0 5px 0;

width: 185px;

}

.sidebarmenu div.submenu {

background: white;

width:205px;

}

.sidebarmenu div.submenu {

background: white;

width:205px;

}

.sidebarmenu div.submenu ul {

margin: -2px 0px 5px 0px;

list-style-type: none;

text-decoration: none;

position: relative;

cursor: pointer;

padding: 0px 10px 10px 10px;

}

.sidebarmenu div.submenu ul li {

background: #fff;

border-top-style: dashed;

border-top-width: 1px;

border-top-color: #E6E6E6;

border-bottom-style: dashed;

border-bottom-width: 1px;

border-bottom-color: #E6E6E6;

}

.sidebarmenu div.submenu ul li {border-top: none;}

.sidebarmenu div.submenu ul li:last-child {border-bottom: none;}



.sidebarmenu div.submenu ul li a {

display: block;

color: #000;

text-decoration: none;

padding: 8px 0;

padding-left: 10px;

}

I really appreciate any help. I am sure that this is probably pretty easy thing but I am not sure what to do.

Kyle King

[Luminated]

Just make it a LI with a unique indentifier, such as

Then you can style it using CSS accordingly…if you set the UL to have a position:relative, you can even absolutely position the LI to place it wherever you want it to appear. Otherwise, just position it using margins (and possibly negative margins, if need be). Also, make sure to remove any formatting you don’t want that unique LI to inherit, such as the borders and such. Example:

div.submenu ul {

relative;

}



div.submenu ul li.icon-small a {

position:absolute;

left:0;

top:0;

background:url()

border:none;

padding:0;

}

Also, you don’t need to wrap the UL with a DIV since its a block level element…you can simply make it:

     




Sidebar submenu




Sidebar submenu




Sidebar submenu




Sidebar submenu




Sidebar submenu

Hope that makes sense!

[highergroundstudio]

That makes perfect sense. Thanks for the reply!

[highergroundstudio]

Unfortunately none of that worked because either it wouldn’t use the background position or it would mess with my bottom borders. So I just changed the nav from the UL to all divs to make it easier ultimately. Thanks for the help.

[Luminated]

Hmm…did you add “display:block” to that list item anchor? Did you specify height and width attributes? Can’t see why you would need to use all divs for something like this. Post a test page if you can.

[highergroundstudio]

I used first and last child and it messed all of that up. I added display:block and tried everything I could think of. I don’t know why but when I thought that I had it setup correctly it would not show anywhere near where I wanted it.

Actually the divs worked better because it made it easier to theme since this is for a web app.

[Author]

Posts