Страница 1 из 3123»
Форум про uCoz » Создание сайта на uCoz » Вопросы по uCoz » Как изменить ширину в коде вида новостей?
Как изменить ширину в коде вида новостей?
oleg37646
Дата: Вторник, 17.01.2017, 22:40 | Сообщение # 1
Проверенные
Сообщений:51
Награды: 0


Хочу установить на свой сайт, такой вид новостей


Но он не по размеру. И нужно изменить ширину с 501px до 540px. Ниже код этого вида новостей. Помогите правильно настроить этот код под нужную мне ширину. Буду всем очень благодарен за помощь.
Код
<div class="viewn_loop">  
  <h4 class="viewn_title"><a href="$ENTRY_URL$">$TITLE$</a>$MODER_PANEL$</h4>  
  <div class="viewn_cont">  
  <div class="viewn_detail">  
  <div class="viewn_date"><span>$DATE$,$TIME$</span></div>  
Категория: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>  
  </div>  
  <div class="viewn_pict" ><span><img id="img$ID$" src="$IMG_URL1$" width="100" height="100" alt="$TITLE$" />  
   
  <script type="text/javascript">  
  $(function(){  
  $('#img$ID$').click(function(){var s="'sc'";  
   
   
  new _uWnd('Et','Реальный размер изображения $TITLE$',70,70,{autosize:1,shadow:1,autosizeonimages:1,header:1},'<img src="'+$(this).attr('src')+'" align="center" alt="" onclick="_uWnd.close('+s+')" style="max-width:900px;max-height:700px;cursor:pointer;">');});  
  });  
  </script> </span></div>  
  <div class="viewn_text">  
  <div style="display:inline;">$MESSAGE$</div>  
  </div>  
  </div>  
  <div class="viewn_bottom">  
   
  <div class="viewn_link"><a href="$ENTRY_URL$">Подробнее</a></div>  
  Комментарии <b>($COMMENTS_NUM$)</b> Просмотры: <b>$READS$</b> добавил: <b><a href="$PROFILE_URL$" target="_blank">$USERNAME$</a></b>  
  </div>  
</div>  
<style>h4 {font-size:16px;}  
.viewn_loop {width:501px; color:#969696; margin:0 0 8px 0; background:url(http://zornet.ru/Zornet/viewn_bg.png) repeat-y 0 0;}  
.viewn_title {height:32px; line-height:32px; overflow:hidden; margin:0; padding:0 0 0 14px; font-size:14px; font-weight:bold; color:#fff; text-shadow:1px 1px 1px #2384a0; background:#40a9c3 url(http://zornet.ru/Zornet/viewn_bg.png) no-repeat -501px 0;}  
.viewn_title a {color:#fff; text-decoration:none;}  
.viewn_title a:hover {text-decoration:underline;}  
.viewn_cont {padding:7px 4px 6px 4px; overflow:hidden; line-height:1.6; background:url(http://zornet.ru/Zornet/viewn_bg.png) no-repeat -501px -32px;}  

.viewn_detail {width:483px; overflow:hidden; padding:2px 8px 3px 8px; margin:0 0 3px -3px; background:url(http://zornet.ru/Zornet/viewn_bg.png) no-repeat -1662px bottom;}  
.viewn_detail a {font-weight:bold; color:#969696; text-decoration:none;}  
.viewn_detail a:hover {text-decoration:underline;}  
.viewn_date {float:left; padding:0 4px 0 0; margin:-2px 6px 0 0; background:url(http://zornet.ru/Zornet/viewn_bg.png) no-repeat right 0;}  
.viewn_date span {min-width:70px; height:22px; line-height:22px; display:block; padding:0 0 0 33px; float:left; color:#929292; background:url(http://zornet.ru/Zornet/viewn_bg.png) no-repeat -2163px 0;}  

.viewn_pict {width:226px; padding:7px 0 0 0; float:left; margin:0 -5px 0 0; background:url(http://zornet.ru/Zornet/viewn_pict_bg.png) no-repeat 0 0;}  
.viewn_pict span {padding:0 22px 16px 6px; display:block; overflow:hidden; background:url(http://www.csomsk.ru/1-ucoz/rip/viewn_pict_bg.png) no-repeat -226px bottom;}  
.viewn_pict img {width:198px; min-height:140px; vertical-align:top;}  
.viewn_pict img:hover {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); filter: alpha(opacity=80); opacity:0.8;}  

.viewn_text {padding:0 0 0 4px; }  

.viewn_bottom {height:24px; padding:12px 0 0 28px; overflow:hidden; font-size:10px; color:#f6f6f6; text-shadow:1px 1px 1px #818181; background:#979797 url(http://zornet.ru/Zornet/viewn_bg.png) no-repeat -1002px bottom;}  
.viewn_bottom b {margin:0 8px 0 0;}  
.viewn_bottom a {color:#f6f6f6; text-shadow:1px 1px 1px #818181; text-decoration:none;}  
.viewn_bottom a:hover {text-decoration:underline;}  
.viewn_link {width:101px; height:21px; float:left; margin:-3px 26px 0 0;}  
.viewn_link a {width:93px; height:21px; line-height:21px; padding:0 0 0 8px; display:block; font-size:10px; color:#6e6e6e; text-shadow:none; text-decoration:none; background:#fefefe url(http://zornet.ru/Zornet/viewn_bg.png) no-repeat -1505px 0;}  
.viewn_link a:hover {text-decoration:none; background-position:-1505px -23px;}  
</style>
waak
Дата: Среда, 18.01.2017, 00:28 | Сообщение # 2
Vip
Сообщений:282
Награды: 7


oleg37646, ссылка тык

Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
oleg37646
Дата: Среда, 18.01.2017, 12:37 | Сообщение # 3
Проверенные
Сообщений:51
Награды: 0


waak, а где файлы которые вы переделывали (картинки)?
- уже нашел)

Добавлено (18.01.2017, 12:37)
---------------------------------------------
waak, Не ровно вышло. В общем вот скрины -

ДО
http://ssmaker.ru/cfc250a7/

ПОСЛЕ
http://SSMaker.ru/b02f2fbb/


Сообщение отредактировал oleg37646 - Среда, 18.01.2017, 12:40
Kosten
Дата: Среда, 18.01.2017, 14:46 | Сообщение # 4
Администраторы
Сообщений:14419
Награды: 47


oleg37646, изначально говорил, что вид материала заточен под один размер.
oleg37646
Дата: Среда, 18.01.2017, 14:56 | Сообщение # 5
Проверенные
Сообщений:51
Награды: 0


Kosten, Если все картинки были бы хоть не все в одной, а каждая отдельно, то я и сам настроил как нужно. Жаль конечно что ничего так и не получилось.
waak
Дата: Среда, 18.01.2017, 16:57 | Сообщение # 6
Vip
Сообщений:282
Награды: 7


Цитата oleg37646 ()
Жаль конечно что ничего так и не получилось.


Что с вами ту же всё просто я же написал в комментариях просто подгоните стили я картинку передел под ваш размер
Замените в стилях во второй строчке
Код
.viewn_loop {width:540px; color:#969696; margin:20px 20px 18px 20px; }

На
Код
.viewn_loop {width:540px; color:#969696; margin:0px 0px 8px 0px; }

Затем измени позицию фоновой картинки в этой строчке
Код
background: #fefefe url(img/viewn_bg.png) no-repeat -1525px 0;

на
Код
background: #fefefe url(img/viewn_bg.png) no-repeat -1587px 0;


теперь при наведении на кнопку
Код
.viewn_link a:hover {text-decoration: none;background-position: -1505px -23px;}

Заменить на
Код
.viewn_link a:hover {text-decoration: none;background-position: -1485px -23px;}

и с другими элементами также и всё получится


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
Angerfist
Дата: Среда, 18.01.2017, 17:02 | Сообщение # 7
Vip
Сообщений:761
Награды: 21


waak, ))) тебя не читают) тупые коса читают)

No regrets
Angerfist
Дата: Среда, 18.01.2017, 17:03 | Сообщение # 8
Vip
Сообщений:761
Награды: 21


waak, ты кстати тоже запарен на фиксированных

No regrets
Angerfist
Дата: Среда, 18.01.2017, 17:06 | Сообщение # 9
Vip
Сообщений:761
Награды: 21


зачем основываться на этом коде? лучше же делать гибким

No regrets
waak
Дата: Среда, 18.01.2017, 17:18 | Сообщение # 10
Vip
Сообщений:282
Награды: 7


Цитата Angerfist ()
ты кстати тоже запарен на фиксированных

Нет я люблю делать резиновые размеры чтоб плавно растягивалась и сжималось просто не всегда их можно сделать такими вот как тут например

Автор сделал всё в одной картинке и это правильно с одной стороны
таким методом загрузка быстрее и не будет секундной паузы при смени картинки когда наводишь на кнопку
но адаптацию уже не сделать если картинку не переделать

а можно было сделать так синий элемент и тёмный что в низу
сделать отдельно и дать им ширину в 1000рх одному и второму
тем самым дать возможность блоку растягиваться до 1000рх
вобщем много что можно было изменить


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
waak
Дата: Среда, 18.01.2017, 17:20 | Сообщение # 11
Vip
Сообщений:282
Награды: 7


Цитата Kosten ()
изначально говорил, что вид материала заточен под один размер.

и что? это не приговор!


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
Kosten
Дата: Среда, 18.01.2017, 17:54 | Сообщение # 12
Администраторы
Сообщений:14419
Награды: 47


waak, а не лучше что то новое и уже адаптированное поставить, чем этот вид переделывать.
waak
Дата: Среда, 18.01.2017, 18:13 | Сообщение # 13
Vip
Сообщений:282
Награды: 7


Цитата Kosten ()
а не лучше что то новое и уже адаптированное поставить, чем этот вид переделывать.

Лучше сделать самому тогда.
И вообще сейчас такой вид материалов можно сделать и без картинок чисто на css и html не хочу просто замарачиваться


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
Kosten
Дата: Среда, 18.01.2017, 18:47 | Сообщение # 14
Администраторы
Сообщений:14419
Награды: 47


Цитата waak ()
И вообще сейчас такой вид материалов можно сделать и без картинок чисто на css и html не хочу просто замарачиваться

Плюс к виду и шрифтовые иконки.
oleg37646
Дата: Четверг, 19.01.2017, 13:24 | Сообщение # 15
Проверенные
Сообщений:51
Награды: 0


Цитата waak ()
Что с вами ту же всё просто я же написал в комментариях просто подгоните стили я картинку передел под ваш размер


Не получается правильно настроить, весь вечер просидел чтобы настроить и никак не получилось. Не разбираюсь я в этих кодах.
Форум про uCoz » Создание сайта на uCoz » Вопросы по uCoz » Как изменить ширину в коде вида новостей?
Страница 1 из 3123»
Поиск: