Вы не зашли.
Всем привет! Почти год не занимался версткой и никак не могу вспомнить. Подскажите пожалуйста. Есть некое горизонтальное меню, которое меняет свою длину по ширине экран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;) в общем учить не буду. На практике поймёшь)) иначе мне тяжко доказать и рассказать почему имено так.
2010 написал:
если я правильно понял тебя
- нет не правильно. Речь про горизонтальное меню на экране компа, а не мобильника.
Отредактировано staryisv (2010.12.25 00:12)
Спорт - есть молодость,движенье - это жизнь!Лег,значит умер!
#4.
2010
Off
(1)
Участник
2010.12.25 01:01
Какой мобильник? гг ты о чем. Какое ещё плавающее меню? я только знаю 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
сделано таблицей, а как сделать на дивах - не помню.
Отредактировано 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;
- добавить параметр
пример:
Код:
| .left |
| { |
| display: inline-block; |
| } |
(но только не удали старое содержимое классов, а дисплей просто туда добавь в конец строки).
Далее:
класс топ - окружает твои объекты лефт, райд, центр. Само собой можешь туда напихать свой стаил.
Лефт, центер, райд - сам знаешь, что это.
И ещё...
Если тебе не подходить отступ в нутри рамки, padding: 20px - замени его на:
Код:
| height: 40px; |
| width: 60px; |
Только устанави свою длину/ширину.
height - Ширина;
width - Длина;
и Лучше используй png картинки, если это веб-сайт (мое мнение таково).
Пробуй...
Отредактировано 2010 (2010.12.25 16:04)
Страниц: 1