Home > database >  CSS code problem that shows the navigation bar incorrectly
CSS code problem that shows the navigation bar incorrectly

Time：01-16

There is something wrong with my CSS code, once I added the CSS code of the products (starting from #lap) the navigation bar showed incorrectly, and when I remove the "}" that close "@keyframe slide" the navigation bar shows correctly but ofc the products CSS code doesn't render cuz "@keyframe slide" remains unclosed.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:#006CDA;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 18px 14px;
  text-decoration: none;
  transition-duration: 0.5s;
}
li a:hover {
     background-color: #0566C9;
     transform: scale(1.1);
     margin-left: 15px;
}

input{
    width: 700px;
    height: 40px;
    background-color: #F4F3EC    ;
    border: none;
    margin-top: 7px;
    outline: none;
}
select{
    width: 140px;
    height: 40px;
    background-color: #F4F3EC;
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
    color: #0335AA;
      background-color: #D9D8D4;
      border: none;
      font-size: 14px;
      margin-top: 7px;
      outline: none;
      cursor: pointer;
}
select:hover{
    background-color: #C1C1C1;
}
button{
    width: 60px;
    height: 40px;
    color: #0335AA;
    background-color: #D9D8D4;
    border: none;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
    margin-top: 7px;
    outline: none;
    cursor: pointer;
}
button:hover{
    background-color: #C1C1C1;
}
.slider{
    width:1500px;
    height:500px;
    background: url(dvc.jpeg);
    margin:70px auto;
    background-repeat: no-repeat;
    border-radius: 9px;
    animation-name: slide ;
    animation-duration: 20s;
    animation-iteration-count: infinite;    
}

@keyframes slide{
25%{
    background: url(dvc.jpeg);


}
50%{
    background: url(hoap.jpg);

}
75%{
    background: url(outfit.jpg);

}
100%{
    background: url(vdg.jpg);
}
} 
#lap{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top:  -40px;
    margin-left: 120px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#lap:hover{
    transform: scale(1.08);
    }
#tv{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -395px;
    margin-left: 440px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#tv:hover{
    transform: scale(1.08);
    }
#ps{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -395px;
    margin-left: 760px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#ps:hover{
    transform: scale(1.08);
                }
#gp{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -395px;
    margin-left: 1080px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#gp:hover{
    transform: scale(1.08);
    }
#gm{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left: 1080px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#gm:hover{
    transform: scale(1.08);
    }
#tn{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -415px;
    margin-bottom: -405px;
    margin-left: 760px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#tn:hover{
    transform: scale(1.08);
    }
#pt{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: 10px;
    margin-bottom: -420px;
    margin-left: 440px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#pt:hover{
    transform: scale(1.08);
    }
#snk{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: 25px;
    margin-left: 120px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#snk:hover{
    transform: scale(1.08);
    }
i{
    font-family:verdana;
    color: #3153BF;
    font-size: 19px;
    margin-left: 15px;
                }
img{
    width: 270px;
    margin-left: 15px;
                }
.prd{
    text-decoration:none;
    font-family:verdana;
    color: #3153BF;
                }
p{
    margin-left: 15px;
                }
<!doctype html>
    <html>
        <head>
            <title>Home</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="home.css">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
        </head>

        <body style="background-color:#E5E5E2;">
<!--navigation bar-->
    <ul>
        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/home.html"><i  style="font-size:20px;font-">&ensp;home</i></a></li>

        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/login.html"><i  style="font-size:20px;">&ensp;login</i></a></li>
        
        <li>
            &ensp;&ensp;<select>
                <option>all categories</option>
                <option>electronic devices</option>
                <option> video games</option>
                <option>sports equipment</option>
                <option>home appliances</option>
                <option>outfits</option>
            </select>
        </li>

        <li><form>
            <label for name="search"></label>
            <input  type="search" name="search" placeholder="&ensp;search...">
        </form></li>

        <li><button><i  style="font-size:18px;"></i></button></li>
        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/shipping.html">&ensp;&ensp;<i  style="font-size:20px;">&ensp;&ensp;shipping</i></a></li>

        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/cart.html">&ensp;<i  style="font-size:20px;">&ensp;cart</i></a></li>
        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/help.html?file=&submit=Submit">&ensp;&ensp;<i  style="font-size:20px;">&ensp;help</i></a></li>
    </ul>
<!--slider show-->

    <div ></div>

<!--products-->

            <div  id="lap">
                <i > Electronic devices</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product1.html" >
    <img src="lap.jpg" alt="laptop"></img>
    <p style="text-align:left;">HP laptop 15s-fq2xxx<br><br><strong>799&euro;</strong></p>
</a>
</div>
                
            <div id="tv">
                <i > Home applience</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product2.html">
    <img src="tv.jpg" alt="tv" ></img>
    <p>Samsung QE55QN85AATXXU 55" <br><br><strong>1000&euro;</strong></p>
</a>
</div>
            <div id="ps">
                <i > Video games</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product3.html" >
    <img src="ps5.jpg" alt="ps5"></img>
    <p>PlayStation 5 <br><br><strong>499,99&euro;</strong></p>
</a>
</div>
            <div id="gp">
                <i > Electronic devices</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product4.html">
    <img src="gopro.jpg" alt="gopro"></img>
    <p>GoPro Hero 9 <br><br><strong>319&euro;</strong></p>
</a>
</div>

        <div id="gm">
            <i > Video games</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product8.html">
    <img src="game2.jpg" alt="game" style="padding-top: 20px;"></img>
    <p>The last of us 2 <br><br><strong>59,99&euro;</strong></p>
</a>
</div> 
            <div id="tn">
                <i > Sports equipment</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product6.html">
    <img src="tn2.jpg" alt="sporty outfit" style="padding-top: 20px;"></img>
    <p>PSG Kit <br><br><strong>99,99&euro;</strong></p>
</a>
</div>

            <div id="pt">
                <i > Outfits</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product7.html">
    <img src="pants2.png" alt="pants" style="padding-top: 20px;"></img>
    <p>&ensp;&ensp;Fit Trouser Pants <br><br><strong>39&euro;</strong></p>
</a>
</div>
                
                
            <div id="snk">
                <i > Sports equipment</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product5.html">
    <img src="nike.jpg" alt="sneakers"></img>
    <p>Nike Sneakers <br><br><strong>149.99&euro;</strong></p>
</a>
</div>
        </body>
    </html>

CodePudding user response：

I think your issue is with:

i{
    font-family:verdana;
    color: #3153BF;
    font-size: 19px;
    margin-left: 15px;
                }

It's styling all i of the whole document, not just the i you want. So instead I would add a class to all the i you want styled and style just that class. As far as I can tell .fa-list fits the description so change it to:

.fa-list {
        font-family:verdana;
        color: #3153BF;
        font-size: 19px;
        margin-left: 15px;
                    }

Which seems to have the class of only the i you want to style

Here's it working:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:#006CDA;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 18px 14px;
  text-decoration: none;
  transition-duration: 0.5s;
}
li a:hover {
     background-color: #0566C9;
     transform: scale(1.1);
     margin-left: 15px;
}

input{
    width: 700px;
    height: 40px;
    background-color: #F4F3EC    ;
    border: none;
    margin-top: 7px;
    outline: none;
}
select{
    width: 140px;
    height: 40px;
    background-color: #F4F3EC;
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
    color: #0335AA;
      background-color: #D9D8D4;
      border: none;
      font-size: 14px;
      margin-top: 7px;
      outline: none;
      cursor: pointer;
}
select:hover{
    background-color: #C1C1C1;
}
button{
    width: 60px;
    height: 40px;
    color: #0335AA;
    background-color: #D9D8D4;
    border: none;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
    margin-top: 7px;
    outline: none;
    cursor: pointer;
}
button:hover{
    background-color: #C1C1C1;
}
.slider{
    width:1500px;
    height:500px;
    background: url(dvc.jpeg);
    margin:70px auto;
    background-repeat: no-repeat;
    border-radius: 9px;
    animation-name: slide ;
    animation-duration: 20s;
    animation-iteration-count: infinite;    
}

@keyframes slide{
25%{
    background: url(dvc.jpeg);
}
50%{
    background: url(hoap.jpg);

}
75%{
    background: url(outfit.jpg);

}
100%{
    background: url(vdg.jpg);
}
} 
#lap{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top:  -40px;
    margin-left: 120px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#lap:hover{
    transform: scale(1.08);
    }
#tv{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -395px;
    margin-left: 440px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#tv:hover{
    transform: scale(1.08);
    }
#ps{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -395px;
    margin-left: 760px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#ps:hover{
    transform: scale(1.08);
                }
#gp{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -395px;
    margin-left: 1080px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#gp:hover{
    transform: scale(1.08);
    }
#gm{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left: 1080px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#gm:hover{
    transform: scale(1.08);
    }
#tn{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: -415px;
    margin-bottom: -405px;
    margin-left: 760px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#tn:hover{
    transform: scale(1.08);
    }
#pt{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: 10px;
    margin-bottom: -420px;
    margin-left: 440px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#pt:hover{
    transform: scale(1.08);
    }
#snk{
    width: 300px;
    height: 380px;
    background-color: white;
    border-radius: 9px;
    margin-top: 25px;
    margin-left: 120px;
    padding-top: 15px;
    transition-duration: 1s;
    }
#snk:hover{
    transform: scale(1.08);
    }
.fa-list {
        font-family:verdana;
        color: #3153BF;
        font-size: 19px;
        margin-left: 15px;
                    }
img{
    width: 270px;
    margin-left: 15px;
                }
.prd{
    text-decoration:none;
    font-family:verdana;
    color: #3153BF;
                }
p{
    margin-left: 15px;
                }
<html>
        <head>
            <title>Home</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="home.css">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
        </head>

        <body style="background-color:#E5E5E2;">
<!--navigation bar-->
    <ul>
        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/home.html"><i  style="font-size:20px;font-">&ensp;home</i></a></li>

        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/login.html"><i  style="font-size:20px;">&ensp;login</i></a></li>
        
        <li>
            &ensp;&ensp;<select>
                <option>all categories</option>
                <option>electronic devices</option>
                <option> video games</option>
                <option>sports equipment</option>
                <option>home appliances</option>
                <option>outfits</option>
            </select>
        </li>

        <li><form>
            <label for name="search"></label>
            <input  type="search" name="search" placeholder="&ensp;search...">
        </form></li>

        <li><button><i  style="font-size:18px;"></i></button></li>
        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/shipping.html">&ensp;&ensp;<i  style="font-size:20px;">&ensp;&ensp;shipping</i></a></li>

        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/cart.html">&ensp;<i  style="font-size:20px;">&ensp;cart</i></a></li>
        <li><a href="file:///C:/Users/Gh0st/Desktop/project.main/help.html?file=&submit=Submit">&ensp;&ensp;<i  style="font-size:20px;">&ensp;help</i></a></li>
    </ul>
<!--slider show-->

    <div ></div>

<!--products-->

            <div  id="lap">
                <i > Electronic devices</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product1.html" >
    <img src="lap.jpg" alt="laptop"></img>
    <p style="text-align:left;">HP laptop 15s-fq2xxx<br><br><strong>799&euro;</strong></p>
</a>
</div>
                
            <div id="tv">
                <i > Home applience</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product2.html">
    <img src="tv.jpg" alt="tv" ></img>
    <p>Samsung QE55QN85AATXXU 55" <br><br><strong>1000&euro;</strong></p>
</a>
</div>
            <div id="ps">
                <i > Video games</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product3.html" >
    <img src="ps5.jpg" alt="ps5"></img>
    <p>PlayStation 5 <br><br><strong>499,99&euro;</strong></p>
</a>
</div>
            <div id="gp">
                <i > Electronic devices</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product4.html">
    <img src="gopro.jpg" alt="gopro"></img>
    <p>GoPro Hero 9 <br><br><strong>319&euro;</strong></p>
</a>
</div>

        <div id="gm">
            <i > Video games</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product8.html">
    <img src="game2.jpg" alt="game" style="padding-top: 20px;"></img>
    <p>The last of us 2 <br><br><strong>59,99&euro;</strong></p>
</a>
</div> 
            <div id="tn">
                <i > Sports equipment</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product6.html">
    <img src="tn2.jpg" alt="sporty outfit" style="padding-top: 20px;"></img>
    <p>PSG Kit <br><br><strong>99,99&euro;</strong></p>
</a>
</div>

            <div id="pt">
                <i > Outfits</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product7.html">
    <img src="pants2.png" alt="pants" style="padding-top: 20px;"></img>
    <p>&ensp;&ensp;Fit Trouser Pants <br><br><strong>39&euro;</strong></p>
</a>
</div>
                
                
            <div id="snk">
                <i > Sports equipment</i>
<a  href="file:///C:/Users/Gh0st/Desktop/project.main/product5.html">
    <img src="nike.jpg" alt="sneakers"></img>
    <p>Nike Sneakers <br><br><strong>149.99&euro;</strong></p>
</a>
</div>
        </body>
    </html>

Page link：https//www.codepudding.com/database/265084.html

Prev:How to make a dropdown menu transition with CSS?
Next:Bootstrap 5 justify-content not working correctly and cannot vertically center content
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding