Шапка форума

Поделиться1Пн, 7 Авг 2017 19:23:03

Автор: Gifts
Заслуженный
Зарегистрирован: Вс, 28 Май 2017
Сообщений: 209
Уважение: +8
Позитив: +37
Предупреждения: (1) Дубль вопросов
Последний визит:
Вт, 4 Июн 2019 21:09:20

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

мой форум http://giftswot-forum.ru/

Отредактировано Gifts (Пн, 7 Авг 2017 19:23:27)

0

Поделиться2Пн, 7 Авг 2017 19:28:21

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3566
Уважение: +2337
Позитив: +755
Пол: Мужской
Последний визит:
Вчера 21:42:27

Gifts
Шапка сильно маленькая. Увеличьте её ширину хотя бы до 860px (в идеале 1200).

+1

Telegram @reysler

Поделиться3Пн, 7 Авг 2017 19:39:28

Автор: Gifts
Заслуженный
Зарегистрирован: Вс, 28 Май 2017
Сообщений: 209
Уважение: +8
Позитив: +37
Предупреждения: (1) Дубль вопросов
Последний визит:
Вт, 4 Июн 2019 21:09:20

Reysler

тут более 1200(

0

Поделиться4Пн, 7 Авг 2017 19:41:13

Автор: Gifts
Заслуженный
Зарегистрирован: Вс, 28 Май 2017
Сообщений: 209
Уважение: +8
Позитив: +37
Предупреждения: (1) Дубль вопросов
Последний визит:
Вт, 4 Июн 2019 21:09:20

0

Поделиться5Пн, 7 Авг 2017 19:45:41

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3566
Уважение: +2337
Позитив: +755
Пол: Мужской
Последний визит:
Вчера 21:42:27

Gifts
В HTML-верх

Код:

<style>
#pun-title {
    background: url(http://sd.uploads.ru/O7iXs.jpg) no-repeat center top;
    background-size: cover;
}
</style>

+2

Telegram @reysler

Поделиться6Пн, 7 Авг 2017 19:49:09

Автор: Gifts
Заслуженный
Зарегистрирован: Вс, 28 Май 2017
Сообщений: 209
Уважение: +8
Позитив: +37
Предупреждения: (1) Дубль вопросов
Последний визит:
Вт, 4 Июн 2019 21:09:20

Reysler
ОГОНЬ )) а как по четче картинку сделать мож мне каким нибудь другим файлом ее вам скинуть , или через файлообменник скинуть вам ?

0

Поделиться7Пн, 7 Авг 2017 19:51:42

Автор: Gifts
Заслуженный
Зарегистрирован: Вс, 28 Май 2017
Сообщений: 209
Уважение: +8
Позитив: +37
Предупреждения: (1) Дубль вопросов
Последний визит:
Вт, 4 Июн 2019 21:09:20

Reysler
я так понимаю она тут качество потеряла, давайте я вам оригинал скину каким нибудь способом, пожалуйста) ?

0

Поделиться8Пн, 7 Авг 2017 20:00:08

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3566
Уважение: +2337
Позитив: +755
Пол: Мужской
Последний визит:
Вчера 21:42:27

Gifts
Как вариант — сделать высоту шапки до высоты самого изображения:

Код:

<style>
#pun-title {
    background: #000 url(http://sd.uploads.ru/O7iXs.jpg) no-repeat center top;
    height: 116px;
}
#pun-navlinks {
    top: 76px;
}
#pun-navlinks + div {
    margin-top: 116px;
}
</style>

Заменить предыдущий код.

Добавлено спустя 1 минуту 59 секунд:

Подправил.

Отредактировано Reysler (Пн, 7 Авг 2017 20:02:07)

+1

Telegram @reysler

Поделиться9Пн, 7 Авг 2017 20:05:52

Автор: Gifts
Заслуженный
Зарегистрирован: Вс, 28 Май 2017
Сообщений: 209
Уважение: +8
Позитив: +37
Предупреждения: (1) Дубль вопросов
Последний визит:
Вт, 4 Июн 2019 21:09:20

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

Надо мне поучиться хорошенько с кодом поработать )

Отредактировано Gifts (Пн, 7 Авг 2017 20:06:29)

0

Поделиться10Ср, 11 Окт 2017 16:23:00

Автор: Gifts
Заслуженный
Зарегистрирован: Вс, 28 Май 2017
Сообщений: 209
Уважение: +8
Позитив: +37
Предупреждения: (1) Дубль вопросов
Последний визит:
Вт, 4 Июн 2019 21:09:20

Reysler
можете шапку поменять?

Форум http://giftswot-forum.ru/

0

Поделиться11Ср, 11 Окт 2017 18:28:16

Автор: satsana
Техномаг FD
Зарегистрирован: Ср, 7 Июн 2017
Сообщений: 379
Уважение: +394
Позитив: +207
Последний визит:
Чт, 24 Окт 2024 08:51:51

Gifts, а кто-то пару месяцев назад грозился учиться работать с кодом... Тут он вообще элементарный.

Код:

#pun-title {
    background: #000 url(http://sd.uploads.ru/O7iXs.jpg) no-repeat center top;
    height: 116px;
}

Тут бекграунд шапки и её высота. Нет ничего сложного в том, чтобы поменять ссылку на новую. Если хотите сделать высоту по размеру картинки, ставьте 200px, и вот тут тоже:

Код:

#pun-navlinks + div {
    margin-top: 116px;
}

Это был отступ сверху для блока, следующего за навигационными ссылками. Следующий блок там - пользовательские ссылки, если что. (Вообще можно было написать не #pun-navlinks + div, а указать непосредственно их АйДи - #pun-ulinks, но это не повлияет на отображение.)
А вот это отступ сверху для навигационного меню:

Reysler написал(а):

#pun-navlinks {
top: 76px;
}

Его высота у вас 40px, так что если общая высота шапки 200 - логично будет сделать отступ 160px.

Отредактировано satsana (Ср, 11 Окт 2017 18:29:20)

+1

Поделиться12Ср, 11 Окт 2017 21:28:11

Автор: Gifts
Заслуженный
Зарегистрирован: Вс, 28 Май 2017
Сообщений: 209
Уважение: +8
Позитив: +37
Предупреждения: (1) Дубль вопросов
Последний визит:
Вт, 4 Июн 2019 21:09:20

satsana
по работаю, просто с кодами пока времени не было возиться, помогите пожалуйста еще раз :'(

0

Поделиться13Ср, 11 Окт 2017 23:05:43

Автор: satsana
Техномаг FD
Зарегистрирован: Ср, 7 Июн 2017
Сообщений: 379
Уважение: +394
Позитив: +207
Последний визит:
Чт, 24 Окт 2024 08:51:51

Gifts написал(а):

помогите пожалуйста еще раз

Я-то надеялась, что помогаю вам, объясняя, какая строчка за что отвечает... Эх. Между прочим, мне было намного проще и быстрее написать готовый код. Держите, что уж тут...

Код:

<style>
#pun-title {
    background: #000 url(http://s7.uploads.ru/Xnjl5.jpg) no-repeat center top;
    height: 200px;
}
#pun-navlinks {
    top: 160px;
}
#pun-navlinks + div {
    margin-top: 200px;
}
</style>

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

+1

Поделиться14Ср, 11 Окт 2017 23:16:13

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51439
Уважение: +15399
Позитив: +11949
Последний визит:
Сегодня 12:45:27

Gifts
Попробуйте заменить текущий HTML верх, - на такое (Сделал на свой вкус - иб надпись слево теперь не смотриться, если не нравится - уберите красным

<style>
#pun-title {
background: #000 url(http://s7.uploads.ru/Xnjl5.jpg) no-repeat center top;
height: 200px;
}
#pun-navlinks {
top: 160px;
}
#pun-navlinks + div {
margin-top: 116px;
}
#pun-title h1 {
height: auto;
position:absolute;
left:50%;
margin-left:-195px;
top:98px;
}
#pun-title h1 span{
color:rgba(255,255,255,.87);
font: normal normal 400 30px/82px Tahoma!important;
text-shadow: -1px -1px 0 rgba(255,255,255,.7);, 2px 2px 0 #000;
}
</style>

Отредактировано Deff (Ср, 11 Окт 2017 23:16:29)

+1

Поделиться15Ср, 11 Окт 2017 23:18:23

Автор: Gifts
Заслуженный
Зарегистрирован: Вс, 28 Май 2017
Сообщений: 209
Уважение: +8
Позитив: +37
Предупреждения: (1) Дубль вопросов
Последний визит:
Вт, 4 Июн 2019 21:09:20

satsana
огроменое вам спасибо ! :cool:

+1

Поделиться16Чт, 12 Окт 2017 00:46:44

Автор: satsana
Техномаг FD
Зарегистрирован: Ср, 7 Июн 2017
Сообщений: 379
Уважение: +394
Позитив: +207
Последний визит:
Чт, 24 Окт 2024 08:51:51

Deff, она что-то на этом фоне нигде не смотрится. Может, ей просто нужен бэкграунд?..
Gifts, не за что. Можно попробовать добавить в стиль вот такое:

Код:

#pun-title h1 span {
    background: rgba(0,0,0,0.4);
    padding: 10px;
}

Выглядеть будет вот так:

0

Поделиться17Чт, 12 Окт 2017 00:50:00

Автор: Gifts
Заслуженный
Зарегистрирован: Вс, 28 Май 2017
Сообщений: 209
Уважение: +8
Позитив: +37
Предупреждения: (1) Дубль вопросов
Последний визит:
Вт, 4 Июн 2019 21:09:20

satsana

переделал чуток шапку , а как стандартную надпись убрать ?
подмогнете последний раз с шапкой ? в долгу не останусь :blush:

0

Поделиться18Чт, 12 Окт 2017 01:07:23

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51439
Уважение: +15399
Позитив: +11949
Последний визит:
Сегодня 12:45:27

Код:

<style>
#pun-title {
    background: #000 url(http://se.uploads.ru/QMND6.jpg) no-repeat center top;
    height: 200px;
}
#pun-title h1 {
    display:none;
}
#pun-navlinks {
    top: 160px;
}
#pun-navlinks + div {
    margin-top: 200px;
}
</style>

0