Здравствуйте, а как можно сделать на фон картинку?
<style type="text/css"> HTML, BODY {background: url(Адрес картинки);} </style>
Если делаете через "Свой стиль", то ищите аналогичные селекторы и прописываете там.
Техническая поддержка |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Техническая поддержка » Дизайн форума » Вопросы по оформлению
Здравствуйте, а как можно сделать на фон картинку?
<style type="text/css"> HTML, BODY {background: url(Адрес картинки);} </style>
Если делаете через "Свой стиль", то ищите аналогичные селекторы и прописываете там.
ily2811 написал(а):
Здравствуйте, а как можно сделать на фон картинку?
Выделить код
<style type="text/css">
HTML, BODY {background: url(Адрес картинки);}
</style>
Если делаете через "Свой стиль", то ищите аналогичные селекторы и прописываете там.
спасибо большое, щас попробую
Вот мой форум, я работаю пока над дизайном: http://fanzona.bestff.ru/ Как мне сделать в полный рост шапку и убрать белые полосы с верха и низа???
Как мне сделать в полный рост шапку
Для начала убрать вот это:
#pun_wrap #pun #pun-index #pun-title.section #title-logo-table tbody #title-logo-tr .title-logo-tdl .title-logo {background-image: url("http://hitskin.com/themes/15/31/06/i_logo.png"); }{width: 1000; height: 500; }
А затем найти:
#pun-title table { border: none; height: 40px; width: 100%; }
И изменить таким образом:
#pun-title table { border: none; height: 40px; width: 100%; background-image: url(http://hitskin.com/themes/15/31/06/i_logo.png);}
Указав вместо 40 высоту Вашей картинки d gbrctkz[.
и убрать белые полосы с верха и низа???
Ищем это:
/* A5.1 */ #pun { margin: 30px; position: relative; }
И попробуйте изменить так:
/* A5.1 */ #pun { margin-left: 30px; margin-right: 30px; position: relative; }
Выпадающее меню для главных клавиш форума
Подскажите как поставить его на место и сделать выпадающее меню меньше ссылки посередине.
Вот так до установление скрипта
Уменьшить выпадающее меню и ссылки по центру
Скрипт
Вверх
<style> #pun-navlinks.section{ display: block; position: relative; left: 4em; } #pun-navlinks.section ul.container { margin: 0px; border: 0px; padding: 0px; width: 980px; /*For KHTML*/ list-style: none; height: 24px; } #pun-navlinks.section ul.container, #pun-navlinks.section ul.container * {z-index: 1000;} #pun-navlinks.section ul.container li { margin: 0px 20px 0px 0px; padding: 0px; border: 0px; float: left; /*For Gecko*/ display: inline; list-style: none; position: relative; height: 24px; } #pun-navlinks.section ul.container ul { margin: 0px; border: 0px; padding: 0px 0px 12px 0px; width: 175px; list-style: none; display: none; position: absolute; top: 24px; left: -5px; background-image: url(http://www.acrobatusers.com/sites/all/themes/auc_v3/images/menu_bottom.gif); background-repeat: no-repeat; background-position: 0 bottom; } #pun-navlinks.section ul.container ul:after /*From IE 7 lack of compliance*/{ clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } #pun-navlinks.section ul.container ul li { width: 175px; float: left; /*For IE 7 lack of compliance*/ display: block !important; display: inline; /*For IE*/ } /* Root Menu */ #pun-navlinks.section ul.container a { -x-system-font:none; background-attachment:scroll; background-image:none; background-position:0 0; background-repeat:repeat; color: #000000; display:block; float:none !important; font-family:arial,Verdana,Helvetica,sans-serif; font-size:11px; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:bold; height:auto !important; line-height:16px; padding:0 0 0 17px; text-decoration:none; text-transform:uppercase; } /* Root Menu Hover Persistence */ #pun-navlinks.section ul.container a:hover, #pun-navlinks.section ul.container li:hover a, #pun-navlinks.section ul.container li.iehover a { color: #ffcc33; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; } /* 2nd Menu */ #pun-navlinks.section ul.container li:hover li a, #pun-navlinks.section ul.container li.iehover li a { float: none; bbackground: #bf2c2b; color: #fff; } /* 2nd Menu Hover Persistence */ #pun-navlinks.section ul.container li:hover li a:hover, #pun-navlinks.section ul.container li:hover li:hover a, #pun-navlinks.section ul.container li.iehover li a:hover, #pun-navlinks.section ul.container li.iehover li.iehover a { background: #555555; color: #ffcc33; } /* Do Not Move - Must Come Before display:block for Gecko */ #pun-navlinks.section ul.container li:hover ul ul, #pun-navlinks.section ul.container li:hover ul ul ul, #pun-navlinks.section ul.container li.iehover ul ul, #pun-navlinks.section ul.container li.iehover ul ul ul { display: none; } #pun-navlinks.section ul.container li:hover ul, #pun-navlinks.section ul.container ul li:hover ul, #pun-navlinks.section ul.container ul ul li:hover ul, #pun-navlinks.section ul.container li.iehover ul, #pun-navlinks.section ul.container ul li.iehover ul, #pun-navlinks.section ul.container ul ul li.iehover ul { display: block; } #pun-break1, #pun-break2{display: none;} #pun-announcement,#pun-announcement *{z-index: 1;} </style>
низ
<script type="text/javascript"> //Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs): var arrowimages={down:['downarrowclass', 'https://forumupload.ru/uploads/000b/59/3e/3110-1.gif', 23], right:['rightarrowclass', 'https://forumupload.ru/uploads/000b/59/3e/3110-2.gif']} var jqueryslidemenu={ animateduration: {over: 400, out: 200}, //duration of slide in/ out animation, in milliseconds buildmenu:function(menuid, arrowsvar){ jQuery(document).ready(function($){ var $mainmenu=$("#"+menuid+">ul") var $headers=$mainmenu.find("ul").parent() $headers.each(function(i){ var $curobj=$(this) var $subul=$(this).find('ul:eq(0)') this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()} this.istopheader=$curobj.parents("ul").length==1? true : false $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0}) $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append( '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1]) +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0]) + '" style="border:0;" />' ) $curobj.hover( function(e){ var $targetul=$(this).children("ul:eq(0)") this._offsets={left:$(this).offset().left, top:$(this).offset().top} var menuleft=this.istopheader? 0 : this._dimensions.w menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over) }, function(e){ var $targetul=$(this).children("ul:eq(0)") $targetul.slideUp(jqueryslidemenu.animateduration.out) } ) //end hover }) //end $headers.each() $mainmenu.find("ul").css({display:'none', visibility:'visible'}) }) //end document.ready } } //build menu with ID="pun-navlinks" on page: jqueryslidemenu.buildmenu("pun-navlinks", arrowimages) </script> <script type="text/javascript"> var url = location.protocol+'//'+location.hostname; document.getElementById('navindex').innerHTML='<a href="'+url+'/"><span>Главная</span></a></ul>' document.getElementById('navprofile').innerHTML='<a href="'+url+'/profile.php?id='+UserID+'"><span>Профиль</span></a><ul><li><a class="markid" href="'+url+'/profile.php?section=personal&id=">Персональный</a></li><li><a class="markid" href="'+url+'/profile.php?section=messaging&id=">Общения</a></li><li><a class="markid" href="'+url+'/profile.php?section=avatar&id=">Аватар</a></li><li><a class="markid" href="'+url+'/profile.php?section=signature&id=">Подпись</a></li><li><a class="markid" href="'+url+'/profile.php?section=display&id=">Отображения</a></li><li><a class="markid" href="'+url+'/profile.php?section=privacy&id=">Приватность</a></li><li><a class="markid" href="'+url+'/profile.php?section=fields&id=">Остальное</a></li><li><a class="markid" href="'+url+'/profile.php?section=admin&id=">Управление</a></li></ul>' document.getElementById('navpm').innerHTML='<a href="'+url+'/messages.php"><span>Сообщения</span></a><ul><li><a class="nog" href="'+url+'/messages.php?box=0">Входящие</a></li><li><a class="nog" href="'+url+'/messages.php?box=1">Отправленные</a></li><li><a class="nog" href="'+url+'//messages.php?action=new">Новое сообщение</a></li></ul>' document.getElementById('navadmin').innerHTML='<a href="'+url+'/admin_index.php">Администрирование</a><ul><li><a class="nog" href="'+url+'/admin_categories.php" title="Добавление/удаление/редактирование категорий">Категории</a></li><li><a class="nog" href="'+url+'/admin_forums.php" title="Добавление/редактирование форумов">Форумы</a></li><li><a class="nog" href="'+url+'/admin_users.php" title="Поиск пользователя">Пользователи</a></li><li><a class="nog" href="'+url+'/admin_groups.php" title="Добавление/настройка групп">Группы</a></li><li><a class="nog" href="'+url+'/admin_options.php">Настройки</a></li><li><a class="nog" href="'+url+'/admin_permissions.php">Права</a></li><li><a class="nog" href="'+url+'/admin_censoring.php">Цензура</a></li><li><a class="nog" href="'+url+'/admin_ranks.php">Ранги</a></li><li><a class="nog" href="'+url+'/admin_bans.php">Блокировка</a></li><li><a class="nog" href="'+url+'/admin_logs.php" title="Система ведения логов форума">Логи</a></li><li><a class="nog" href="'+url+'/admin_prune.php">Чистка</a></li><li><a class="nog" href="'+url+'/admin_massmail.php" title="Массовая E-mail рассылка">Рассылка</a></li><li><a class="nog" href="'+url+'/admin_fields.php" title="Дополнительные поля профиля">Поля</a></li><li><a class="nog" href="'+url+'/admin_style.php" title="Свой стиль">Стиль</a></li><li><a class="nog" href="'+url+'/admin_pages.php" title="Добавление страницы">Страницы</a></li><li><a class="nog" href="'+url+'/admin_promotion.php" title="Метатеги/Поисковые системы">Раскрутка</a></li></ul>' </script> <script type="text/javascript"> jQuery(function() { if (GroupID==3) { jQuery('.markid').parent().hide(); jQuery('.nog').parent().hide(); } else { jQuery('.markid').map(function(){ jQuery(this).attr('href', jQuery(this).attr('href')+UserID ); }); } }); </script>
Invisible Man, в отличии от Айрин я не спец.. но могу предположить что размер идёт автоматом! в зависимости от длинны самого длинного слова.. но мож и ошибаюсь..
Выпадающее меню для главных клавиш форума
Че не кто и не как не может помочь?
Invisible Man, название используемого стиля скажите. Сейчас посмотрим.
название используемого стиля скажите. Сейчас посмотрим.
Mybb_Lava_Red
Invisible Man
верх
<style> #pun-navlinks.section{ display: block; position: relative; left: 4em; } #pun-navlinks.section ul.container { margin-top: 12px; margin-left: 280px; border: 0px; padding: 0px; width: 980px; /*For KHTML*/ list-style: none; height: 24px; } #pun-navlinks.section ul.container, #pun-navlinks.section ul.container * {z-index: 1000;} #pun-navlinks.section ul.container li { margin: 0px 2px 0px 0px; padding: 0px; border: 0px; float: left; /*For Gecko*/ display: inline; list-style: none; position: relative; height: 24px; } #pun-navlinks.section ul.container ul { margin: 0px; border: 0px; padding: 0px 0px 12px 0px; width: 120px; list-style: none; display: none; position: absolute; top: 24px; background-image: url(http://www.acrobatusers.com/sites/all/themes/auc_v3/images/menu_bottom.gif); background-repeat: no-repeat; background-position: 0 bottom; } #pun-navlinks.section ul.container ul:after /*From IE 7 lack of compliance*/{ clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } #pun-navlinks.section ul.container ul li { width: 120px; float: left; /*For IE 7 lack of compliance*/ display: block !important; display: inline; /*For IE*/ } /* Root Menu */ #pun-navlinks.section ul.container a { -x-system-font:none; background-attachment:scroll; background-image:none; background-position:0 0; background-repeat:repeat; color: #c8c8c8; display:block; float:none !important; font-weight:bold; height:auto !important; line-height:16px; padding:0 0 0 8px; text-decoration:none; text-transform:uppercase; } /* Root Menu Hover Persistence */ #pun-navlinks.section ul.container a:hover, #pun-navlinks.section ul.container li:hover a, #pun-navlinks.section ul.container li.iehover a { color: #ffcc33; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; } /* 2nd Menu */ #pun-navlinks.section ul.container li:hover li a, #pun-navlinks.section ul.container li.iehover li a { float: none; bbackground: #bf2c2b; color: #fff; } /* 2nd Menu Hover Persistence */ #pun-navlinks.section ul.container li:hover li a:hover, #pun-navlinks.section ul.container li:hover li:hover a, #pun-navlinks.section ul.container li.iehover li a:hover, #pun-navlinks.section ul.container li.iehover li.iehover a { background: #555555; color: #ffcc33; } /* Do Not Move - Must Come Before display:block for Gecko */ #pun-navlinks.section ul.container li:hover ul ul, #pun-navlinks.section ul.container li:hover ul ul ul, #pun-navlinks.section ul.container li.iehover ul ul, #pun-navlinks.section ul.container li.iehover ul ul ul { display: none; } #pun-navlinks.section ul.container li:hover ul, #pun-navlinks.section ul.container ul li:hover ul, #pun-navlinks.section ul.container ul ul li:hover ul, #pun-navlinks.section ul.container li.iehover ul, #pun-navlinks.section ul.container ul li.iehover ul, #pun-navlinks.section ul.container ul ul li.iehover ul { display: block; } #pun-break1, #pun-break2{display: none;} #pun-announcement,#pun-announcement *{z-index: 1;} </style>
Morfirin, Работает, огромное спасибо!
Morfirin, Только один лаг, только что заметил, форум стал шире...можно как то исправить?
Invisible Man
#pun-navlinks.section ul.container {
margin-top: 12px; margin-left: 280px;
border: 0px;
padding: 0px;
width: 980px; /*For KHTML*/
list-style: none;
height: 24px;
попробуйте заменить 980 на цифру поменьше, только в этом случае могут не уместиться в строку все ссылки меню...
Morfirin, Не выходит уменьшиль аж до 800, появилась вторая строка. Зашел как гость ссылки стоят посередине но бегунок внизу браузера по прежнему есть (форум расширен)
Invisible Man, у меня нет. А вообще при низких разрешениях монитора горизонтальная прокрутка будет появляться неизбежно, т.к. в силу графического оформления шапки необходим отступ меню от левого края не менее 280 пикселей.
Morfirin, Ладно переживем как не будь. Еще раз спасибо.
<style type="text/css"> .punbb table Div.icon {float: left; display: block; width: 30px; height: 30px; border-style: none none none none;} { background-image : url(http://s001.radikal.ru/i194/1007/aa/c6c0a69af3b1.png); background-repeat: no-repeat; } </style> <style type="text/css">TR.inew Div.icon { background-image : url(http://s44.radikal.ru/i106/1007/5e/72d10b544548.png); background-repeat: no-repeat; } </style> <style type="text/css">TR.isticky Div.icon { background-image : url(http://s49.radikal.ru/i124/1007/29/ecb777f922eb.png); background-repeat: no-repeat; } </style> <style type="text/css"> TR.iclosed Div.icon { background-image : url(http://i070.radikal.ru/1007/2c/b9315ce3c41f.png); background-repeat: no-repeat; } </style> <style type="text/css"> TR.iredirect Div.icon { background-image : url(http://s11.radikal.ru/i184/1006/69/4133d79c6e7a.png); background-repeat: no-repeat; } </style>
У меня почему-то на форуме не работают картинки( http://vampirediaries.rolevka.ru/ Точнее работают, но только четверть изображения видно. И еще не получается сделать их справа, а не слева
.punbb table Div.icon {float: left; display: block; width: 30px; height: 30px; border-style: none none none none;} {
background-image : url(http://s001.radikal.ru/i194/1007/aa/c6c0a69af3b1.png);
background-repeat: no-repeat;
}
Так нельзя. Делаем так:
.punbb table Div.icon {float: left; display: block; width: 30px; height: 30px; border-style: none none none none;
background-image : url(http://s001.radikal.ru/i194/1007/aa/c6c0a69af3b1.png);
background-repeat: no-repeat;}
И меняем выделенное на right, чтобы иконки были справа.
Здравствуйте!
У меня на форуме, вдруг, откуда ни возьмись, появилась тонкая зелёная полоса под фоном первой категории. Причём, только под 1-й категорией она отображается в Мозилле. Граница чего-то, похоже, в зелёный цвет вылезла. В Опере же она видна под фоном каждой категории, а в ИЕ её вообще не наблюдается.
Честно говоря, не могу точно сказать, была ли она изначально в стиле, или появилась после манипуляций со скриптами... Для проверки удалил все скрипты, результат не изменился. Хотя, из скриптов ставил только три:
1) для лого,
2) объявления (бегущая строка) и
3) кнопки "удалить" и "редактировать" в сообщении.
Всё.
Не думаю, что эти скрипты что-нибудь напартачили. Помогите, пожалуйста исправить, а то уже собрался ссылкой делиться с другом, а тут такое... Мелочь, но не приятно. Буду очень признателен, если не за исправление проблемы, то хотя бы за подсказку, в чём конкретно у меня "собака порылась"... Только что проверил "Цвета style_cs.cs". Там и намёка нет на зелёный цвет. Проверил не только бордюры, но все разделы по порядку. Тишина... Вопрос ещё загадочней становится: откуда взялась зелень??
Адрес форума -- в подписи.
Вот фрагмент с этой злосчастной зелёной полосой (указано стрелками):
Отредактировано slide (2011-07-19 16:20:30)
slide, так вы же не используете свой стиль, это в стандартном. Сделайте так:
<style>
#pun-category1 h2, #pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2 {height:12px;}
</style>
В HTML верх.
Вы здесь » Техническая поддержка » Дизайн форума » Вопросы по оформлению