Material Design Lite не работает на моем сайте

Я попытался создать html-шаблон с помощью Google Material Design Lite и добавить заголовок, который работает нормально, но когда я добавляю что-либо под ним, он просто перемещается наверх. Смотрите код для справки:

.demo-layout-transparent {
  background: url('https://images.unsplash.com/photo-1456428199391-a3b1cb5e93ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=db130336e8134fc3f734dbc4318f5c5e') center / cover;
  font-family: 'League Spartan';
}

.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
  color: white;
}

.mdl-layout-title {
    font-family: 'League Spartan';
    font-size: 3em;
    margin-top: 1em;
}

.subtitle {
    font-family: "League Spartan";
    font-size: 4em;
    color: floralwhite;
    text-align: center;
    margin-top: 2em;
}

.subtitle span{
    color: deepskyblue;
}
 <!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
    <link rel="stylesheet" href="main.css">
</head>

    
    
<body>
    <div class="home">
 <div class="demo-layout-transparent mdl-layout mdl-js-layout" id="header">
     <header class="mdl-layout__header mdl-layout__header--transparent">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">DesignAmbition</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation -->
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Home</a>
        <a class="mdl-navigation__link" href="">About</a>
        <a class="mdl-navigation__link" href="">Portfolio</a>
        <a class="mdl-navigation__link" href="">Contact</a>
      </nav>
    </div>
  </header>
     <h1 class="subtitle">We Create <span>DESIGNS</span> <br/> And People Just <br/>.......... <br/> <span>ADMIRE</span> </h1>
  <div class="mdl-layout__drawer mdl-layout--small-screen-only">
    <span class="mdl-layout-title">Design <br/> Ambition`</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Home</a>
      <a class="mdl-navigation__link" href="">About</a>
      <a class="mdl-navigation__link" href="">Portfolio</a>
      <a class="mdl-navigation__link" href="">Contact</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
  </main>
     
     </div>
    </div>
    
    
<div class="mdl-layout__content">
        <h1> ABOUT </h1>
    </div>
  </body>
</html>


material-design html css material-design-lite
person pulkit    schedule 19.03.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Содержимое должно быть в формате <div class="page-content">.
Изменить: Заголовок на вашей странице прозрачен. Я удалил --transparent из класса Header, чтобы получить для него цвет. CSS также был обновлен, изменив размер верхней части поля на 5 пикселей (3em было слишком большим для заголовка). Размер шрифта также изменен на 2em с 3em для заголовка заголовка. Также удалено <div class="home">, потому что оно бесполезно.

.demo-layout-transparent {
  background: url('https://images.unsplash.com/photo-1456428199391-a3b1cb5e93ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=db130336e8134fc3f734dbc4318f5c5e') center / cover;
  font-family: 'League Spartan';
}

.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
  color: white;
}

.mdl-layout-title {
    font-family: 'League Spartan';
    font-size: 2em;
    margin-top: 5px;
}

.subtitle {

    font-size: 4em;
    color: floralwhite;
    text-align: center;
    margin-top: 2em;
}

.subtitle span{
    color: deepskyblue;
}
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
  <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
  <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="demo-layout-transparent mdl-layout mdl-js-layout" id="header">
      <header class="mdl-layout__header mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Design Ambition</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation -->
          <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>
            <a class="mdl-navigation__link" href="">Portfolio</a>
            <a class="mdl-navigation__link" href="">Contact</a>
          </nav>
        </div>
      </header>

      <div class="mdl-layout__drawer mdl-layout--small-screen-only">

        <span class="mdl-layout-title">Design <br/> Ambition`</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="">Home</a>
          <a class="mdl-navigation__link" href="">About</a>
          <a class="mdl-navigation__link" href="">Portfolio</a>
          <a class="mdl-navigation__link" href="">Contact</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
        <div class="page-content">
          <!-- contents starts here -->

          <h1 class="subtitle">We Create <span>DESIGNS</span> <br/> And People Just <br/>.......... <br/> <span>ADMIRE</span> </h1>
          <h1>About</h1>

          <!-- contents ends here -->
        </div>
      </main>
    </div>
</body>

person shmshd    schedule 20.03.2016
comment
Ваш ответ кажется правильным, но что, если я хочу дать заголовку фон и первый заголовок в заголовке, а второй под заголовком, то есть там, где заканчивается фоновое изображение. - person pulkit; 20.03.2016
comment
На самом деле я новичок в веб-дизайне - person pulkit; 20.03.2016
comment
Забавно, я не вижу, чем отличается мой ответ 19 часов назад (помимо многословия). @pulkit, пожалуйста, объясните в обновлении вашего вопроса, какова цель, - person hr_117; 20.03.2016
comment
Спасибо за вашу помощь. Вы так близки к тому, что я хотел, но я хочу поместить раздел О ПРОГРАММЕ под разделом заголовка. Поэтому заголовок «О программе» должен располагаться под фоновым изображением заголовка, а не на нем. - person pulkit; 20.03.2016
comment
@pulkit на самом деле, я не понимаю. Не могли бы вы прояснить это? - person shmshd; 20.03.2016
comment
На самом деле, я хочу создать разделы на своей странице, такие как ГЛАВНАЯ, О КОМПАНИИ, УСЛУГИ и т. д. Вы можете проверить эти шаблоны, чтобы понять, что я пытаюсь создать. shapebootstrap.net/item/ bootstraptaste.com/demo/Ninestars - person pulkit; 20.03.2016
comment
@pulkit getmdl не предоставляет никаких компонентов для этого типа. МДЛ облегченный. Таким образом, вам придется сделать это вручную. Небольшой поиск в Google может найти ответ. - person shmshd; 21.03.2016

arrow_upward
1
arrow_downward

Я не уверен, какова цель, но попробуйте поместить свой контент в основной элемент.

<main class="mdl-layout__content">
  <div class="page-content"><!-- Your content goes here --></div>
</main>

Или в дополнительный элемент заголовка.

person hr_117    schedule 19.03.2016
comment
Просто попробуйте запустить это в своем браузере, и вы увидите, что заголовок h1 с надписью ABOUT перемещается в верхнюю часть страницы. - person pulkit; 19.03.2016
comment
И если вы поставите его в main, этого не будет. - person hr_117; 19.03.2016
comment
Я также пытался поставить его в main, но ничего не изменилось - person pulkit; 20.03.2016
comment
В вашем примере есть два тега h1 (.subtitel и ABOUT). Оба, кажется, принадлежат к основному. - person hr_117; 20.03.2016