MegaS

Верстал шаблон.Извините,возможно за тупой вопрос,но зачем выделенные на рисунке кнопки,и какую функцию выполняют?

 

 

 

 

 

1. В блоке FLICKR PHOTOSTREAM при ховере съезжают блоки. Думаю из-за бордера.

2. В форме желательно использовать атрибут placeholder="" вместо value="" чтобы текст пропадал когда начинаешь печатать.

3. Нижние кнопки социальных сетей отображаются не правильно и работают так же FF 38.0.1

4. Еще не выровнял дату публикации статьи с остальным текстом

а какое расширение экрана?

http://ordered.esy.es

Ссылка на сайт 

Верстал две странички,одна Blog,вторая Home,доступ к ним осуществляется через верхнее меню что в header

Вот макетики

Home

https://cloud.mail.r...usQcp1/Home.psd

Blog

https://cloud.mail.r...FNuMDU/Blog.psd

Благодарю заранее!

P.S Было переделано после замечаний со стороны  форумчан в этой теме 

e.preventDefault();e.stopPropagation();return false;

не знаю JS,как это задействовать,а то у меня не получается.Вроде бы jquery подключил,и соответственный код вставил в контейнер скрипт

<script>$("#tab1").click(function(e) {    e.preventDefault();e.stopPropagation();return false;});$("#tab2").click(function(e) {    e.preventDefault();e.stopPropagation();return false;});$("#tab3").click(function(e) {    e.preventDefault();e.stopPropagation();return false;});$("#tab4").click(function(e) {    e.preventDefault();e.stopPropagation();return false;});</script>

http://versuscat.esy.es/blog.html

Браузер,при переключении табов перенаправляет страничку вверх.Я хочу избавится от этого эффекта,чтобы когда переключал табы,положение на странице не менялось.

http://codepen.io/wallaceerick/pen/ojtal - это исходник с которого было скопировано и переделано под себя решение(там тоже перенаправляет положение на странице вверх)

Помогите пожалуйста

Блог

1) картинку можно спокойно сохранять в jpg, png там не особо-то и нужен;

2) переключатель табов справа не работает;

3) ссылки неподчёркнутые, сделайте подчёркивание хотя бы на ховере;

4) у read more (да и вообще почти везде) нет ховера;

5) дата съехала по сравнению с комментами и годом; это же касается и лайков справа, но там иконка вроде только съехала, надо в фотошопе смотреть более точно;

6) "Видеозапись была помечена модераторами сайта как «Материал для взрослых»." ы;

7) тексты не оттипографлены;

8) ховер-эффекты можно сделать более плавными через transition;

9) у кнопки subscribe при наведении неправильный курсор мыши + текст по вертикали съехал;

10) в категориях лучше полностью блок кликабельным сделать, а не только текст;

11) ссылка на логотипе не возвращает на главную

 

По главной странице выше уже сказали по ховерам, плюс кнопки из ховера не работают;

И еще один вопрос,как сделать так,чтобы переключатель табов работал?

Извините за такой вопрос,так как начинающий верстальщик,что значит оттипографить шрифты?

Блог

1) картинку можно спокойно сохранять в jpg, png там не особо-то и нужен;

2) переключатель табов справа не работает;

3) ссылки неподчёркнутые, сделайте подчёркивание хотя бы на ховере;

4) у read more (да и вообще почти везде) нет ховера;

5) дата съехала по сравнению с комментами и годом; это же касается и лайков справа, но там иконка вроде только съехала, надо в фотошопе смотреть более точно;

6) "Видеозапись была помечена модераторами сайта как «Материал для взрослых»." ы;

7) тексты не оттипографлены;

8) ховер-эффекты можно сделать более плавными через transition;

9) у кнопки subscribe при наведении неправильный курсор мыши + текст по вертикали съехал;

10) в категориях лучше полностью блок кликабельным сделать, а не только текст;

11) ссылка на логотипе не возвращает на главную

 

По главной странице выше уже сказали по ховерам, плюс кнопки из ховера не работают;

Извините за такой вопрос,так как начинающий верстальщик,что значит оттипографить шрифты?

http://ordered.esy.es

Ссылка на сайт 

В макете не верстал оформление видео плеера,так как не умею это

+Шрифт не такой как в шаблоне

Верстал две странички,одна Blog,вторая Home,доступ к ним осуществляется через верхнее меню что в header

Вот макетики

Home

https://cloud.mail.ru/public/3x7mBwusQcp1/Home.psd

Blog

https://cloud.mail.ru/public/237ZnSFNuMDU/Blog.psd

Благодарю заранее!

Я могу пользоваться этими макетами для создания сайтов для своих возможных клиентов?

Просто для своего блога хотелось бы чего-то уникального.

И как вообще отличить хороший дизайн от плохого?Вкусы то у всех разные.

Как делать красивые сайты?Есть где то мануал что ли?

футер какой то неадекват) либо не доделали работу

Почему вы так решили?Вроде ж на месте стоит, я просто не знаю какую информацию туда "пихнуть".

Вот ссылка

http://ordered.esy.es/

Хотел бы узнать как бы нужно было сверстать правильно

Извините, а дизайн вы сами делали или это был макетик?

Дизайн я сам нарисовал в PS ,а потом сверстал

Вот ссылка

http://ordered.esy.es/

Хотел бы узнать как бы нужно было сверстать правильно

Вот переделано

http://pattern.esy.es/

Вот предыдущая работа

http://ordered.esy.es/

Я изменил кардинально свою роботу,подсмотрел как это делается нормально и добавил немного свого

html валидный

Хочу знать где я возможно неправильно использовал теги,а также замечания и предложения по поводу шаблона(как можна было бы сделать лучше и удобней для юзеров)

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

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

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

Какие программы мне нужно знать чтобы писать красивый интерфейс для сайтов.То есть добавить туда средств оформления?