Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS I can't get the unordered list

jamesdorr

New Coder
I'm trying to make a unordered list, but it doesn't work. I think the problem comes from the css file. At first I thought the problem was from section, but then I decided to try only the code for the unordered list in a new blank html file where everything turned out as it should. At the moment I think the problem comes from the css file. In nav-link ul ul li{ist-style:none; ... } i remove this but it seems that it didnt work, i really dont understand where is the problem.
1 — ImgBB[^]
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Heaven Glasses</title>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<section class="header">
        <a href="#" class="logo"><img src="images/logo5.png"></a>
        <nav>
           <!-- <a href="#" class="logo"><img src="images/logo4.png"></a> -->
            <div class="nav-links">
            <ul>
                <li><a href="">HOME</a></li>
            
                 <li>
                    <a href="#">ABOUT</a>
                  <ul>
                      <li><a href="#">Who we are</a></li>
                      <li><a href="#">Culture</a></li>
                      <li><a href="#">Team</a></li>
                  </ul>
                  </li>
            
                  <li>
                    <a href="#">PARTNERS</a>
                    <ul>
                        <li><a href="#">Alpha Micron</a></li>
                        <li><a href="#">Optic Sofia </a></li>
                    </ul> 
                </li>
    
                <li><a href="#">HEAVEN GLASSES</a>
                    
                        <ul>
                            <li><a href="#">Product</a></li>
                            <li><a href="#">Glasses</a>
                                <ul>
                                    <li><a href="#">Women</a></li>
                                    <li><a href="#">Man</a></li>
                                </ul>
                            </li>
                        </ul>
                </li>   
                
                <li><a href="#">REVIEWS</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>   
            </div>
        </nav>
 
<div class="text-box">
    <h1 >Smart, trendy eyewear</h1>
    <p>Prescription Eyeglasses<br>Heaven Glasses as boldly ventured where few other glasses have dared to go, <br>
        by integrating cutting-edge technology and high-end fashion. The glasses come with a crafted dual-zipper case, <br>
        allowing you to stand out from the crowd, and express yourself in new ways.
    </p>
    <a href=""class="btn">VISIT US TO KNOW MORE</a>
</div>
</section>


<section class="modes">
    <h1>Heaven Glasses Modes</h1>
    <p>Heaven Glasses contain three modes. They are designed so that each mode is easily accessible and everywhere with you!</p>
    
    <div class="row">
        <div class="gif-col">
            <img src="images/gif glasses.gif">
            <div class="layer">
                <h3>Heaven Glasses Modes</h3>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="modes-col">
            <h3>Steam</h3>
            <p>The glasses are designed with a built-in sensor to detect humidity and when you turn on "Steam mode", the glasses will automatically dry!</p>
        </div>
      
        <div class="modes-col">
            <h3>Sunny</h3>
            <p>"Sunny mode" allows you to turn your glasses into sunglasses with one touch!</p>
        </div>
        
        <div class="modes-col">
            <h3>Vision</h3>
            <p>Vission mode is perfect for situations where you need to focus your vision in low light and fog!</p>
        </div>
    </div>
</section>

   <div class="container">
        <h2>THE PERFECT BALANCE OF PERFORMANCE AND COMFORT</h2>
        <p>We understand that wearability is primary for users. Whether you are - outside, in the woods or at home,our solutions make you
            better at what you do with all-day comfort and versatility.</p>
    </div>
         <section>
          <h2>We give you:</h2>
          <ul>
              <li>something</li>
              <li>something 1</li>
              <li>something 3</li>
              <li>something 4</li>
          </ul>
          </section>



CSS:
*
{
    margin: 0;
    padding: 0;
    font-family: 'Popins', sans-serif;
}

.header{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(12, 12, 12, 0.514),
      rgba(83, 83, 83, 0.288)), url(images/korica.jpg);
    
    background-position: center;
    background-size: cover;
    position: relative;   
    display: flex;
    align-items: start;
}

nav{
     display: flex;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1; 
}

.header img{
    padding-top: 2%;
    width: 260px;
}

.nav-links{
     flex: 1;
    text-align: right;
}

.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a{
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 2px 4px;
}

nav ul li a:hover{
    color: #e9d66b;
    border-radius: 5px;
    box-shadow: 0 0 5px #ffaf1a,
    0 0 5px #ffb833;
}

nav ul ul{
    position: absolute;
    top: 100px;
    border-top: 2px solid rgb(255,179,71);
    opacity: 0;
    visibility: hidden;
    border-top:none;
}

nav ul li:hover>ul{
    top: 40px;
    opacity: 1;
    visibility: visible;
}

nav ul ul li{
   position: relative;
   margin: 0px;
   width: 150px;
   float: none;
   display: list-item;
   border-bottom: 1px solid rgba(0,0,0,0,.3);
   text-align: left;
}

nav ul ul li:hover ul {
    border-top: none;
    top: 0;
    left: 100px;
  }
 

.nav-links ul ul ul li a {
    position:  block;
    margin-left: 10px;
    top: 0;
}

.text-box{
    width: 90%;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.text-box h1{
    font-size: 60px;
}

.text-box p{
    margin: 10px 0 40px;
    font-size: 16px;
    font-weight: 500;
    color: white;
    background: rgba(255, 255, 255, 0.096);
    padding: 20px;
    border-radius: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.0996);
    border-right: 1px solid rgba(255,255,255, 0.0996);
    box-shadow: var(--box-shadow);
    
}

.btn{
    display: inline-block;
    text-decoration: none;
    color: white;
    border: 1px solid white;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.btn:hover{
    border: 1px solid #FF8C00;
    background: #FF8C00;
    transition: 1s;
}



.modes{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}

h1{
    font-size: 36px;
    font-weight: 600;
}


.gif-col{
    flex-basis: 50%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.layer h3{
    color: black;
    opacity: 0;
    transition: 0.5s;
}

.layer:hover h3{
    bottom: 49%;
    opacity: 1;
}


p{
    color: #777;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}

.row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}

.modes-col{
    flex-basis: 31%;
    background: #e0be603a;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}

h3{
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
}

.modes-col:hover{
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
}

/*div class container*/
.container h2{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
}

.container p{
    text-align:justify;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 300;


/* i didnt make part here for the last section, because whatever I do, it does not work*/
}
 
You say you're having trouble with an unordered list which is at the end of your code:
Code:
<section>
    <h2>We give you:</h2>
    <ul>
        <li>something</li>
        <li>something 1</li>
        <li>something 3</li>
        <li>something 4</li>
    </ul>
</section>
BUT, you also mention "...I think the problem comes from the css file. In nav-link ul ul li{ist-style:none; ... }" which refers to a menu.

What are you having trouble with, the menu or the list?

You don't have any styling for the list and the menu is overly complicated and the menu doesn't really work correctly.
 
You say you're having trouble with an unordered list which is at the end of your code:
Code:
<section>
    <h2>We give you:</h2>
    <ul>
        <li>something</li>
        <li>something 1</li>
        <li>something 3</li>
        <li>something 4</li>
    </ul>
</section>
BUT, you also mention "...I think the problem comes from the css file. In nav-link ul ul li{ist-style:none; ... }" which refers to a menu.

What are you having trouble with, the menu or the list?

You don't have any styling for the list and the menu is overly complicated and the menu doesn't really work correctly.

it is related tothis:
Code:
<section>
    <h2>We give you:</h2>
    <ul>
        <li>something</li>
        <li>something 1</li>
        <li>something 3</li>
        <li>something 4</li>
    </ul>
</section>
when I do it in a separate file without any layout in css everything goes fine, but when it is related to the whole project it just doesn't work. I really dont understand why

"In nav-link ul ul li{ist-style:none; ... } " - i sayed this because at some point i thinked that this is exactly what plays a role, but I was wrong
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom