X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Высота таблицы под размер фонового изображения таблицы
Jei!
Jei!
Topic Starter сообщение 25.4.2012, 19:51; Ответить: Jei!
Сообщение #1


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

Ширина фонового изображения: 100% ширины окна
Высота фонового изображения: auto (вычисляется автоматически исходя из пропорций картинки)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Bugnet
Bugnet
сообщение 25.4.2012, 20:06; Ответить: Bugnet
Сообщение #2


Если я Вас правильно понял (но скорее нужно фон подгонять под размер таблицы)
Вот здесь я делал для форума страничку с кнопками, которые при любом разрешении и размере окна находятся на одном месте (это сейчас не важно). Фон страницы - картинка, она всегда находится под body изменяется вместе с размерами окна и не зависит от разрешения экрана. Попробуйте тоже самое сделать в стиле для таблицы:

[CSS]
background-image:url(../images/fon1.jpg);
background-position:center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Jei!
Jei!
Topic Starter сообщение 25.4.2012, 20:50; Ответить: Jei!
Сообщение #3


Bugnet, нет. В таблице есть две строки. Их содержание короткое, и оно не даёт фоновому изображению показаться полностью. Нужно как-то установить такую высоту таблицы, чтобы фоновое изображение было видно полностью.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Bugnet
Bugnet
сообщение 25.4.2012, 21:58; Ответить: Bugnet
Сообщение #4


Тогда только скриптом. С jQuery дружите?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Jei!
Jei!
Topic Starter сообщение 25.4.2012, 22:11; Ответить: Jei!
Сообщение #5


Нет..
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Bugnet
Bugnet
сообщение 25.4.2012, 22:57; Ответить: Bugnet
Сообщение #6


Так хотите? Измените размер окна браузера.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Jei!
Jei!
Topic Starter сообщение 26.4.2012, 11:38; Ответить: Jei!
Сообщение #7


Вроде бы то, что нужно. Но я попробовал скопировать код скрипта, стиля и таблицы себе на сайт, и такой стиль применился ко всем таблицам на сайте. И фоновое изображение растягивается по всей таблице, не сохраняя пропорции.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Bugnet
Bugnet
сообщение 26.4.2012, 12:10; Ответить: Bugnet
Сообщение #8


У меня одна таблица, поэтому стили я применял к table и td
Когда таблиц много, то задайте стили только для этой таблицы:
[CSS]#mytable{
width:100%;
border: solid 1px #0000ff;
border-collapse: separate;
background-image:url(images/fontable1.jpg);
background-position:center;
background-repeat: no-repeat;

-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
#mytable td{

border: solid 1px #0000ff;
}[/CSS]
Необходимо библиотеку jQuery подключить, поместив её в папку js. Вот вам исходники . И ещё: в демонстрации я использовал картинку с соотношением ширины к высоте 3 к 1 . Вы будете использовать другой фон и, наверняка, соотношение сторон будет другим. необходимо буде сделать изменения в строках:
[JS]var hTable= wTable/3; [/JS]
и
[JS]var hTable1= wTable1/3;[/JS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Jei!
Jei!
Topic Starter сообщение 26.4.2012, 12:28; Ответить: Jei!
Сообщение #9


Вроде бы получилось. Но таблица растягивается в полную высоту фонового изображения, не сохраняя пропорции.
То есть, оригинальный размер фонового изображения - 1600х200. При определённом размере окна размер фонового изображения таблицы, и соответственно, самой таблицы должен быть 1280х160, а он получается 1280х200.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Bugnet
Bugnet
сообщение 26.4.2012, 12:39; Ответить: Bugnet
Сообщение #10


Я добавил к предыдущему посту о редактировании скрипта. В Вашем случае сотношение ширины и высоты 8 к 1 . Значит нужно делить на 8. Должно всё получаться.
Здесь размер картинки для фона 1600х200.
В скрипт добавил для информирования о размерах:
[JS]var sootnosh = wTable/hTable;
alert ("Ширина таблицы "+wTable+". Высота таблицы "+hTable+ ". Сотношение сторон "+sootnosh );[/JS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Ссылки за которые не стыдно! Качественный линк билдинг сервис под Бурж от Westrank. Честный прайс.
62 DaoDog 46961 Сегодня, 3:30
автор: WestRank_Support
Открытая тема (нет новых ответов) Прототипирование + дизайн + вёрстка = красивый и эффективный сайт под ключ
0 bunneh 311 16.4.2024, 18:02
автор: bunneh
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыBurzh.top|Партнерская программа под любой вид трафика (email, спам, УБТ)
2 cryptius 761 16.4.2024, 17:50
автор: cryptius
Горячая тема (нет новых ответов) Hyper.hosting - сервера под любые задачи [разрешены dmca, гэмблинг, адалт и пр.]
Лучшие сервера по доступной цене
32 Hyper_Hosting 9143 15.4.2024, 13:03
автор: Hyper_Hosting
Открытая тема (нет новых ответов) SEO Линк Билдинг под Бурж | Вечные ссылки США, Европа и Мир с Гарантией
20 Needmylink1 6993 12.4.2024, 23:32
автор: Needmylink1


 



RSS Текстовая версия Сейчас: 19.4.2024, 7:34
Дизайн