3 / 3 / 2
Регистрация: 22.07.2013
Сообщений: 15
1

Фон позади кнопки должен быть, как фон блока

22.07.2013, 16:05. Показов 5958. Ответов 19
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Фон позади кнопки должен быть, как фон блока
Это сложно объяснить словами, скину скрины макета

Фон позади кнопки должен быть, как фон блока


Фон позади кнопки должен быть, как фон блока


Надеюсь вы мне поможете и доступно объясните как такое можно реализовать
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
22.07.2013, 16:05
Ответы с готовыми решениями:

Как лучше делать фон для блока
Помогите советом не кидая тапками) 1.как лучше задать фон блоку через бекграунд или вставкой...

Как при наведении на li менять фон у блока слева
Добрый вечер, подскажите как можно сделать так чтобы при наведении на пункт li менялся фон у блока...

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

HTML - как изменять фон кнопки
Я сделал обычную страницу в основном на HTML, и сделал там данный код: <input...

19
107 / 102 / 9
Регистрация: 29.06.2013
Сообщений: 369
22.07.2013, 18:46 2
Вообще по-хорошему, дизайнер должен быть сделать фон вместе с этой выемкой (одной картинкой). А затем верстальщик (я так понимаю, это вы) должен вставить эту картинку в html, и затем подогнать кнопку в нужное место.
0
3 / 3 / 2
Регистрация: 22.07.2013
Сообщений: 15
22.07.2013, 21:07  [ТС] 3
Цитата Сообщение от Enero Посмотреть сообщение
Вообще по-хорошему, дизайнер должен быть сделать фон вместе с этой выемкой (одной картинкой). А затем верстальщик (я так понимаю, это вы) должен вставить эту картинку в html, и затем подогнать кнопку в нужное место.
Не все так просто. Фон меняется и меняется ширина кнопки.

Добавлено через 7 минут
Т.е фон кнопки должен повторять фон основного блока(в данном случае холодильника и дерева). К тому же текст внутри кнопки меняется с "Создать слово" на "Заказать"
0
13 / 13 / 3
Регистрация: 31.03.2013
Сообщений: 287
22.07.2013, 23:19 4
В общем, тогда ваш футер должен находиться в диве где тсавится фон.
Ну к примеру
HTML5
1
<div id="1" style="background....это див где фон"><div id="2">это вот футер где ваша кнопка</div></div>
При таком раскладе у кнопки находящейся во 2м диве будет иметь фон 1го.
0
3 / 3 / 2
Регистрация: 22.07.2013
Сообщений: 15
22.07.2013, 23:42  [ТС] 5
Это понятно, но оно не решает проблему
0
9 / 9 / 3
Регистрация: 04.07.2013
Сообщений: 16
24.07.2013, 15:51 6
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.wrapper{
                   width: 300px;
                    height: 60px;
                    background-color: #f4a460;
                    border-radius: 30px;
                    position: relative;
                }
                .button{
                    width: 200px;
                    height: 40px;
                    background-color: #ff0000;
                    border-radius: 20px;
                   position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -20px;
                    margin-left: -100px;
HTML5
1
2
3
4
<div class="wrapper">
    <div class="button">
    </div>
</div>
так не подходит?
0
3 / 3 / 2
Регистрация: 22.07.2013
Сообщений: 15
01.08.2013, 02:21  [ТС] 7
Цитата Сообщение от likeaboss Посмотреть сообщение
так не подходит?
не подходит :\
0
Администратор
12268 / 5333 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
03.08.2013, 20:01 8
png с прозрачностью - ни о чем не говорит?
0
3 / 3 / 2
Регистрация: 22.07.2013
Сообщений: 15
04.08.2013, 04:04  [ТС] 9
Цитата Сообщение от Taatshi Посмотреть сообщение
png с прозрачностью - ни о чем не говорит?
по подробнее можно ? для ясности скажу- кнопка меняет свою ширину
0
56 / 56 / 14
Регистрация: 02.03.2010
Сообщений: 407
04.08.2013, 10:26 10
gone,
Это изврат если честно. И выхода тут 2, делать набор полосок под разную ширину кнопок и накладывать их, либо не страдать такой фигней и отказаться от нижней части фона. Это можно нарисовать, но сверстать - голову и руки сломаешь и выйдет это один фиг через Ж.
Taatshi, тут вроде не поможет. Если прозрачный то футер будет просвечивать, а если вырез делать на футе, то у нас же еще и ширина меняется и тут набор разноколиберных картинок нужен будет, в общем психоз..
0
Администратор
12268 / 5333 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
04.08.2013, 10:59 11
Кнопку придется делить на три части: левая, середина с изменяющейся шириной, правая. И этим трем частям задавать отдельный бэк.
0
56 / 56 / 14
Регистрация: 02.03.2010
Сообщений: 407
04.08.2013, 11:05 12
Taatshi, а что нам дадут 3 части? у нас же вырез на футере должен тоже меняться, а кнопка я думаю и так резиновая. Да и как задать бэк так, чтобы он совпадал с подложкой? Тут один вариант, если уж делать, и я его описал выше.
0
Администратор
12268 / 5333 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
04.08.2013, 11:13 13
Sunman, какой вырез? О чем это? Не нужно там никакого выреза. бэк идет сплошной. Поверх прозрачная пнг из трех частей раз уж она тянется. Вырез к кнопке пририсовывается.
0
56 / 56 / 14
Регистрация: 02.03.2010
Сообщений: 407
04.08.2013, 11:25 14
Taatshi, эм.. нижняя стрелка, по-моему показывает на вырез в футере под кнопку + фон верхнего блока? нет? Я вижу вырез, и мне кажется это проще, чем делить кнопку
Однако, я бы вообще отказался от такого или нашел другое решение. Я своего диза, что макет мне рисовал, замучал в процессе, он мне каждый отрисованный блок на проверку отсылал, дабы я одобрил минимализм работы
0
Эксперт по компьютерным сетямЭксперт NIX
13016 / 7407 / 801
Регистрация: 09.09.2009
Сообщений: 28,982
04.08.2013, 11:46 15
а саму кнопку дивом сделать не пойдет? и диву назначить "онклик"...
0
Администратор
12268 / 5333 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
04.08.2013, 12:22 16
Цитата Сообщение от Sunman Посмотреть сообщение
он мне каждый отрисованный блок на проверку отсылал, дабы я одобрил минимализм работы
это непрофессионально. Верстальщик должен сверстать то, что нарисовано.

Цитата Сообщение от Dmitry Посмотреть сообщение
а саму кнопку дивом сделать не пойдет? и диву назначить "онклик"...
Так я про это и говорю.
0
56 / 56 / 14
Регистрация: 02.03.2010
Сообщений: 407
04.08.2013, 13:27 17
Цитата Сообщение от Taatshi Посмотреть сообщение
это непрофессионально. Верстальщик должен сверстать то, что нарисовано.
Профессионально это максимально возможно облегчить сайт по весу загружаемой информации и максимально уменьшить всякого рода извращенства. По крайней мере так я верстал свой сайт, а те, кто заказывает, да ради бога, любой каприз))

Цитата Сообщение от Taatshi Посмотреть сообщение
Так я про это и говорю.
Я кажется въехал о чем ты.. Ну да, я ошибся в сложности подбора бэка и это будет лучший вариант
0
Taatshi
04.08.2013, 13:47
  #18

Не по теме:

Цитата Сообщение от Sunman Посмотреть сообщение
Профессионально это максимально возможно облегчить сайт по весу загружаемой информации и максимально уменьшить всякого рода извращенства.
Да, ранее было актуально. При нынешних скоростях уже не настолько. Я недавно плакалась, что у меня страница больше полутора метров весит, так мне сказали, что я еще неплохо уложилась. Я придумала как ужать до метра и сижу сверхсчастливая. Но там тааааакой дизайн %-) :)

0
3 / 3 / 2
Регистрация: 22.07.2013
Сообщений: 15
04.08.2013, 15:55  [ТС] 19
На одном из международных форумов мне дали довольно хороший совет, но он работает только для фиксированной ширины кнопки, прорезинить пока не получается. Может кому будет полезно.
В общем делается маска с прозрачным фоном на месте кнопки. Слева и справа маски два белых дива.
Миниатюры
Фон позади кнопки должен быть, как фон блока   Фон позади кнопки должен быть, как фон блока  
0
56 / 56 / 14
Регистрация: 02.03.2010
Сообщений: 407
04.08.2013, 15:58 20

Не по теме:

Цитата Сообщение от Taatshi Посмотреть сообщение
Да, ранее было актуально. При нынешних скоростях уже не настолько. Я недавно плакалась, что у меня страница больше полутора метров весит, так мне сказали, что я еще неплохо уложилась. Я придумала как ужать до метра и сижу сверхсчастливая. Но там тааааакой дизайн
Для мобилок и сейчас еще актуально:) Ну мне диз хотел бэкграундом на весь контент влепить плюху в пнг, которая под 10 метров весила XD ну общим весом у меня страничка наверно и выходит на 1.5 -2мб. шапка+футер+7 превьюшек с картинкой в каждой. Благо ослик подятнулся, хоть градиент стал хавать, а то год назад он даже цвета левые выдавал при градиенте.



Добавлено через 3 минуты
gone, я так и предлагал, но вариант Taatshi, по-моему будет лучше.

А прорезинить у тебя так выйдет, только если использовать разные блоки. т.е. у тебя будет 2 экземпляра "маски" и 2 экземпляра кнопки.
0
04.08.2013, 15:58
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
04.08.2013, 15:58
Помогаю со студенческими работами здесь

Фон блока
Разместил на страница 3 блока с картинками на фоне в 1 блоке(container111) все нормально, в...

Фон по высоте блока
Добрый день. Стоит задача сверстать подобный макет ( во вложении ). Центральный блок 930px....

Поменять фон блока
Уважаемые, помогите пожалуйста, поменять фон правого блока сайта(там где располагаются...

Задний фон блока
Ребят, помогите: как сделать, что бы #content полностью окружал внутренние блоки и соотвественно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru