Перейти к содержанию
siniovvitia

Фиксированный резиновый фон-шапка из table и фотки

Рекомендуемые сообщения

не получается реализовать следующую задумку:

есть сайт на другом движке: http://www.toys-china.com.ua/

фон сайта состоит из четырех элементов три фотки(на скрине пронумерованы), и Table зафиксированный по размеру сверху вниз (код следующий: <table cellpadding=0 cellspacing=0 border=0 style="background-color: #dfdb00; height: 193px; width: 100%;">)

сделано это для того, чтобы при больших разрешениях сайт растягивался вместе с фоном - три фотки не изменяются, но растягивается только Table, а фотки зафиксированы слева, по центру и справа

Изображение

я хочу сделать подобный фон на опенкарте,- допустим третью фотку зафиксировать фоном у правого края, и постелить сзади table, но у меня не получается, - пробовал множество вариантов ,- и в css и в html основной результат это фон сдвигает сайт вниз, и у меня не получается надвинуть сайт на фон.

может кто подскажет как это можно реализовать в css или в html...

заранее благодарен Вам за помощь.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для первой картинки добавляете

float:left;
для второй

float:left;
clear:left;
а для третьей

float:right;
clear:right;
Единственное что не могу понять, так это зачем тут table?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для первой картинки добавляете

float:left;
для второй

float:left;
clear:left;
а для третьей

float:right;
clear:right;
Единственное что не могу понять, так это зачем тут table?

в этом весь смысл,- он лежит сзади изображений ,- сайт резиновый, и когда он вытягивается, то фотки остаются на местах и не вытягиваются, а растягивается только table - он такого же цвета как и фон изображений...

весь инет перерыл,- решения не нашел,- решил на форуме тему запостить (сам в css пока не очень, но элементарное могу)

похоже что решения не найду,- прийдется делать фиксированный (не резиновый)сайт с фиксированным фоновым изображением...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

у вас сайт на хостинге или локально тестируете? если первое, то ссылку в студию - помогу. а если второе, то лучше первое))

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

у вас сайт на хостинге или локально тестируете? если первое, то ссылку в студию - помогу. а если второе, то лучше первое))

и первое и второе - щас поставил фиксированное фоновое изображение с повторением, но хотелось бы сделать то, что задумал

...все-таки сайт не должен выглядеть слишком просто (это уже проверенно), и желательно чтобы он подстраивался под разрешение экрана

сайт тут http://www.mavrus.com.ua

лого и некоторые элементы дизайна временные

если нужны коды - пишите - выгружу

мне хватило бы реализовать не стремя фотками, а с одной (с третьей на скрине) и с фоном table

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

у вас сайт на хостинге или локально тестируете? если первое, то ссылку в студию - помогу. а если второе, то лучше первое))

получилось сделать резиновый без фона table,- идет фоновое изображение , а потом идет повторение - в принципе,- это меня устраивает, но вообще тема интересная, и можно поломать голову сообща на будущее...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

можно поломать голову сообща на будущее...

ломать тут нечего - все просто. но раз вы уже решили сами, то вопрос отпадает)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ломать тут нечего - все просто. но раз вы уже решили сами, то вопрос отпадает)

я щас паралельно делаю еще один магазин, и планирую там такой фон,- если нетрудно, то объясните мне суть

заранее благодарен Вам за помощь!!!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для решения вашей проблемы достаточно прописать в вашей stylesheet.css в 46 строке

вместо

background-image: url("../image/3.png");
вот это

background: #E1DC00 url("../image/3.png") repeat-y scroll right center;
и всегда картинка будет привязана к правому краю при различных разрешениях экрана.

Если понятнее не стало, то всегда есть htmlbook

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

спасибо ,- будем пробовать,- я на другом сайте хочу полность другой дизайн верстать

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.