Согласно привычной бокс-модели (CSS) параметр width задавал ширину контента, чтобы вычислит реальную ширину надо было добавить padding+border+margin... Это написано в "CSS Box Model"..., а я еще вспоминаю про то, что недавно и в разных браузерах все было по-разному...
CSS3 Flexbox Concepts
CSS Box Model
The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height.
CSS3 Rounded Corners
CSS3 Shadow Effects
margin: auto;
Using width, max-width and margin: auto;
CSS Layout - float and clear
Without clear - Notice that the div2 element is after div1, in the HTML code. However, since div1 is floated to the left, this happens: the text in div2 is floated around div1, and div2 surrounds the whole thing.
CSS Layout - inline-blockIt has been possible for a long time to create a grid of boxes that fills the browser width and wraps nicely (when the browser is resized), by using the float property. However, the inline-block value of the display property makes this even easier.
CSS Attribute Selector
CSS counters are like "variables". The variable values can be incremented by CSS rules (which will track how many times they are used).
Для меня становится очевидным, что надо присваивать блокам не один класс CSS, а несколько. Например, собрать в один класс все свойства border-radius, box-shadow. А как сформировать осталные классы?
Здесь я записал процесс работы, сначала подбор, потом разбивку на классы, а ниже сам перечень классов, где они присваиваются блокам (в настройках модулей, в файлах CSS...), структура блоков..., фрагменты из справочника CSS... Поскольку черновых записей получиость много, то начнем с результатов
Результаты работы¶
/*Box borders and shadows*/
/*You may cut .seout > div#mydiv2 */
.boxshadow, .callmeback, .seifr1, .seout > div#mydiv2 {
border: 1px solid rgba(0,0,0,0.15);
border-radius: 15px;
box-shadow: 10px 10px 5px grey;
}
/*For css3-banner .seout */
/*You may overlay .seout > div#mydiv2 */
.seout {
//background: #73AD21;
padding: 5px;
margin-bottom: 5px;
//box-sizing: border-box;
}
/*For html-banner END*/
.seout {
background: #73AD21;
padding: 5px;
margin-bottom: 5px;
//box-sizing: border-box;
}
.seout > div#mydiv2{
border-radius: 15px;
border: 1px solid rgba(0,0,0,0.15);
box-shadow: 10px 10px 5px grey;
}
В процесс подбора пробовал вот это¶
/*For ytube iframe I add class="seifr1"*/
.seifr1 {
border-radius: 25px;
background: #73AD21;
padding: 55px;
//margin-top: 25px;
box-shadow: 10px 10px 5px grey;
}
/*For Call me back*/
.callmeback{
border-radius: 15px;
box-shadow: 10px 10px 5px grey;
}
/*For html-banner END*/
.seout {
border-radius: 15px;
//background: #73AD21;
padding: 5px;
margin-bottom: 5px;
//box-sizing: border-box;
}
.seout > div#mydiv2{
border-radius: 15px;
box-shadow: 10px 10px 5px grey;
}
Часть форматирования в файле анимации баннера
/* div.sein1, */
#mydiv2 {
width: 100%;
height: 260px;
border: 0.15px solid gray;
background-size: 100% ;
background-repeat: no-repeat;
background-image: url('/jm_34_trado/images//banners/criterias_w1_t.PNG');
background-position: top left;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 50s infinite;
}
Все из custom.css¶
.seout {
border-radius: 15px;
//background: #73AD21;
padding: 5px;
margin-bottom: 5px;
//box-sizing: border-box;
}
.seout > div#mydiv2{
border-radius: 15px;
border: 1px solid rgba(0,0,0,0.15);
box-shadow: 10px 10px 5px grey;
}
.callmeback{
border: 0.15px solid gray;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 15px;
box-shadow: 10px 10px 5px grey;
}
/*For ytube iframe I add class="seifr1"*/
.seifr1 {
//border: 0.5px solid gray;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 15px;
//background: #73AD21;
//padding: 55px;
//margin-top: 25px;
box-shadow: 10px 10px 5px grey;
}
.seifr1 > div#divifr{
background: #73AD21;
}
Вот код HTML-модуля, класс seout задаем в настройках модуля, на вкладке с Суффикс CSS-класса модуля¶
<div class="moduletable seout">
<div class="custom seout">
<div id="mydiv2"> </div></div>
</div>
Вот так выглядит форма¶
Полагаю, что ширина задается во внешних дивах - span3 (это называется bootstrap, ... насколько я понял, читая про разметку в 12 столбцов)
Я добавил "CSS суффикс" callmeback в настройках модуля, а обертки из дивов:
<div class="sein1"><div class="sein2"><div class="sein3"> ...
вставлены мною прямо в php код модуля... хотел анимировать форму и вставить ее вместо баннера..., но пока решил отложить эи эксперименты...
Вот внизу весь код модуля формы в сборке с сомнительными скриптами... и недовырезанным последним дивом (в нем была скрытая ссылка на сайт разработчиков).
<div id="aside" class="span3">
<!-- Begin Right Sidebar -->
<div class="well callmeback"><div class="sein1"><div class="sein2"><div class="sein3">
<script type="text/javascript">
<!--
function validateForm( frm ) {
if(frm.contact_name.value == '') {
alert("Введите, пожалуйста, корректное имя");
return false;
}
if(frm.contact_name.value == 'Ваше имя') {
alert( "Введите, пожалуйста, корректное имя");
return false;
}
if(frm.contact_phone.value == 'Ваш номер телефона') {
alert( "Введите, пожалуйста, корректный номер телефона");
return false;
}
if(frm.contact_phone.value == '') {
alert( "Введите, пожалуйста, корректный номер телефона");
return false;
}
if(frm.contact_phone.value.length < 6 ) {
alert( "Номер телефона должен составлять минимум �имволов");
return false;
}
return true;
}
// -->
<!--
function doClear( formField ) {
if (formField.value == 'Ваше имя' ){
formField.value = "";
}
if (formField.value == 'Ваш номер телефона' ){
formField.value = "";
}
}
// -->
</script>
<div class="se_hack"><h4 class="call_me_back_headline">Позвоните: (495)607-55-18</h4>
<p class="call_me_back_pretext">Позвонить вам:</p>
<form action="" method="post" class="form-validate" id="mod_itf_form" name="mod_itf_form" onsubmit="return validateForm(this);">
<input name="action" value="CallMeUp" type="hidden">
<p class="call_me_back_form_name"><input onclick="doClear(this)" id="contact_name" name="contact_name" value="Ваше имя" class="inputbox input-medium" type="text"></p>
<p class="call_me_back_form_phone"><input onclick="doClear(this)" id="contact_phone" name="contact_phone" value="Ваш номер телефона" class="inputbox input-medium" type="text"></p>
<p class="call_me_back_form_submit"><input name="mod_itf_call_me_back_form_submit" value="Перезвоните мне" class="button" type="submit"></p>
</form>
<div style="text-align: right; padding-right: 4px; font-size: 10px;display: none;"></div></div></div></div>
</div>
<!-- End Right Sidebar -->
</div>
</div>
CSS Box Model¶
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Flexible boxes, or flexbox¶
is a new layout mode in CSS3.
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.
%%html
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 200px;
height: 50px;
background-color: lightgrey;
}
.flex-container_inline {
display: -webkit-flex;
display: inline-flex;
width: 200px;
height: 50px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
%%html
<div class="flex-container_inline">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
Посты чуть ниже также могут вас заинтересовать
1 комментарий:
CSS3 Shadow Effects - Welookups
Отправить комментарий