X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Равное расстояние между словами в горизонтальном меню
anethum
anethum
Topic Starter сообщение 25.4.2010, 20:45; Ответить: anethum
Сообщение #1


Друзья. Существует стандартное горизонтальное меню в виде ссылок:

Главная ---- Помощь ---- Обратная связь ---- О проекте

где вместо "----" необходимо сделать равные расстояния между словами.
Как академично реализовать?
word-spacing будет вставлять расстояниме и между словами "Обратная ---- связь" "О ---- проекте"
Таблица с одинаковой шириной ячейки не даст результата т.к. сами слова разные по длине - и расстояние между ссылками меню получается где-то большое, где то маленькое и выглядит это все очень коряво.
Вижу 2 выхода: высчитывать вручную ширину каждой ячейки таблицы либо делать прозрачный img фиксированной ширины.
Кто еще что подскажет? Спасибо.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Seravin
Seravin
сообщение 25.4.2010, 22:50; Ответить: Seravin
Сообщение #2


<style>
.item {margin-right:30px;
float:left;}
</style>
<div id="menu" style="white-space:pre"><div class="item">Главная</div><div class="item">Помощь</div><div class="item">Обратная связь</div><div>О проекте</div></div>
я бы так сделал
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 26.4.2010, 4:48; Ответить: Alcorn
Сообщение #3


[PHP]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
</head>
<body>
<table width="100%" border="1">
<tr>
<td style="width:1%">Главная</td>
<td></td>
<td style="width:1%">Помощь</td>
<td></td>
<td style="width:1%">Обратная&nbsp;связь</td>
<td></td>
<td style="width:1%">О&nbsp;проекте</td>
</tr>
</table>
</body>
</html>
[/PHP]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Seravin
Seravin
сообщение 26.4.2010, 4:55; Ответить: Seravin
Сообщение #4


переходите на блочную вёрстку:goodpost:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 26.4.2010, 6:22; Ответить: Alcorn
Сообщение #5


(Seravin @ 26.4.2010, 07:55) *
переходите на блочную вёрстку:goodpost:

А вы сможете сделать вышеприведённый аналог с помощью блоков при равном расстоянии между ними и резиновой ширине и к тому же без использования javascript?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Seravin
Seravin
сообщение 26.4.2010, 18:30; Ответить: Seravin
Сообщение #6


а в чём проблема? пишешь margin-right в процентах и всё
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alcorn
Alcorn
сообщение 8.5.2010, 8:45; Ответить: Alcorn
Сообщение #7


(Seravin @ 26.4.2010, 21:30) *
а в чём проблема? пишешь margin-right в процентах и всё

В процентах от чего?
При разных разрешениях экрана разные проценты. Можете сами проверить.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
jahggler
jahggler
сообщение 8.5.2010, 16:11; Ответить: jahggler
Сообщение #8


вот примерно так:

<style>
.fullwidth { width: 100% }
.fullwidth td { text-align: left; width: 25%}
.fullwidth td.last { text-align: right; width: 1px }
</style>

<table class='fullwidth'>
<tr>
<td>Главная</td>
<td>О нас</td>
<td>Блабла</td>
<td>Еще меню</td>
<td class='last'>Конец</td>
</tr>
</table>


там где width: 25% указывать (100 / количество ячеек-1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
viktor_ua
viktor_ua
сообщение 18.5.2010, 21:34; Ответить: viktor_ua
Сообщение #9


(Alcorn @ 26.4.2010, 07:48) *
[PHP]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
</head>
<body>
<table width="100%" border="1">
<tr>
<td style="width:1%">Главная</td>
<td></td>
<td style="width:1%">Помощь</td>
<td></td>
<td style="width:1%">Обратная&nbsp;связь</td>
<td></td>
<td style="width:1%">О&nbsp;проекте</td>
</tr>
</table>
</body>
</html>
[/PHP]



При border="0" ведет себя странно. в Опера и ИЕ потянул первую и последнюю
ячейку...А я уже было обрадовался....:wacko:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
viktor_ua
viktor_ua
сообщение 18.5.2010, 21:46; Ответить: viktor_ua
Сообщение #10


Точнее не только первую и последнюю а начал вести себя так как будто пустых td вообще нету,
а имеем просто четыре ячейки с текстом, расстояние между которыми не выдерживается.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как вы сравниваете ТОП сайтов между собой?
5 noviktamw 5779 10.1.2024, 13:23
автор: wanessa
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВыравнивание картинки по центру между текстом
10 NikN 2632 6.1.2021, 23:24
автор: buypushplatform
Открытая тема (нет новых ответов) Автоматическая перелинковка между страницами Wordpress
4 rokot 2289 28.7.2019, 20:56
автор: rokot
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
1 Викторио_mw 1452 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Сменить фокус общения JS между документами
нужен очень толковый JS разработчик
0 LebedevStr 2620 24.6.2018, 19:21
автор: LebedevStr


 



RSS Текстовая версия Сейчас: 28.3.2024, 20:09
Дизайн