Home > OS >  Linear-gradient error with working on page
Linear-gradient error with working on page

Time：11-07

I have a problem with website. I create a website with navigation menu that on hover opens, but I can only set background color and I want to set linear-gradient background. I tried to edit code and add some, but isn´t working. Have you any ideas? Can you help me with this problem? Thank you very much.

<!DOCTYPE html>
<html>
<head>
      <title>Domov | Webstránka MENU</title> 
<link rel="icon" href="/minimenu.png">
<meta charset=utf-8>
 </head>
 
 <body style=background-image:blue><div class="area"></div><nav class="main-menu"><img src="https://i.ibb.co/xC42G9x/f19ada7376b147df815f4dc7438317e0-5.png" alt="Trulli" width="155" height="">
           <ul style="background-color:darkblue;">
               <li>
                   <a href="/welcome.php">
                      
                     <i class="fa fa-home fa-2x"></i>
                       <span class="nav-text">
                           Domov
                       </span>
                   </a>
                 
               </li>
               <li class="has-subnav">
                   <a href="#">
                       <i class="fa fa-book fa-2x"></i>
                       <span class="nav-text">
                           Domáce úlohy
                       </span>
                 </a>
               </li>
               <li class="has-subnav">
                   <a href="#">
                       <i class="fa fa-users fa-2x"></i>
                       <span class="nav-text">
                           Suplovanie
                       </span>
                 </a>
               </li>
               <li class="has-subnav">
                   <a href="#">
                      <i class="fa fa-list fa-2x"></i>
                       <span class="nav-text">
                       Známky    
                       </span>
                   </a>
                   
               </li>
               <li class="has-subnav">
                   <a href="#">
                      <i class="fa fa-table fa-2x"></i>
                       <span class="nav-text">
                           Rozvrh hodín
                       </span>
                   </a>
                  
               </li>
               <li>
                   <a href="#">
                       <i class="fa fa-leanpub fa-2x"></i>
                       <span class="nav-text">
                           Učebný materiál
                       </span>
                   </a>
               </li>
               <li>
                   <a href="#">
                       <i class="fa fa-gamepad fa-2x"></i>
                       <span class="nav-text">
                           Hry
                       </span>
                   </a>
               </li>
             <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
             <p hidden>TU SA ZACINA SUBMENU</p>
               <li>
                  <a href="#">
                      <i class="fa fa-bars fa-2x"></i>
                       <span class="nav-text">
                           Submenu 1
                       </span>
                   </a>
               </li>
               <li>
                  <a href="#">
                       <i class="fa fa-bars fa-2x"></i>
                       <span class="nav-text">
                           Submenu 2
                       </span>
                   </a>
               </li>
             <p hidden>TU SA KONCI SUBMENU</p>  
           </ul>

           <ul class="logout">
               <li>
                  <a href="/index.php">
                        <i class="fa fa-sign-out fa-2x"></i>
                       <span class="nav-text">
                           Odhlásiť sa
                       </span>
                   </a>
               </li>  
           </ul>
       </nav>
   <zarovnanie>
   <h1>Vitajte, v uživeteľskej sekcii!</h1><br><p>Orientujte sa pomocou navigácie vľavo</p>
   </zarovnanie>
  <style>zarovnanie {
    text-indent: 60px;
    }</style>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
 </body>
   
   <style>@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(https://fonts.googleapis.com/css?family=Titillium Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}


.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}

.main-menu {
background:darkblue;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}

.main-menu>ul {
margin:7px 0;
}

.main-menu li {
position:relative;
display:block;
width:250px;
}

.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
 
}

.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}

.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
 font-family: 'Titillium Web', sans-serif;
}

.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}

.no-touch .scrollable.hover {
overflow-y:hidden;
}

.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}

a:hover,a:focus {
text-decoration:none;
}

nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {
 font-family: 'Titillium Web';
 font-style: normal;
 font-weight: 300;
 src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
</style>
<style>
h1 {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
h2 {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
h3 {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
h4 {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
h5 {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
p {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}

</style>
</html>
</div>

CodePudding user response：

The linear gradient background is wanted on the body element.

A couple of problems in the existing code: the style attribute in body is missing quotes around the value and the background-image has been given a color value but background-images require an image value.

This snippet puts a non-repeating background-image which is a linear-gradient going from top to bottom (the default direction) from blue to cyan.

Note that the body only has the height of its content, you probably want to give it at least the height of the viewport. And of course you will want to change the values within the linear-gradient to get whatever effect you want.

<!DOCTYPE html>
<html>

<head>
  <title>Domov | Webstránka MENU</title>
  <link rel="icon" href="/minimenu.png">
  <meta charset=utf-8>
</head>

<body style="background-image:linear-gradient(blue, cyan);background-size: cover; background-repeat: no-repeat;">
  <div class="area"></div>
  <nav class="main-menu"><img src="https://i.ibb.co/xC42G9x/f19ada7376b147df815f4dc7438317e0-5.png" alt="Trulli" width="155" height="">
    <ul style="background-color:darkblue;">
      <li>
        <a href="/welcome.php">

          <i class="fa fa-home fa-2x"></i>
          <span class="nav-text">
                           Domov
                       </span>
        </a>

      </li>
      <li class="has-subnav">
        <a href="#">
          <i class="fa fa-book fa-2x"></i>
          <span class="nav-text">
                           Domáce úlohy
                       </span>
        </a>
      </li>
      <li class="has-subnav">
        <a href="#">
          <i class="fa fa-users fa-2x"></i>
          <span class="nav-text">
                           Suplovanie
                       </span>
        </a>
      </li>
      <li class="has-subnav">
        <a href="#">
          <i class="fa fa-list fa-2x"></i>
          <span class="nav-text">
                       Známky    
                       </span>
        </a>

      </li>
      <li class="has-subnav">
        <a href="#">
          <i class="fa fa-table fa-2x"></i>
          <span class="nav-text">
                           Rozvrh hodín
                       </span>
        </a>

      </li>
      <li>
        <a href="#">
          <i class="fa fa-leanpub fa-2x"></i>
          <span class="nav-text">
                           Učebný materiál
                       </span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-gamepad fa-2x"></i>
          <span class="nav-text">
                           Hry
                       </span>
        </a>
      </li>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
      <p hidden>TU SA ZACINA SUBMENU</p>
      <li>
        <a href="#">
          <i class="fa fa-bars fa-2x"></i>
          <span class="nav-text">
                           Submenu 1
                       </span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-bars fa-2x"></i>
          <span class="nav-text">
                           Submenu 2
                       </span>
        </a>
      </li>
      <p hidden>TU SA KONCI SUBMENU</p>
    </ul>

    <ul class="logout">
      <li>
        <a href="/index.php">
          <i class="fa fa-sign-out fa-2x"></i>
          <span class="nav-text">
                           Odhlásiť sa
                       </span>
        </a>
      </li>
    </ul>
  </nav>
  <zarovnanie>
    <h1>Vitajte, v uživeteľskej sekcii!</h1><br>
    <p>Orientujte sa pomocou navigácie vľavo</p>
  </zarovnanie>
  <style>
    zarovnanie {
      text-indent: 60px;
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</body>

<style>
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(https://fonts.googleapis.com/css?family=Titillium Web:300);
.fa-2x {
  font-size: 2em;
}
.fa {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
  width: 250px;
  overflow: visible;
}
.main-menu {
  background: darkblue;
  border-right: 1px solid #e5e5e5;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  width: 60px;
  overflow: hidden;
  -webkit-transition: width .05s linear;
  transition: width .05s linear;
  -webkit-transform: translateZ(0) scale(1, 1);
  z-index: 1000;
}
.main-menu>ul {
  margin: 7px 0;
}
.main-menu li {
  position: relative;
  display: block;
  width: 250px;
}
.main-menu li>a {
  position: relative;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  color: #999;
  font-family: arial;
  font-size: 14px;
  text-decoration: none;
  -webkit-transform: translateZ(0) scale(1, 1);
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
}
.main-menu .nav-icon {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
}
.main-menu .nav-text {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 190px;
  font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
  position: absolute;
  left: 0;
  bottom: 0;
}
.no-touch .scrollable.hover {
  overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
  overflow-y: auto;
  overflow: visible;
}
a:hover,
a:focus {
  text-decoration: none;
}
nav {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
nav ul,
nav li {
  outline: 0;
  margin: 0;
  padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
  color: #fff;
  background-color: #5fa2db;
}
.area {
  float: left;
  background: #e2e2e2;
  width: 100%;
  height: 100%;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
</style>
<style>
  h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
  
  h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
  
  h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
  
  h4 {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
  
  h5 {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
  
  p {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
</style>

</html>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/os/181971.html

Prev:scaleX increasing automatically in keyframes
Next:How can i combine 2 data in 1 array with different value?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding