Форум

Гробовщик · #1 (**permalink**) 14.10.2015, 09:38

Добрый день, уважаемые форумчане.
Делаю так называемый призыв к "действию"
Логика такая есть один див на всю ширину экрана
В нём 5 дивов в строку
Один див с надписью (размеры надписи могут меняться), затем div-треугольник. потом сам "призыв" (мол позвоните нам), затем снова div-треугольник и завершает цепочку пустой див
У первого дива размер может меняться, div-треугольники имеют фиксированный размер, "призыв" имеет размер 50%, а пустой див должен быть на остальной размер, вот именно эту задачу я и не могу решить...
Код ниже

<div style="display: table; width: 100%;">        
<div style="float: left; height: 100px; background: #EA344D; font-size: 24px; color: #FFF; font-family: PFBeauSansPro-Regular; text-align:center;">
<div style="padding:20px;">
Воспользуйтесь<br>сейчас
</div>

</div>
<div style="float: left;  border: 50px solid transparent;	border-left: 50px solid #EA344D; border-top: 50px solid #EA344D; width:0; height:0; ">
</div>
<div style = "float: left; text-align:center;" >

<div style="padding:20px;">
	<p>Консультации по телефону</p>
  <span style="font-size: 22px; top: 6px; margin-right: 5px; font-family: PFBeauSansPro-Light; color: #5B5B5B;"> (0000)</span>
  <span style="font-size: 30px; font-family: PFBeauSansPro-Light; color: #5B5B5B;">000-000</span><br />
  <a href="" style="border-bottom: 1px dashed #000; color: #5B5B5B;" class="callcons_b" onClick="return false;">заказать звонок</a>
</div>
</div>
<!--Тут блоки див я поменял местами, что бы был отступ по правому краю-->
<div style="float: right;  width: 100px; height: 100px; background: #EA344D;">
</div>
<div style="float: right;  border: 50px solid transparent;	border-right: 50px solid #EA344D; border-bottom: 50px solid #EA344D; width:0;height:0">
</div>
</div>

P.S. Не знаю как сделать кнопку "Запустить код"

рони · #2 (**permalink**) 14.10.2015, 09:46

Сообщение от Гробовщик

Не знаю как сделать кнопку "Запустить код"

[HTML run][/HTML]

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Гробовщик · #3 (**permalink**) 14.10.2015, 10:14

рони,

Сообщение от рони

Пожалуйста, отформатируйте свой код!

Вот, если так удобнее. В div "information" я стили не убирал, они там большой роли не играют

#div_outside{
display: table;
width: 100%;
}
#div1{
float: left;
height: 100px;
background: #EA344D;
font-size: 24px;
color: #FFF;
font-family: PFBeauSansPro-Regular;
text-align:center;
}
#div_text{
padding:20px;
}
#figure_div_1{
float: left;
border: 50px solid transparent;
border-left: 50px solid #EA344D;
border-top: 50px solid #EA344D;
width:0;
height:0; 
}
#information{
float: left;
text-align:center;
}
#posl{
float: right;
width: 100px;
height: 100px;
background: #EA344D;
#figure_div_2{
float: right;
 border: 50px solid transparent;
border-right: 50px solid #EA344D;
border-bottom: 50px solid #EA344D;
width:0;
height:0;
}

<div id="div_outside">        
<div id="div1">
<div id="div_text">
Воспользуйтесь<br>сейчас
</div>
</div>
<div id="figure_div_1">
</div>
<div id = "infiormation">
<div style="padding:20px;">
	<p>Консультации по телефону</p>
  <span style="font-size: 22px; top: 6px; margin-right: 5px; font-family: PFBeauSansPro-Light; color: #5B5B5B;"> (0000)</span>
  <span style="font-size: 30px; font-family: PFBeauSansPro-Light; color: #5B5B5B;">000-000</span><br />
  <a href="" style="border-bottom: 1px dashed #000; color: #5B5B5B;">заказать звонок</a>
</div>
</div>
<!--Тут блоки див я поменял местами, что бы был отступ по правому краю-->
<div id="posl">
</div>
<div id="figure_div_2">
</div>
</div>

EmperioAf · #4 (**permalink**) 14.10.2015, 10:18

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.container {
  height: 100px;
  width: 100%;
  background-color: #EA344D;
}

.container>div {
  float: left;
}

.note-name {
  height: 100px;
  text-align: center;
  font-size: 24px;
  line-height: 100px;
}

.left-angle {
  border: 50px solid transparent;
  border-right: 50px solid white;
  border-bottom: 50px solid white;
  width:0;
  height:0;
}

.just-do-it {
  background-color: white;
  height: 100px;
  font-size: 30px;
  line-height: 100px;
}

.right-angle {
  border: 50px solid transparent;
  border-left: 50px solid white;
  border-top: 50px solid white;
  width:0;
  height:0;
}
</style>
</head>
<body>
<div class="container">
  <div class="note-name">Воспользуйтесь сейчас</div>
  <div class="left-angle"></div>
  <div class="just-do-it">Позвони мне, позвони!</div>
  <div class="right-angle"></div>
  <div class="empty-div"></div>
</div>
</body>
</html>

ksa · #5 (**permalink**) 14.10.2015, 10:20

Сообщение от Гробовщик

У первого дива размер может меняться, div-треугольники имеют фиксированный размер, "призыв" имеет размер 50%, а пустой див должен быть на остальной размер, вот именно эту задачу я и не могу решить...

Начать можно с использования флекс-контейнера...
http://html5.by/blog/flexbox/
Может его и хватит для решения твоей задачки.

EmperioAf · #6 (**permalink**) 14.10.2015, 10:36

Сообщение от ksa

Начать можно с использования флекс-контейнера...

Почему вы так упорно предлагаете везде, где это удобно, использовать flexbox?!
Ведь у него пока довольно низкая поддержка - 95%
http://caniuse.com/#feat=flexbox

рони · #7 (**permalink**) 14.10.2015, 10:44

Сообщение от EmperioAf

низкая поддержка - 95%

рони · #8 (**permalink**) 14.10.2015, 10:47

Сообщение от Гробовщик

Вот, если так удобнее.

удобнее когда всё вместе макетом, а не частями для конструктора для сборки, а сообщение было из добавить RTFM там наверно единственная ссылка на форматирование, перенести бы её в более видное место

ksa · #9 (**permalink**) 14.10.2015, 11:18

Сообщение от EmperioAf

Почему вы так упорно предлагаете везде, где это удобно, использовать flexbox?

Я бы просто вычеркнул слово "упорно"...

Гробовщик · #10 (**permalink**) 14.10.2015, 12:04

EmperioAf,
Самое интересное, что я рассматривал вариант "покрасить" div-.container, но тогда у меня треугольники переставали отображаться. Спасибо)

Форум

Справочник

Discord чат

Курсы javascript