How does one semantically marks up a navigation bar of icons + text, where text is below icons and icons are a sprite.
With two more conditions: navigation boxes are of different width and icon should serve as a link as well (be clickable)
Concrete example is # www.emex.ru.
In other words: how does one convert
<ul>
<li>
<a><img width=32 height=32/><br/>Link1</a>
</li>
<li>
<a><img width=32 height=32/><br/>Link2</a>
</li>
</ul>
to a version without <img> elements
An unordered list is common for navigation menus. You can style the ul and li tags to space and align each link however you need. You should be setting a class or ID on the li tags and setting the background image position. A nice example is here
http://praveenfrancis.com/tutorials/create-a-simple-menu-with-css-sprite/
Twitter bootstrap uses the <i> tag for doing this. See their examples.
So something like this:
<li>
<a>
<i class="icon-shoe"></i>
Shoe
</a>
<a>
<i class="icon-balloon"></i>
Balloon
</a>
</li>
And then in your CSS:
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
}
.icon-shoe {
background-image: url("path/to/shoe/icon.png") no-repeat;
}
.icon-balloon {
background-image: url("path/to/balloon/icon.png") no-repeat;
}
becuase you'll be using images for your navigation its important that you add the alt="" tag in so google can see your links anchor text.
Related
I am using metismenu and I need the parent category clickable. I am able to acheive this by defining the clickable element.
$("#menu").metisMenu({ triggerElement: '.has-arrow'});
The problem now is my html list layout changes from
<li><a class="has-child" href="http://google.com">Monitors <span class="has-arrow"></span></a><ul>...
to
<li><a class="has-child" href="http://google.com">Monitors</a> <span class="has-arrow"></span><ul>....
This breaks the alignment, since the span is now outside the "a" tag. How can I align the span class to the right so its inline with the "a" element?
Desired output is like this:
You can align span to right of anchor element by assigning inline-block to li element.
li{
display: inline-block;
}
li .has-child{
margin-right: 20px;
}
<li>
<a class="has-child" href="http://google.com">Monitors</a>
<span class="has-arrow"></span></li>>
I wrote the following code, including a div and a span. I want the span inside the div to have a different colour, but it doesnt seem to work.. This is the html code:
<div class="menu">
<p class="menuHeader">Menu</p>
<ul class="menuList">
<li>Inspiration</li>
<li>Motivation</li>
<li>Decision</li>
<li>Solution</li>
<li>Action</li>
</ul>
<span id="decorationBox">
<br/>
</span>
</div>
In CSS I set the background color of the div 'menu' to a dark blue color, and the background color of the span 'decorationBox' to a lighter blue color. I also tried using a higher z-index to bring the span up to the front, but it wont display. Is it because of the span being inside the div?
You don't have any 'real' content in the <span>, therefore it won't (at least with default CSS settings) be displayed.
Setting display to block would make the width fit to the parent width:
→ jsFiddle
span#decorationBox {
background-color: red;
/* the default setting is "display: inline" for <span>s */
display: block;
}
Most of CSS properties does not work properly with span. Try to use a div instead.
It's because your span width is 0px. Place content in the span and you will see. With the br tag, you just have 18px on height in the span.
You can add property display:block; on span to see the difference.
The tag is used to group inline-elements in a document.
span is an inline tag by default, it doesn't have width or height properties, so if it is empty you cannot see it as bold or italic... You can change span to div or give block property in css:
.decorationBox {
display:block;
}
<div class="menu">
<p class="menuHeader">Menu</p>
<ul class="menuList">
<li>Inspiration</li>
<li>Motivation</li>
<li>Decision</li>
<li>Solution</li>
<li>Action</li>
</ul>
<span id="decorationBox">
Content here.
</span>
</div>
Css
div.menu {
background-color: blue;
}
.menu #decorationBox {
background-color: red;
display: block;
}
OR
div.menu{background:blue;}
.menu span{background-color:red;}
Ex. http://jsfiddle.net/2NwmU/1/
I am looking to style a list with images at the top and the bottom of the list. I know that in css3, there is the border-image property, however I need something that works in older browsers as well.
The list looks like this:
<ul>
<li> a </li>
<li> b </li>
</ul>
I need to have an image that comes before all the list items, and another one that comes after all the list items.
I know that I can do something like this:
<div id="top-image"></div>
<ul>
<li> a </li>
<li> b </li>
</ul>
<div id="bottom-image"></div>
Are there any better options than this?
May be you have to define bottom image in UL background & top image in first LI. like this:
ul{
background:url(bottom-image) no-repeat left bottom;
}
li{
background:url(bottom-image) no-repeat 0 0;
}
li + li{
background:none;
}
Check this example http://jsfiddle.net/CY5ck/
Could you help me fix the menu on this this page? The menu list items don't have a width defined, so they display at 100% width in IE7. If I make the span.right have a float: left, it fixes the problem, but then the rounded corners don't work. A possible solution might be to get rid of the right span and set a padding and background image to the anchor, but that will: a) prevent me from being able use to a background image on the anchor (for this instance, I suppose a solid color will do) and b) require that I break menu.png into separate image files.
If you guys have any good suggestions, let me know. Thanks!
If you move the actual text to the middle, between <span class="left"></span> and <span class="right"></span>, and encompass it in <span> tags:
<li><a href="#">
<span class="left"></span>
<span>Home</span>
<span class="right"></span>
</a></li>
You can then add the CSS rule:
#menu ul li a span
{
float: left;
}
Then remove float: left; from span.left and span.right. This should work fine on both Firefox and IE 7, and I'm assuming most other browsers too. Of course, this will only work if you're OK with restructuring the HTML a little.
I'm trying to create a simple image navigation for my site, using CSS to declare the background-image property of a list-item (li). The problem is, when I use text-indent to put the image off-screen, the link is no longer there (off screen as well I presume). Any help would be greatly appreciated. Here is my XHTML:
<div id="nav">
<ul>
<li class="current about">
about
</li>
<li class="contact">
contact
</li>
<li class="networks">
networks
</li>
</ul>
</div>
Here is my CSS:
#nav li {
display: block;
float:left;
background-image: url("images/nav-normal.png");
height:47px;
text-indent: -9999px;
}
I have also set up background-positions for the individual list-items because I'm using image sprites. Thanks in advance!
Apply that style to the #nav li a. Otherwise everything inside the li, including the link, is shifted off screen.