I'm making a basic navigation bar that consists of inline links all containing text and some also containing images. When an image is within the link, it moves the link element background (it does not move the link text apparently). The background moves more if the image is set to a larger size. I want all the elements to be exactly lined up.
Here is an image of the problem
Here is the relevant HTML:
<!--navigation bar-->
<div id="nav">
<a class="navLinks" href="">Resume</a>
<a class="navLinks" href="mylinkedinprofileURL">
<img class="logo" id="logo_linkedin" src="images/logoLinkedin.png">LinkedIn</a>
<a class="navLinks" href="wordpress">
<img class="logo" id="logo_wordpress" src="images/logoWordpress.png">WordPress</a>
<a class="navLinks" href="travels">Travels</a>
</div>
And here is the relevant CSS:
#nav {
position: relative;
top: 10px;
text-align: center;
}
.navLinks {
border-radius: 3px;
text-decoration: none;
color:white;
text-align: center;
width:110px;
height:20px;
padding:15px;
background-color: #353841;
display:inline-block;
}
.logo {
height:20px;
position:relative;
right:10px;
}
I'm very new to web development, so if there is a much better or more elegant way to be doing this, please let me know!
Add vertical-align:top to the tabs.
.navLinks {
vertical-align:top;
}
See DEMO here.
Related
Good day, this is my first ever question on Stack Overflow, so I hope I get it as right as possible.
I have done extensive research on my problem, mostly reading all the questions I could find on Stack Overflow and some other sites, but I could not find one answer that worked.
Some background: I am trying to write a website for recruiting for my work and it's the first ever website I have ever written. I am using a wamp server to run the site on localhost for testing. My issue is described as best as I could in the title. Find below my html code:
<html>
<head>
<title> BCB Call Plus SRL Home </title>
<link rel="stylesheet" href="Main Style.css">
</head>
<body>
<div id = "main_content">
<ul id = "nav_container">
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px"> </li>
<li> Home </li>
<li> Menu 1 </li>
<li> Menu 2 </li>
<li> Menu 3 </li>
<li id ="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href= "Page4.html"> Angajari </a>
<ul class="sub_menu">
<li>Ce Vrem</li>
<li>Aplica</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
And below my CSS code:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
}
.sub_menu li a{
display:none;
}
#angajari ul.sub_menu li {
float:left;
}
#angajari ul.sub_menu li a {
position:absolute;
top:0;
white-space: nowrap;
height:auto;
}
#angajari:hover ul.sub_menu li a {
display:block;
}
Here's a picture of what happens when I hover over the problematic menu item:
Display Issue
Final notes: I am running this only under Chrome for now. I have noticed that it doesn't read my css right in IE 8 (yes, I use IE 8, because one of my bosses wants us to.) Cross-platform compatibility fixes are welcome, but not in the scope of my current question. My WAMPSERVER has apache 2.4.9 and PHP 5.5.12.
I even tried my code on some online web code testing site whose name I forgot and got the same results. If you find that my code actually displays properly, then it may be an issue with my configuration.
Here is a jsfiddle.
You need your .sub_menu to be absolute, not your li as. That's it!
.sub_menu {
position:absolute;
}
Working demo here: http://jsfiddle.net/pxzhqqnb/1/
And I'd make the .sub_menu hidden instead of its children. Personal preference, but I think it makes more sence.
Why does it happen?
Consider this simple example: (think of .relative as position: relative and .absolute as position: absolute)
<div class="relative">
Text
<div class="absolute">Link 1</div>
<div class="absolute">Link 2</div>
</div>
Link 1 is absolute. It searches for the closest relative element. That's .relative. Now Link 1 gets right under the relative div.
Link 2 follows the same rules, thus both links overlap.
Now let's change the code a little:
<div class="relative">
Text
<div class="absolute-wrapper">
<div>Link 1</div><!-- these are now static by default -->
<div>Link 2</div>
</div>
</div>
absolute-wrapper is absolute, so it searches for the closest .relative element and gets right under it. Now both links are normal elements wrapped in a div, so they render as expected.
Demo of both examples here: http://jsfiddle.net/w0h7cdhe/2/
I've done a few tweaks to your css code:
body {
text-align: center;
}
a {
font-size: 150%;
text-decoration: none;
color: #000000;
font-weight: bold;
vertical-align: middle;
padding: 0px 10px; /* this is just for the hover effect to lose the spaces in the html */
}
a:hover {
background-color: #338533;
}
ul {
padding: 0;
margin: 0;
}
ul#nav_container {
background-color: #F2FFF2;
list-style-type: none;
text-align: center;
}
ul#nav_container li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
#angajari ul.sub_menu { /* do this with the menu, not just the link */
display: none;
position: absolute; /* set correct position */
}
#angajari ul.sub_menu li {
display: inline-block;
}
#angajari ul.sub_menu li a { /* we don't want top: 0 because it should not overlap */
white-space: nowrap;
}
#angajari:hover ul.sub_menu { /* see above -> menu not link */
display: block;
}
<div id="main_content">
<ul id="nav_container">
<li>
<img id="logo" src="http://lorempixel.com/150/75" style="width:150px;height:75px">
</li>
<li> Home <!-- I've removed the spaced and added the gap in css -->
</li>
<li> Menu 1
</li>
<li> Menu 2
</li>
<li> Menu 3
</li>
<li id="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href="Page4.html">Angajari</a>
<ul class="sub_menu">
<li>Ce Vrem
</li>
<li>Aplica
</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
So i tried to fix your Problem i end up with this result
I've adjusted the margin of the logo as shown below:
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px;margin-left: -50px;"> </li>
because I adjust the width of the text container and replace the last 4 lines in your CSS CODE as shown below:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
width: 95px;
}
#main_content ul ul {
position: absolute;
visibility: hidden;
}
#main_content ul li:hover ul {
visibility: visible;
}
so i made minor changes but i dont know if that's what you want to happenenter code here
I'm sort of new to HTML and currently, I am creating a custom home page for myself containing links to site I often visit.
When I hover over a picture it expands to show more specific links (i.e. subreddits).
However, the problem is that the "sub-link-icons" are not properly aligned with the expanding DIV It will show in front of the bigger picture when hovering over it.
What I am trying to do is have the sub-link-icons to be in sync with the expanding div.*
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Homepage</title>
</head>
<body>
<div class="submenu" id="steam"><img src="steam.png"></div>
<div class="submenu" id="reddit">
<img src="reddit.png"/>
<ul>
<li><img src="reddit.png"/></li>
<li><img src="reddit.png"/></li>
<li><img src="reddit.png"/></li>
</ul>
</div>
<div class="submenu" id="youtube"><img src="youtube.png"/></div>
</body>
</html>
CSS:
body {
background-color: #330000;
color: white;
}
div img {
width:256px;
height:256px;
border-radius:5px;
}
li img {
width:75px;
height:75px;
border-radius:15px;
}
#youtube:hover {
border: #E6E6E6 solid 4px;
background-color: #E6E6E6;
}
#steam:hover {
border: #12151A solid 4px;
background-color: #12151A;
}
#g2a:hover {
border: #0F1F2E solid 4px;
background-color: #0F1F2E;
}
#reddit:hover {
border: #999999 solid 4px;
background-color: #999999;
}
ul{
position:absolute;
list-style-type: none;
display:none;
margin-left: 125px;
}
.submenu {
border-radius: 5px;
position:relative;
display: inline-block;
margin-left: 0px;
width:256px;
height:256px;
border:4px solid #330000;
text-align:center;
margin-left:5px;
margin-top:5px;
transition: width 1s;
z-index:0;
}
.submenu img {
float:left;
}
.submenu:hover {
width:350px;
transition: width 1s;
}
.submenu:hover img {
float:left;
z-index:2;
}
.submenu ul {
position: absolute;
}
.submenu:hover ul {
display:inline-block;
float:right;
margin-top:-10px;
margin-left:-45px;
position:absolute;
z-index: 1;
}
.submenu:hover ul li img {
float:left;
margin-left: -30px;
margin-top: 12.5px;
}
I've tried searching the web for help but couldn't quite manage it.
JSFIDDLE
Lets go through this step by step.
First issue: On hover, "sub-icon-links" are layered over your big pictures, instead of under it.
This IS fixable with z-index, but first you have to understand how z-index works.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
With z-index you can layer elements that are in the same HTML layer. Because it didn't work I assume you've tried to apply z-index on the sub-menu-links. This wouldn't work because the big picture is not on the same layer as them. If we take a look at your HTML structure you'll see:
<div class="submenu" id="reddit">
<img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/>
<ul>
<li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
<li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
<li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li>
</ul>
</div>
To use z-index in this case, you have to see at which points the images or their containers are on the same layer.
Your big image is contained within an anchor tag (a)
Your small images are contained within list items
These list items are contained within an unordered list
This unordered list and the anchor tag are on the same layer. Applying z-index to one of these will fix this issue.
Note: This works different when using things like "position: absolute" and "position: fixed" or any other attribute that changes the position of the element in the HTML stack.
JSFiddle: https://jsfiddle.net/eehdo8wa/5/
What I did:
Added "z-index: -1;" to ".submenu ul"
Removed "z-index: 1;" from ".submenu:hover ul"
Second issue: On hover, the "sub-icon-links" should expand at the same rate as the div expands
So, doing this should be very simple now the pictures are layered under the big picture correctly. Basically, when you think about it, all you should have to do is make the pictures stick to the right side of its parent, so when it expands, the pictures stick to the right side and slide along, taking them into the view.
JSFiddle: https://jsfiddle.net/eehdo8wa/6/
What I did:
I redid some of the CSS to make it so everything is already in the right position before sliding into the view. This is essentially what you want in these cases. In your original fiddle you had a LOT of styling on the hover portions, changing all kinds of styling and spacings, but was it really needed? In the end, no. Now it's all in position behind the big image, ready to slide right into the view.
So, this might sound basic for some of you guys. But i just haven't been able to figure it out.
So i have this CSS and this HTML Code:
<style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
position: absolute;
left:0;
right:0;
}
.ppt img {
margin-left: 5px;
}
</style>
<center>
<ul class="ppt">
<li>
<img src="#">
<img src="#">
</li>
</ul>
With this code i will have 2 pictures next to each other in the center.
Now i would like to add 2 more pictures, those 2 just can't be in "lo" nor "li". But the pictures will have to be on the same row, one of them will be at the start and the other one will be at the end, how can i do this?
(Click here for a picture explanation)
Thanks in advance.
Check http://jsfiddle.net/AvqEB/1/
ul.ppt {
position: relative;
list-style:none;
display:inline-block;
padding:0;
margin:0
}
.outerimg { display:inline-block; margin-left: 5px;}
.ppt li {
display:inline-block;
}
.ppt img {
margin-left: 5px;
}
and html
<img class="outerimg" src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg" />
<ul class="ppt">
<li>
<img src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg">
<img src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg">
</li>
</ul>
<img class="outerimg" src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg" />
You can do this by floating things to the left. Here is a jsfiddle demo: http://jsfiddle.net/6L7x9/1/
On an aside, I find using DIV with a centered class far preferable to using the CENTER tag.
<style type="text/css">
ul.ppt {
position: relative;
padding:0px;
margin:0px;
}
.ppt li {
padding:0px;
margin:0px 5px;
list-style-type: none;
float: left;
}
.leftfloat { float: left; }
.inlineimage {
margin:0px 0px 0px 5px;
border:0px;
}
</style>
<center>
<img src="#" class="leftfloat inlineimage" />
<ul class="ppt leftfloat">
<li>
<img src="#" class="inlineimage">
<img src="#" class="inlineimage">
</li>
</ul>
<img src="#" class="leftfloat inlineimage" />
One does wonder why the bounding images must be outside the UL...
UPDATE POST OP COMMENT
Ok, I've taken your sample, dropped it into JSFiddle, and modified it so that back & forward are on either side of the "slideshow" image (http://jsfiddle.net/SFvGk/). One immediate issue is the varying width of the slideshow frame, which causes the "next" button to jump around. You could mitigate that by setting a fixed with for the UL, and then accepting empty space when narrower images are displayed.
Modifications:
Add class "payitforward" to the next/prev buttons.
Add style "display:inline-block" to UL and set margin/padding to 0 for UL and LI.
Add to top of script:
var $slideContainer = $("ul.ppt");
$slideContainer.width(cur.width())
Add to end of "forward" function:
$slideContainer.width(cur.width())
Comments:
You might look into events on the fadeIn/fadeOut functions to possibly smooth out movement of the "Next" button on the right, or just fix the width of the slideshow container so the "Next" button never moves.
Definitely look into requestAnimationFrame to replace "setInterval". Here is one resource: http://creativejs.com/resources/requestanimationframe/.
Use :after and :before.
li{height:20px; width:20px; margin:10px; background:red; display:inline-block; position:relative;}
li:before, li:after{content:" "; position:absolute; height:20px; width:20px;}
li:last-child:after{background:blue; right:-25px;}
li:first-child:before{left:-25px; background:green;}
Fiddle here.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I'm not really good with CSS and html when the layout is complicated. I can quick fix things, but I have no real knowledge.
I'm trying to adapt this demo : http://demo.marcofolio.net/bgimg_slideshow/ for my website.
Problem: the logo is a background image for a div and not a link.
I'm not good enough to see how i could change it without defacing the layout.
Could you help me either by providing the fix (if it doesn't take you more than 5 minutes) or by giving me hints or links so i could figure it out myself?
Edit : here's a jsfiddle with minimum code
And here are the files :
html :
<div id="header">
<div id="headerimgs">
<div id="headerimg1" class="headerimg"></div>
<div id="headerimg2" class="headerimg"></div>
</div>
<div id="nav-outer">
<div id="navigation">
<div id="menu">
<ul>
<li>Marcofolio</li>
<li>Twitter</li>
<li>RSS</li>
<li>jQuery</li>
<li>CSS</li>
<li>Advertisements</li>
</ul>
</div>
</div>
</div>
</div>
Css :
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}
#header { height:600px; }
.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:600px; position:absolute; }
#nav-outer { height:110px; padding-top:11px; position:relative; top:24px; background-image:url("http://demo.marcofolio.net/bgimg_slideshow/images/headerbg.png"); }
#navigation { height:100px; width:960px; margin:0 auto; background-image:url("http://demo.marcofolio.net/bgimg_slideshow/images/logo.png"); background-position:top left; background-repeat:no-repeat; }
#menu { position:relative; top:85px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; font-variant:small-caps; font-size:12px; }
#menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; }
#menu ul li a:hover { text-decoration:underline; }
You should add
<div id="logo">
<a href="#">
<img src="images/logo.png" alt="" />
</a>
</div>
to <div id="#navigation">, right before <div id="search">
Then:
1) you should float the logo to the left
#logo{
float: left;
}
2) remove top: 85px; from #menu and add clear: both;
3) remove background-image: url("../images/logo.png"); from #navigation
This way, you have clickable image logo. :)
Explanation:
You float the logo to the left because #search is floated to right
You remove top: 85px; because that was compensation for empty space which is now filled with image, and add clear: both because it clears the floats and positions the menu back in place
Here is how I did it.
First, Remove the background image from your #navigation div.
Then add the following as a first child of the #navigation.
<a href="/" style="
height: 80px;
width: 500px;
background-image: url('http://demo.marcofolio.net/bgimg_slideshow/images/logo.png');
background-position: top left;
background-repeat: no-repeat;
display: inline-block;
position: absolute;
" alt="Image Description"></a>
So your Navigation div should look like this:
<!-- Remove all background attributes from #navigation in the CSS -->
<div id="navigation">
<!-- Below is the new line!, makes your logo clickable! -->
<a id="logo" href="" style="height: 80px; width: 500px; background-image: url('http://demo.marcofolio.net/bgimg_slideshow/images/logo.png'); background-position: top left; background-repeat: no-repeat;display: inline-block; position: absolute;"></a>
<!-- Everything else below stays the same!... -->
<div id="search">
<form>
<input type="text" id="searchtxt">
<input type="submit" value="search" id="searchbtn">
</form>
</div>
<div id="menu">
<ul>
<li>Marcofolio</li>
<li>Twitter</li>
<li>RSS</li>
<li>jQuery</li>
<li>CSS</li>
<li>Advertisements
</li></ul>
</div>
</div>
Basically, you make a <a href> which has a background image (all a href's are clickable). When you assign a background image to a <a href>, you have to set the display:block for it to be rendered as a block level element. In this case, we position it absolutely to knock it out of the document flow and keep it from disturbing other elements.
There are better ways to do this, but it would probably require re-writing some of your code (Which is not that difficult, but does require an amateur skill level of HTML & CSS).
Hope this helps!
I did some live edits on the link you provided. I think this is what you want to achieve.
Here is a Demo, based on your fiddle.
HTML
<div id="navigation">
<h1 id="logo">My Website!<br />
<span>loving jQuery and CSS</span>
</h1>
...
CSS
#navigation {
position: relative;
}
#logo {
position: absolute;
top: 0;
left: 0;
}
#logo a {
color: #fff;
text-decoration: none;
font-size: 32px;
}
#logo span {
font-size:20px;
color:#48bdee;
margin-left:50px;
}
If you're up to using javascript too, you could do the following.
Set the style of the div to show up as a mouse pointer when hovering over it:
.Logo { cursor:pointer; }
Then using javascript, have a url open with the onclick event:
<div class="Logo" onclick="window.open('google.com')" />
I want to align menu text at the bottom of image how to i achieve it?
Expected output:
Image Image Image Image
[menutext] [menutext][menutext] [menutext]
Actual output :
Image[menutext] Image[menutext] Image[menutext] Image[menutext]
my Css Code:
#vilaniHeader
{
margin: 0;
padding: 0;
height: 80px;
background-color: Black;
}
#vilaniHeader h1
{
padding-left: 15%;
font: Arial;
font-size: 30px;
color: #ffffff;
font-weight: bold;
float: left;
}
#vilaniHeader #menu
{
color: #ffffff;
font: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 30px;
padding-left: 30%;
}
#vilaniHeader #menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-right: 300px;
padding-bottom: 300px;
}
#vilaniHeader #menu li
{
display: inline;
margin: 0 15px 0 15px;
float: none;
text-align:center;
}
#vilaniHeader #menu a
{
text-decoration: none;
color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
color: red;
clear:both;
padding-top:50px;
background-image:url:("Styles/menuHome.png") ;
vertical-align:text-top;
}
and My HTML code
<div id="vilaniHeader">
<h1>
Comany name
</h1>
<div id="menu">
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li><a href="About.aspx">Car</li>
<li><a href="About.aspx">Mobile</li>
<li><a href="About.aspx">OldThings</li>
<li><a href="About.aspx">Matrimoni</li>
</ul>
</div>
</div>
I want menu text should be align at the bottom of the image plese help me to do that.
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs
HTML
<div id="nav">
<span class="image"></span><span>About Us</span>
<span class="image"></span><span>Investors</span>
</div>
CSS
#nav a {
display:block;
float: left;
width:100px;
}
.image {
display:block;
background: url("myimage.jpg") no-repeat scroll center center transparent;
height:40px;
width:100px;
}
Make the img a block element so it takes the full width / line-breaks afterwards.
#menu li { display:block; }
That’s all.
I would suggest add some wrapper on text and make image and wrapper both display:block;
You can use span tag as an wrapper for text.
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
li img, li span
{
display:block;
}
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-height property. That will cause your text to move down, so it will be in the center of it's line.
I have two solutions for you. style1 works for items with text smaller than the image. style2 works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
#menu .style1 img, #menu .style2 span {
overflow:hidden
}
#menu .style1 span, #menu .style2 img {
display:block
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
<li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
</ul>
</div>
I'm not a span-fan but it seems like you can't do it without here.
BTW, why don't you just add a br?
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
<li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
</ul>
</div>
I guess that's the most easy and reliable solution.
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LI and then opens the desired link.
http://jsfiddle.net/WcePK/
HTML
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Car</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Mobile</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">OldThings</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Matrimoni</li>
</ul>
CSS
LI {
float: left;
margin: 5px;
padding: 50px 10px 10px;
min-width: 100px;
background-repeat: no-repeat;
background-position: center 10px;
background-color: #366D93;
text-align: center;
cursor: pointer
}