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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) SEO Линк Билдинг под Бурж | Вечные ссылки США, Европа и Мир с Гарантией
18 Needmylink1 6548 25.3.2024, 20:51
автор: Needmylink1
Горячая тема (нет новых ответов) Hyper.hosting - сервера под любые задачи [разрешены dmca, гэмблинг, адалт и пр.]
Лучшие сервера по доступной цене
30 Hyper_Hosting 8601 22.3.2024, 15:34
автор: Hyper_Hosting
Открытая тема (нет новых ответов) 📌 Telegram Prime - софт для автоматизации telegram разработанный специально под задачи бизнеса
🏆 Единственный комбайн для популяризации вашей компании в теле
14 leviathan 3274 21.3.2024, 18:54
автор: leviathan
Открытая тема (нет новых ответов) HideHost.net - Виртуальные и выделенные сервера под любые Ваши проекты с индивидуальным подходом.
Работаем уже более 12 лет
6 HIDEHOST 2313 21.3.2024, 13:33
автор: Tihohodka
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыSEO-продвижение USA, Europe, Asia под ключ | Dating, Gambling, Essay и 10+ ниш
1 Needmylink1 661 17.3.2024, 12:58
автор: Needmylink1


 



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