Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Css заливка картинки во всю строчку в table / 9 сообщений из 9, страница 1 из 1
28.01.2014, 09:26
    #38540002
surbanec
surbanec
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Css заливка картинки во всю строчку в table
здравствуйте форумчане
имеется следующая конструкция:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
	<table summary="" border="0">
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   </table>



3 столбца 3 строки

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

пробовал в tr сделать бекгроунд, но это ничего не дало. как реализовать данное?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.01.2014, 10:32
    #38540098
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Css заливка картинки во всю строчку в table
surbanecтеперь как через стили залить в бэкгроунд изображение во всю строку тейбла.
т.е. должно получится что будет 3 полоски сделанные картинкой которые идут через 3 столбца.
Дык вроде все просто...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
tr {
	background: url('http://cdn.sql.ru/css/images/logo.gif') repeat-x;
}
td {
	width: 100px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table summary="" border="0">
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
</table>
</body>
</html>


surbanecпробовал в tr сделать бекгроунд, но это ничего не дало.
Показал бы как пробовал...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.01.2014, 11:21
    #38540193
surbanec
surbanec
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Css заливка картинки во всю строчку в table
krvsa,

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

в картинке в верху как получается, а внизу как хочу сделать
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.01.2014, 12:52
    #38540347
surbanec
surbanec
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Css заливка картинки во всю строчку в table
посидел, поискал... решения с помощью сss не нашел..

а так пару вариантов либо подкладывать картинку под строку таблици, либо делать тейбл в тейбле

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<table>
  <tr>
     <td style="background url('bg.jpg')">

                    <table><tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> </table>
     </td>
  </tr>
.......

</table>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.01.2014, 15:29
    #38540656
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Css заливка картинки во всю строчку в table
surbanecнужно картинку не замостить а растянуть на весю строчку через все столбцы
Это уже CSS3
http://htmlbook.ru/faq/kak-rastyanut-fon-na-vsyu-shirinu-okna
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.01.2014, 15:32
    #38540659
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Css заливка картинки во всю строчку в table
Вот растянутая картинка...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
tr {
	background: url('http://cdn.sql.ru/css/images/logo.gif') no-repeat;
	/* Firefox 3.6+ */
	-moz-background-size: 100%; 
	/* Safari 3.1+ и Chrome 4.0+ */
	-webkit-background-size: 100%; 
	/* Opera 9.6+ */
	-o-background-size: 100%; 
	/* Современные браузеры */
	background-size: 100%; 
}
td {
	width: 100px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table summary="" border="0">
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
</table>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.01.2014, 18:15
    #38541052
surbanec
surbanec
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Css заливка картинки во всю строчку в table
krvsa,
да не не то. не работает. картинка растягивается внутри td а не через все tr

я искал, вроде пока решения с помощью css нет(

это понятно что картинку можно растянуть на весь контейнер. но с tr такое не работает.
если указывать в tr бекгроунд то будет несколько картинок ( в зависимости от количества столбцов) растянутых по ширине этих столбцов. нужно чтобы была одна картинка растянутая по ширине всего тейбла проходящая через все столбцы. а по высоте эта картинка должна растягиваться по высоте столбцов которые входят в эту строку. в общем сам уже запутался... в общем хочу сделать как на картинке которую я прикреплял.( не сверху где, а снизу картинки)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.01.2014, 08:24
    #38541487
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Css заливка картинки во всю строчку в table
surbanecэто понятно что картинку можно растянуть на весь контейнер. но с tr такое не работает
Попробуй на tbody...
Правда в этом случае придется его делать для каждой строки...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.01.2014, 13:53
    #38542029
Сергей111
Сергей111
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Css заливка картинки во всю строчку в table
surbanec, Попробуйте так. Вроде неплохо получается.
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">

table {
	background: url('http://bglabs.evade.netdna-cdn.com/wp-content/uploads/2013/02/clouds-seamless-background.jpg') repeat-x;
}
tr:hover {
	background: url('http://bglabs.evade.netdna-cdn.com/wp-content/uploads/2013/02/clouds-seamless-background.jpg') repeat-x;
}
td {
	width: 1000px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table border="0" >
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
   	<tr>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   		<td>&nbsp;</td>
   	</tr>
</table>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Css заливка картинки во всю строчку в table / 9 сообщений из 9, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 517ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1447446]:
 0ms
get settings:
 9ms
get forum list:
 19ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 184ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 54ms
get tp. blocked users:
 1ms
others: 229ms
total:  517ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]