Вы не зашли.
Главная » CSS » Плавающaя длина меню
#1. staryisv Off (1)
Участник
2010.12.24 23:11
Всем привет! Почти год не занимался версткой и никак не могу вспомнить. Подскажите пожалуйста. Есть некое горизонтальное меню, которое меняет свою длину по ширине экран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 Off (1)
Участник
2010.12.24 23:11
Вот примерчик мой тебе:

Создай файл 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. staryisv Off (1)
Участник
2010.12.25 00:12
2010 написал:
если я правильно понял тебя
- нет не правильно. Речь про горизонтальное меню на экране компа, а не мобильника.
Отредактировано staryisv (2010.12.25 00:12)
Спорт - есть молодость,движенье - это жизнь!Лег,значит умер!
#4. 2010 Off (1)
Участник
2010.12.25 01:01
Какой мобильник? гг ты о чем. Какое ещё плавающее меню? я только знаю float с плавающей точкой.   

Я понял только то - что твоё меню нужно десантировать в правый угол экрана. Далее... менять длину в зависимосте от количества слов - какую имено длину?
Например, рамка расширяется с права на лево от кол-ва слов. Или ещё что-то подобное, но не с рамой. Дай пример такого меню какого нибудь сайта или ещё что-то реально понятное. То что ты написал - для меня значит во многих вариантах представления. Но какой из них я хз.
#5. staryisv Off (1)
Участник
2010.12.25 12:12
таблицей это выглядит так:
<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:09)
Спорт - есть молодость,движенье - это жизнь!Лег,значит умер!
#6. 2010 Off (1)
Участник
2010.12.25 16:04
Div использовать не обязательно. Так как в таких случаях лучше написать span. И не надо писать display: inline-block; - т.к. дивы с этим параметром и становятся спанами (span).

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

Код:
/* 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:

Код:
<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;
- добавить параметр

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

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

Код:
height: 40px;
width: 60px;
Только устанави свою длину/ширину.
height - Ширина;
width - Длина;
и Лучше используй png картинки, если это веб-сайт (мое мнение таково).
Пробуй...
Отредактировано 2010 (2010.12.25 16:04)
Страниц: 1
Главная
WEB
PunBB Mod v0.6.2
0.018 s