Правила форума Гаранты форума
Размещение рекламы AMX-X компилятор

Здравствуйте, гость Вход | Регистрация

Наши новости:

14-дек
24-апр
10-апр
11-апр

помогите сверстать шаблон.

Статус пользователя [Beardyman]
сообщение 2.1.2013, 19:55
Сообщение #1
Стаж: 15 лет

Сообщений: 72
Благодарностей: 14
Полезность: 119

вообщем решил я сверстать свой шаблончик. На данный момент запнулся на топ меню в шапке сайта.
maket

Вообщем, я сделал общий BG, сделал BG шапки, наложил рисунок, наложил логотип с функцией hover (при наведении меняется картинка), застрял на топ меню. Само меню я сделал, но его нужно правельно расположит (сейчас он находиться прямо под логотипом, а надо что бы оно прижалось к низу родительского контейнераи, отцентровалось)

Завтра скину нарезки шаблона и код, который у меня получился. Сейчас жду советов по центровке и прижатию меню, а так же как лучше сделать разделения в меню (с помощью CSS или картинками (отделение блоков 1px, 1 цвера, верхнюю полоску луше вырезать, так как там идет полоса в 2px: 1px черный, 1px красный + затухание по бокам.)

По самой структуре шаблона:
0 основной BG + тень картинкой под топом.
1 блок top, оноже шапка. BG резина, меню фиксированное (1000px) отцентрованное. BG сделал с помощью background-color, на него наложил картинку с рисунком с помощью background-image, оба BG записал в одну строку.
2 блок wrapper с фиксированной шириной в 1000px, в нем еще 2 блока: блок content, блок sidebar. Блоки с заданной шириной, высота резина.
3 блок footer, нижняя часть, BG резина, контент фиксированный, отцентрованный.

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

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

P.S макет с продажи снят.

Отредактировал: [Beardyman], - 2.1.2013, 20:00
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   Цитировать сообщение
Статус пользователя trofian
сообщение 2.1.2013, 23:51
Сообщение #2


Стаж: 13 лет

Сообщений: 72
Благодарностей: 41
Полезность: 438

есть psd?
хочу тоже заверстать, если закончу сюда выложу
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя [Beardyman]
сообщение 3.1.2013, 6:35
Сообщение #3
Стаж: 15 лет

Сообщений: 72
Благодарностей: 14
Полезность: 119

Цитата(trofian @ 2.1.2013, 23:51) *
есть psd?
хочу тоже заверстать, если закончу сюда выложу

PSD естественно есть, и красткая и полная новость. Врстаю на DLE. Но еще пока не уверен с CMS.
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя Rejiser
сообщение 3.1.2013, 12:24
Сообщение #4


Стаж: 15 лет

Сообщений: 2261
Благодарностей: 1068
Полезность: 870

Цитата([Beardyman] @ 3.1.2013, 7:35) *
PSD естественно есть, и красткая и полная новость. Врстаю на DLE. Но еще пока не уверен с CMS.

Только сначала верстают простую страницу, а только потом адаптируют под движки.
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя [Beardyman]
сообщение 3.1.2013, 17:01
Сообщение #5
Стаж: 15 лет

Сообщений: 72
Благодарностей: 14
Полезность: 119

Цитата(Rejiser @ 3.1.2013, 13:24) *
Только сначала верстают простую страницу, а только потом адаптируют под движки.

Собственно верстаю сразу на dle в main.tpl, за совет спасибо, но не моглы бы вы объяснить почему лучше верстать сначало обычную страницу?
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя [Beardyman]
сообщение 7.1.2013, 17:19
Сообщение #6
Стаж: 15 лет

Сообщений: 72
Благодарностей: 14
Полезность: 119

СДЕЛАЛ.

Отредактировал: [Beardyman], - 14.1.2013, 19:13
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя y4eHuK
сообщение 11.1.2013, 23:17
Сообщение #7


Стаж: 15 лет

Сообщений: 268
Благодарностей: 61
Полезность: 186

Цитата([Beardyman] @ 7.1.2013, 17:19) *
кто может помочь с шапко, один хрен не получается.

Сделал:
1 оснойной бг
2 тень под шапкой (катинка на основном бг)
3 бг + картинка шапки.
4 логотим через ссылку с функцией ховер.

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

p.s если нужен код который у меня получился или нарезка картинок, то все могу скинуть, но это уже в ЛС.


код в лс кинь гляну что там у тебя и ксс тоже если есть отдельно
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя [Beardyman]
сообщение 14.1.2013, 19:10
Сообщение #8
Стаж: 15 лет

Сообщений: 72
Благодарностей: 14
Полезность: 119

вообщем, с топом я разобрался, немного не срастается с новостью.

HTML:
<div id="aboutnews">
<img src="img/user-ico.png"><span>Автор: admin</span></img></br>
<img src="img/data-ico.png"><span>27.01.2013</span></img></br>
<img src="img/kat-ico.png"><span>Категория: игры</span></img>
</div>


CSS:
#aboutnews {
color: #fff;
float: right;
margin: 9px 15px;
}


Скриншоты
как надо:

как получилось:


Кто может, помогите.

Отредактировал: [Beardyman], - 14.1.2013, 19:11
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя Rejiser
сообщение 14.1.2013, 19:21
Сообщение #9


Стаж: 15 лет

Сообщений: 2261
Благодарностей: 1068
Полезность: 870

Попробуй vspace и hspace поиграться, это отсупы во вертикале и горизонтали для тега img
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
Поблагодарили 1 раз
   + Цитировать сообщение
Статус пользователя [Beardyman]
сообщение 14.1.2013, 19:26
Сообщение #10
Стаж: 15 лет

Сообщений: 72
Благодарностей: 14
Полезность: 119

Отступ по горизонтали сделал, а вот вертикальтый работает по типу margin причем именно для пикчи. Мне надо пододвинуть текст.
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя trofian
сообщение 14.1.2013, 20:00
Сообщение #11


Стаж: 13 лет

Сообщений: 72
Благодарностей: 41
Полезность: 438

//типодел

Отредактировал: trofian, - 14.1.2013, 20:02
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя Rejiser
сообщение 14.1.2013, 20:50
Сообщение #12


Стаж: 15 лет

Сообщений: 2261
Благодарностей: 1068
Полезность: 870

Цитата([Beardyman] @ 14.1.2013, 20:26) *
Отступ по горизонтали сделал, а вот вертикальтый работает по типу margin причем именно для пикчи. Мне надо пододвинуть текст.

Значит padding подгоняй
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
  Тема закрытаНачать новую тему
 
0 пользователей и 1 гостей читают эту тему: