Резиновое расстояние между картинками.

[xunicornx]

Здравствуйте. Столкнулся с одной проблемой и не знаю как ее решить.

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

Как задать чтоб расстояние между рисунками было не фиксированным (word-spacing:) - а динамическим, вымеряемое у процентах.

?

[psywalker]

А если задать % отступы?

[Bonzash]

Я бы исходил из этого:

<style type="text/css">
body { margin:0;padding:0 }
ul { width: 100%; }
li { float:left; margin-left:-1px; width:25%; text-align:center; }
</style>

<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>

[Great Rash]

Делайте таблицей и не парьтесь.

[xunicornx]

Я бы исходил из этого:

<style type="text/css">
body { margin:0;padding:0 }
ul { width: 100%; }
li { float:left; margin-left:-1px; width:25%; text-align:center; }
</style>

<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>

Пару вопросов:

1. Зачем тегу body значение margin и padding?

2. Если у меня список состоит из картинок тогда зачем мне значения float: margin-left:-1px;(?) text-align:center;

?

А если задать % отступы?

Поправлюсь: у меня есть ячейка таблицы, и мне нужно что бы элементы (рисунки) расспределялись по ней равномерно не зависимо от маштаба, который выберет пользователь.

[Bonzash]

1. Зачем тегу body значение margin и padding?

Забей. Просто пример.

float:left;

Построение списка в строку.

margin-left:-1px;

Допустим у нас ширина окна 850px (100%), тогда ширина одного блока меню будет 212,5px (25%), а такого быть не может, поэтому округляется до 213px и у нас последний блок переезжает под первый. А здесь 1px для каждого <li> и есть запас в случае такого округления, чтобы меню не разъехалось.

Пропробуй исопльзовать список, для меню.

Скинь линку на пример.

[psywalker]

Я бы исходил из этого:

<style type="text/css">
body { margin:0;padding:0 }
ul { width: 100%; }
li { float:left; margin-left:-1px; width:25%; text-align:center; }
</style>

<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>

Пару вопросов:

1. Зачем тегу body значение margin и padding?

2. Если у меня список состоит из картинок тогда зачем мне значения float: margin-left:-1px;(?) text-align:center;

?

А если задать % отступы?

Поправлюсь: у меня есть ячейка таблицы, и мне нужно что бы элементы (рисунки) расспределялись по ней равномерно не зависимо от маштаба, который выберет пользователь.

Покажи скриншоты того как нужно, и как есть сейчас.

[xunicornx]

Вот сайт который я делаю. Вверху каждое меню рисунок привязаный к определенной ссылке. И мне нужно, что б независимо от маштаба, который выберет пользователь рассположение кнопок было на всю ширину ячейки.

Пробывал сделать отступом padding-left - вроде отступ сделался, но последняя кнопка почему-то перешла на новую строку и никак не хочет назад...

Edited May 13, 2011 by xunicornx

[Bonzash]

Используй список.

[psywalker]

Вот сайт который я делаю. Вверху каждое меню рисунок привязаный к определенной ссылке. И мне нужно, что б независимо от маштаба, который выберет пользователь рассположение кнопок было на всю ширину ячейки.

Пробывал сделать отступом padding-left - вроде отступ сделался, но последняя кнопка почему-то перешла на новую строку и никак не хочет назад...

А ты поставь последней кнопке класс, и отключи у него отступы.

[Bonzash]

У тебя щас:

<table cellspacing="0" cellpadding="0" class="moduletable"> 

Поставь:

<table cellspacing="0" width="100%" cellpadding="0" class="moduletable">

[xunicornx]

У тебя щас:

<table cellspacing="0" cellpadding="0" class="moduletable"> 

Поставь:

<table cellspacing="0" width="100%" cellpadding="0" class="moduletable">

Поставил - ничего не изменилось. Но я пошел дальше. Если кому интересно - это движок джумлы и создается это меню с помощью произвольного хтмл кода.

Так вот, в модуле произвольного хтмл кода я создал еще одну таблицу:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td style="width: 20%;"><a href=""><img src="" /></a></td>
<td style="width: 20%;"><a href=""><img src="" /></a></td>
<td style="width: 20%;"><img src=""/></td>
<td style="width: 20%;"><a href=""><img src=""  /></a></td>
<td style="width: 20%;"><a href=""><img src=""/></a></td>
</tr>
</tbody>
</table>

и этот код будет вставляться в ячейку таблицы. Но почему-то ячейки не хотят принимать 1/5 ширины таблицы и рассполагаться на всю ее ширину. В чем может быть проблема? Где ошибка?

[Bonzash]

Я не вижу, чтобы Вы поставили 100% ширину, вот когда поставите, тогда все встанет, как Вы хотите.

Edited May 13, 2011 by Bonzash

[xunicornx]

Спасибо за советы, помогло. Одна голова хорошо , а две - лучше