CSS хоризонтално меню

[niker]

Може ли някой да ми напише пример,
как мога да направя хоризонтално меню с
Div Ul Li

 

[dashe]

http://www.seoconsultants.com/css/menus/tutorial/

 

[niker]

http://www.seoconsultants.com/css/menus/tutorial/

Не че исках да ми дадеш линк. а код, както и да е оправих се и сам...

Обаче немога да задам широчина и височина.
Смисъл при: a:hover да ми се сменя бек граунда зад текста с
някаква картинка, всичко точно, ма немога да му задам височина и широчина и на нищо не прилича.


#mainMenuButton { position: relative; top: 8px; left: 20px;}
#mainMenuButton ul,#mainMenuButton ul li { float:left }
#mainMenuButton ul li a { text-decoration: none; text-transform: uppercase; margin-right: 20px;}
#mainMenuButton ul li a:hover { background: transparent url('Images/mainMenuButton.jpg') top right no-repeat; }


<div id="mainMenuButton">
<ul>
<li ><a href="#" title="Web Design" ><span >Web Design</span></a></li>
<li ><a href="#" title="Web Design" ><span >dssd</span></a></li>
<li ><a href="#" title="Web Design" ><span >dssd</span></a></li>
<li ><a href="#" title="Web Design" ><span >dssd</span></a></li>
</ul>
</div>

 

[shterev]

задай а-то да е блоков елемент.

a{

display:block;
width:100px;
height:20px;
}

a:hover{
background: url(image.jpg) no-repeat;
}

 

[niker]

задай а-то да е блоков елемент.

a{

display:block;
width:100px;
height:20px;
}

a:hover{
background: url(image.jpg) no-repeat;
}

Стана ама горе от
#mainMenuButton { position: relative; top: 8px; left: 20px;}

Ми стана надоло и се получи гадно...

http://img262.imageshack.us/img262/6056/kofti.png

от позицията...

 

[shterev]

top: 8px; махни това. Сложи на едното а фона да гледаш да не избяга. След това сложи падинг на а-тата за да слязат на долу.

 

[bparfumes]

Хоризонтално меню:

xHTML:


<ul>
<li><a href="#" title="#">АСД1</а></li>
<li><a href="#" title="#">АСД2</а></li>
<li><a href="#" title="#">АСД3</а></li>
<li><a href="#" title="#">АСД4</а></li>
<li><a href="#" title="#">АСД5</а></li>
</ul>


CSS:

ul { width: 500px; padding:15px 0; background-color:#000; }

li { display:inline; padding:0 10px; border-right: 1px dotted #333; list-type:none; list-style-type:none; }

a { color: #999; text-decoration:none; }
a:active { color: #999; text-decoration:none; }
a:visited { color: #999; text-decoration:none; }
a:hover { color: #FFF; text-decoration:underline; }

 

[shterev]

Хоризонтално меню:

xHTML:


<ul>
<li><a href="#" title="#">АСД1</а></li>
<li><a href="#" title="#">АСД2</а></li>
<li><a href="#" title="#">АСД3</а></li>
<li><a href="#" title="#">АСД4</а></li>
<li><a href="#" title="#">АСД5</а></li>
</ul>


CSS:

ul { width: 500px; padding:15px 0; background-color:#000; }

li { display:inline; padding:0 10px; border-right: 1px dotted #333; list-type:none; list-style-type:none; }

a { color: #999; text-decoration:none; }
a:active { color: #999; text-decoration:none; }
a:visited { color: #999; text-decoration:none; }
a:hover { color: #FFF; text-decoration:underline; }

Човека иска а-тата да са с картинки, следователно трябва да са блокови елементи.