Jump to content
  • 0

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

minelli

Asked by minelli,

 Share

Question

  • Answers 57
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

57 answers to this question

Recommended Posts

  • 0
minelli Explorer

minelli

Posted
  • Author
Posted

2 Zont

еще созрел вопрос.

можно делать так:

<script language="JavaScript" src="01.js">

<script language="JavaScript" src="02.js">

и в body использовать нечто, прописанное в *.js

можно делать так?

и использовать стили из рзных файлов. что то у меня не клеится. только если в одном файле все.

Link to comment
Share on other sites
  • 0
homm Explorer

homm

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

Даже если это неверное ?нет??

Смотря какую задачу ставить, если конкретно ?поменять атрибут src у элемента img?, то на css нельзя. А если ?поменять картинку при наведении мыши?, то можно через background и a:hover

Link to comment
Share on other sites
  • 0
minelli Explorer

minelli

Posted
  • Author
Posted

благодарю всех откликнувшихся.

2 homm. как раз с hover у меня и получились проблемы.

2 ZoNT. отдельное спасибо за пару лишних часов сна. просто через onmouse сделал и не стал морочиться.

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

Link to comment
Share on other sites
  • 0
minelli Explorer

minelli

Posted
  • Author
Posted

было:

<!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;}

и все... меню становится простым списком. код остальной страницы не привожу. он неважен. там ничего не меняется. загоняю меню в глобал - работает. ?

Link to comment
Share on other sites
  • 0
minelli Explorer

minelli

Posted
  • Author
Posted

дык если бы был сайт :-) первые шаги. кстати, освежил систему и глюки пропали. теперь придумал новую головную боль. если отключить позиционирование, содержимое блоков едет вниз. заметил, если список с меню вложить в строку таблицы, то блоки не съезжают. но вот загвоздка, если в строке добавить еще одну ячейку, то между ячейками появляется пробел. не поборол его. можно конечно следущие элементы меню отпозиционировать относительно действующего меню (планируется меню в стиле панели задач 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>

а если добавить еще ячейку - разрыв.

Link to comment
Share on other sites
  • 0
~Kitty~ Explorer

~Kitty~

Posted
Posted

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

(Если я правильно поняла суть проблему)

Link to comment
Share on other sites
  • 0
minelli Explorer

minelli

Posted
  • Author
Posted

нет Китти. маленько не то. в коде вы видите таблицу в одну строку, с одной ячейкой. в ячейку вложен список с меню. все ок. я хочу добавить еще 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.

Link to comment
Share on other sites
  • 0
minelli Explorer

minelli

Posted
  • Author
Posted

тем которые идут после

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

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

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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 } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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

  I accept