Дизайн для Wp, Верстка

Страницы: ← Следующая страница →

AdmBuxonly

Сообщения: 370 Репутация: N Группа: Кто попало

14 июня 2010 г. 14:08

Народ, столкнулся с проблемой верстки для WordPress. Нарисовал вчера дизайн, а добавил только шапку и меню горизонтальное, то бишь файл Header.php отредактировал.

Мне нужно из jpeg фала сверстать дизайн. Я ни когда этого не делал. Хотел бы услышать какие-нибудь рекомендации по верстке. С чего начинать. Резать буду либо фотошопом либо Фаерворксом.
Givi

Сообщения: 2284 Репутация: N Группа: Адекваты

14 июня 2010 г. 15:50, спустя 1 час 42 минуты 33 секунды

AdmBuxonly, ножом резать будет удобнее =)))

бери уже готовый исходник в ВП (дефолтный темплейт) и на его основе делай свой. В общем, сложного по сути ничего.
А в целом, для удобства, лучше сначала сверстать обычную ХТМЛ-страницу полностью всего шаблона, а уже после этого его переносить в ВП.
А резать таки Фаерфоксом… хм… интересно было бы посмотреть как ты это сделаешь :)

п.с. А вот Аристер - злоебучее хернё, хоть и делает типа рабочее нечто. Но вообще в коде там пиздец немаленький, и лишнего ого как много, особенно в стилях.
AdmBuxonly

Сообщения: 370 Репутация: N Группа: Кто попало

14 июня 2010 г. 16:03, спустя 12 минут 40 секунд

В стилях вообще какие-то паттерны находятся левые… А Fireworks ом я уже разал. Для джумлы делал. Там все намного проще было… а тут запоролся с ВП.
Givi

Сообщения: 2284 Репутация: N Группа: Адекваты

14 июня 2010 г. 17:24, спустя 1 час 21 минуту 45 секунд

AdmBuxonly, ага, теперь понял что прочитал неправильно. Фаерворксом может и порежешь. Но один хер порезать - это пол беды. А дальше что будешь делать?

п.с. Для Джумлы шаблон натягивать не проще чем в ВП. Может и не сложнее, но и не проще. По сути и там и там говененько, так как многое самому приходится допиливать по функционалу отображения шаблонов.
AdmBuxonly

Сообщения: 370 Репутация: N Группа: Кто попало

14 июня 2010 г. 17:38, спустя 13 минут 38 секунд

AdmBuxonly, ага, теперь понял что прочитал неправильно. Фаерворксом может и порежешь. Но один хер порезать - это пол беды. А дальше что будешь делать?

Ну так как у меня с дивами очень плохо, думаю сверстать на таблицах, которые знаю на 5+. Или полгода потратить на чтение различных книг по веб-дизайну. Я за первое.
AdmBuxonly

Сообщения: 370 Репутация: N Группа: Кто попало

14 июня 2010 г. 18:14, спустя 36 минут 2 секунды

Может порекомендуешь литературу или сайт, где можно уверенно верстать на дивах макеты любой сложности?
Абырвалг

Сообщения: 6480 Репутация: N Группа: Джедаи

14 июня 2010 г. 18:28, спустя 13 минут 37 секунд

у Шевчука есть тема для WP - Конструктор. На основе нее типа удобно шаблоны делать.

AdmBuxonly

Сообщения: 370 Репутация: N Группа: Кто попало

14 июня 2010 г. 18:41, спустя 12 минут 52 секунды

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

<div id="main">
	<div id="header">HEADER</div><!–End header–>
	<div id="block_header">BLOCK POD HEADER</div><!–End block_header–>
	<div id="menu">MENU</div><!–End menu–>
	
	<div id="content">CONTENT
		<div id="block_viget">
			<div id="r_menu">PR MENU</div>
			<div id="l_menu">LT MENU</div>
		</div><!–End block_viget–>
	</div><!–End content–>
</div> <!–End main–>

Ждите рисунок, а то ни чего не понять…

AdmBuxonly

Сообщения: 370 Репутация: N Группа: Кто попало

14 июня 2010 г. 18:50, спустя 8 минут 53 секунды

Этот правильный код, там скосячил а кнопку редактирования найти не могу.

<div id="main">
	<div id="header">HEADER</div><!–End header–>
	<div id="block_header">BLOCK POD HEADER</div><!–End block_header–>
	<div id="menu">MENU</div><!–End menu–>
	
	<div id="content">CONTENT
		<div id="block_viget">
			<div id="r_menu">PR MENU</div>
			<div id="l_menu">LT MENU</div>
		</div><!–End block_viget–>
	</div><!–End content–>
	<div id="news">NOVOSTY</div>
	<div id="footer">FOOTER</div>
</div> <!–End main–>

- вот

AdmBuxonly

Сообщения: 370 Репутация: N Группа: Кто попало

14 июня 2010 г. 19:43, спустя 53 минуты 12 секунд

Вообщем вот какой код получился. Но я не знаю как прикрепить block_viget, чтобы он растягивался вниз, когда контент будет растягиваться. Т.е. вместе с content растягивался. А так получилось.

#main {
	z-index:0;
	height:auto;
	width:1001px;
	margin:0 auto;
	background-color:#fff;
}
#header {
	z-index:1;
	height:150px;
	width:1001px;
	margin:0 auto;
	background-color:#ccc;
}
#block_header {
	z-index:1;
	height:350px;
	width:1001px;
	margin:0 auto;
	background-color:#333;
}
#menu {
	z-index:1;
	height:70px;
	width:1001px;
	margin:0 auto;
	background-color:#00ffff;
}
#content {
	z-index:1;
	height:500px;
	width:595px;
	background-color:#f4fab5;
}
#block_viget {
	margin-top:-18px;
	margin-left:595px;
	z-index:1;
	height:auto;
	width:406px;
	background-color:#adefbb;
}
#r_menu {}
#l_menu {}
#news {
	z-index:1;
	height:355px;
	width:1001px;
	margin:0 auto;
	background-color:#000;
}
#footer {
	z-index:1;
	height:25px;
	width:1001px;
	margin:0 auto;
	background-color:#aa4a4a;
}

/* End Main Styles */

Спустя 57 сек.

Для r_menu и l_menu допишу потом…

AdmBuxonly

Сообщения: 370 Репутация: N Группа: Кто попало

18 июня 2010 г. 14:04, спустя 3 дня 18 часов 21 минуту

Ребят, помогите пожалуйста!!! Не могу исправить. Ошибку допустил и блоки с меню поехали вниз, когда текст контента добавил. Что дописать или исправить помогите.

То, что получилось, можно глянуть тут: finanse-pro.ru/test/index.php

Вот файл КСС: finanse-pro.ru/test/style.css

А вот код верстки:

<div id="main">
	<div id="header"></div><!–End header–>
	<div id="block_header"></div><!–End block_header–>
	<div id="menu"></div><!–End menu–>
	
	<div id="content">
	<div id="soder">Цель данного — дать как можно больше информации о заработке в сети Интернет, открыть глаза на несуществующие виды заработка и возможности заработать первый рубль ну или доллар.<div>
		<div id="block_viget">
			<div id="r_menu">PR MENU</div><!–End r_menu–>
			<div id="l_menu">LT MENU</div><!–End l_menu–>
		</div><!–End block_viget–>
	</div><!–End content–>
	<div id="news">NOVOSTY</div>
	<div id="footer">FOOTER</div>
</div> <!–End main–>

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

AdmBuxonly

Сообщения: 370 Репутация: N Группа: Кто попало

18 июня 2010 г. 14:22, спустя 18 минут 20 секунд

Область контента я выделил… синим
Givi

Сообщения: 2284 Репутация: N Группа: Адекваты

18 июня 2010 г. 17:43, спустя 3 часа 20 минут 18 секунд

AdmBuxonly, не читал твои стили, но, думаю примерно так:
1. soder - сделай эму райт-маржин по ширине двух боковых колонок.
2. content - ему оверфлав поставь скрытый (хайден который)
Спустя 164 сек.
AdmBuxonly, обломался я и решил таки посмотреть в стили - у тебя там ппц каша.
В общем, лучше делай все заново, начиная от каркаса и вставляя внутрь постепенно нужные тебе блоки. А то нынче у тебя тот ещё ппц. У тебя блоки менню находятся визуально справа, а обтекаемость у них СЛЕВА. Схуяли!?
AdmBuxonly

Сообщения: 370 Репутация: N Группа: Кто попало

18 июня 2010 г. 18:04, спустя 21 минуту 40 секунд

Хорошо, попробую сверстать заново, если не получиться напишу, где не понял.
AdmBuxonly

Сообщения: 370 Репутация: N Группа: Кто попало

18 июня 2010 г. 18:34, спустя 29 минут 43 секунды

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

Страницы: ← Следующая страница →

Пожалуйста, авторизуйтесь, чтобы написать комментарий!

Дизайн для Wp, Верстка

Войти