Jump to content
  • 0

подсветка input style=image


minelli
 Share

Question

  • Answers 57
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 0

А у вас разделитель какой ширины? IE очень любит оставлять высоту/ширину ячеек по размеру шрифта. В таких случаях спасает простановка на подобные ячейки font-size: 1px;

И не совсем поняла ваши полбеды с фоном меню..

Link to comment
Share on other sites

  • 0

вот листинг

/* 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 отступы таблице. и еще. пробел в ячйеке нужен для того, чтобы отобразился бэкграунд.

Link to comment
Share on other sites

  • 0

нет. не лечит. мне казалось здесь проблема кроется в списке.

в blocks.css вынесено описание тулбара как блока в странице

.toolbar {padding:0 0 0 32px; margin:0; height:35px; position:relative; background:#FFF url(../img/button1.gif);

и здесь у меня все по нулям. 32px - отступ первого пункта меню от левого края тулбара.

Link to comment
Share on other sites

  • 0

Вроде понятно.

Код тот же, что выше или разделитель теперь уже картинкой вставлен?

По поводу части, где пункты меню - попробуй поставить ширину ячейки 1px, а текст ссылок заключить в тег - тогда они не будут переноситься на другую строчку, если будет больше 1 слова.

Link to comment
Share on other sites

  • 0

вверху - меню на css. первый разделитель просто

Форма поиска и все остальное отпозиционированы. разобрался. все работает.

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

Link to comment
Share on other sites

  • 0

Так по твоему коду, что ты приводил выше, меню и должно быть горизонтальным...

Т.е. я так понимаю, разделитель ид?т и между пунктами меню тоже?.. И сделан он так же

[*], верно?

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share


  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy