Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (56)
Предыдущая тема: Общие вопросы по оформлению (55)
Как с помощью браузера можно определить элемент дизайна. | |
Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое НТМЛ и CSS. | |
Ответы на часто задаваемые вопросы. | |
Как задавать вопросы! Разница между стилем и скриптом. ( Советы) | Плюс к названию темы еще и Памятка. |
Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности. |
Deff
готово...
Klyaksa
Замените Стиль:
<style>
div.ImgWrap{
position:relative;
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
.image.Down {
background-color:#fff;
width:170px; /*Ширина всплывающего блока*/
display:none;
position:absolute;
z-index:100;
border:2px solid #000;
left:50%;
bottom:-34px;
padding:0;
margin:0 0 0 -85px; /*Половина ширины*/
box-shadow:13px 13px 13px #3B3B3B;
border-radius:4px;
}
.image.UP {
max-width:80px;
}
div.ImgWrap:hover > .image.Down{
display:block;
}
</style>
Замените целиком вкладку таблицы:
<div id="sm5" class="submenutext">
<div style="text-align:center; vertical-align: top;"><br><b>Администраторы:</b><br><br>
<div class=ImgWrap>
<pre class="image Down" align=center>
<b>Лорд Кунсайт</b>
Тест
</pre>
<a href="http://newsailormoon.rusff.ru/profile.php?id=4" target="_blank"><img class="image UP" src="http://s7.hostingkartinok.com/uploads/images/2015/04/6ebe8e34bcc52a73a9682db6266d1bb3.png"/></a>
</div><div class=ImgWrap>
<pre class="image Down" align=center>
<b>Лорд Зойсайт</b>
Тест
</pre>
<a href="http://newsailormoon.rusff.ru/profile.php?id=2" target="_blank"><img class="image UP" src="http://sh.uploads.ru/t/SQCMx.png"/></a>
</div></div>
<div style="text-align:center; overflow-x: hidden;"><br><b>Модераторы:</b>
<br>
<br>
<a href="http://newsailormoon.rusff.ru/profile.php?id=6" target="_blank"><img src="http://s7.hostingkartinok.com/uploads/images/2015/05/3fcb97fa47543a4c2646cae64c5742d7.png" width="80"></a>
<a href="http://newsailormoon.rusff.ru/profile.php?id=18" target="_blank"><img src="http://s7.hostingkartinok.com/uploads/images/2015/05/4b958964f255107f04bb769c3e8161ad.png" width="80"></a>
<a href="http://newsailormoon.rusff.ru/profile.php?id=8" target="_blank"><img src="http://s7.hostingkartinok.com/uploads/images/2015/05/f4d254f260b5e5251c64cde2c9fc41ce.png" width="80"></a>
</div></div>
Deff
Спасибо Вам, стало значительно лучше.
Но думаю так нисколько не хуже.
Теперь можно остальных поменять, так?
Klyaksa
Ну скопируйте код для одного Админа, вставьте в Модеры, размножьте, замените ссылки и текст
==============
Можно добавить потом текст к картинкам без наведения(сократив чуть размеры картинок без наведения
.image.UP {
max-width 75px;
}
Deff
все же стало хуже..
появился скрол...
надо сделать, чтобы точно так же в ряд были они...
и не будет ни скрола и все будет видно.
Отредактировано Klyaksa (Вс, 16 Авг 2015 21:35:37)
Неаккуратно вставляете, опять тег пропустили!
Замените Код вкладки полностью:
<div id="sm5" class="submenutext">
<div style="text-align:center; vertical-align: top; margin-top:-12px;"><br><b>Администраторы:</b><br><br>
<div class=ImgWrap>
<pre class="image Down" align=center>
<b>Лорд Кунсайт</b>
Тест
</pre>
<a href="http://newsailormoon.rusff.ru/profile.php?id=4" target="_blank"><img class="image UP" src="http://s7.hostingkartinok.com/uploads/images/2015/04/6ebe8e34bcc52a73a9682db6266d1bb3.png"/></a>
</div>
<div class=ImgWrap>
<pre class="image Down" align=center>
<b>Лорд Зойсайт</b>
Тест
</pre>
<a href="http://newsailormoon.rusff.ru/profile.php?id=2" target="_blank"><img class="image UP" src="http://sh.uploads.ru/t/SQCMx.png"/></a>
</div>
</div>
<div style="text-align:center;"><br><b>Модераторы:</b><br><br>
<div class=ImgWrap>
<pre class="image Down" align=center>
<b>Рей Хино</b>
Тест
</pre>
<a href="http://newsailormoon.rusff.ru/profile.php?id=6" target="_blank"><img class="image UP" src="http://s7.hostingkartinok.com/uploads/images/2015/05/3fcb97fa47543a4c2646cae64c5742d7.png"/></a>
</div>
<div class=ImgWrap>
<pre class="image Down" align=center>
<b>Сейя Коу</b>
Тест
</pre>
<a href="http://newsailormoon.rusff.ru/profile.php?id=18" target="_blank"><img class="image UP" src="http://s7.hostingkartinok.com/uploads/images/2015/05/4b958964f255107f04bb769c3e8161ad.png"/></a>
</div>
<div class=ImgWrap>
<pre class="image Down" align=center>
<b>Минако Аино</b>
Тест
</pre>
<a href="http://newsailormoon.rusff.ru/profile.php?id=8" target="_blank"><img class="image UP" src="http://s7.hostingkartinok.com/uploads/images/2015/05/f4d254f260b5e5251c64cde2c9fc41ce.png"/></a>
</div>
</div>
</div>Неаккуратно вставляете, опять тег пропустили!
простите
Спасибо за помощь. Без Вас бы я точно не разобралась.
Столько раз запуталась, вроде все так же вставляешь...
а все равно что-то да неправильно...
Спасибо еще раз, что так долго со мной возились 
терпения Вам))
Klyaksa
1. Просто нун выстаскивать код лишь одной вкладки и вставлять в HTML в сообщении и редактировать(с добавкой стиля для тестируемых элементов
2. Коды вставлять по одному, тех же модеров, вставили один - проверили, добавили второй - проверили
Deff
спасибо, за советы)) Если будут проблемы, то вновь к Вам приду)))
Deff
Подскажите еще, пожалуйста, как убавить шрифт в данном скрипте?
Уж очень он гигантский. Мы за компактность...
Klyaksa, Добавьте красное, в конце текстов добавляйте пустую строку, ибо отступ маленький от нижнего края
<style>
div.ImgWrap{
position:relative;
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
.image.Down {
background-color:#fff;
width:300px; /*Ширина всплывающего блока*/
display:none;
position:absolute;
z-index:100;
border:2px solid #000;
left:50%;
font: normal normal 400 11px/13px "Courier New";
top:96%;
padding:0;
margin:0 0 0 -150px; /*Половина ширины*/
box-shadow:13px 13px 13px #3B3B3B;
border-radius:4px;
}
.image.Down b{
font-size:14px!important;
color:#00096C;
}
.image.UP {
max-width:80px;
}
div.ImgWrap:hover > .image.Down{
display:block;
}
</style>
Поправил ещё раз!
Deff
спасибо большое))) То что надо теперь)))
Klyaksa
Я бы Иконки наград вывел в профиль(В Настройках функции наград)
Я бы Иконки наград вывел в профиль(В Настройках функции наград)
Вы о чем?
У нас они специально спрятаны далеко от глаз (ссылкой, да еще и под кнопку), чтобы не тормозился форум, итак нагружен((( Снаружи это слишком много картинок было бы...
плюс под кнопкой скоро будет валюта или какие-то очки на прокачку персонажа.. т.е. будет две ссылки, поэтому под кнопкой они не могут быть... или вообще три... возможно, подарки еще сделаем... короче это еще решается...
Отредактировано Klyaksa (Пн, 17 Авг 2015 01:59:08)
Klyaksa
1. По идее, награды выставляются после загрузки страницы - тормозить не должно
2. Тормозит у Вас шапка, залитая в PNG - посколь она без прозрачности, мон практически без потери качества перевести в jpg с качеством 78%(в ФШ - сохранить для Веб-устройств) , сократив объём в три-четырыре раза( сейчас 1.22Мb)
И баннеры партнёров в объяве общим весом почти в три мегабайта
Вот-вот.
Постоянно сталкиваешься с тем, что люди вешают на фон картинку в пару-тройку мегабайт, а потом удивляются, почему страничка так долго грузится.
Я пользуюсь программой IrfanView, она при сохранении файла позволяет, как и фотошоп, выбирать степень, тип и качество обработки фото.
Deff
а это снова я со своимтестовиком х)
и все борюсь с шапкой и оптимизацией.
наткнулся на форум, у которого стоит картинка (шапка? оО) тоже достаточно большая. конечно, я скорее всего не понимаю, в чем тут фишка, но, может быть, мне попробовать уместить все так же, как и у них? только как- так? подскажите хд не в плане скопировать дизайн, а по той же системе его впендюрить как-то?)
Отредактировано boom (Ср, 26 Авг 2015 18:17:34)
boom
Картинка установлена в шапку с
#pun-title {
position:relative;
padding:0;
}
#pun-title table {
padding:0;
background: url("http://forumstatic.ru/files/0015/c9/22/20090.png") no-repeat 50%;
border: 0 none;
height: 400px;
width: 1600px;
position:relative;
left:-800px;
margin-left:475px;/*Половина ширины форума*/
}
Надо отметить, что горизонтальный скролл наличиствует
Deff
спасибо.)
эх, не судьба, видимо, оставить диз как есть хд пойду дальше мудрить.)
Тормозит у Вас шапка, залитая в PNG - посколь она без прозрачности, мон практически без потери качества перевести в jpg с качеством 78%(в ФШ - сохранить для Веб-устройств) , сократив объём в три-четырыре раза( сейчас 1.22Мb)
И баннеры партнёров в объяве общим весом почти в три мегабайта
спасибо большое, подумаю, как это все исправить))))
А награды останутся, как есть
Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (56)