Заготовка шаблона для WP

taiki · November 8, 2012

Добрый день,

Прошу оценить мой первый шаблон для WordPress. Пока что это заготовка, прикурчиавть буду после того как окончательно закончу.

Хотел бы услышать ваше мнения по поводу качаества верстик, все ли на данном этапе корректно, нет ли грубых ошибок в коде. Так же прошу оценить CSS и дизайн. Что бы вы исправили или сделали подругому.

Шаблон лежит по адресу: _http://www.25pixel.ru/

CSS: _http://www.25pixel.ru/style.css

Заранее спасибо.

taiki · November 8, 2012

Изменил дизанй поста

Great Rash · November 9, 2012

Пока даже обсуждать нечего.

kvant · November 9, 2012

Для начала, я считаю, неплохо, только страшно очень выглядит.

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

Быколай · November 9, 2012

брутальненько))

имхо

<meta charset="UTF-8" />

вместо

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

раз DOCTYPE html. А заголовок сервером логичнее отдавать.

			<menu>
				<a href="index.html" class="menu">menu</a>
				<div class="line_menu"></div>
				<a href="index.html" class="menu">menu</a>
				<div class="line_menu"></div>
				<a href="index.html" class="menu">menu</a>
				<div class="line_menu"></div>
				<a href="index.html" class="menu">menu</a>
				<div class="line_menu"></div>
				<a href="index.html" class="menu">menu</a>
			</menu>

http://htmlbook.ru/html/menu читали? Это список действий, а не просто блок.

Для навигации больше подходит nav.

Дальше не смотрел.

taiki · November 9, 2012

Учел, исправил.

Буду думать дальше. Спасибо

Edited November 9, 2012 by taiki

Быколай · November 10, 2012

Учел, исправил.
Буду думать дальше. Спасибо

ну как же...

				<menu>
					<li><a href="#" id="menu-item">menu 1</a></li>
					<li><div id="menu-wrap"></div></li>
					<li><a href="#" id="menu-item">menu 2</a></li>
					<li><div id="menu-wrap"></div></li>
					<li><a href="#" id="menu-item">menu 3</a></li>
					<li><div id="menu-wrap"></div></li>
					<li><a href="#" id="menu-item">menu 4</a></li>
					<li><div id="menu-wrap"></div></li>
					<li><a href="#" id="menu-item">menu 5</a></li>
				</menu>

у вас вперемешку выходит: один пункт меню ссылка, другой чисто оформительский. Совершенно не семантично. И, как уже выше я писал, menu не совсем для навигации подходит, скорее это список действий, которым назначаются обработчики, для навигации (я же не ошибаюсь, что верхнее меню у вас навигационное?) использовать уместнее nav. К тому же грубая ошибка в данном куске кода: id — должен быть уникальным, у вас он одинаков у нескольких элементов.

Проверьте для начала валидатором ваш код, и вот когда будет исправлена "орфография и пунктуация", так сказать, можно будет приступить к семантике :)/>/>

Edited November 10, 2012 by Быколай

taiki · November 10, 2012

по поводу nav, почитал _html5doctor.com, не до конца понял семантику menu.

по поводу id и class, тоже нашел, опять же не корректно понял суть..

сейчас буду править, еще раз спасибо.

поправил согласно замечаням, валидация прошла успешно.

Думаю так должно быть корректо


<nav>
	<ul>
		<li><a href="#" class="menu-item">menu 1</a></li>
		<li class="menu-wrap"></li>
		<li><a href="#" class="menu-item">menu 2</a></li>
		<li class="menu-wrap"></li>
		<li><a href="#" class="menu-item">menu 3</a></li>
		<li class="menu-wrap"></li>
		<li><a href="#" class="menu-item">menu 4</a></li>
		<li class="menu-wrap"></li>
		<li><a href="#" class="menu-item">menu 5</a></li>
	</ul>
</nav>

Быколай · November 11, 2012

:facepalmxd:

увы нет. отделите логику от дизайна. попробуйте стилями добиться нужного вам оформления не плодя для этого доп. блоки. Пусть каждый пункт меню будет пунктом меню, а не рюшечкой/перегородочкой/бордером и т.п.

да прибудет с вами дзен))

taiki · November 14, 2012

Да, задали задачку , но вроде как получилось.


                        <div id="top-menu">
				<nav>
					<ul>
						<li class="menu-il_right"><a href="#" class="menu-item">menu 1</a></li>
						<li class="menu-il_center"><a href="#" class="menu-item">menu 2</a></li>
						<li class="menu-il_center"><a href="#" class="menu-item">menu 3</a></li>
						<li class="menu-il_center"><a href="#" class="menu-item">menu 4</a></li>
						<li class="menu-il_left"><a href="#" class="menu-item">menu 5</a></li>
					</ul>
				</nav>
				<div class="menu-buttom-cont"><a href="#" class="menu-buttom">Menu</a></div>
			</div>

но такое ощушение, что как-то сложновато.

Edited November 14, 2012 by taiki

taiki · November 14, 2012

Класс один лишний можно убрать

pismenny · November 14, 2012

А я убрал все классы и у меня всё работает. Что я сделал не так?

pismenny.com.ua/forum/pseudo-classes/

Вот HTML:

<div class="top-menu">
	<nav>
		<ul>
			<li><a href="#">menu 1</a></li>
			<li><a href="#">menu 2</a></li>
			<li><a href="#">menu 3</a></li>
			<li><a href="#">menu 4</a></li>
			<li><a href="#">menu 5</a></li>
		</ul>
	</nav>
	<div><a href="#">Menu</a></div>
</div>

Edited November 15, 2012 by pismenny

taiki · November 16, 2012

Подскажите, корректно ли так прижать Footer к низу окна?


html {
	position: relative;
	width: 100%;
	min-height: 100%;
}

* html {
	height: 100%;
}

...

footer {
	width: 100%;
	position: absolute;
	top: 100%;
}

#bottom-menu {
	border-top: 1px solid #444;
	width: 960px;
	height: 50px;
	margin: -51px auto;
}

полный код по адресу: _http://www.25pixel.ru/

Спасибо

Edited November 16, 2012 by taiki

pismenny · November 17, 2012

Самый корректный способ, который я знаю, - это CSS Sticky Footer.

И ещё два вопроса.

Зачем делать выпадающее меню на сайте, это раз.

Зачем в списке два лишних класса, если в примере выше я показал реализацию без классов, используя только один псевдоэлемент, это два.

Вы только начинаете делать сайт, буквально первые шаги, и уже упорно изобретаете свои "велосипеды". Что будет в конце, при таком подходе, страшно представить.

Сядьте, разберитесь с каскадом CSS, потом освойте псевдоэлементы (хотя бы :first-child, :last-child, :before, :after), потом освойте CSS Sticky Footer, а потом уже что-то делайте. Потому что опомнитесь, а всё нужно будет переделывать. Хотя может это будет намного эффективнее :dash:

Edited November 17, 2012 by pismenny

taiki · November 17, 2012

Вопрос по способу предложенному вами:

Чем то что я сделал, принципиально отлечается от того что предлагается?

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

Если боротся за "чистоту классов" мой вариант лучше, так как в верстку не вводятся дополнительные элементы. А вы сами говорите что не к чему использовать лишнее.

Касательно вашего варианта меню, я обошелся вообще без классов, в последней редакции не потребовалось даже использования псевдоэлементов, так как я отказался от разделителей.

header  nav {
	display: none;
	background: #eee;
	border-radius: 0 0 5px 5px;
	height: 20px;
	margin: 0 auto;
}

nav li {
	width: 192px;
	float: left;
	}

nav li a {
	text-align: center;
	width: 172px;
	line-height: 1em;
	float: left;
	margin: 0 10px;
}

nav li a:hover {
	border-bottom: 3px solid #F04D63;
	border-radius: 0 0 5px 5px;
}

nav li a:active {
	color: #F04D63;
}

header div {
	float: left;
	margin: 0 10px;
}

header div a {
	background: #eee;
	border-radius: 0 0 5px 5px;
	text-align: center;
	font-size: 2.4em;
	height: 25px;
	width: 120px;
	float: left;
	padding: 0 25px;
}

header div a:hover,
header div a:active  {
	color: #F04D63;
}

Еще хотел бы уточнить, Вы подключаете 2 скрипта:

<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE9.js"></script>
<![endif]-->

для чего они?

По поводу выпадающего меню, это вопрос риторический.

И еще один вопрос, касательно классов, почему от них стоит отказатся?

taiki · November 17, 2012

задвоилось сообщение

Edited November 17, 2012 by taiki

pismenny · November 17, 2012

Я не против использования классов, я за то, чтобы использовать их когда это оправдано.

По поводу скриптов.

Первый учит IE новым тегам из HTML5 (поскольку использовался тег <nav>), второй учит псевдоэлементам (поскольку подключил :last-child).

С одной стороны подключать скрипты - это фу-фу-фу, с другой - именно эти скрипты можно встретить практически на любом сайте где есть HTML5 и CSS3. Так что от этого никуда не денешься.

Sign In

Заготовка шаблона для WP

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information