Search the Community
Showing results for tags 'макетJoomla'.
Found 1 result
-
Сверстал шаблон для модуля популярных новостей Joomla http://ordered.esy.es/(гитхабом еще не могу пользоваться выложил на бесплатный хостинг) оцените пожалуйста,если не тяжело укажите недочеты данного шаблоны,способы верстки этого шаблона другими способами Javascript не знаю Вопросы: 1) Вот строка кода: <div class="frame5" style = "background:url(news.jpg); background-size:cover; ">Нужно избавится от избыточного кода background-size:cover который в файле стилей не работает 2)Как стягивать бекграунд так ,чтобы изображение имело нормальное качество? 3)Есть ли у меня еще избыточный код 4)У нижнем up_container нужно сделать чтобы столбцы были одинаковой высоты без фиксированой высоты(тут конечно можно было решить проблему использованием блока изображения вместо бекграунда) 4)Как сделать шаблон эластичнее без применения лишних блоков и без нарушения его ровности способами css и html этот вопрос конечно я отложу на потом ,сделаю лаконичнее 5)Как оптимизировать css еще лучше? p.s Шаблон сделан не до конца,еще в елемент board(вывеска новости) должно влезть количество просмотров,которое я не еще не прописал,над этим подумаю.Я только новичок в верстке и вообще в мейкинге сайтов(знаю немного php,немного ООП в php,HTML,CSS) можете направить в нужное русло?Вроде все,будут еще вопросы напишу Листинг HTML <!DOCTYPE html><html><head><link rel = "stylesheet" type = "text/css" href = "mostread.css"/><title>Популярные новости</title></head><body><div class = "mostread"><div class = "up_container"><div class = "frame0" style = "background:url(tz.jpg); background-size:cover; "><div class = "wrap_board"><div class = "board" >Конь упал в люк,пострадавших нет</div></div></div><div class = "rightcol"><div class = "frame1" style = "background:url(dx.jpg); background-size:100% 100%; "><div class = "wrap_board"><div class = "board">У кого то проблемы</div></div></div><div class = "frame2" style = "background:url(nk.jpg); background-size:cover; "><div class = "wrap_board"><div class = "board">Blue screen of death</div></div></div></div></div><div class = "down_container"><div class="frame3" style = "background:url(eo.jpg); background-size:cover; "><div class = "wrap_board"><div class = "board">Питер Гриффин:правда</div></div></div><div class="frame4" style = "background:url(er.jpg); background-size:cover; " ><div class = "wrap_board"><div class = "board">Р-36 М </div></div></div><div class="frame5" style = "background:url(news.jpg); background-size:cover; "><div class = "wrap_board"><div class = "board">Слава Україні!!! </div></div></div><div class ="clearer"></div></div></div></body></html>Листинг СSS .frame0 {width:400px;height:100%;}.frame0,.frame1,.frame2,.frame3,.frame4,.frame5 {position:relative;color:white;}.frame0,.rightcol {height:100%;float:left;}.wrap_board {width:100%;}.board {visibility:hidden;position:absolute;bottom:0;right:0;background-color:rgba(0,0,0,.7);word-wrap:break-word;font-size:0.95em;padding:10px;box-sizing:border-box;width:100%;box-shadow: 0px -6px 6px 0px rgba(0, 0, 0,.7);}.frame0:hover .board,.frame1:hover .board ,.frame2:hover .board ,.frame3:hover .board ,.frame4:hover .board,.frame5:hover .board {visibility:visible;}.rightcol {width:200px;}.frame1,.frame2 {height:50%;}.frame1 {background-size:100% 100%;}.frame2 {background-size:100% 100%;}.frame3 ,.frame4,.frame5 {float:left;width:200px;background-size:cover;height:100px;}.clearer {clear:both;}.up_container {height:66%;}.down_container {width:100%;height:33%;}.mostread {height:300px;}Спасибо заранее!
