CSS + bg-image + text

CrazyXoma · April 18, 2010

Всем добрый день!!!

Проблема в следующем:

Делаю растягивающуюся менюшку с размноженным задним фоном.

Попытался добавить стиль в CSS:

TD.menu {
  font-family : Tahoma, Arial, sans-serif; 
  font-size : 10px;
  text-align: center;
  font-weight: bold; 
  color: #ffffff;  
  background-image: url('images/lttemplate/menu_m.gif');
}

<td class="menu" width="13%">

Результат - текст нужного стиля, первая ячейка растягивается на максимум, остальные - по ширине текста. Заднего фона нет.

Если в тег <td> добавить

style="background-image: url('images/lttemplate/menu_m.gif')"

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

Желаемый результат получается пока только таким образом:

<td width="13%"  style="background-image: url('images/lttemplate/menu_m.gif'); 
font-family : Tahoma, Arial, sans-serif;  
font-size : 14px;  
text-align: center;  
font-weight: bold;   
color: #ffffff;  ">ГЛАВНАЯ</td>

т.е. прямо в теге прописываю нужные параметры.

Что, сами понимаете, жутко неудобно и некрасиво... :unsure:

Кто может подсказать, в чем проблема?

Заранее спасибо!!!

Edited April 18, 2010 by CrazyXoma

CrazyXoma · April 19, 2010

Хм... проблему с отсутствием фона - решил.

Заключалась в том, что при прописании пути к картинке прямо в теге:

style="background-image: url('images/lttemplate/menu_m.gif')"

брался путь относительно страницы. Когда прописывал тоже самое в CSS - соответственно, брался путь относительно таблицы стилей...

background-image: url('../../../images/lttemplate/menu_m.gif')

Такой код в таблице стилей решил проблему с бэкграундом.

Осталась проблема растягивания первой ячейки.... Вот тут я совсем в ступоре оО

psywalker · April 19, 2010

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

CrazyXoma · April 19, 2010

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

Ширина таблицы стоит 100%.

Ширина ячеек прописана в каждом теге:

		<td width="13%" class="menu" >ГЛАВНАЯ</td>
		<td width="13%"  >КАТАЛОГ</td>
		<td width="12%"  >АКЦИИ</td>
		<td width="12%"  >СТАТЬИ</td>
........

При применении стилей - первая ячейка делается максимальной ширины, а остальные - по ширине слова...

Как-же добиться ширины нужной?

По сути - надо распределить равномерно пункты меню...

psywalker · April 19, 2010

Сделай списком

stars · April 19, 2010

Ширина таблицы стоит 100%.
Ширина ячеек прописана в каждом теге:
		<td width="13%" class="menu" >ГЛАВНАЯ</td>
		<td width="13%"  >КАТАЛОГ</td>
		<td width="12%"  >АКЦИИ</td>
		<td width="12%"  >СТАТЬИ</td>
........
При применении стилей - первая ячейка делается максимальной ширины, а остальные - по ширине слова...
Как-же добиться ширины нужной?
По сути - надо распределить равномерно пункты меню...

Ну как минемум я бы в конец добавил пустую ячейку раз у вас "Ширина таблицы стоит 100%. " можно весь код таблицы увидеть?

Edited April 19, 2010 by stars

psywalker · April 19, 2010

Ну как минемум я бы в конец добавил пустую ячейку раз у вас "Ширина таблицы стоит 100%. " можно весь код таблицы увидеть?

Да это уже ерунда какая-та выходит, так дела не делаются. Ширина таблицы в данном случае 100%, а значит браузер изначально просматривает все её столбцы и их содержимое, ищет самый широкий, а далее уже подгоняет остальную ширину всех ячеек. Поэтому в данном случае лучше воспользоваться списком, там уже можно будет повесить на каждый пункт свою ширину.

CrazyXoma · April 19, 2010

Сделай списком

В смысле - просто одна ячейка и в ней горизонтальный список?

Если не сложно, можно ссыль на какое-нибудь описание сего действа?

Не совсем понял по тому, что смог найти - получиться ли разместить элементы списка на всю ширину.

А так, как вариант решения - мне нра=)

Спасибо!

Вот весь код таблицы:

<table width="100%" border="1" cellspacing="0" cellpadding="0">
	<tr height="5">	
		<td width="5"><img src="images/lttemplate/menu_l_u.gif" width="5" height="5" border="0"></td>
		<td width="100%" background="images/lttemplate/menu_u.gif" colspan="8"></td>
		<td width="5"><img src="images/lttemplate/menu_r_u.gif" width="5" height="5" border="0"></td>
	</tr>
	<tr height="30" align="center">	
		<td width="5" background="images/lttemplate/menu_m.gif"></td>
		<td width="13%" class="menu" >ГЛАВНАЯ</td>
		<td width="13%"  >КАТАЛОГ</td>
		<td width="12%"  >АКЦИИ</td>
		<td width="12%"  >СТАТЬИ</td>
		<td width="12%"  >ДОСТАВКА</td>
		<td width="12%"  >ОПЛАТА</td>
		<td width="13%"  >НАШИ МАГАЗИНЫ</td>
		<td width="13%"  >КОНТАКТЫ</td>
		<td width="5" background="images/lttemplate/menu_m.gif"></td>
	</tr>
	<tr height="5">	
		<td width="5"><img src="images/lttemplate/menu_l_d.gif" width="5" height="5" border="0"></td>
		<td width="100%" background="images/lttemplate/menu_d.gif" colspan="8"></td>
		<td width="5"><img src="images/lttemplate/menu_r_d.gif" width="5" height="5" border="0"></td>
	</tr>
</table>

Интересует середина... Остальное - оформление закругленных углов.

stars · April 19, 2010

Списком это когда используются

<ul>
   <li>ГЛАВНАЯ</li>
   <li>КАТАЛОГ</li>
   <li>АКЦИИ</li>
   <li>СТАТЬИ</li>
   <li>ДОСТАВКА</li>
   <li>ОПЛАТА</li>
   <li>НАШИ МАГАЗИНЫ</li>
   <li>КОНТАКТЫ</li>
</ul>

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

Edited April 19, 2010 by stars

CrazyXoma · April 19, 2010

Ммм... Понял.

А можно-ли тогда как-то этой проблемы избежать не прописывая сверху так-же 8 столбцов?

Ведь не красиво =)

Add.

Хм... Попробовал и в верхней и в нижней строке сделать разделение по ячейкам, но несмотря на это - первая ячейка растягивается на максимум:

<table width="100%" border="1" cellspacing="0" cellpadding="0">
	<tr height="5">	
		<td width="5"><img src="images/lttemplate/menu_l_u.gif" width="5" height="5" border="0"></td>
		<td width="13%" background="images/lttemplate/menu_u.gif"></td>
		<td width="13%" background="images/lttemplate/menu_u.gif"></td>
		<td width="12%" background="images/lttemplate/menu_u.gif"></td>
		<td width="12%" background="images/lttemplate/menu_u.gif"></td>
		<td width="12%" background="images/lttemplate/menu_u.gif"></td>
		<td width="12%" background="images/lttemplate/menu_u.gif"></td>
		<td width="13%" background="images/lttemplate/menu_u.gif"></td>
		<td width="13%" background="images/lttemplate/menu_u.gif"></td>
		<td width="5"><img src="images/lttemplate/menu_r_u.gif" width="5" height="5" border="0"></td>
	</tr>
	<tr height="30" align="center">	
		<td width="5" background="images/lttemplate/menu_m.gif"></td>
		<td width="13%" class="menu" >ГЛАВНАЯ</td>
		<td width="13%" class="menu" >КАТАЛОГ</td>
		<td width="12%" class="menu" >АКЦИИ</td>
		<td width="12%" class="menu" >СТАТЬИ</td>
		<td width="12%" class="menu" >ДОСТАВКА</td>
		<td width="12%" class="menu" >ОПЛАТА</td>
		<td width="13%" class="menu" >НАШИ МАГАЗИНЫ</td>
		<td width="13%" class="menu" >КОНТАКТЫ</td>
		<td width="5" background="images/lttemplate/menu_m.gif"></td>
	</tr>
	<tr height="5">	
		<td width="5"><img src="images/lttemplate/menu_l_d.gif" width="5" height="5" border="0"></td>
		<td width="13%" background="images/lttemplate/menu_d.gif"></td>
		<td width="13%" background="images/lttemplate/menu_d.gif"></td>
		<td width="12%" background="images/lttemplate/menu_d.gif"></td>
		<td width="12%" background="images/lttemplate/menu_d.gif"></td>
		<td width="12%" background="images/lttemplate/menu_d.gif"></td>
		<td width="12%" background="images/lttemplate/menu_d.gif"></td>
		<td width="13%" background="images/lttemplate/menu_d.gif"></td>
		<td width="13%" background="images/lttemplate/menu_d.gif"></td>
		<td width="5"><img src="images/lttemplate/menu_r_d.gif" width="5" height="5" border="0"></td>
	</tr>
</table>

Edited April 19, 2010 by CrazyXoma

CrazyXoma · April 19, 2010

Попробовал вариант списком... А как-же настроить его растягивание по ширине?

А то он весь в середине получается =\

Все... Решил проблему путем добавления в стиль

width: 13%;

Всем спасибо! :unsure:

CrazyXoma · April 19, 2010

Оххх, замучился с этой менюшкой... Все вроде сделал, все работает. И тут обнаружил, что огнелис отображает эту менюшку не в строку, а в столбик :unsure:

Т.е. в Хроме - в строчку, в ИЕ6-7 - в строчку, а огнелис - в столбик оО

Кто-нибудь может подсказать, в чем проблема?

Код CSS:

TD.menu {
  font-family : Tahoma, Arial, sans-serif; 
  font-size : 12px;
  text-align: center;
  font-weight: bold; 
  color: #ffffff;  
  background-image: url(../../../images/lttemplate/menu_m.gif);
  background-repeat: repeat-x;
  width: 12%;
}

TD.menu A{
	color: #ffffff;
	text-decoration: none;
	display:block;
	line-height:100%;
}

Html:

<table width="100%" border="1" cellspacing="0" cellpadding="0">
	<tr height="5">	
		<td width="5"><img src="images/lttemplate/menu_l_u.gif" width="5" height="5" border="0"></td>
		<td width="100%" background="images/lttemplate/menu_u.gif" colspan="8"></td>
		<td width="5"><img src="images/lttemplate/menu_r_u.gif" width="5" height="5" border="0"></td>
	</tr>
	<tr height="30" align="center">	
		<td width="5" background="images/lttemplate/menu_m.gif"></td>
		<td class="menu"><a href="$urlcataloglogo">ГЛАВНАЯ</a></td>
		<td class="menu">КАТАЛОГ</td>
		<td class="menu">АКЦИИ</td>
		<td class="menu">СТАТЬИ</td>
		<td class="menu">ДОСТАВКА</td>
		<td class="menu">ОПЛАТА</td>
		<td class="menu">НАШИ МАГАЗИНЫ</td>
		<td class="menu">КОНТАКТЫ</td>
		<td width="5" background="images/lttemplate/menu_m.gif"></td>
	</tr>
	<tr height="5">	
		<td width="5"><img src="images/lttemplate/menu_l_d.gif" width="5" height="5" border="0"></td>
		<td width="100%" background="images/lttemplate/menu_d.gif" colspan="8"></td>
		<td width="5"><img src="images/lttemplate/menu_r_d.gif" width="5" height="5" border="0"></td>
	</tr>
</table>

Честно говоря - слегка прифигел оО

Помогите, кто с таким сталкивался, из-за чего это может быть?

psywalker · April 19, 2010

Тебе же сказали, делать на списках, причём тут таблица?

CrazyXoma · April 19, 2010

Тебе же сказали, делать на списках, причём тут таблица?

А как растянуть список равномерно на ширину ячейки?

sigma77 · April 19, 2010

CrazyXoma;

Задаешь

ul {list-style-type: none;}

li {float: left;} и задаешь нужную ширину и другие параметры.

psywalker · April 19, 2010

CrazyXoma;

+1 :unsure:

CrazyXoma · April 19, 2010

+1

Вот блин поэтому и парюсь с таблицами... А т.к. верстка резиновая - жестко задать размер не получается...

psywalker · April 19, 2010

Вот блин поэтому и парюсь с таблицами... А т.к. верстка резиновая - жестко задать размер не получается...

Так вот и не парься.

CrazyXoma · April 19, 2010

Так вот и не парься.

Че-то я запустался оО

Как же мне не париться, если таблицами не получается, а списком не получается по ширине распределить равномерно?

Непорядооок...

sigma77 · April 19, 2010

CrazyXoma

Показывай как списком делаешь :unsure:

CrazyXoma · April 19, 2010

CrazyXoma
Показывай как списком делаешь

тупо так: =)

<ul>
   <li>ГЛАВНАЯ</li>
   <li>КАТАЛОГ</li>
   <li>АКЦИИ</li>
   <li>СТАТЬИ</li>
   <li>ДОСТАВКА</li>
   <li>ОПЛАТА</li>
   <li>НАШИ МАГАЗИНЫ</li>
   <li>КОНТАКТЫ</li>
</ul>

а как равномерно распределить по всей длине ячейки? =)

psywalker · April 19, 2010

тупо так: =)

<ul>
   <li>ГЛАВНАЯ</li>
   <li>КАТАЛОГ</li>
   <li>АКЦИИ</li>
   <li>СТАТЬИ</li>
   <li>ДОСТАВКА</li>
   <li>ОПЛАТА</li>
   <li>НАШИ МАГАЗИНЫ</li>
   <li>КОНТАКТЫ</li>
</ul>

а как равномерно распределить по всей длине ячейки? =)

Попробуй каждому задать ширину в %

CrazyXoma · April 19, 2010

Попробуй каждому задать ширину в %

Ыххх.. доберусь до дома - попробую =)

psywalker · April 19, 2010

Ыххх.. доберусь до дома - попробую =)

Давай, удачи тебе)

rus · April 19, 2010

Попробуй каждому задать ширину в %

Не будет задаваться ширина. Если ты помнишь, я тебя в аське как-то спрашивал по этой теме, ты мне кинул некий код, но он мне не подошел, помнишь?

CrazyXoma · April 19, 2010

Хых...

Домучил я огнебагом эти талбички. Правда разницы не улавливаю:

TD.menu {
  font-family : Tahoma, Arial, sans-serif; 
  font-size : 12px;
  text-align: center;
  font-weight: bold; 
  color: #ffffff;  
  background-image: url(../../../images/lttemplate/menu_m.gif);
  background-repeat: repeat-x;
  width: 13%;
}

vs

TD.menu2{
	background-image:url(../../../images/lttemplate/menu_m.gif);
	background-repeat:repeat-x;
	color:#FFFFFF;
	font-family:Tahoma,Arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	width:13%;
}

кто-нить может объяснить?

с TD.menu2 все работает верно... оО

Sign In

CSS + bg-image + text

Question

Link to comment

Share on other sites

29 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information