Оцените верстку шаблона Joomla

MegaS · August 23, 2014

Сверстал шаблон для модуля популярных новостей 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;}

Спасибо заранее!

Edited August 23, 2014 by MegaS

Veseloff · August 24, 2014

По-моему, очень плохо. Всё куда-то располается, код читать вообще невозможно. Тут вёрстки-то кот наплакал, кажется, что нельзя плохо сделать. Ан нет, можно ещё как.

MegaS · August 24, 2014

@Veseloff, то как исправить чтоль?

Нарек · August 24, 2014

1. Как не работает? Как может стиль работать в html файле и не работать в css файле? Этому может быть одно объяснение, в html стили являются приоритетом, и проблему можно решить добавлением !important в css. Но лучше найти проблему от чего так.
2. Загрузить изображение нормального качества.
3. Есть, например

<div class="clearer"></div>

4. ссылка

5. http://habrahabr.ru/post/143452/

Sign In

Оцените верстку шаблона Joomla

Recommended Posts

MegaS

Link to comment

Share on other sites

Veseloff

Link to comment

Share on other sites

MegaS

Link to comment

Share on other sites

Нарек

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information