Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Резиновый Grid  [new]
Max_Solt
Member

Откуда:
Сообщений: 3
Всем привет, мне нужно сделать чтобы Grid на сайте растягивался на всю страницу... т.е. не сжимался, но и не переходил меры... Не хочу делать скролл на странице... Спасибо

К сообщению приложен файл. Размер - 73Kb
11 янв 18, 01:41    [21095379]     Ответить | Цитировать Сообщить модератору
 Re: Резиновый Grid  [new]
бухалтер фантоцци
Member

Откуда:
Сообщений: 11403
Max_Solt,

Покажите простой тестовый вариант, на котором не получается реализовать желаемое.
11 янв 18, 02:55    [21095405]     Ответить | Цитировать Сообщить модератору
 Re: Резиновый Grid  [new]
Areostar
Member

Откуда:
Сообщений: 3446
Как вариант:
width:100%;
min-width:250px;
11 янв 18, 08:48    [21095583]     Ответить | Цитировать Сообщить модератору
 Re: Резиновый Grid  [new]
Max_Solt
Member

Откуда:
Сообщений: 3
бухалтер фантоцци, находится сайт у меня на локальном сервере... Поэтому
---HTML---
<body>
    <header>
        <div id="hellopreloader_preload"></div>
        <div id="logo_name">MAX PLOTITSYN</div>
        <div id="copyright">Made with love by Me</div>
    </header>
    <main>
        <div id="my_name">Max Pl&#248;titsyn</div>
        <div id="description">
            <p>Работаю с любыми рекламными бюджетами в том числе и минимальными. Достаточно большой опыт в контекстной рекламе.
                Никаких шаблонов - персональный подход к каждому проекту.</p>
            <p>Создание, настройка, внедрение и сопровождение рекламных кампаний Facebook, Instagram и Google.</p>
        </div>
        <div class="button draw" id="tr_html">HTML</div>
        <div class="button draw" id="tr_css">CSS</div>
        <div class="button draw " id="tr_js">JS</div>
        <div class="button draw" id="tr_seo">SEO</div>
        <div class="button draw" id="tr_smm">SMM</div>
        <div class="button draw" id="tr_cms">CMS</div>
        <div class="button draw" id="tr_skype">tarantayka.max</div>
        <div class="button draw" id="tr_telegram">tArAntAykA</div>
        <div class="button draw" id="tr_facebook">Max Plotitsyn</div>
        <div class="button draw" id="tr_email">plotitsyn.max@gmail.com</div>
    </main>
    <footer>
    </footer>
    <script src="js/index.js"></script>
</body>

---СSS---
@import url('https://fonts.googleapis.com/css?family=Roboto|Oswald');

/* @import url('https://fonts.googleapis.com/css?family=Oswald'); */

html::before {
    content: '';
    background: url(../images/portret_crop2.jpg) no-repeat center center fixed;
    background-size: cover;
    height: 100vh;
    position: fixed;
    width: 100%;
    z-index: -2;
}

#hellopreloader_preload {
    display: block;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1000px;
    background: #000000 url(http://hello-site.ru//main/images/preloads/bars.svg) center center no-repeat;
    background-size: 85px;
}

body {
    margin: auto;
    font-family: 'Roboto';
}

header {
    display: flex;
    justify-content: space-between;
    background-color: rgba(167, 167, 167, 0.2);
    font-family: 'Roboto', sans-serif;
}

#logo_name {
    padding-left: 50px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

#logo_name:hover {
    color: #800000;
    transition-duration: 500ms;
    cursor: pointer;
}

#copyright {
    padding-right: 50px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: white;
}

#copyright:hover {
    cursor: pointer;
}

main {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-gap: 1rem;
    color: white;
}

#my_name {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 75px;
    font-weight: bold;
    font-family: 'Oswald';
    grid-column: 4 / 6;
    grid-row: 2;
}

#description {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;    
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
    text-align: center;
    grid-column: 4 / 6;
    grid-row: 3 / span 3;
    /* background-color: #1EAAFC;
    background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    color: #fff;
    border: 6px solid #171717; */
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

#description p {
    font-size: 22px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
    width: 100%;
    padding: 5px;
}

#tr_html {
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: rgb(255, 255, 255); */
    /* height: 5em; */
    text-align: center;
    grid-column: 7;
    grid-row: 1;
    cursor: pointer;
}

#tr_css {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid white; */
    /* background-color: rgb(255, 255, 255); */
    /* height: 5em; */
    text-align: center;
    grid-column: 7;
    grid-row: 2;
    cursor: pointer;
}

#tr_js {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid white; */
    /* background-color: rgb(255, 255, 255); */
    /* height: 5em; */
    text-align: center;
    grid-column: 7;
    grid-row: 3;
    cursor: pointer;
}

#tr_smm {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid white; */
    /* background-color: rgb(255, 255, 255); */
    /* height: 5em; */
    text-align: center;
    grid-column: 7;
    grid-row: 4;
    cursor: pointer;
}

#tr_seo {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid white; */
    /* background-color: rgb(255, 255, 255); */
    /* height: 5em; */
    text-align: center;
    grid-column: 7;
    grid-row: 5;
    cursor: pointer;
}

#tr_cms {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid white; */
    /* background-color: rgb(255, 255, 255); */
    /* height: 5em; */
    text-align: center;
    grid-column: 7;
    grid-row: 6;
    cursor: pointer;
}

#tr_skype {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid white; */
    /* background-color: rgb(255, 255, 255); */
    /* height: 5em; */
    text-align: center;
    grid-column: 3;
    grid-row: 7;
}

#tr_telegram {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid white; */
    /* background-color: rgb(255, 255, 255); */
    /* height: 5em; */
    text-align: center;
    grid-column: 4;
    grid-row: 7;
}

#tr_facebook {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid white; */
    /* background-color: rgb(255, 255, 255); */
    /* height: 5em; */
    text-align: center;
    grid-column: 5;
    grid-row: 7;
}

#tr_email {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid white; */
    /* background-color: rgb(255, 255, 255); */
    /* height: 5em; */
    text-align: center;
    grid-column: 6;
    grid-row: 7;
}

.button {
    background: none;
    /* -webkit-box-sizing: border-box; */
    box-sizing: border-box;
    margin: 1em;
    padding: 1em 2em;
    -webkit-box-shadow: inset 0 0 0 1px #171A27;
    box-shadow: inset 0 0 0 1px #171A27;
    color: #ffffff;
    font-size: inherit;
    font-weight: 700;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
}

.button::before,
.button::after {
    /* -webkit-box-sizing: inherit; */
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

.draw {
    /* -webkit-transition: color 0.25s; */
    transition: color 0.25s;
}

.draw::before,
.draw::after {
    border: 2px solid transparent;
    width: 0;
    height: 0;
}

.draw::before {
    top: 0;
    left: 0;
}

.draw::after {
    bottom: 0;
    right: 0;
}

.draw:hover {
    color: #60daaa;
}

.draw:hover::before,
.draw:hover::after {
    width: 100%;
    height: 100%;
}

.draw:hover::before {
    border-top-color: #434857;
    border-right-color: #434857;
    /* -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; */
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}

.draw:hover::after {
    border-bottom-color: #434857;
    border-left-color: #434857;
    /* -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; */
    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

---JS---
var hellopreloader = document.getElementById("hellopreloader_preload");

function fadeOutnojquery(el) {
    el.style.opacity = 1;
    var interhellopreloader = setInterval(function () {
        el.style.opacity = el.style.opacity - 0.05;
        if (el.style.opacity <= 0.05) {
            clearInterval(interhellopreloader);
            hellopreloader.style.display = "none";
        }
    }, 16);
}
window.onload = function () {
    setTimeout(function () {
        fadeOutnojquery(hellopreloader);
    }, 2500);
};
11 янв 18, 19:55    [21098899]     Ответить | Цитировать Сообщить модератору
 Re: Резиновый Grid  [new]
бухалтер фантоцци
Member

Откуда:
Сообщений: 11403
Max_Solt,

а что-нибудь попроще никак?

вот за 10 минут набросал, это хоть можно быстро менять и переделывать,
максимально простой пример нужен, иллюстрирующий проблему.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Grid test</title>
<style>
* { margin:0; padding:0; outline:none; }
#main { position:absolute; left:0; top:50px; right:250px; bottom:100px; overflow:hidden; }
#b_bright { position:absolute; top:50px; right:0; bottom:70px; width:200px; text-align:center; overflow:hidden; }
#b_footer { position:absolute; left:0; right:250px; bottom:0; height:130px; text-align:center; overflow:hidden; }
.dcell { position:relative; display:inline-block; margin:20px; padding:20px; min-width:100px; max-width:200px; max-height:50px; text-align:center; font:normal 20px arial; color:#800000; border:solid 1px #000; }
</style>
</head>
<body>
<div id="main">
<p>text text text</p>
</div>
<div id="b_bright">
  <div class="dcell">text1</div>
  <div class="dcell">text2</div>
  <div class="dcell">text3</div>
  <div class="dcell">text4</div>
  <div class="dcell">text5</div>
</div>
<div id="b_footer">
  <div class="dcell">text11</div>
  <div class="dcell">text12</div>
  <div class="dcell">text13</div>
  <div class="dcell">text14</div>
</div>
</body>
</html>
12 янв 18, 01:05    [21099517]     Ответить | Цитировать Сообщить модератору
 Re: Резиновый Grid  [new]
Max_Solt
Member

Откуда:
Сообщений: 3
бухалтер фантоцци, новый стандарт 2018 года: Flex и Grid. Советую поучить. Если бы каждый не парился, то были бы очень простенькие сайты... Поскольку мы идем в ногу с инновациями, будем их придерживатся.
12 янв 18, 03:01    [21099588]     Ответить | Цитировать Сообщить модератору
 Re: Резиновый Grid  [new]
бухалтер фантоцци
Member

Откуда:
Сообщений: 11403
Max_Solt,

Благодарю за науку.
12 янв 18, 16:09    [21102109]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить