#1 2010.12.24 23:33

staryisv
Участник
Зарегистрирован: 2008.11.08
Сообщений: 112
Карма: 1
Профиль Веб-сайт

Плавающaя длина меню

Всем привет! Почти год не занимался версткой и никак не могу вспомнить. Подскажите пожалуйста. Есть некое горизонтальное меню, которое меняет свою длину по ширине экранa взависимости от количества слов в нем. На разных страницах в нем появляются то 2, то 3 слова, то 5 слов! И занимает то 1/4 часть, то 1/3 часть экранa! То на полэкранa по ширине! То на 2/3! Надо привязать меню к правому краю и сделать плавающую длину по ширине экрана.
HTML:
<div id="center">
<div id="left">
<div id="right">
Тут код самой менюхи
</div>
</div>
</div>
CSS:
#center { background:url(.../center.gif) repeat-x center top; }
#left { background:url(.../left.gif) no-repeat left top; }
#right { background:url(.../right.gif) no-repeat right top; }
Как правильно прописать хтмл и цсс? Таблицей знаю как сделать, но хочу на дивах.


Спорт - есть молодость,движенье - это жизнь!Лег,значит умер!

Неактивен

#2 2010.12.24 23:51

2010
Участник
Откуда: localhost
Зарегистрирован: 2010.02.20
Сообщений: 230
Карма: 1
Профиль

Re: Плавающaя длина меню

Вот примерчик мой тебе:

Создай файл design.css и сохрани его с кодом:

.menu
{
   display: inline-block;
   padding: 5px;
   border: solid 1px red;
}

теперь создай файл css.html и сохрани с кодом:

<html>
<head>
<link rel="stylesheet" href="design.css" type="text/css" />
</head>
<body>

<div class="menu">
Hello, чувак!
</div><br />

<div class="menu">
Ещё раз Hello, чувак! Май нэйм ис тупак.
</div>
</body>
</html>


Теперь просто закинь эти файлы в одну папку и открой по адресу типа http://localhost./catalog/css.html

если я правильно понял тебя - то значит всё правильно. А на счёт тега <бр /> после </див> - это специально чтобы два объекта не слиплись (br - их разделяет переносом новой строки, так как в цсс прописан параметр display: inline-block;) в общем учить не буду. На практике поймёшь)) иначе мне тяжко доказать и рассказать почему имено так.

Неактивен

#3 2010.12.25 00:19

staryisv
Участник
Зарегистрирован: 2008.11.08
Сообщений: 112
Карма: 1
Профиль Веб-сайт

Re: Плавающaя длина меню

2010 написал:

если я правильно понял тебя

- нет не правильно. Речь про горизонтальное меню на экране компа, а не мобильника.

Отредактировано staryisv (2010.12.25 00:39)


Спорт - есть молодость,движенье - это жизнь!Лег,значит умер!

Неактивен

#4 2010.12.25 01:07

2010
Участник
Откуда: localhost
Зарегистрирован: 2010.02.20
Сообщений: 230
Карма: 1
Профиль

Re: Плавающaя длина меню

Какой мобильник? гг ты о чем. Какое ещё плавающее меню? я только знаю float с плавающей точкой.   

Я понял только то - что твоё меню нужно десантировать в правый угол экрана. Далее... менять длину в зависимосте от количества слов - какую имено длину?
Например, рамка расширяется с права на лево от кол-ва слов. Или ещё что-то подобное, но не с рамой. Дай пример такого меню какого нибудь сайта или ещё что-то реально понятное. То что ты написал - для меня значит во многих вариантах представления. Но какой из них я хз.

Неактивен

#5 2010.12.25 12:02

staryisv
Участник
Зарегистрирован: 2008.11.08
Сообщений: 112
Карма: 1
Профиль Веб-сайт

Re: Плавающaя длина меню

таблицей это выглядит так:
<div align="right">
<table border="0" cellpadding="0" cellspacing="0" valign="top"><tr>
<td align="center" valign="top" width="22" height="41" style="background:url(../left.gif) no-repeat top right;">&nbsp;</td>
<td align="center" valign="top" width="" height="41" style="background:url(../center.gif) repeat-x top;">
тут код меню</td>
<td align="center" valign="top" width="16" height="41" style="background:url(../right.gif) no-repeat top left;" />&nbsp;</td>
</tr>
</table>
</div>
вот тут примеры, как это меню отображается на трех разных страницах сайта.
www.starsv.ru/menu.html

сделано таблицей, а как сделать на дивах - не помню.

Отредактировано staryisv (2010.12.25 21:28)


Спорт - есть молодость,движенье - это жизнь!Лег,значит умер!

Неактивен

#6 2010.12.25 16:09

2010
Участник
Откуда: localhost
Зарегистрирован: 2010.02.20
Сообщений: 230
Карма: 1
Профиль

Re: Плавающaя длина меню

Div использовать не обязательно. Так как в таких случаях лучше написать span. И не надо писать display: inline-block; - т.к. дивы с этим параметром и становятся спанами (span).

Создай файл design.css:

Код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* Begin: */
.top
{
border-bottom: 1px solid black;
}
 
.left
{
background: url('');
border: 1px solid red;
padding: 25px;
}
 
.center
{
background: url('');
border: 1px solid red;
padding: 25px;
}
 
.right
{
background: url('');
border: 1px solid red;
padding: 25px;
}
/* end Begin */

Теперь создай menu.html:

Код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css" />
</head>
<body>
 
<div class="top" align="left">
<span class="left">
L: Text_1;
</span>
 
<span class="center">
C: Text_1, Text_2;
</span>
 
<span class="right">
R: Text_1, Text_2, Text_3;
</span>
</div>
 
</body>
</html>

Готово.
Если тебе не подходит спан-класс - ты можешь использовать див-класс, но при этом в design.css ты должен в классы: .left .center, .right;
- добавить параметр

Код:

1
display: inline-block;

пример:

Код:

1
2
3
4
.left
{
display: inline-block;
}

(но только не удали старое содержимое классов, а дисплей просто туда добавь в конец строки).
Далее:
класс топ - окружает твои объекты лефт, райд, центр. Само собой можешь туда напихать свой стаил.
Лефт, центер, райд - сам знаешь, что это.

И ещё...
Если тебе не подходить отступ в нутри рамки, padding: 20px - замени его на:

Код:

1
2
height: 40px;
width: 60px;

Только устанави свою длину/ширину.
height - Ширина;
width - Длина;
и Лучше используй png картинки, если это веб-сайт (мое мнение таково).
Пробуй...

Отредактировано 2010 (2010.12.25 16:12)

Неактивен

Дополнительно

forum.wapinet.ru

PunBB Mod v0.6.1
0.013 s