Общие вопросы по оформлению (64)

Поделиться1Пн, 21 Май 2018 19:56:21

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

Предыдущая тема: Общие вопросы по оформлению (63)


Инструменты для поиска и редактирования стиля (скриптов).	Как с помощью браузера можно определить элемент дизайна.
Каталог скриптов/CSS	Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS.
Типовые Вопросы (ЧаВо)	Ответы на часто задаваемые вопросы.
Как задавать вопросы! Разница между стилем и скриптом. ( Советы)	Плюс к названию темы еще и Памятка.

Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности.

Отредактировано Deff (Вт, 5 Июн 2018 18:07:41)

+1

Поделиться581Вт, 6 Ноя 2018 20:26:04

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

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

1. Пролистайте в самый низ страницу. У меня какая-то ересь с местоположением названия форума в нижней части. Вот чего он так съехал? Подскажите, как вернуть, куда следует?

Cделайте скриншот, обведите место красным

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

3. Поставила скрипт маски и вылезло новое чудо, которое бросится в глаза, если зайти уже в тему и глянуть на профиль пользователя: на поле наград снизу наезжает изображение.

Ссылку на тему из двух постов с прооблемной маской и без, видной гостю

0

Поделиться582Вт, 6 Ноя 2018 21:38:28

Автор: 103
Заслуженный
Зарегистрирован: Вт, 30 Сен 2014
Сообщений: 287
Уважение: +70
Позитив: +64
Предупреждения: 1) Флуд
Последний визит:
Чт, 12 Сен 2024 22:56:20

В нижней части форума появилась черная полоса

в чем проблема ? подскажите.

форум

может здесь что то не так ?

Код:

<script type="text/javascript"><!--Фон -->
var Myimg="<img id=Myimg src=\"http://forumstatic.ru/files/0010/96/f7/11027.jpg\" style=\"left:0!important;display:block;position:fixed!important;z-index:-1;width: 107%!important;margin: 0 4% 0 -4%;\"/>"
$("#pun").prepend(Myimg);</script>
<style>#Myimg {position:absolute;width:100%!important;height:100%!important;top:-10px!important;}
body{background-image:none;background-color:transparent!important;top:0!important;}
</style><!--end Фон -->

Отредактировано 103 (Вт, 6 Ноя 2018 21:42:34)

0

Поделиться583Вт, 6 Ноя 2018 21:43:35

Автор: Sanarami
Заслуженный
Зарегистрирован: Вт, 16 Сен 2014
Сообщений: 79
Уважение: +16
Позитив: +44
Пол: Женский
Последний визит:
Вс, 10 Ноя 2024 16:39:11

Deff, готово.

Отредактировано Sanarami (Вт, 6 Ноя 2018 21:43:56)

0

Поделиться584Ср, 7 Ноя 2018 00:19:57

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

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

1. Съехавшее местоположение в нижней части.

В конец Первого Окна стиля:

/*Нижний колонтитул темы*/
#pun-crumbs2{
height: 64px;
}
#pun-crumbs2 .crumbs{
position:relative; z-index:100;
display:inline-block;
margin-top:-8px!important;
margin-left: 130px!important;
text-shadow: 0 0 1px rgba(39,49,23,.7);
color:#554836;
}

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

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

Измените цифры во Втором Окне Стиля:

/*оформление профиля в теме*/
.punbb .post .post-author {
background: url(http://funkyimg.com/i/2MvYw.png) 0px 0 repeat-y; /*Фон размножаемый по вертикали*/
margin: -25px 0px 0px 7px !important;
overflow: visible!important;
}
.punbb .post .post-author > ul {
background: url(http://funkyimg.com/i/2MvZj.png) 0 top no-repeat,url(http://funkyimg.com/i/2MvYx.png) 0 bottom no-repeat; /*Фон верха - низа*/
margin: -6px 0px 0px 0px !important;
padding: 10px 0px 17px 0px!important;
}

+1

Поделиться585Ср, 7 Ноя 2018 00:25:17

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

103, Попробуйте поменять цифру Высоты:

<script type="text/javascript">
var Myimg="<img id=Myimg src=\"http:http://forumstatic.ru/files/0010/96/f7/11027.jpg\" style=\"left:0!important;display:block;position:fixed!important;z-index:-1;width: 107%!important;margin: 0 4% 0 -4%;\"/>"
$("#pun").prepend(Myimg);</script>
<style>#Myimg {position:absolute;width:100%!important;height:101.3%!important;top:-10px!important;}
body{background-image:none;background-color:transparent!important;top:0!important;}
</style>

+1

Поделиться586Ср, 7 Ноя 2018 00:37:57

Автор: 103
Заслуженный
Зарегистрирован: Вт, 30 Сен 2014
Сообщений: 287
Уважение: +70
Позитив: +64
Предупреждения: 1) Флуд
Последний визит:
Чт, 12 Сен 2024 22:56:20

Deff спасибо помогло, поменял height:101.5%

+1

Поделиться587Ср, 7 Ноя 2018 14:01:58

Автор: lorem
Заслуженный
Зарегистрирован: Ср, 7 Ноя 2018
Сообщений: 10
Уважение: +4
Позитив: 0
Последний визит:
Вс, 13 Мар 2022 17:25:35

Доброго времени. Прошу о помощи сразу в нескольких моментах.
I. У меня форум почему-то уехал влево. Размер фона стандартный, никогда такой ерунды не было. Подскажите, пожалуйста, как поправить?
http://funkyimg.com/i/2MTZg.png (большое изображение)
II. Мини-профиль. С ним вообще одна головная боль вышла.

скрин

1 - предполагалось, что профиль будет как бы вытекать из бокового фона, а для этого он должен плотно прилегать, как здесь - http://funkyimg.com/i/2MU1o.png
2 - непонятно откуда взявшиеся полоски. На самой картинке их нет
3 - задумывалось, что весь текст о персонаже будет на этом светлом фоне, который будет растягиваться в зависимости от количества текста. Ниже, на синей полосе внутрифорумная валюта, а еще ниже количество сообщений и репутация. Но все куда-то уехало и не фиксируется...
4 - аватар почему-то автоматически превращается в размер 140*140, хотя загружался как 180*180
Форум: http://neondreams.mybb.ru/
Решительно ничего не могу понять и очень прошу о помощи

Отредактировано lorem (Ср, 7 Ноя 2018 18:34:16)

0

Поделиться588Ср, 7 Ноя 2018 14:23:25

Автор: uliana-new
Заслуженный
Зарегистрирован: Вс, 5 Июн 2016
Сообщений: 148
Уважение: +20
Позитив: +50
Пол: Женский
Последний визит:
Вт, 22 Янв 2019 14:05:07

Здравствуйте!
Попробую задать почти риторический вопрос.)))
Возможно ли средствами CSS сделать так, чтобы на экране монитора вот это
выводилось.
А вот это
на экран не выводилось?

Реализация здесь: http://mamatest.mybb.ru/

Отредактировано uliana-new (Ср, 7 Ноя 2018 14:26:09)

0

Поделиться589Ср, 7 Ноя 2018 15:57:08

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7390
Уважение: +5876
Позитив: +6482
Пол: Мужской
Последний визит:
Чт, 21 Ноя 2024 21:12:40

uliana-new написал(а):

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

Немного не понял.. Первое - это относится к гостям, а второе относится к зарегистрированным пользователям.. Если вы хотите, чтобы "Ваш последний визит: " не выводилось, то в НТМЛ верх:

Код:

<style>
#pun-status .item2 {display: none;}
</style>

0

Поделиться590Ср, 7 Ноя 2018 16:20:55

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7390
Уважение: +5876
Позитив: +6482
Пол: Мужской
Последний визит:
Чт, 21 Ноя 2024 21:12:40

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

I. У меня форум почему-то уехал влево. Размер фона стандартный, никогда такой ерунды не было. Подскажите, пожалуйста, как поправить?
http://funkyimg.com/i/2MTZg.png (большое изображение)

Ну, в дамской сумочке холодильник:

/* A5.1 */
#pun {
margin: 0px auto auto auto;
width: 1097px;}

#pun-title.section {
background: transparent url(http://funkyimg.com/i/2MU4h.png) top center scroll no-repeat;
height: 618px;
width: 2000px;
margin-top: 0px;
margin-left: -523px;
}

Собственно в данном случае правильного решения нет, потому что вы форум подгоняете под дизайн, а не дизайн под форум..

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

1 - предполагалось, что профиль будет как бы вытекать из бокового фона, а для этого он должен плотно прилегать, как здесь - http://funkyimg.com/i/2MU1o.png
2 - непонятно откуда взявшиеся полоски. На самой картинке их нет

Собственно та же история, так же пытаемся прогнуть форум под свой дизайн, и все тоже самое с шириной.. Каким образом вы ожидаете, что будет совмещение полосок, если основная ширина у вас:

/* A5.1 */
#pun {
margin: 0px auto auto auto;
width: 1097px;}

А блок, внутри него идет с шириной и отступом слева:

.punbb {
width: 975px;
position: relative;
height: auto;
margin-left: 72px;
}

Чтобы вы понимали как вообще НТМЛ идет:

Ваш отступ margin-left: 72px; как раз и сдвигает аватар, чтобы не было сдвига надо margin-left: 44px;, а тогда будет сдвинута рамка..

И еще - у вас везде идет нечетная ширина - вы как думаете один пиксель можно поделить пополам при центрировании?

Мой вам совет: для начала вам надо понимать как построена структура НТМЛ на форуме с помощью: Инструменты для поиска и редактирования стиля (скриптов). Пока вы не научитесь пользоваться инструментами для веб разработчика далеко не уедите..

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

4 - аватар почему-то автоматически превращается в размер 140*140, хотя загружался как 180*180

В Настройках у вас какие размеры аватара выставлены?

Отредактировано kolobdur74 (Ср, 7 Ноя 2018 16:31:13)

0

Поделиться591Ср, 7 Ноя 2018 18:31:44

Автор: lorem
Заслуженный
Зарегистрирован: Ср, 7 Ноя 2018
Сообщений: 10
Уважение: +4
Позитив: 0
Последний визит:
Вс, 13 Мар 2022 17:25:35

kolobdur74
Спасибо, урок прочитала. Про ширину более или менее поняла.
Что до подгонки форума до дизайна... так уж вышло, что у меня есть макет. А не макет готовится под форум, которого и не существовало еще тогда.
Все же я подогнала, что смогла, по ширине. Более или менее.
С аватаром тоже разобралась, спасибо)
Однако вопросы 2 и 3 все еще актуальны.

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

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

0

Поделиться592Ср, 7 Ноя 2018 19:31:26

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7390
Уважение: +5876
Позитив: +6482
Пол: Мужской
Последний визит:
Чт, 21 Ноя 2024 21:12:40

lorem, ссылку на пост видимую гостю.. Не одного поста не могу найти..

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

Что до подгонки форума до дизайна... так уж вышло, что у меня есть макет. А не макет готовится под форум, которого и не существовало еще тогда.

Я имел ввиду, что макет дизайна надо подгонять под действующий движок, а не наоборот.. Структуру форума вы получаете сразу по факту его создания - она такая как есть, НТМЛ в прямую менять не выйдет и это надо всегда учитывать, то есть вот такую структуру при верстке надо учитывать (это основной НТМЛ):

Код:

<body>
    <div id="pun_wrap">
        <div id="pun">
            <div id="pun-index" class="punbb">            
                <div id="html-header"></div>
                <div id="pun-title" class="section"></div>
                <div id="pun-navlinks" class="section"></div>
                <div id="pun-ulinks" class="section"></div>
                <div id="pun-status" class="section"></div>
                <div id="pun-break1" class="divider"><hr></div>
                <div id="pun-crumbs1" class="section"></div>
                <div id="pun-break2" class="divider"><hr></div>
                <div id="pun-main" class="main"></div>
                <div id="pun-stats" class="section"></div>
                <div id="pun-break3" class="divider"><hr></div>
                <div id="pun-crumbs2" class="section"></div>
                <div id="pun-break4" class="divider"><hr></div>
                <div id="pun-about" class="section"></div>
                <div id="html-footer" class="section"></div>
            </div>
        </div>
    </div>
</body>

Если структура не будет учитываться, то будет боком выходить весь дизайн.. Тоже самое с нижестоящими НТМЛ тегами, к примеру минипрофиль выглядит так:

Код:

<div class="post-author">
    <ul>
    	<li class="pa-author"></li>
    	<li class="pa-title"></li>
    	<li class="pa-avatar item2"></li>
    	<li class="pa-reg"></li>
    	<li class="pa-posts"></li>
    	<li class="pa-respect"></li>
    	<li class="pa-last-visit"></li>
    </ul>
</div>

А сам минипрофиль находится:

Код:

<div class="container">
    <div class="post-author"></div>
    <div class="post-body"></div>
    <div class="post-links"></div>
</div>

Ну, и т.д.

0

Поделиться593Ср, 7 Ноя 2018 19:38:17

Автор: lorem
Заслуженный
Зарегистрирован: Ср, 7 Ноя 2018
Сообщений: 10
Уважение: +4
Позитив: 0
Последний визит:
Вс, 13 Мар 2022 17:25:35

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

ссылку на пост видимую гостю.. Не одного поста не могу найти..

http://neondreams.mybb.ru/viewtopic.php?id=3#p3
Ох, тормоз я.

0

Поделиться594Ср, 7 Ноя 2018 20:08:41

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7390
Уважение: +5876
Позитив: +6482
Пол: Мужской
Последний визит:
Чт, 21 Ноя 2024 21:12:40

lorem
Полоски отсюда:

/*Фон мини-профиля в Топике*/
.punbb .post .post-author {
text-align:center;
width:252px;
background: url(http://funkyimg.com/i/2MTWf.png) 0 0 repeat-y; /*Фон размножаемый по вертикали*/
margin:12px 0!important;
}

То есть вы на фон ставите повторяющиеся полоски, а здесь верх и низ:

.punbb .post .post-author > ul {
background:url(http://funkyimg.com/i/2MTWe.png) 0 top no-repeat,url(http://funkyimg.com/i/2MTWd.png) 0 bottom no-repeat; /*Фон верха - низа*/
/* margin:-12px 0 -12px 0!important;*/
padding:12px 0 65px 0!important;
}

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

Код:

.punbb .pa-avatar {
    padding-bottom: 40px;
}

И через самое нижнее поле, в данном случае через:

Код:

.punbb .pa-last-visit {
    padding-bottom: 40px;
}

Отредактировано kolobdur74 (Ср, 7 Ноя 2018 20:09:10)

0

Поделиться595Ср, 7 Ноя 2018 23:00:14

Автор: Maman Brigitte
Заслуженный
Зарегистрирован: Вс, 17 Апр 2016
Сообщений: 122
Уважение: +28
Позитив: +31
Последний визит:
Пт, 4 Окт 2024 20:49:00

Есть такой вопрос: поставила скрипт замены слова "награды" на картинку, но, к сожалению, он не сработал. Можете подсказать, что я не так сделала? Ставила в html-низ, как и указано, картинку заменила.

Форум

0

Поделиться596Чт, 8 Ноя 2018 00:54:12

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

Maman Brigitte

У Вас пункт награды скрыт в Первом Окне стиля:
/* D9.8 */
#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode {
padding-bottom: 0;
}

#pun-navlinks #navawards{display:none;}

0

Поделиться597Чт, 8 Ноя 2018 01:13:48

Автор: Maman Brigitte
Заслуженный
Зарегистрирован: Вс, 17 Апр 2016
Сообщений: 122
Уважение: +28
Позитив: +31
Последний визит:
Пт, 4 Окт 2024 20:49:00

Deff

Я поглядела - так этот скрипт устанавливает картинку вместе слово "награды" в шапке форума, где "участники" и "поиск". Проблема в том, что я думала, что этот скрипт меняет слово "награды" в самом профиле, а не вверху форума (мне именно в профиле надо). Я находила у вас скрипт, который делает третью вкладку, но мне третья вкладка не нужна - а чтобы в моей первой вкладке, где стоит надпись "награды", менялось слово на картинку, и по щелчку можно было раскрыть вниз награды.
К примеру, как здесь. Видите? Каким можно сделать это скриптом?

0

Поделиться598Чт, 8 Ноя 2018 02:06:40

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11882
Последний визит:
Вчера 20:39:23

Maman Brigitte
У Вас уже установлен скрипт спойлер под N-кнопок в профиле, Вынесите награды подарки под отдельную кнопку (кнопки оформить иконками, к примеру награды - медалькой)

Свернутый текст

<script>
var a1 = 1 // 0 - спойлер-аккордеон, 1 - вертикальный спойлер; 3 - обычный спойлер
var a2 = 0 // 0 - Скрытие первой вкладки; 1 - Показ первой вкладки;
var a3 = 0 // Резкость Открытия: 0 - Плавно; 1 - Резко;
var LiArr=new Array(
//При наличии двух косых => // в начале пункта, - пункт не скрывается.
//"pa-author", //Ник-Нейм
//"pa-avatar", //Аватар
//"pa-title", //статус
// 1 кнопка - ссылка на Картинку
//В квадратных скобках, прямо к ссылке можно добавить своё описание (по желанию)
"http://funkyimg.com/i/2MC69.jpg[Пользователь]",
"pa-reg", //Зарегистрирован
"pa-invites", //Приглашений
"pa-posts", //Кол-во сообщений:
"pa-respect", //Уважение:
"pa-positive", //Позитив
"pa-sex", //Пол
"pa-age", //Возраст
"pa-icq", //Аська
"pa-ip", //IP Юзера
"pa-time-visit", //Провел на форуме:
"pa-last-visit", //Последний визит:
"pa-from", //Откуда
"pa-fld3", //Доп.Поле.3
//"pa-online", //Пользователь online - Не засовываем в спойлеры
// 2 кнопка- ссылка на Картинку
"http://funkyimg.com/i/2MC6i.jpg[Персонаж]",
"pa-fld1", //Доп.Поле.1
"pa-fld2", //Доп.Поле.2
// 3 кнопка- ссылка на Картинку
"http://funkyimg.com/i/2MC6i.jpg[Награды]",
"award", //Награды(только для rusff и ork)
//Конец Списка,
"_End"); SetProvilSpoil(a1,a2,a3);
</script>

Отредактировано Deff (Чт, 8 Ноя 2018 02:26:12)

+1

Поделиться599Чт, 8 Ноя 2018 03:11:53

Автор: Maman Brigitte
Заслуженный
Зарегистрирован: Вс, 17 Апр 2016
Сообщений: 122
Уважение: +28
Позитив: +31
Последний визит:
Пт, 4 Окт 2024 20:49:00

Deff

Спасибо, это я поправила )
Такой вопрос, тоже по теме: а как убрать из этой третьей вкладки слово "награды"? А то оно появилось, и только после него появляются сами награды.

И вот такой момент: в гостевом профиле появилась третья вкладка, вот так. Ее можно из профиля гостя убрать?
Спасибо вам заранее )

0

Поделиться600Чт, 8 Ноя 2018 06:08:59

Автор: uliana-new
Заслуженный
Зарегистрирован: Вс, 5 Июн 2016
Сообщений: 148
Уважение: +20
Позитив: +50
Пол: Женский
Последний визит:
Вт, 22 Янв 2019 14:05:07

uliana-new написал(а):

Здравствуйте!
Попробую задать почти риторический вопрос.)))
Возможно ли средствами CSS сделать так, чтобы на экране монитора вот это
выводилось.
А вот это
на экран не выводилось?

Реализация здесь: http://mamatest.mybb.ru/

Я попробую. Спасибо, Алексей! Только это один и тот же элемент. Первый, когда просматривает гость, а второй скрин - когда пррсматривает зарегистрированный. Спрячешь одно, прячется и второе...
Поэтому и вопрос почти риторический.
Остаётся уповать на указание селекторов. ТАК я еще не пробовала)))

0

Единый форум поддержки

Меню навигации

Пользовательские ссылки

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

Общие вопросы по оформлению (64)

Сообщений 581 страница 600 из 1000

Поделиться1Пн, 21 Май 2018 19:56:21

Поделиться581Вт, 6 Ноя 2018 20:26:04

Поделиться582Вт, 6 Ноя 2018 21:38:28

Поделиться583Вт, 6 Ноя 2018 21:43:35

Поделиться584Ср, 7 Ноя 2018 00:19:57

Поделиться585Ср, 7 Ноя 2018 00:25:17

Поделиться586Ср, 7 Ноя 2018 00:37:57

Поделиться587Ср, 7 Ноя 2018 14:01:58

Поделиться588Ср, 7 Ноя 2018 14:23:25

Поделиться589Ср, 7 Ноя 2018 15:57:08

Поделиться590Ср, 7 Ноя 2018 16:20:55

Поделиться591Ср, 7 Ноя 2018 18:31:44

Поделиться592Ср, 7 Ноя 2018 19:31:26

Поделиться593Ср, 7 Ноя 2018 19:38:17

Поделиться594Ср, 7 Ноя 2018 20:08:41

Поделиться595Ср, 7 Ноя 2018 23:00:14

Поделиться596Чт, 8 Ноя 2018 00:54:12

Поделиться597Чт, 8 Ноя 2018 01:13:48

Поделиться598Чт, 8 Ноя 2018 02:06:40

Поделиться599Чт, 8 Ноя 2018 03:11:53

Поделиться600Чт, 8 Ноя 2018 06:08:59