html - How to classify li tags when we want it 2 times -


i wanted use li tags 2 times first time used class li tag

<ul *class="2"*> <li *class="!"*><.......jpg" width="280" height="280" \></li> <li class="!"><img src="......jpg" width="280" height="280" \></li> 

and 2nd time... did this

<ul>   <li><a href="........html">home</a></li>   <li><a href="........html">songs</a></li>   <li><a href="........html">games</a></li>   <li><a class="active" href=".........html">gallery</a></li> </ul> 

my css

ul {     list-style-type: none;     margin: 0;     padding: 0;     overflow: hidden;     background-color: #333;     position: fixed;     bottom: 0;     width: 100%; }  li {     float: left; }  li {     display: block;     color: white;     text-align: center;     padding: 14px 16px;     text-decoration: none; }  li a:hover:not(.active) {     background-color: #111; }  .active {     background-color: #0066ff; } 

i don't know why overlapping??please tell me if wrong code above.

as lgson said, it's because have

position: fixed  

defined on ul tag css.

if define 1 of them use class name instead (e.g.)

ul {     list-style-type: none;     margin: 0;     padding: 0;     overflow: hidden;     background-color: #333; }  ul.fixedheader {     position: fixed;     bottom: 0;     width: 100%; } 

and html this

<ul *class="2"*> <li *class="!"*><.......jpg" width="280" height="280" \></li> <li class="!"><img src="......jpg" width="280" height="280" \></li> 

and

<ul class="fixedheader">   <li><a href="........html">home</a></li>   <li><a href="........html">songs</a></li>   <li><a href="........html">games</a></li>   <li><a class="active" href=".........html">gallery</a></li> </ul> 

you should go. further, i'm not sure asterisks doing there... seems invalid html me.

please comment if part of didn't make sense.


Comments

Popular posts from this blog

Combining PHP Registration and Login into one class with multiple functions in one PHP file -

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -