Горизонтальное меню из картинок

[Lrad]

Привет всем!

Подскажите как сделать такое меню?

Наподобие как у вас на форуме, где перечисляются: Статьи, блог и т.д.

При помощи блочной верстки.

Разбирался с исходным кодом страницы форума, но так и не понял...

HTML понятно

 <div id="top-images">
     <ul>
          <li><a href=""><img src="images/top1.png" alt="Главная страница"></a></li>
          <li><a href=""><img src="images/top2.png" alt="Вторая страница"></a></li>
          <li><a href=""><img src="images/top3.png" alt="Третья страница"></a></li>
     </ul>
  </div>

Что нужно добавить в css, а то у меня меню вертикально?

И еще нужно, чтобы меню начиналось не слева, а было немного смещено от центра экрана вправо.

[Softlink]

типовой пример http://jsfiddle.net/PMWPL/43/ дальше докручивайте сами, задача элементарная.

[Lrad]

Спасибо! Не знал о таком сервисе. Теперь думаю разберусь.

кнопкой сказать спасибо не получается(

[Lrad]

Не получается сместить вправо относительно центра экрана..

Получается или слева, или справа...

[ShumNo]

Не получается сместить вправо относительно центра экрана..

Получается или слева, или справа...

А кого куда сместить хотите? может

margin-left: [значение] ;

[Lrad]

От края экрана это понятно.

У меня смысл в чем:

Есть шапка сайта. Выше шапки узенькая полоса. На ней 3 кнопки(полосе). Главная, карта сайта и написать письмо.

Шапка сайта тянется на весь экран, а контент уже фиксированный.

Эти кнопки должны стоять на границе контента справа. поэтому смещение должно идти от центра, а не от края экрана.

От края я двигаю без проблем), а вот от центра не получается.

Edited November 10, 2011 by Lrad

[ceil100]

центрированный контейнер по ширине контента, а в нем меню с флоат райт и отступ справа сколько надо

[Lrad]

#top-images {
	margin:0 auto;
	float:right;
        width:1000px;
	height:17px;	
}
ul{
list-style:none;
margin:0;
padding:0;
font-family:Tahoma;    
}

li{
display:inline-block;
}


li a{
display:block;
text-decoration:underline;
color:#000;
padding:0px 5px 2px 5px;
font-size:20px;
}

li a:hover{
text-decoration:none;
color:#fff;
background:#4472e8;
}

  <div id="top-images">
     <ul>
            <li><a href=""><img src="/top1.png" alt="Главная страница"></a></li>
            <li><a href=""><img src="/top2.png" alt="Главная страница"></a></li>
            <li><a href=""><img src="/top3.png" alt="Главная страница"></a></li>
        </ul>
  </div>

Справа не становится.....

Получается слева от контекста немного смещенное вправо...

[ceil100]

#top-images {

margin:0 auto;

float:right;

width:1000px;

height:17px;

}

ul{

list-style:none;

float:right;

margin:0;

padding:0;

font-family:Tahoma;

}

как он будет центрироваться если ты его вправо пустил плавать?

[Lrad]

Урра, получилось.

Спасибо огромное

Edited November 10, 2011 by Lrad

[Softlink]

http://jsfiddle.net/PMWPL/44/ и теперь сколько надо отступить справа, столько и задавайте для margin-right у ul

[Lrad]

Сделал - все работает, кроме долбанного IE6.

Что ему не хватает? В других браузерах работает...

<div id="header">
     <div id="verx">
         <div id="top-images">
                <ul>
            <li><a href="" title="Перейти на главную страницу сайта"><img src="images/top1.png" alt="Home" /></a></li>
            <li><a href="mailto:test@test.ru" title="Написать нам письмо"><img src="images/top2.png" alt="mail" /></a></li>
            <li><a href="" title="Просмотр карты сайта"><img src="images/top3.png" alt="sitemap" /></a></li>
                </ul>
         </div>
     </div>

</div>

#header
{
    width:100%;
    height:199px;
}

#verx
 {
    background:url(../images/verx.jpg) repeat-x;
	height:17px;
	width:100%;
}

#top-images 
{
	margin:0 auto;
    width:1000px;
	height:17px;	
}

#top-images ul
{
    margin:0;
    padding:0;
    float:right;
    margin-right:30px; 
    list-style:none;
}

#top-images li
{
    display:inline-block;
}

#top-images li a
{
   display:block;
}

#top-images li a:hover
{
    text-decoration:none;
    background:#495574;
}

[Softlink]

Что ему не хватает? В других браузерах работает...

#top-images li
{
    display:inline-block;
    *display:inline;
    *zoom:1;
}

[Lrad]

Всем огромное спасибо - все заработало

картинки были перевернуты на эмуляторе IE6.

На нормальном браузере IE6 на виртуальной машине все здорово и ровненько.

Тему можно закрывать.

Edited November 13, 2011 by Lrad