Is it possible to make the image menu keep highlighted when hovering on its subitem? I have 5 navigation menu items but only has has a dropdown. Everytime I hover on subitems of About Us(which the one I'm taking about), the About Us image turns back to it's original image.
JFiddle:
Is there a workaround for this? My friend says it is not possibe, but I'm not fully convinced.
And this is my code (for reference)
<html>
<head>
<title>CTI | About us</title>
<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>
<script>
function over(me){
me2=me;
if(me=='about'){
$('#id_About').attr('src','images/hover-aboutus.jpg');}else{$('#id_About').attr('src','images/aboutus.jpg');}
if(me=='partners') {
$('#id_Partners').attr('src','images/hover-partners.jpg');}else{$('#id_Partners').attr('src','images/partners.jpg');}
if(me=='products'){
$('#id_Products').attr('src','images/hover-products.jpg');}else{$('#id_Products').attr('src','images/products.jpg');}
if(me=='contactus'){
$('#id_Contactus').attr('src','images/hover-contactus.jpg');}else{$('#id_Contactus').attr('src','images/contactus.jpg');}
}
$( document ).ready(function() {
me2='about';
$('#id_About').attr('src','images/hover-aboutus.jpg');
});
</script>
<style type="text/css">
img {
border: 0;
}
a { text-style:none; }
body {text-align: center; margin: 0; padding: 0;}
#wrapper { width:830px; margin:0 auto; }
</style>
</head>
<body>
<input id="data2" type="hidden" value="<?php if (isset($_POST['data2'])){echo $_POST['data2']; }else{} ?>">
<div id="wrapper">
<table width="830px" border=0 cellspacing=0 cellpadding=0 >
<tr>
<td valign="top" align="left"><img src="images/cti-logo.png" /></td>
<td valign="bottom" align="right">
<a href="welcome.php">
<img src="images/home.jpg" onmouseover="this.src='images/hover-home.jpg'" onmouseout="this.src='images/home.jpg'"/>
<a href="aboutus1.php" class="menu" target="content">
<img id="id_About" onclick="over('about')" src="images/aboutus.jpg" onmouseover="this.src='images/hover-aboutus.jpg'" onmouseout="if(me2=='about'){}else{this.src='images/aboutus.jpg'}" />
</a>
<a target="content" href="partners.php">
<img onclick="over('partners')" id="id_Partners" src="images/partners.jpg" onmouseover="this.src='images/hover-partners.jpg'" onmouseout="if(me2=='partners'){}else{this.src='images/partners.jpg'}" />
</a>
<a href="products1_1.php" target="content">
<img onclick="over('products')" id="id_Products" src="images/products.jpg" onmouseover="this.src='images/hover-products.jpg'" onmouseout=" if(me2=='products'){}else{this.src='images/products.jpg'}" />
</a>
<a href="contactus.php" target="content">
<img id="id_Contactus" onclick="over('contactus')" src="images/contactus.jpg" onmouseover="this.src='images/hover-contactus.jpg'" onmouseout=" if(me2=='contactus'){}else{this.src='images/contactus.jpg'}" class="contactus" />
</a>
</td>
</tr>
<tr>
<!--td colspan="2" class="bar"><img src="images/cti-upperbar.jpg" /></td-->
</tr>
</table>
</div>
<img src="images/cti-upperbar.jpg" />
</body>
</html>
UPDATED
I'd like to thank you all for all the efforts. :)
I did your suggestions and followed the Fiddle format but there's no image on menu showing :( Still stucked. :(
CODE:
<html>
<head>
<title>CTI | About us</title>
<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/css">
.btn1{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn1{
background: url("images/home.jpg") no-repeat;
}
.btn1:hover{
background: url("images/hover-home.jpg") no-repeat;
}
.btn2{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn2{
background: url("images/aboutus.jpg") no-repeat;
}
.btn2:hover{
background: url("images/hover-aboutus.jpg") no-repeat;
}
.btn3{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn3{
background: url("images/partners.jpg") no-repeat;
}
.btn3:hover{
background: url("images/hover-partners.jpg") no-repeat;
}
.btn4{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn4{
background: url("images/products.jpg") no-repeat;
}
.btn4:hover{
background: url("images/hover-products.jpg") no-repeat;
}
.btn5{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn5{
background: url("images/contactus.jpg") no-repeat;
}
.btn5:hover {
background: url("images/hover-contactus.jpg") no-repeat;
}
.menu ul li:hover .btn {
background-position: -5px -120px;
}
.menu ul li{
list-style:none;
}
.menu
{
display: inline;
float: left;
}
a {
text-decoration:none;
color:#fff;
font-family:verdana;
font-size:12px;
}
.menu ul li ul{
display:none;
background:#17c0fa;
width:100px;
color:#fff;
}
.menu ul li:hover ul{
display:block;
padding:15px;
line-height:20px;
}
.menu ul li a:hover{
color:#fff;
}
.menu ul li:hover .btn {
background-position: -5px -120px;
}
</script>
<script type="text/javascript">
$(function(){
$('li').hover(function(){
$(this).find('ul').fadeIn();
},function(){
$(this).find('ul').fadeOut();
});
});
</script>
</head>
<body>
<div id="wrapper"-->
<table width="830px" border=0 cellspacing=0 cellpadding=0 >
<tr>
<td valign="top" align="left"><div style="width:85px;height:58px;"></div></td>
<td valign="bottom" align="right">
<div class="menu">
<ul>
<li href="welcome.php" class="btn1"><img src="images/home.jpg" onmouseover="images/hover-home.jpg" onmouseout="images.home.jpg" /></li>
<li class="btn2">
<ul>
<li>About CTI</li>
<li>Our Clients</li>
<li>Mission / Vision</li>
</ul>
</li>
<li href="partners.php" class="btn3"></li>
<li href="products.php" class="btn4"></li>
<li href="contactus.php" class="btn5"></li>
</ul>
</div>
</td>
<div class="clear"></div>
</tr>
</tr>
</table-->
</table>
</div>
<img src="images/cti-upperbar.jpg" />
</body>
</html>
I also removed the JS since css is easier than my recent js.
Going off of your fiddle (please stick with that method, not JavaScript!)
Remove the button and just add the class to you li. When you hover over the li, you can move into it's child elements and still be over the li but when you hover over the <div> and move into the <ul> you are no longer within the <div>.
Remove position:absolute and margin-top:90px from you sub-menu. Everything should work now.
<div class="menu">
<ul>
<li class="btn">HOVER
<ul>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
</ul>
</div>
.menu ul li ul{
display:none;
background:#78a802;
width:200px;
color:#fff;
padding-top:90px;
}
Working example: http://jsfiddle.net/y2BtT/89/
Maybe you can do something in the submenu with hover function
You mean like this: http://jsfiddle.net/yuhua/jJK2n/ ?
to solve your problem the only thing you will need to do is add another CSS rule. When you hover over the menu items to keep the changed image.
.menu ul li:hover .btn {
background-position: -5px -120px;
}
EXAMPLE
You can tell you to your friend that he lost cause everything is possible in Web Development the thing is how much time and effort you are willing to spend for it :D
Easiest Answer:
In your CSS just replace...
.btn:hover{
with
.menu li:hover .btn {
Demo of your example:http://jsfiddle.net/y2BtT/94/
For Inspiration Check out the demo i made: http://jsfiddle.net/techsin/FtPvf/1/
Related
When I open the page on the phone it is not centered instead all goes to the left side, whereas when I open it on the computer everything looks nice.
I tried to add and remove codes to the page for example add min-width/max-width,change valutes - %/px .
HTML--------------
<html>
<head>
<title> Farbawlesie </title>
<link rel="stylesheet" type="text/css" href="styl.css">
<meta http-equiv="Imagetoolbar" content="no" />
<link rel="icon" type="image/png" href="naszywka3.gif">
<link rel="shortcut icon" href="farbawlesie.pl/favicon.ico">
<meta charset= "UTF-8">
</head>
<body oncontextmenu="return false" background="las.jpg">
<div id="page-wrap">
<div id="baner">
<img src="banern.png" height="250">
</div>
<hr color="white">
<br><br><br>
<center>
<div id="menu">
<ol>
<li><font color="yellow">⇒</font> Start</li>
<li><font color="yellow">⇒</font> O nas
<ul>
<li>
Drużyna
</li>
<li>
Zasady
</li>
</ul>
</li>
<li><font color="yellow">⇒</font> Terminarz</li>
<li><font color="yellow">⇒</font> Forum</li>
<li><font color="yellow">⇒</font> Galeria</li>
<li><font color="yellow">⇒</font> Kontakt</li>
</ol>
</div>
</center>
<br><br><br><br>
<hr color="white">
<br><br><br><br>
<font size="5" color="white" family="Times">
Witaj na naszej stronie ! ☺
<br>
Masz pytanie ? Skontaktuj się z nami ! Więcej w zakładce "Kontakt".
<br><br>
<center>
<div id="srodek_naglowek">
<img src="dr.jpg" width="850px" height="420px"/>
<img src="baner.png" width="850px" height="420px" />
<img src="farba.jpg" width="850px" height="420px"/>
<img src="far6.jpg"width="850px" height="420px"/>
<img src="3.png" width="850px" height="420px"/>
<img src="swt.jpg" width="850px" height="420px"/>
</div>
<center>
<br><br><br><br>
<hr color="white">
<br><br>
<center>
<font color="red"><h2>Naszywki członków drużyny</h2></font>
<img src="naszywka3.gif">
<font size="3" color="white">Otrzymuje każdy członek</font>
<br><br><br>
<img src="naszywka2.gif">
<font size="3" color="white">Otrzymuje osoba która brała 3 razy udział w nocnym strzelaniu</font>
<br><br><br>
<img src="naszywka1.gif">
<font size="3" color="white">Otrzymuje osoba która ma 5 letni staż w stowarzyszeniu</font>
<br><br><br>
<hr color="white">
<div id="stopka">
Copyright © Wszelkie prawa zastrzeżone
</div>
</div>
</body>
</html>
CSS-----------------
head {
text-align: center;
}
body {
width: 100%;
margin: auto;
}
#srodek_naglowek {
text-align: center;
}
#baner {
text-align: center;
}
a {
text-decoration: none;
color: white;
text-align: center;
}
#page-wrap {
width: 100%;
margin: 0 auto;
}
#menu {
text-align: center;
width: 100%;
font-family: Arial;
}
ol {
text-decoration: none;
color: white;
list-style-type: none;
padding: 0;
margin: 0;
font-size: 18px;
height: 2em;
line-height: 2em;
text-align: center;
}
ol > li {
float: left;
width: 150px;
}
ol > li > a: hover {
color: grey;
}
ol > li: hover {
}
#stopka {
color: white;
text-align: center;
font-size: 10px;
}
ol {
}
ol > li > ul > li {
}
ol > li > ul > li: hover {
}
ol > li > ul > li: hover a {
color: grey;
}
ol > li > ul {
display: none;
}
ol > li: hover > ul {
display: block;
}
ol > li > ul {
display: none;
}
ol > li: hover > ul {
display: block;
}
WEBSITE:
http://www.farbawlesie.pl
Your header image has a hard-coded width of 1300px. In smaller screen sizes, there is no room to fit the image, so you're seeing the overflow. Adding the following CSS is one way to fix this:
#baner img {
max-width: 100%;
height: auto;
}
The main culprit would be the hard-coded dimensions on the images. If you set width and/or height on the image, the browser will not recalculate its size and stretch some of the divs just to fit them in.
The quickest fix would be to remove the height from this image by changing this:
<img src="banern.png" height="250">
to this:
<img src="banern.png">
and then allowing this image to take 100% width:
#baner img {
width: 100%
}
This however won't center align your other row of images.
To help the situation, you could update your body properties with overflow-x:hidden, to remove the scroll in the bottom.
I'm trying to make a horizontal navi menu.
I want to get the logo and then the parts of the menu but the inline doesn't work.
I wanted the images above the text so I used a table to get this, but this broke the inline effect.. I'd be greatful for any help
<html>
<head>
<meta charset="utf-8">
<title>TechSocket</title>
<style>
html, body {
width: 100%;
height: 90%;
}
body {
background-color: #000;
}
#nav {
display: inline;
background-color: #CF6;
position: fixed;
padding: 1%;
width: 97%;
}
ul {
diplay: inline;
list-style-type: none;
margin: 0;
padding: 0%;
}
#nav li {
display: inline;
}
#logo {
padding-left: 0%;
}
table {
border-spacing: 25px;
}
</style>
<script>
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a id="headIMG" href="#"><img id="logo" src="100-Beanie-Drive-Logo-250.jpg" width="250" height="100"/></a><li>
<li>
<table>
<tr>
<td><img id="text1"src="mouse.png" width="50" height="50"/></td>
<td><img id="text2" src="cam.png" width="50" height="50"/></td>
<td><img id="text3"src="cloud.png" width="50" height="50"/></td>
<td><img id="text4"src="clock.png" width="50" height="50"/></td>
</tr>
<tr>
<td>Mouse</td>
<td>Camera</td>
<td>Cloud</td>
<td>Clock</td>
</tr>
</li>
</ul>
</div>
<div id="main">
</div>
</body>
</html>
Try floating it to the left, like so:
#nav li {
float: left;
}
You probably don't need to have this line for your ul
diplay: inline;
Alternatively you can use display:inline-block, which might suit your needs better.
li elements are block elements so inline probably doesn't work with them, especially when they have other elements inside them. I'm just guessing though, never actually tested it.
As for floating, well personally I'd be against it. I've always found it to cause issues when not used properly. That said, it is a possible fix.
EDIT: I have found this code, which appears to be sorta working the way I want it to. You can check it out live at EDIT - I still can't get it to sit within my #main div though! I've tried using both 100% and 990px within #menu span for width - neither seem to work.
<div id="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 3</li>
<li>Menu item 2</li>
</ul>
<span></span>
</div>
#menu {
text-align: justify;
}
#menu * {
display: inline;
}
#menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
END EDIT
I have a menu I'm having some issues with - mainly horizontal issues :)
Basically, when you view the website in Chrome, the menu is centered the way I want it to be.
When you view the website in FireFox, the menu is 5-10px short on the right side.
And when you view it in Internet Explorer, the menu is not sitting left and is overflowing off of the right side of the page.
View it for yourself at: EDIT (Keep in mind, index2.php here, not the original index)
So my question is:
How can I style/code this menu correctly to fit within my parent div?
I did look through previous topics with similar questions, however, was unable to make anything work. Thank you in advance :)
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EDIT </title>
<link rel="stylesheet" href="style.css" type="text/css">
<style>
#sliderwrapper {width:635px;}
#control {
text-align:right;
margin-top:5px;
}
#control a {
background:#87e7fa;
padding:0 5px;
color:#FFFFFF;
text-transform:uppercase;
text-decoration:none;
margin-left:5px;
}
#control a.active {background:#265db9;}
#control a span {visibility:hidden;}
.sexyslider-control span {display:none;}
.sexyslider-title {
font-weight:bold;
color: #FFFFFF;
}
</style>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sexyslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").SexySlider({
width : 981,
height : 500,
delay : 3000,
strips : 18,
autopause : false,
<!--navigation : '#navigation',--!>
control : '#control',
direction : 'left',
effect : 'fade'
});
});
</script>
<body>
<div id="wrapper">
<div id="header"><img src="images/header.gif" alt="" /></div>
<div id="main">
<ul>
<h2><li>Home</li>
<li>Meet Our Team
<li>Office Information</li>
<li>First Visit</li>
<li>Dental Topics</li>
<li>Office Tour</li>
<li>Contact Us</li></h2>
</ul>
<div id="sliderwrapper" class="clearfloat">
<div id="slider" style="width:100%">
<img src="images/slide1.jpg" alt="" "/>
<img src="images/slide4.jpg" alt="" "/>
<img src="images/slide2.jpg" alt="" " />
<img src="images/slide3.jpg" alt="" "/>
<img src="images/slide4.jpg" alt="" "/>
<img src="images/slide5.jpg" alt="" "/>
<img src="images/slide6.jpg" alt="" "/>
</div>
<div id="control" style="margin-top:10px; margin-right:-347px;"></div>
</div>
</div>
<div id="footer"><img src="images/footer.gif" alt=""/></div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
background-color: #87e7fa;
font-size:100%;
text-align:center;
}
#wrapper {
margin:0 auto;
padding:0;
text-align:center;
background:url('images/bg.gif') repeat-y;
width:1200px;
}
#header {
width:1200px;
height:358px;
}
#main {
width:990px;
height:100%;
margin:0 auto;
text-align:left;
}
#footer {
clear:both;
width:1200px;
height:354px;
}
h2 {
font-family:soos_font;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
}
ul
{
list-style-type:none;
margin:10 0;
padding:0;
}
li
{
display:inline;
width:100%;
margin:0 auto;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#87e7fa;
text-align:center;
padding:7px;
text-decoration:none;
text-transform:uppercase;
border-radius:5px;
margin:0 auto;
}
a:hover,a:active
{
background-color:#3650a2;
}
I have update you css
css
#main {
width:990px;
height:100%;
margin:0 auto;
text-align:center;
}
#main ul{
list-style-type:none;
margin:0;
padding:0;
}
#main li{
display:inline-block;
/*width:100%;*/
margin:0 3px;
}
html
<div id="main">
<ul>
<li>Home</li>
<li>Meet Our Team
<li>Office Information</li>
<li>First Visit</li>
<li>Dental Topics</li>
<li>Office Tour</li>
<li>Contact Us</li>
</ul>
<br style="clear:both;"/>
</div>
here is the jsFiddle File
Also don't wrap li in to h2, this is not a valid code.
A bit new to styling sheets. I have a div for my site's content. I've aligned my h1 to be in the middle of that div by using the margin-right property. When I use the margin-right property on the p tag within the same div, however, it also affects the h1 and moves that further left. I figure I shouldn't be using margin-right, but what is the best way to do this?
Please let me know if my question is unclear.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
<title>
Putnam County Family Support Services - Resources
</title>
</head>
<body>
<div id="container">
<div id ="top">
<center><img src="images/logo1.jpg" alt="logo" /></center>
</div>
<div id="navigation">
<ul>
<li><a href="index.html" onMouseOver="document.MyImage4.src='images/home_nav1.jpg';" onMouseOut="document.MyImage4.src='images/home_nav.jpg';">
<img src="images/home_nav.jpg" name="MyImage4"></a> </li>
<li><a href="services.html" onMouseOver="document.MyImage3.src='images/services_nav1.jpg';" onMouseOut="document.MyImage3.src='images/services_nav.jpg';">
<img src="images/services_nav.jpg" name="MyImage3"></a> </li>
<li><a href="resources.html" onMouseOver="document.MyImage2.src='images/resources_nav1.jpg';" onMouseOut="document.MyImage2.src='images/resources_nav.jpg';">
<img src="images/resources_nav.jpg" name="MyImage2"></a> </li>
<li><a href="staff.html" onMouseOver="document.MyImage1.src='images/staff_nav1.jpg';" onMouseOut="document.MyImage1.src='images/staff_nav.jpg';">
<img src="images/staff_nav.jpg" name="MyImage1"></a> </li>
<li><a href="contact.html" onMouseOver="document.MyImage.src='images/contact_nav1.jpg';" onMouseOut="document.MyImage.src='images/contact_nav.jpg';">
<img src="images/contact_nav.jpg" name="MyImage"></a> </li>
</ul>
</div>
<di id="content">
<h1>Contact</h1>
<p>Address: 22 West Washington Street<br />Greencastle, IN 46135</p>
<p>Phone number:</p>
</div>
<div id ="footer">
</div>
</div>
</body>
</html>
CSS:
body {
background: #f3f6f3;
text-align: center;
}
#container {
color: #1e337a;
width: 650px;
margin: 0 auto;
}
#top {
padding-bottom: 25px;
}
#navigation {
float:left;
position: absolute;
}
#navigation ul {
list-style: none;
padding-top: 20px;
}
#navigation ul li {
padding-bottom: 20px;
margin-right: 40px;
}
#content {
float: right;
border: 1px;
}
#content h1 {
margin-right: 175px;
}
#content p {
margin-right: 170px;
}
#footer {
clear: both;
font-size: 12px;
}
Try using percentages rather than absolute values to place items, to center an inline block element (if the element width is set) you can use : margin-right : auto; margin-left: auto;
To center your H1, you should use the property :
#content h1 {
text-align: center;
}
#content p {
text-align: left;
}
this centers your text, have a look here
It would be quite handy if I could have a look at your HTML as well.
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
}