<center><div class=label >TEXT</div></center>
<table class=razdtab border=0 cellPadding=2 cellSpacing=0 >
<tr><td class=razdtd >
<a href=# >link1</a><br>
<a href=# >link2</a><br>
<a href=# >link3</a><br>
</td></tr>
</table>
background-image
вопрос такой: уменя есть поле div я сделал к нему background-image что б было вот так:
/---------\
| | - вот эта верхняя часть должна иметь форму рисунка
|---------|
| |
| | - а это просто линии таблицы
| |
----------
Но получилось так:
/---------|
| | - вот эта верхняя часть должна иметь форму рисунка
|---------|
| |
| | - а это просто линии таблицы
| |
----------
т.е. рисунок имеет большую длинну чем поле div и поэтому его просто обрезало и правого угалка не видно. Как сделать так чтоб рисунок не обрезало, или там по размерам подгоняло или еще как?
PS: там где стоит || я тпа хател поставить пробелы на ширину таблицы...
/---------\
| | - вот эта верхняя часть должна иметь форму рисунка
|---------|
| |
| | - а это просто линии таблицы
| |
----------
Но получилось так:
/---------|
| | - вот эта верхняя часть должна иметь форму рисунка
|---------|
| |
| | - а это просто линии таблицы
| |
----------
т.е. рисунок имеет большую длинну чем поле div и поэтому его просто обрезало и правого угалка не видно. Как сделать так чтоб рисунок не обрезало, или там по размерам подгоняло или еще как?
PS: там где стоит || я тпа хател поставить пробелы на ширину таблицы...
Ничего не понятно, может нарисуешь, или код напишешь :)
попробуй через таблицу, т.е. рисунок засунуть в таблицу фиксированой высоты и длины, по моему она подгоняет размеры рисунка под свои.
А еще лучше выложи код и картинку.
код:
Код:
код в css:
Код:
.label {
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
PADDING-BOTTOM: 2px;
PADDING-TOP: 2px;
BACKGROUND-COLOR:gray;
width:100%;
FONT-SIZE: 10px;
color:#000000;
FONT-WEIGHT: bold;
background-image:url(scripts/GRAPH/asd3.php);
}
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
PADDING-BOTTOM: 2px;
PADDING-TOP: 2px;
BACKGROUND-COLOR:gray;
width:100%;
FONT-SIZE: 10px;
color:#000000;
FONT-WEIGHT: bold;
background-image:url(scripts/GRAPH/asd3.php);
}
код asd3.php:
Код:
<?
header("Content-type: image/gif");
readfile("image/razd.gif");
?>
header("Content-type: image/gif");
readfile("image/razd.gif");
?>
Ну если делать таким образом то никак мне кажется
Я бы сделал два рисунка - кусочки с закругленными углами, поместил бы каждый в отдельную ячейку таблицы и в третью по центру между ними уже пихал бы текст. Тем более что там все равно таблица используется.
Либо ширину DIV'a задал бы жестко равную ширине картинки. Но это ИМХО неверный путь (если например потребуется запихать в такой заголовок текст по длине превышающий ширину картинки).
Я бы сделал два рисунка - кусочки с закругленными углами, поместил бы каждый в отдельную ячейку таблицы и в третью по центру между ними уже пихал бы текст. Тем более что там все равно таблица используется.
Либо ширину DIV'a задал бы жестко равную ширине картинки. Но это ИМХО неверный путь (если например потребуется запихать в такой заголовок текст по длине превышающий ширину картинки).
во... так и сделаю
и опять ниче не получилось... и даж не знаю в чем тут проблема :(
от чего все так каряво получилось?
Код:
<table class=razdtab border=0 cellPadding=0 cellSpacing=0 >
<tr><td><img src=image/razd_l.gif align=left ></td><td><center><div class=label >.:: TEXT ::.</div></center></td><td><img src=image/razd_r.gif align=right ></td></tr>
<tr><td class=razdtd colspan=3 >
<a href=# > link1</a><br>
<a href=# > link2</a><br>
<a href=# > link3</a><br>
</td></tr>
</table>
<tr><td><img src=image/razd_l.gif align=left ></td><td><center><div class=label >.:: TEXT ::.</div></center></td><td><img src=image/razd_r.gif align=right ></td></tr>
<tr><td class=razdtd colspan=3 >
<a href=# > link1</a><br>
<a href=# > link2</a><br>
<a href=# > link3</a><br>
</td></tr>
</table>
Код:
.label {
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
PADDING-BOTTOM: 2px;
PADDING-TOP: 2px;
BACKGROUND-COLOR:gray;
width:100%;
FONT-SIZE: 10px;
color:#000000;
FONT-WEIGHT: bold;
background-image:url(image/razd_c.gif);
}
.razdtab{
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana,Tahoma,Arial,Sans-Serif;
width:100%;
BORDER-BOTTOM: gray 0px solid;
BORDER-LEFT: gray 0px solid;
BORDER-RIGHT: gray 0px solid;
BORDER-TOP: gray 0px solid;
}
.razdtd{
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana,Tahoma,Arial,Sans-Serif;
width:100%;
BORDER-BOTTOM: gray 1px solid;
BORDER-LEFT: gray 1px solid;
BORDER-RIGHT: gray 1px solid;
BORDER-TOP: gray 0px solid;
}
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
PADDING-BOTTOM: 2px;
PADDING-TOP: 2px;
BACKGROUND-COLOR:gray;
width:100%;
FONT-SIZE: 10px;
color:#000000;
FONT-WEIGHT: bold;
background-image:url(image/razd_c.gif);
}
.razdtab{
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana,Tahoma,Arial,Sans-Serif;
width:100%;
BORDER-BOTTOM: gray 0px solid;
BORDER-LEFT: gray 0px solid;
BORDER-RIGHT: gray 0px solid;
BORDER-TOP: gray 0px solid;
}
.razdtd{
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana,Tahoma,Arial,Sans-Serif;
width:100%;
BORDER-BOTTOM: gray 1px solid;
BORDER-LEFT: gray 1px solid;
BORDER-RIGHT: gray 1px solid;
BORDER-TOP: gray 0px solid;
}
от чего все так каряво получилось?
Обычно в таких случаях я режу на 3 части, 2 картинки с закруглёнными краями (края не прозрачные, а цвета фона), и одну под заливку.
Потом в divе с заливкой вставляю 2 крайние картинки с position:absolute.
Потом в divе с заливкой вставляю 2 крайние картинки с position:absolute.
Ну а что ты ожидал???
Сделай Padding равным нулю
.label {
padding:0px;
BACKGROUND-COLOR:gray;
width:100%;
FONT-SIZE: 10px;
color:#000000;
FONT-WEIGHT: bold;
background-image:url(image/razd_c.gif);
}
Сделай Padding равным нулю
Цитата:
.label {
padding:0px;
BACKGROUND-COLOR:gray;
width:100%;
FONT-SIZE: 10px;
color:#000000;
FONT-WEIGHT: bold;
background-image:url(image/razd_c.gif);
}
И жестко укажи ячейкам, которые содержат уголки, равную ширине картинок. И будет тебе счастье