HTML Farklı <ul> ve <li> aynı css komutu gitmesi

UNVDLykia

Kilopat
Katılım
26 Kasım 2014
Mesajlar
156
Makaleler
3
Çözümler
1
Yer
Kahramanmaraş
Daha fazla  
Cinsiyet
Erkek
Selamlar bir ödevim için site tasarlıyorum. Bir sıkıntım var. Farklı yerlerde olan <ul> ve <li> ler için aynı css komutları gidiyor ve aynı animasyonlar gerçekleşiyor. Bunları nasıl ayırabilirim? Aşağıda kodu bırakıyorum;
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap" rel="stylesheet">
</head>
<body>                                             
<div id="sosyal">
     <font>MCOLLECTION | </font> <span>GIYIM VE TARZ ZAMANI</span>
    
     <ul>
    
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkımda</a></li>
    <li><a href="#">İletişim</a></li>
        
</ul>
     </div>
    
    <div id="container">
        
        
        <header>
        <img id="headerresim" src="images/header.png" alt="">
        </header>
        
        
        <section>
          
       <nav>
        <ul>
          
           <li><a href="index.html">Genç Giyim</a></li>
             <li><a href="kadingiyim.html">Kadın Giyim</a></li>
             <li><a href="erkekgiyim.html">Erkek Giyim</a></li>
             <li><a href="cocukgiyim.html">Çocuk Giyim</a></li>
             </ul>
        
        </nav>
      
        <main>İçerikler Gelecek
        </main>
        
        
          </section>
        <footer>Tüm Hakları Saklıdır &copy;</footer>
        
        
        
        
        
        
        
        
        
    </div>
 
Selamlar bir ödevim için site tasarlıyorum. Bir sıkıntım var. Farklı yerlerde olan <ul> ve <li> ler için aynı css komutları gidiyor ve aynı animasyonlar gerçekleşiyor. Bunları nasıl ayırabilirim? Aşağıda kodu bırakıyorum;
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap" rel="stylesheet">
</head>
<body>                                            
<div id="sosyal">
     <font>MCOLLECTION | </font> <span>GIYIM VE TARZ ZAMANI</span>
   
     <ul>
   
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkımda</a></li>
    <li><a href="#">İletişim</a></li>
       
</ul>
     </div>
   
    <div id="container">
       
       
        <header>
        <img id="headerresim" src="images/header.png" alt="">
        </header>
       
       
        <section>
         
       <nav>
        <ul>
         
           <li><a href="index.html">Genç Giyim</a></li>
             <li><a href="kadingiyim.html">Kadın Giyim</a></li>
             <li><a href="erkekgiyim.html">Erkek Giyim</a></li>
             <li><a href="cocukgiyim.html">Çocuk Giyim</a></li>
             </ul>
       
        </nav>
     
        <main>İçerikler Gelecek
        </main>
       
       
          </section>
        <footer>Tüm Hakları Saklıdır &copy;</footer>
       
       
       
       
       
       
       
       
       
    </div>

CSS kodlarına;

CSS:
.ustmenu {
//elementler
}

.altmenu {
//elementler
}

ekleyip, HTML kodunda <li> olan kısımları;

HTML:
<li class="ustmenu"><a href="#">Anasayfa</a></li>
<li class="ustmenu"><a href="#">Hakkımda</a></li>
<li class="ustmenu"><a href="#">İletişim</a></li>


<li  class="altmenu"><a href="kadingiyim.html">Kadın Giyim</a></li>
<li  class="altmenu"><a href="erkekgiyim.html">Erkek Giyim</a></li>
<li  class="altmenu"><a href="cocukgiyim.html">Çocuk Giyim</a></li>

şeklinde düzeltirsen hangi sınıfa hangi elementi verdiysen o şekilde görünür.
 
Merhaba; bir sayfada birden fazla ul li kullanarak her menüye (ul-li'ye) farklı CSS vermek istiyorsunuz anladığım kadarıyla.

Çözümü basit
1 - Yeni bir ul li açıyorsunuz ve ul'unuza class tanıyorsunuz.
HTML:
<ul class="List-1">
<li><a href="#"></a></li>
</ul>
2 - CSS Kısmından'da bu ul'u kapsayan class'ı çağırarak hem ul'a hemde ul'un childlerine yani altında bulunan kodlara css verebilirsiniz örnek olarak:
CSS:
.List-1 li {
display:block;
background: #f5f5f5;
padding 12px 15px;
}
.List-1 li a{
color:black;
}
İyi Forumlar
CSS kodlarına;

CSS:
.ustmenu {
//elementler
}

.altmenu {
//elementler
}

ekleyip, HTML kodunda <li> olan kısımları;

HTML:
<li class="ustmenu"><a href="#">Anasayfa</a></li>
<li class="ustmenu"><a href="#">Hakkımda</a></li>
<li class="ustmenu"><a href="#">İletişim</a></li>


<li  class="altmenu"><a href="kadingiyim.html">Kadın Giyim</a></li>
<li  class="altmenu"><a href="erkekgiyim.html">Erkek Giyim</a></li>
<li  class="altmenu"><a href="cocukgiyim.html">Çocuk Giyim</a></li>

şeklinde düzeltirsen hangi sınıfa hangi elementi verdiysen o şekilde görünür.
hocam , bu şekilde gereksiz kod yığını oluşuyor sadece ul'a class vererek altındaki li'lerden ilerleyebilirsiniz.
 

Yeni konular

Geri
Yukarı