| |
|
|
| | подскажите, как перевести ниже приведённый код в CSS
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="18" width="2"><img src="left.gif"></td>
<td class="price">Цена: 655 656 руб.</td>
<td height="18" width="2"><img src="right.gif"></td>
</tr>
</table>
|
здесь по бокам подставляются картинки округляющий блок, при этом ширина блока может быть любой(в зависимости от контента, а высота фиксирована), центральная часть заполняется тем же цветом что и картинки
нужно чтобы получилось вот так вот
http://pic.ipicture.ru/uploads/090216/hSMpqSFH47.png
хотелось бы сократить код чтобы можно было выводить таким образом
<div class="price">Цена: 655 656 руб.</div>
или
<span class="price">Цена: 655 656 руб.</span>
что нужно прописать в CSS для класса price ? | |
| |
|
|
| |
 102 байт |
|
| |
для: web777
(16.02.2009 в 16:19)
| | | attach ===>
<style type="text/css">
body{ font-family:Verdana, Arial, Helvetica, sans-serif }
.price, .price *{ display: inline-block }
.price{ background: url(price.gif) no-repeat left; height: 18px }
.price span{ background: url(price.gif) no-repeat right }
.price span b{
background: #90ad89;
margin:0px 2px; /* (price.gif width) */
padding: 3px 5px 0px 5px;
height: 15px; /* (price.gif height) - (padding-top) */
color: #fff;
font-size: 10px;
}
</style>
|
<span class="price"><span><b>ЦЕНА: 655 656 РУБ.</b></span></span>
|
| |
| |
|
|
| |
|
|
| |
для: sl1p
(16.02.2009 в 18:27)
| | | спасибо большое, я сейчас проверил в Firefox выводится нормально а вот с IE не очень, правое изображение не отображается, сейчас буду ковыряться | |
| |
|
|
| |
|
|
| |
для: sl1p
(16.02.2009 в 18:27)
| | | отображение правого изображения решил так, добавил height: 18px в строке
.price span{ background: url(price.gif) no-repeat right; height: 18px }
но остался ещё один баг, внизу почему то в IE не до конца заполняется цвет бэграунда, а в Firefox всё нормально. Если я в строке
padding: 3px 5px 0px 5px
меняю на
padding: 3px 5px 3px 5px
в IE нормально но тогда в Firefox нижняя часть начинает выступать. Что можно сделать чтобы в обоих браузерах показывало нормально? | |
| |
|
|
| |
|
|
| |
для: web777
(16.02.2009 в 19:24)
| | |
.price, .price *{ display: inline-block }
.price{ background: url(price.gif) no-repeat left }
.price span{ background: url(price.gif) no-repeat right }
.price span b{
background: #90ad89;
margin: 0px 2px;
padding: 0px 5px;
height: 18px;
line-height: 18px;
color: #fff;
font-size: 10px;
}
|
зы. padding: 3px 5px 0px 5px = padding: top right bottom left; | |
| |
|
|
| |
|
|
| |
для: sl1p
(16.02.2009 в 20:31)
| | | может, поможете и мне с моим кодом)
<tr><td style='height: 40px; letter-spacing: 0px; word-spacing: 0px; padding-left: 11px; background-image: url("{THEME}/images/menu_top.png"); background-repeat: no-repeat; background-position: 50% 100%'>
<span style="font-size: 12pt"><font face="Arial"><strong>
<font color="#ffffff"> Главное меню</font>
</strong></font></span><br></td></tr>
|
вот такую беду в CSS отправить как? | |
| |
|
|
| |
|
|
| |
для: morgannz
(26.09.2012 в 17:59)
| | | У вас уже css код написан там.
Просто добавляете строке таблички идентификатор либо класс, как кому нравится, создаете css файл и все что написано в атрибуте style перемещаете туда. Например вот так:
1)HTML
<tr><td class = "VotClassStroki">
<span class = "VotClassSpana">
Главное меню
</span></td></tr>
|
2) CSS
.VotClassStroki{
height: 40px;
letter-spacing: 0px;
word-spacing: 0px;
padding-left: 11px;
background: url("{THEME}/images/menu_top.png") no-repeat 50% 100%;
}
.VotClassSpana{
font: bold 12pt Arial,sans-serif;
color: #ffffff;
}
|
В CSS для записи свойств background и font использовалась сокращенная запись - если не знаете что это такое - советую погуглить.
P.S. ну и конечно же привязать CSS файл к HTML =) в голове нужно написать такую конструкцию:
<link href="CSS/<МойФайл>.css" type="text/css" rel="stylesheet">
|
| |
| |
|
|
