Всем привет! Почти год не занимался версткой и никак не могу вспомнить. Подскажите пожалуйста. Есть некое горизонтальное меню, которое меняет свою длину по ширине экран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; }
Как правильно прописать хтмл и цсс? Таблицей знаю как сделать, но хочу на дивах. |
Вот примерчик мой тебе:
Создай файл 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;) в общем учить не буду. На практике поймёшь)) иначе мне тяжко доказать и рассказать почему имено так. |
Какой мобильник? гг ты о чем. Какое ещё плавающее меню? я только знаю float с плавающей точкой.
Я понял только то - что твоё меню нужно десантировать в правый угол экрана. Далее... менять длину в зависимосте от количества слов - какую имено длину?
Например, рамка расширяется с права на лево от кол-ва слов. Или ещё что-то подобное, но не с рамой. Дай пример такого меню какого нибудь сайта или ещё что-то реально понятное. То что ты написал - для меня значит во многих вариантах представления. Но какой из них я хз. |
таблицей это выглядит так:
<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;"> </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;" /> </td>
</tr>
</table>
</div>
вот тут примеры, как это меню отображается на трех разных страницах сайта.
www.starsv.ru/menu.html
сделано таблицей, а как сделать на дивах - не помню. |
Div использовать не обязательно. Так как в таких случаях лучше написать span. И не надо писать display: inline-block; - т.к. дивы с этим параметром и становятся спанами (span).
Создай файл design.css:
Теперь создай menu.html:
Готово.
Если тебе не подходит спан-класс - ты можешь использовать див-класс, но при этом в design.css ты должен в классы: .left .center, .right;
- добавить параметр
пример:
(но только не удали старое содержимое классов, а дисплей просто туда добавь в конец строки).
Далее:
класс топ - окружает твои объекты лефт, райд, центр. Само собой можешь туда напихать свой стаил.
Лефт, центер, райд - сам знаешь, что это.
И ещё...
Если тебе не подходить отступ в нутри рамки, padding: 20px - замени его на:
Только устанави свою длину/ширину.
height - Ширина;
width - Длина;
и Лучше используй png картинки, если это веб-сайт (мое мнение таково).
Пробуй... |