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
Post a Comment