Помощник
|
Высота таблицы под размер фонового изображения таблицы |
Jei!
|
Сообщение
#1
|
||
|
|
||
|
|||
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!
|
Сообщение
#3
|
|
Bugnet, нет. В таблице есть две строки. Их содержание короткое, и оно не даёт фоновому изображению показаться полностью. Нужно как-то установить такую высоту таблицы, чтобы фоновое изображение было видно полностью.
|
|
|
Bugnet |
25.4.2012, 21:58;
Ответить: Bugnet
Сообщение
#4
|
|
Тогда только скриптом. С jQuery дружите?
|
|
|
Jei!
|
Сообщение
#5
|
|
Нет..
|
|
|
Bugnet |
25.4.2012, 22:57;
Ответить: Bugnet
Сообщение
#6
|
|
Так хотите? Измените размер окна браузера.
|
|
|
Jei!
|
Сообщение
#7
|
|
Вроде бы то, что нужно. Но я попробовал скопировать код скрипта, стиля и таблицы себе на сайт, и такой стиль применился ко всем таблицам на сайте. И фоновое изображение растягивается по всей таблице, не сохраняя пропорции.
|
|
|
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!
|
Сообщение
#9
|
|
Вроде бы получилось. Но таблица растягивается в полную высоту фонового изображения, не сохраняя пропорции.
То есть, оригинальный размер фонового изображения - 1600х200. При определённом размере окна размер фонового изображения таблицы, и соответственно, самой таблицы должен быть 1280х160, а он получается 1280х200. |
|
|
Bugnet |
26.4.2012, 12:39;
Ответить: Bugnet
Сообщение
#10
|
|
Я добавил к предыдущему посту о редактировании скрипта. В Вашем случае сотношение ширины и высоты 8 к 1 . Значит нужно делить на 8. Должно всё получаться.
Здесь размер картинки для фона 1600х200. В скрипт добавил для информирования о размерах: [JS]var sootnosh = wTable/hTable; alert ("Ширина таблицы "+wTable+". Высота таблицы "+hTable+ ". Сотношение сторон "+sootnosh );[/JS] |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
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 | 3273 | 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 |
Текстовая версия | Сейчас: 29.3.2024, 17:21 |