minelli

легким движением руки меню превращается в горизонтальное (конечно же вертикальное. сено-солома :-). и освобождается много свободного места.

интересный эффект :-)

вверху - меню на css. первый разделитель просто Форма поиска и все остальное отпозиционированы. разобрался. все работает.внизу - код с таблицей, который приведен выше. дословно, досимвольно :-) кроме как в описании .toolbar нет закрывающей скобки. в реальном коде она на месте. просто пропустил в посте.

что получается после добавления ячейки

что задумано

замороченно. сделаю.

доброго. все конечно классно, но вот затупил, не могу отправить скриншот. нашел в факе про скрины, но ссылка почему то битая. как же все таки добавить в свое сообщение скриншот?

упс! а как скрин то скинуть?

[img src=c:01.jpg]

:-) ща.

нет. не лечит. мне казалось здесь проблема кроется в списке. в blocks.css вынесено описание тулбара как блока в странице .toolbar {padding:0 0 0 32px; margin:0; height:35px; position:relative; background:#FFF url(../img/button1.gif); и здесь у меня все по нулям. 32px - отступ первого пункта меню от левого края тулбара.

надеялся на font-size:1px; :-)) неа. проставил его ячейке разделителю. просто ужимается ширина до 1px.

вот листинг /* menu.css */ .toolbar li {float:left;} .toolbar li a {display:block; float:left; height:35px; line-height:35px; color:#AAA; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;} .toolbar li a b {float:left; display:block; padding:0 16px 0 8px;} .toolbar li.current a {color:#EE5F00; background:url(../img/button3.gif);} .toolbar li.current a b {background:url(../img/button3.gif) no-repeat right top;} .toolbar li a:hover {color:#FFF; background:#000 url(../img/button2.gif);} .toolbar li a:hover b {background:url(../img/button2.gif) no-repeat right top;} .toolbar li.current a:hover {color:#EE5F00; background:#000 url(../img/button3.gif); cursor:default;} .toolbar li.current a:hover b {background:url(../img/button3.gif) no-repeat right top;} table {width: 760px; height:35px; padding:0; margin:0; border:0;} .divider {margin:0; padding:0; height:35; width:32; background:url(../img/divider.gif) no-repeat;} <!-- index.htm --> <table cellpadding=0 cellspasing=0> <tr> <td> <ul class="toolbar"> <li class="current"><a href="index.htm"><b>index</b></a></li> <li><a href="about.htm"><b>about</b></a></li> <li><a href="news.htm"><b>news</b></a></li> <li><a href="emploer.htm"><b>emploer</b></a></li> <li><a href="competitor.htm"><b>competitor</b></a></li> <li><a href="contacts.htm"><b>contacts</b></a></li> </ul> </td> <td class="divider"> </td> </tr> </table> как видите отступы нулевые и в таблице и в ячейке. даже поставил html отступы таблице. и еще. пробел в ячйеке нужен для того, чтобы отобразился бэкграунд.

тем которые идут после да. а ячейка с меню динамически меняет ширину, в зависимости от количества символов в пунктах меню. проблема здесь кроется в том, для списка с меню есть стили. само собой, после они не работают. остальные ячейки не получают бэкграунд меню. ладно, полбеды, задаю бэкграунд таблице, бэкграунд ячейкам с разделителем. фон есть, но... между ячейками все тот же разрыв. даже

нет Китти. маленько не то. в коде вы видите таблицу в одну строку, с одной ячейкой. в ячейку вложен список с меню. все ок. я хочу добавить еще 5 ячеек. растянуть тулбар в ширину. после добавления ячейки, между ними появляется разрыв. просвечивает фон. пытался задавать бэкграунд и списку с меню и таблице. проблема не исчезает, только добавляется рамку вокруг всего меню. итак, в коде вы видите то, что есть. теперь то, что хочу. <table> <tr> <td> <ul class="menu"> <li class="current"><a href="index.htm">index</a></li> <li><a href="about.htm">about</a></li> <li><a href="news.htm">news</a></li> <li><a href="emploer.htm">emploer</a></li> <li><a href="competitor.htm">competitor</a></li> <li><a href="contacts.htm">contacts</a></li> </ul> </td> <td>бэкграунд - нарисованный разделитель меню</td> <td>поиск/td> <td>графическая кнопка искать</td> <td>бэкграунд - нарисованный разделитель меню</td> <td>графическая ссылка на аглицкий вариант в виде индикатора языков</td> </tr> </table> то есть, меню банально воспроизводит вид панели задач на тему Vista.

дык если бы был сайт :-) первые шаги. кстати, освежил систему и глюки пропали. теперь придумал новую головную боль. если отключить позиционирование, содержимое блоков едет вниз. заметил, если список с меню вложить в строку таблицы, то блоки не съезжают. но вот загвоздка, если в строке добавить еще одну ячейку, то между ячейками появляется пробел. не поборол его. можно конечно следущие элементы меню отпозиционировать относительно действующего меню (планируется меню в стиле панели задач windows) хочу спросить, имеет ли право на жизнь такой вариант решения? вложение css меню в таблицу. вот так все работает <table> <tr> <td> <ul class="menu"> <li class="current"><a href="index.htm">index</a></li> <li><a href="about.htm">about</a></li> <li><a href="news.htm">news</a></li> <li><a href="emploer.htm">emploer</a></li> <li><a href="competitor.htm">competitor</a></li> <li><a href="contacts.htm">contacts</a></li> </ul> </td> </tr> </table> а если добавить еще ячейку - разрыв.

хм... тогда при чем IE?

2 Dimitry как ни странно, но у меня в форме не отображаются ни смайлы ни code. стоп! а может в этом вся соль? все мои заморочки. снесу как я оперу и заново поставлю.

пользуюсь Home Site 4.5.2 + Top Style 3.10 (леченый). Смотрю Опера 9.2 и IE 6.

было: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Супер-пупер сайт </title> <link rel="stylesheet" href="f/s.css" type="text/css" /> </head> <body> <DIV ID="container"> <DIV ID="header"><img src="i/HeaderFull.jpg"></DIV> <ul class="menu"> <li class="current"><a href="index.htm">Home</a></li> <li><a href="about.htm">About</a></li> <li><a href="news.htm">News</a></li> <li><a href="emploer.htm">Emploer</a></li> <li><a href="competitor.htm">Competitors</a></li> <li><a href="contacts.htm">Contacts</a></li> </ul> .... в s.css /* — Global — */ body {background: #FFF; color:#333; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:80%; margin-bottom:0;} a:hover {text-decoration:none;} h1, h3 {text-align:left; font-size:25px; color:#333; font-weight:normal; margin:20px 0 0 4px; padding:0; width:100%;} p {color:#333; text-align:justify;} p.adv {color:#333; border:1px solid #DDD; background-color:#f2f2f2; margin:9px 0 8px 9px; padding:0;} blockquote {color:#333; border:1px solid #DDD; background-color:#f2f2f2; padding:12px 5px;} label {font-weight:bold;} address {font-style:normal; color:#000; margin:4px 0 0 0; padding:0 0 0 10px;} .clr {clear:both;} /* — Container — */ div#container {width:760px; background-color:#FFFFFF; margin-left:auto; margin-right:auto;} /* — Header — */ div#header {height:290px; width:760px; clear:both; padding:0 0 1px 0;} div#header h1 {float:left; margin:0; padding:21px 0 0 17px;} /* -- Menu --*/ .menu {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#FFF url(../i/but1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;} .menu li {float:left;} .menu li a {display:block; float:left; height:35px; line-height:35px; color:#AAA; text-decoration:none; font-size:11px; font-family:Arial, Verdana, Sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;} .menu li a b {float:left; display:block; padding:0 16px 0 8px;} .menu li.current a {color:#EE5F00; background:url(../i/but3.gif);} .menu li.current a b {color:#FFF; background:url(../i/but3.gif) no-repeat right top;} .menu li a:hover {color:#FFF; background:#000 url(../i/but2.gif);} .menu li a:hover b {background:url(../i/but2.gif) no-repeat right top;} .menu li.current a:hover {color:#EE5F00; background:#000 url(../i/but3.gif); cursor:default;} .menu li.current a:hover b {background:url(../i/but3.gif) no-repeat right top;} ... делаю: ... <title>Супер-пупер сайт </title> <link rel="stylesheet" href="f/global.css" type="text/css" /> <link rel="stylesheet" href="f/menu.css" type="text/css" /> </head> ... в global.css вырезаю-ставлю: /* — Global — */ body {background: #FFF; color:#333; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:80%; margin-bottom:0;} a:hover {text-decoration:none;} h1, h3 {text-align:left; font-size:25px; color:#333; font-weight:normal; margin:20px 0 0 4px; padding:0; width:100%;} p {color:#333; text-align:justify;} p.adv {color:#333; border:1px solid #DDD; background-color:#f2f2f2; margin:9px 0 8px 9px; padding:0;} blockquote {color:#333; border:1px solid #DDD; background-color:#f2f2f2; padding:12px 5px;} label {font-weight:bold;} address {font-style:normal; color:#000; margin:4px 0 0 0; padding:0 0 0 10px;} .clr {clear:both;} в menu.css (тоже cut-paste) /* -- Main menu -- */ .menu {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#FFF url(../i/but1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;} .menu li {float:left;} .menu li a {display:block; float:left; height:35px; line-height:35px; color:#AAA; text-decoration:none; font-size:11px; font-family:Arial, Verdana, Sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;} .menu li a b {float:left; display:block; padding:0 16px 0 8px;} .menu li.current a {color:#EE5F00; background:url(../i/but3.gif);} .menu li.current a b {color:#FFF; background:url(../i/but3.gif) no-repeat right top;} .menu li a:hover {color:#FFF; background:#000 url(../i/but2.gif);} .menu li a:hover b {background:url(../i/but2.gif) no-repeat right top;} .menu li.current a:hover {color:#EE5F00; background:#000 url(../i/but3.gif); cursor:default;} .menu li.current a:hover b {background:url(../i/but3.gif) no-repeat right top;} и все... меню становится простым списком. код остальной страницы не привожу. он неважен. там ничего не меняется. загоняю меню в глобал - работает. ?

благодарю всех откликнувшихся. 2 homm. как раз с hover у меня и получились проблемы. 2 ZoNT. отдельное спасибо за пару лишних часов сна. просто через onmouse сделал и не стал морочиться. 2 homm еще раз :-) дело не в написании. вопрос был о принципе построения. возсожно ли брать стили из разных файлов. знаю, что так должно быть, но.... пишу стили в одном файле. подключаю в странице - вуаля! один из стилей cut - paste в другой... нифига! в head прописаны 01.css и 02.css ???

2 Zont еще созрел вопрос. можно делать так: <script language="JavaScript" src="01.js"> <script language="JavaScript" src="02.js"> и в body использовать нечто, прописанное в *.js можно делать так? и использовать стили из рзных файлов. что то у меня не клеится. только если в одном файле все.

еще раз искреннее спасибо. твердое нет значит много больше пространных речей.

просто мучаюсь с :hover. зациклило.

спасибо! это я знал. только css. это возможно?