Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Корзина » Автоматическое подстраивание под разные разрешения экрана
Добрый вечер.
Коды не нашел (точнее, гуглил, нашел не тут на форуме, но они не работают), может быть кто-нибудь подскажет, как можно прописать в админке через HTML-коды, чтобы у пользователей с разным разрешением экрана страница автоматически подстраивалась и шапка и фон (да и все остальное) никуда не "уезжали"?
Отредактировано The_Creator (Вт, 12 Ноя 2013 23:30:57)
The_Creator
Поставьте стандартный стиль, к примеру ForumBB(там много подобных)
Проверить стиль на "резиновость" можно зажав контрл и крутя колёсико мыши
The_Creator
Поставьте стандартный стиль, к примеру ForumBB(там много подобных)
Проверить стиль на "резиновость" можно зажав контрл и крутя колёсико мыши
Спасибо за ответ. Я уже "закрепил" его так, чтобы он не уезжал вниз при прокрутке.
И, кстати, нашел сейчас коды (работающие), чтобы автоматически регулировались картинки в зависимости от браузера и разрешения экрана.
Делюсь, если кому нужно.
Для шапки в данном случае:
<style type="text/css">
#pun-title table {background-image: url("ссылка на картинку"); background-color: transparent; background-repeat: no-repeat; background-position: top center;
height : 385px; border-style: none;
moz-background-size:100% 100%;
o-background-size:100% 100%;
webkit-background-size:100% 100%;
khtml-background-size:100% 100%;
background-size:100% 100%;
}
</style>
Подходит для Firefox 4+, Opera 9.5+, Safari 5+, Chrome 4+, Konqueror.
Часть, выделенную зеленым, можно вставлять и прописывая фоновую картинку.
Вроде бы работает. Сейчас проверял и на своем компе, меняя разрешение экрана, и на других тоже проверялось. Все меняется.
Спер и немного видоизменил отсюда
Отредактировано The_Creator (Ср, 13 Ноя 2013 00:10:18)
The_Creator
Ccылку на ресурс с проблемой - далее поглядим
Для сайта в профиле начальная картинка для шапки должна быть примерно 1000px(по ширине) и менее 300(по высоте) если картинка уже - заполните остальное неким фоном, другой картинкой или цветом (карочь там основная работа для ФШ, поставить - проблем нет)
далее поправим для резиновости
Отредактировано Deff (Ср, 13 Ноя 2013 03:02:21)
Больше проблема была даже не для шапки, а для фона, который, если разрешение было выше, чем мое (под которое я подлаживал), размножался. Я знаю, что можно прописать, чтобы он не множился, но тогда будет виден исходный фон того стиля, который установлен. В принципе я проблему уже решил для большей части браузеров, но если есть возможность подправить так, чтобы, скажем, и с телефона или с более ранних версий браузеров все открывалось с одной фоновой картинкой, то буду только рад.)
Размер шапки: 860 на 350.
Отредактировано The_Creator (Ср, 13 Ноя 2013 17:58:07)
Больше проблема была даже не для шапки, а для фона, который, если разрешение было выше, чем мое (под которое я подлаживал), размножался.
Замените HTML верх целиком( прошлое сохраните)
<img src="http://s019.radikal.ru/i634/1311/b2/cd8ec7e8487d.jpg" width="100%" style="margin-bottom:-31px;"/>
<style type="text/css">
#pun,
#pun-title table,#pun-title table {
background: none;;
height : 60px;
border-style: none;
}
#pun-title h1 {
display: none;
}
</style>
<style type="text/css">
html, body {
background: transparent none !important;
}
</style>
<img src="http://s017.radikal.ru/i442/1311/8a/fae6f43ded2c.jpg" style="position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100% ; margin: 0 0 0 0;"/>
<style type="text/css">
#pun-navlinks .container {
padding-top : 4px; background-color : #99CCFF;
font-weight: italic;
text-align: center; border-style: none;
}
</style>
<style type="text/css">
#pun {background-color: transparent; width: 62%; border-style: none;}
</style>
<style type="text/css">
#pun-ulinks .container {
background-color : #99CCFF !important; border-style: none;
}
</style>
<style type="text/css">
#pun-ulinks a {
color : #000000;
font-weight: bold; font-family: Times New Roman; font-size: small;
}
</style>
<style type="text/css">
#pun-navlinks .container {
padding-top : 4px; background-color : #99CCFF;
font-weight: bold; text-align: center; font-family: Times New Roman; font-size: small; colour: black; border-style: none;
}
</style>
<style>/*Подвижка банера*/
#pun-title td.title-logo-tdr{
display:block!important;
position:absolute!important;
z-index:100;
height:60px!important;
padding-left:0px!important;
width:468px!important;
left:50%!important;
margin-left:-428px!important;
margin-top:-27px!important;
padding-top:0px!important;
}
</style>
<div id="MyGuest" style="display:none">
<script>if (GroupID ==3) {$("div.#MyGuest").show()};</script>
<div valign="bottom"><style type="text/css">
a#okno{
position: fixed;
bottom: 10px;
line-height: 16px;
text-align: left;
right: 10px;
z-index: 30000;
opacity: 0.8;
width: 290px;
height: 80px;
background: #000000;
color: #fff;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
padding: 10px;
text-decoration: none;
font-size: 11px;
font-family: Tahoma;
border: 1px solid #ffffff;
box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset #ffffff 0px 1px 0px;
border-radius: 3px;
}
</style>
<a href="/register.php" id="okno"><strong>Здравствуйте!</strong><br>
Вы находитесь на борту USS Enterprise. Пожалуйста, введите свой id и подтвердите свою личность.</a></div>
</div>
<style type="text/css">
#pun-status .container { color : black;
background-color : #99CCFF;
}
</style>
<style type="text/css">
#pun-crumbs1 .container {
color : black; background-color : #99CCFF !important; text-align: center; border-style: none;
}
</style>Deff
Спасибо! Вроде работает.
А что вы там поменяли? (просто чтобы мне не сличать все скрипты понаставленные))
Отредактировано The_Creator (Ср, 13 Ноя 2013 18:23:48)
The_Creator
Первые два style
Вроде работает.
Проверить стиль на "резиновость" можно зажав контрл и крутя колёсико мыши
The_Creator
Первые два style
Ааа, ясно. это тот способ, который я вначале пытался провернуть, но не догадался как. Спасибо.
Deff написал(а):
Проверить стиль на "резиновость" можно зажав контрл и крутя колёсико мыши
Проверил. Изменяется только размер таблиц - фон и шапка остаются прежними.
.
Отредактировано Азазелья (Вт, 19 Ноя 2013 16:08:39)
The_Creator
проверить можно изменяя размер самого окна.
Т.е. нажмите кнопку в строке меню справа "свернуть в окно" и изменяйте размер окна за правый нижний угол, так вы увидите "резиновость".
Так же можно в Своём стиле прописать спец. правила для разных размеров окон: размеры картинок, убрать мешающие столбики. Я такое делала.
@media screen and (max-width: 970px) {
#pun-title td.title-logo-tdr {width: 10px;}
#pun-title td.title-logo-tdl {width: 97%;}
#pun-title td.title-logo-tdr img {display: none;}
.punbb {width: 95%;}
#pun-status .container {width: 94%;}
#marq-cont img {display: none;}
.pl-warning, .pl-share {display: none !important;}
.subscribelink a {margin-left: 0; margin-top: 0; position: relative;}
td#button-strike, td#button-left, td#button-font {display: none;}
#banner-up {margin-left: 385px;}}
@media screen and (max-width: 650px) {
#pun-title td.title-logo-tdr {width: 6px;}
#pun-title td.title-logo-tdl {width: 61%;}
#pun-title td.title-logo-tdr img {display: none;}
.punbb {width: 60%;}
body {
font-size: 80%;
padding: 0;
}
#pun-status .container {width: 65%;}
.punbb .main .tc3 {display: none;}
#marq-cont img {display: none;}
.pl-warning, .pl-share {display: none !important;}
.subscribelink a {margin-left: 0; margin-top: 0; position: static;}
td#button-strike, td#button-left, td#button-font {display: none;}}
@media screen and (max-width: 480px) {
body {
font-size: 80%;
padding: 0;
}
#pun-title td.title-logo-tdr {width: 4px;}
#pun-title td.title-logo-tdl {width: 41%;}
#pun-title td.title-logo-tdr img {display: none;}
.punbb {width: 40%;}
.punbb .main .tc3, .punbb .main .tcmod, {display: none;}
#pun-status .container {width: 45%;}
#pun-announcement h2, #pun-announcement h2 span, #pun-announcement .container {
width: 40%;
font-size: 75%;
padding: 0;
}
.punbb .post h3 span {
padding: 2em 1em;
display: block;
margin-left: 0em;
}
.punbb .post-links ul {
padding: 0px 1em 2em 0px;
}
.punbb .post-body {margin-left: 0em;}
.linkst .pagelink {
left: 1em;
position: absolute;
top: -6em;
width: 24em;
}
.linkst .postlink {
font-weight: bold;
position: absolute;
right: 1em;
text-align: right;
top: -6em;
width: 16em;
}
#marq-cont img {display: none;}
.pl-warning, .pl-share {display: none !important;}
.subscribelink a {margin-left: 0; margin-top: 0; position: static;}
td#button-strike, td#button-left, td#button-font {display: none;}}
@media screen and (max-width: 280px) {
body {
font-size: 75%;
padding: 0;
}
#pun-title td.title-logo-tdr {width: 1px; position: static;}
#pun-title td.title-logo-tdl {width: 21%; position: static;}
#pun-title td.title-logo-tdr img {display: none;}
.punbb {width: 20%; position: static;}
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod, .punbb .main .tcr {display: none;}
#pun-status .container {width: 25%; position: static;}
#pun-announcement h2, #pun-announcement h2 span, #pun-announcement .container {display: none;}
.punbb .post h3 span {
padding: 2em 1em;
display: block;
margin-left: 0em;
}
.punbb .post-links ul {
padding: 0px 1em 2em 0px;
}
.punbb .post-body {margin-left: 0em;}
.linkst .pagelink {
left: 1em;
position: absolute;
top: -6em;
width: 24em;
}
.linkst .postlink {
font-weight: bold;
position: absolute;
right: 1em;
text-align: right;
top: -6em;
width: 16em;
}
#marq-cont img {display: none;}
.pl-warning, .pl-share {display: none !important;}
.subscribelink a {margin-left: 0; margin-top: 0; position: static;}
td#button-strike, td#button-left, td#button-font {display: none;}}
/* придание резиновости картинкам */ /* работает только если размеры основных картинок прописаны в процентах */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}/* придание резиновости видео объектам */ /* работает только если размеры основных параметров прописаны в процентах */
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
Красным выделен параметр определяющий размер окна для которого будут действительны те правила, что перечислены после. При желании можно задать размер шрифта и т.д. и т.п. для каждого размера окна.
Внимание! Я использую Свой стиль.
Если вы хотите в Настройках то в html-низ вставляйте предварительно включив тело кода в <style type="text/css"></style>
Отредактировано Олюся (Вт, 26 Ноя 2013 15:09:55)
Вы здесь » Единый форум поддержки » Корзина » Автоматическое подстраивание под разные разрешения экрана