Кнопки меню под логотипом картинками

[vkapas]

Всем привет.

Требуется сделать кнопки меню под логотипом в виде картинок, под кнопками фоном должна проходить некая полоса (не однотонная, градиент) на всю ширину экрана, примерно так:

Подскажите, как примерно это можно реализовать?

[MaferoK]

и в чем проблема ?

полоске ширину на 100% , в эту полоску положить список ul (

кнопки сделать списком и этому списку задать margin:0 auto; )

написать элементы списка текстом и задать им background:нужную картинку и поставить display:block; для li .

[Softlink]

и в чем проблема ?

полоске ширину на 100% , в эту полоску положить список ul (

кнопки сделать списком и этому списку задать margin:0 auto; )

написать элементы списка текстом и задать им background:нужную картинку и поставить display:block; для li .

только вместо display:block надо display:inline-block;

[vkapas]

полоске ширину на 100% , в эту полоску положить список ul (

кнопки сделать списком и этому списку задать margin:0 auto; )

написать элементы списка текстом и задать им background:нужную картинку и поставить display:block; для li .

Подскажите, правильно ли сделал (пока просто текстом):

CSS:

.header-buttons {
  width: 100%;
}
.header-buttons .ul {
  margin: 0 auto;
}
.header-buttons .li {
  display: block;
}

Template:

<div class="header-buttons"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></div>

Если я так делаю, то на странице появляется обычный вертикальный список вместо растянутого по ширине горизонтального.

[Softlink]

постом выше написано же, что надо вместо block, inline-block

[vkapas]

постом выше написано же, что надо вместо block, inline-block

Да, забыл написать.

inline-block я тоже пробовал, но список всё равно остаётся вертикальным.

[Softlink]

Так у вас и код с ошибками написан. Зачем писать .li? Ведь это не класс.

Посмотрите такой вариант: http://jsfiddle.net/xAEne/

[vkapas]

Так у вас и код с ошибками написан. Зачем писать .li? Ведь это не класс.

Да, я пока лажаю в теории. Но учусь.

.header-buttons {
  text-align:center; 
}
.header-buttons li {
  display: inline-block;
  border:1px solid #ccc;  
}

<div class="header-buttons">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

Теперь всё работает :-) Спасибо за помощь!

Edited August 5, 2011 by vkapas