Alternative Art : breath of a phoenix

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Alternative Art : breath of a phoenix » Вопросы по CSS » Вопросы/проблемы со стилем vol.03 <


Вопросы/проблемы со стилем vol.03 <

Сообщений 661 страница 690 из 853

661

thursday, не могли бы вы приложить скриншот и указать, на каком из браузеров замечена проблема?

Скорее всего растягивается из-за этого:

/* CS1.8 */
#pun-navlinks .container {
  background-color: #dddca6;
  color: #000000;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

.punbb textarea, .punbb select, .punbb input {
  background-color: #dddca6;
  color: #000000
}

#pun-title .title-logo {background-image : url("https://forumupload.ru/uploads/000d/7e/6a/141-1-f.png");
background-repeat : no-repeat; height : 662px; width : 8000px; }

Восемь тысяч пикселей в ширину - все же многовато ддля шапки ;)

+1

662

Здравствуйте. Подскажите пожалуйста, почему на форуме улетает копирайт?
http://warriorscatscity.rolka.su/

0

663

.klewer
попробуйте вместо

left: -40px;  поставить margin-left: -40px;

+1

664

Wilhelm написал(а):

left: -40px;  поставить margin-left: -40px;

спасибо, а вот ещё вопрос, как убрать эту полоску черную над ним?

0

665

Уберите зачеркнутое:

div#html-footer {
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: -180px;
}

+1

666

помогите передвинуть объявление в шапку
заранее спасибо

0

667

Wilhelm,большое спасибо

0

668

.|gold opium

А если просто отключить само объявление и пойти более легким путем - поставить в хтмл-верх через простенькую таблицу и шапку и текстовое поле? Или через дополнительный блок? ;)

Пример: https://forumupload.ru/uploads/0009/2d/79/299-1-f.jpg (справа в шапке)
хтмл-верх:

<div class="table_new">

Любой текст, баннеры и прочее

</div>

в стиль:

Код:
.table_new { padding: 10px;
background-color: rgba(22, 20, 12, 0.6);
color: #bda47a;
width : 257px;
height: 240px;
 position: absolute; 
z-index: 7;  
top: 165px; 
margin-left: 567px !important;
}

Естественно, все значения свои.

+2

669

У меня вопрос, а какой код отвечает за цитату и коды?

И еще, у меня никак не хочет вставляться картинка в быстрый ответ(
Вот код

Код:
/* CS1 Background and text colours
-------------------------------------------------------------*/

    #pun {
    Background-image: url(http://savepic.org/1809219.png);
    }

    html, body {background-color: #ffffff; background-image: url(http://savepic.org/1815391.gif); background-repeat: repeaty; background-attachment: fixed; background-position: center; color: black;}
    BODY {background:fixed;}
    }


/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
Background: transparent;
  color: #300001;
  }

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
Background: transparent;
  color: #300001;
  }

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
Background: transparent;
  color: #FFFFFF;
  font-weight: normal;
font-style: normal;

  }

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
Background: transparent;
  color: #300001;
  }

    #pun-title  .title-logo{background: url(http://savepic.org/1812290.jpg) no-repeat top center; padding: 0px;}
    #pun-title table {
    background: url() repeat-x;
    background-position: 0px 1px;
    }

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
Background: transparent;
  color: #300001
  }

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
Background: transparent;
  color: #300001
  }

/* CS1.7 */
.punbb textarea {background-image: url(http://savepic.net/1433866.jpg); }
  color: #5c477d
  }

/* CS1.8 */
#pun-navlinks .container {
Background: transparent;
  color: #FFFFFF;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

.punbb textarea, .punbb select, .punbb input {
Background: transparent;
  color: #300001
}

/* CS2 Border colours
-------------------------------------------------------------*/

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: transparent !important;
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: transparent
  }

/* CS2.3 */
#pun-tats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: transparent !important;
  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: transparent !important;
  }

/* CS2.5 */
.punbb th {
  border-color: transparent !important;
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: transparent !important;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: transparent !important;
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: transparent !important;
  }

.punbb .divider {
  border-color: transparent !important;
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #dedfdf
  }

li.pa-online {
  border-left-color: #EABBBC;
  }

.punbb .post-sig dt {
  border-top-color: #C8999A !important;
  }


/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #300001;
    border-bottom: 0px none #000;
  text-decoration: underline;

  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #300001
  }

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #946263;
    border-bottom: 0px none #000;
  text-decoration: underline;

  }

/* CS3.3 */
#pun-navlinks a {
  color: #FFFFFF;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #FFFFFF;
  font-weight: normal;
font-style: normal;
  border-bottom: 0px none #000;
  text-decoration: underline;

  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #fff;
  }


 /* CS4 Post status icons
    -------------------------------------------------------------*/

    div.icon {
            background: url(http://savepic.org/1833605.png) no-repeat;
    }

    tr.inew div.icon {
            background: url(http://savepic.org/1831557.png) no-repeat;
    }

    tr.iclosed div.icon {
            background: url(http://savepic.org/1821317.png) no-repeat;
    }

    tr.iredirect div.icon {
            background: url(http://savepic.org/1825413.png) no-repeat;
    }

    tr.isticky div.icon {
            background: url(http://savepic.org/1822341.png) no-repeat;
    }

#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 300px; top: 630px
}

Отредактировано .Лэмилэс (08-06-2011 16:11:50)

0

670

Доброго времени суток.
Помогите найти ответ на вопрос, как расположить посередине текст "быстрый ответ" перед окном в котором пишутся сообщения?

0

671

.Лэмилэс написал(а):

какой код отвечает за цитату и коды?

.punbb .quote-box, .punbb .code-box { ... }

.Лэмилэс написал(а):

картинка в быстрый ответ

.punbb textarea {...}

LeeLoo написал(а):

как расположить посередине текст "быстрый ответ"

#pun-main h2 {text-align: center}

+2

672

Wilhelm
Спасибо)
Я не туды всунула...

0

673

Wilhelm,
ты гений!
супер!

0

674

Wilhelm написал(а):

Восемь тысяч пикселей в ширину - все же многовато ддля шапки

Видимо, рука дрогнула, когда выставляла ширину. Всё получилось. Благодарю.)

0

675

Wilhelm
Здравствуйте. У меня такой вопрос - как сделать шапку слитно с фоном, и чтобы по краям форума был тоже фон?
Поиском пользовалась, ничего не нашла ((((
Как вставлять шапку, я поняла, а с фоном ничего не получается.

0

676

Скажите пожалуйста, а как и где регулируется расстояние между строк?
Получилось так что подчеркивание практически ложится на следующую строку и необходимо их расставить, чтобы не сливались друг с другом.

0

677

Repnina написал(а):

как сделать шапку слитно с фоном, и чтобы по краям форума был тоже фон?

Если честно, то не вполне понял, что же требуется сделать )
Что-то вроде такого: http://loveless.rolebb.com/  ?  Если так - то для начала рисуется подложка (пример: https://forumupload.ru/uploads/0009/2d/79/370-1-f.jpg), затем рисуется шапка (в фотошопе "размножается" подложка, поверх нее накладывается и обрабатывается шапка) - https://forumupload.ru/uploads/0009/2d/79/375-1-f.jpg
Подложка ставится на сам форум:

/* A5.1 */
#pun {
  margin: 0 auto 0 auto; width: ширина px;
background: transparent url("подложка") top center repeat-y;
  }

Ставится стандартным методом шапка:

#pun-title table {
border: none;
height: высотаpx;
width: ширинаpx;
margin-left: -20px !important;   /*небольшой отступ-смещение. Необязателен, но все зависит от исходных материалов*/
background-image: url("шапка");
background-repeat: no-repeat;
background-position: top center;
background-color: transparent;
}

Если же просто поставить фон - то:

html, body {background: #цвет_фона url("картинка фона") top center;}

у нас есть вроде бы даже неплохой обзор на тему фонов и Css: http://acspark.ru/viewtopic.php?id=18576
LeeLoo
Правила раздела >>читать и тем, кто пришёл с вопросом!

Правила написал(а):

1.2. Чтобы вам как можно быстрее и конкретнее ответили, вы должны: оставить ссылку на проблемный форум; показать, по-возможности, скрин, где указана ваша проблема/указан желаемый вами эффект

За отступ между строк отвечает параметр line-height. Чем больше его значение, тем больше расстояние между строк.

0

678

Доброго дня. У меня возник небольшой вопрос по "картинкам в категориях". У нас многие форум закрыты от гостей и когда мы вставляем скрипт с картинками в категории (названия категорий сделаны картинками)), то они все смещаются. Где должна быть "Регистрация" стоит например "Гостевая" и так далее. Все они смещаются из-за того, что многие разделы скрыты. Вы не можете подсказать скрипт или код в стиля, чтобы названия категорий картинками не смещались. Как такое сделать, подскажите =) заранее спасибо) вот даже пример форума http://moontwoprincess.rolevaya.com/
#2 Как сделать, чтобы название разделов (категорий) можно было прописать картинкой?
это я читала, но не помогло

Отредактировано '[F]rederika (15-06-2011 13:29:18)

0

679

Wilhelm написал(а):

За отступ между строк отвечает параметр line-height. Чем больше его значение, тем больше расстояние между строк.

в таком случае, в какой именно пункт его необходимо вставлять, чтобы указывалось расстояние между строк в сообщении оставленном на форуме, а не в шапке или в описании тем форума.
При вставлении line-height в /* A3.2 */ изменяется расстояние между строк в шапке форума и в описании, а в сообщениях ничего не меняется и строки как жались друг к другу так и жмутся.
Значение line-height 110%, при этом в таблице всё нормально
http://www.youpic.ru/images/2011/06/15/3909387109.jpg
а в сообщениях вот такая каша:
http://www.youpic.ru/images/2011/06/15/2057452648.jpg

ссылка на тестовый форум

0

680

LeeLoo написал(а):

в сообщении оставленном на форуме, а не в шапке или в описании тем форума

Для сообщения попробуйте:

.punbb .post-content p {line-height: 2em !important;}

Значения - свои.

'[F написал(а):

rederika]но не помогло

Так там и указывается, что все будет смещаться )) Это не зависит от ваших действий - если вы скрыли из трех категорий, например, ту, что посередине, то код считываться будет все равно по порядку - в зависимости от кол-ва открытых категорий. Это не обойти через css.
Открывайте разделы или перемещайте ниже те, что планируется скрыть, тогда и проблема исчезнет.

Можно воспользоваться скриптом - он ориентируется не на порядковый номер категории, а на ее название:

<script type="text/javascript"><!--Своя картинка в каждую категорию -->
$(document).ready(function(){
myarray=new Array(
"Регистрация", "картинка",
"Разное", "картинка",
"Флуд", "картинка",
"Статистика форума", "картинка" )
        $("#pun-index div.category h2,#pun-index #pun-stats h2").each(function (i) {
for(q=0;q<myarray.length;q++){
var cssObj = {
  "height":"50px",
  "background-color": "transparent",
  "background-image":"url("+myarray[q+1]+")",
  "background-position":"сenter",
  "background-repeat":"no-repeat"   
}
        if($(this).children("span").text()==myarray[q])$(this).css(cssObj);
        q++}
    });
});
</script>

Собственно - строчку с названием-картинкой размножать сколько угодно раз, названия категории - писать точно так же, как она названа на самом форуме! Это важно, потому что даже отсутствие точечки-запятой, что для красивости влеплена в название, может не запустить скрипт. Или покорежить его, как вариант.

+1

681

Wilhelm
спасибо большое *О* наконец-то смогу хоть что-то сделать не открывая разделов *О*

0

682

Wilhelm написал(а):

Для сообщения попробуйте:

    .punbb .post-content p {line-height: 2em !important;}

Значения - свои.

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

0

683

LeeLoo
а у меня все в порядке )
Я же не зря написал - подставьте свои значения, т.е. тут банальной копипастой не обойтись - нужно прикинуть, какое расстояние между строчек вам нужно.
Как вы установили элемент? Куда? Достаточно просто скопировать хоть во второе окошко стиля.

Самый наглядный пример - на вашем же тестовом дизайне:
первое окошко без изменений, во второе - просто добавляем указанную строку с нужными нам значениями - не в em-единицах, а в пикселях, например.
Вот здесь вы найдете элемент в самом низу - и ничего нигде при установке не расползается и не ломается, указанный элемент затрагивает только текст в постах и нигде больше.

Код:
#pun {border-color: #c4c4c4;
border-width: 1px;
border-style: dashed;
}

.punbb textarea {background: url() bottom right no-repeat #535353}

#pun-title.section {background-color: transparent; 
background-image: url("http://s012.radikal.ru/i320/1106/4e/ec8bda00eb24.jpg"); 
background-position: top center; 
height: 250px;}
#pun-title .title-logo span {display: none;}

#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 600px; top: 250px}


/* CS1 Background and text colours
-------------------------------------------------------------*/

HTML, BODY {background-image: url("http://i005.radikal.ru/1106/b7/139fae95ef12.jpg"); background-attachment: fixed; background-position: top center; background-color: #5b626c;
}


/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: #dadbd3;
  color: #8b8585;
  }

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #dadbd3;
  color: #676060;
  }

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #dadbd3;
  color: #a9a5a5;
  font-weight: normal;

  }

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #dadbd3;
  color: #4b5d6b;
  }

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #dadbd3;
  color: #74837c
  }

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #dadbd3;
  color: #74837c
  }

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #bcbdb1;
  color: #000
  }

/* CS1.8 */
#pun-navlinks .container {
  background-color: #dadbd3;
  color: #83a398;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

.punbb textarea, .punbb select, .punbb input {
  background-color: #fff;
  color: #737376
}

/* CS2 Border colours
-------------------------------------------------------------*/

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: #dadbd3 #dadbd3 #dadbd3 #dadbd3
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #dadbd3
  }

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: #dadbd3;
  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: #dadbd3;
  }

/* CS2.5 */
.punbb th {
  border-color: #dadbd3
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #dadbd3 #dadbd3 #dadbd3 #dadbd3;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: #dadbd3
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: #dadbd3
  }

.punbb .divider {
  border-color: #5d5d5d #5d5d5d #5d5d5d #5d5d5d
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #5d5d5d
  }

li.pa-online {
  border-left-color: #dadbd3;
  }

.punbb .post-sig dt {
  border-top-color: #dadbd3 !important;
  }


/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #4e3940;
  font-weight: bold;
  border-bottom: 0px none #000;
  text-decoration: none;
  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #979797
  }

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #3f3f3f;
  font-weight: bold;
  border-bottom: 0px none #000;
  text-decoration: underline;
  }

/* CS3.3 */
#pun-navlinks a {
  color: #3f3f3f;
  font-weight: bold;
  border-bottom: 0px none #000;
  text-decoration: none;
  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #3f3f3f;
  font-weight: bold;
font-style: normal;
  border-bottom: 0px none #000;
  text-decoration: underline;
  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #fff;
  }

/* CS4 Post status icons
 -------------------------------------------------------------*/

#pun-main div.catleft, #pun-main div.catright {display: none}


div.icon {
        background: url(http://i004.radikal.ru/1106/ca/0a75a9a9c002.jpg) no-repeat;
}
tr.inew div.icon {
        background: url(http://s005.radikal.ru/i209/1106/db/a4ed51eec802.jpg) no-repeat;
}
tr.isticky div.icon {
        background: url(http://i043.radikal.ru/1106/10/2b033e31f512.jpg) no-repeat;
}
tr.iclosed div.icon {
        background: url(http://i038.radikal.ru/1106/8c/16c4e32cb3c8.jpg) no-repeat;
}

.punbb .post-content p {line-height: 20px !important;}

+1

684

Wilhelm
плохо быть с горшком вместо головы :( Я просто не туда вставляла изначально код..
Извините за тупизм.. Спасибо большое за то что наглядно показали где именно я протупила. Впредь буду знать.
Ещё раз спасибо за помощь!

0

685

LeeLoo
Да все в порядке. Все ошибаются порой. Рад, что все получилось )

0

686

Да не убейте меня, я потерял код.
body {background: #цвет_фона url("фон-первый") top center;}
#pun_wrap {background: transparent url("фон-второй") top center no-repeat; }
Т.е. через первый можно поставить шапку. А через второй сделать фон с отступом сверху, чтобы начинался с конца шапки/накладывался на конец шапки. И ему можно задать, чтобы не прокручивался.
Так можно, да?

0

687

Дональд написал(а):

Т.е. через первый можно поставить шапку. А через второй сделать фон с отступом сверху, чтобы начинался с конца шапки/накладывался на конец шапки. И ему можно задать, чтобы не прокручивался.Так можно, да?

Дональд, как раз наоборот - #pun_wrap находится "выше", чем Body. Т.е. на врап - ставить шапку, на боди - фон. Который фон-общий (не шапка) - отступ ставить  только на саму картинку - вопрос позиционирования рассматривается в том же уроке.

+1

688

Воот оно как. То-то оно не видно было. Спасибочки.

0

689

скромный вопрос: как сделать таблицу в шапке?

0

690

кофе с вишней
На этой странице пост №668 не прокатит?

+1


Вы здесь » Alternative Art : breath of a phoenix » Вопросы по CSS » Вопросы/проблемы со стилем vol.03 <


Рейтинг форумов | Создать форум бесплатно