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

UNVDLykia · 10 Kasım 2020

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>

WD40 · 10 Kasım 2020

CSS Selector’lere bakmanızı öneririm. Atacağım linkte sorunuzun cevabı var. Ezberlemeniz Gereken 30 CSS Seçicisi

dgknbzglu · 10 Kasım 2020

UNVDLykia dedi:

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.

MehmetSengul · 10 Kasım 2020

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

dgknbzglu dedi:
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.

UNVDLykia · 10 Kasım 2020

Çok teşekkür ederim.

MehmetSengul · 10 Kasım 2020

İstediğiniz şeyi yapabildiniz değil mi? @UNVDLykia

UNVDLykia · 10 Kasım 2020

MehmetSengul dedi:
İstediğiniz şeyi yapabildiniz değil mi? @UNVDLykia

Dediğiniz şey yapmak istediğim ama sizin dediğiniz gibi yaptığımda bütün herşey kayboluyor. Yapamadım.

MehmetSengul dedi:
İstediğiniz şeyi yapabildiniz değil mi? @UNVDLykia

Size canlı olarak bir yerden gösterebilir miyim? Bunu sanırım görmeden anlamayacağım.

MehmetSengul · 10 Kasım 2020

Merhaba; bugün 13:00 - 14:00 arasında musaitim yardımcı olabilirim. Discord üzerinden iletişime geçelim. Discord adresinizi verirseniz yardımda bulunabilirim.

UNVDLykia · 10 Kasım 2020

UNNIVD-Lykia#5187 discord kodum; çok teşekkür ederim ilginizden dolayı.

MehmetSengul · 10 Kasım 2020

Sorun arkadaşla iletişime geçilip çözülmüştür konu kiitlenebilir.

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

UNVDLykia

Kilopat

WD40

Ziyaretçi

dgknbzglu

Megapat

MehmetSengul

Picopat

UNVDLykia

Kilopat

MehmetSengul

Picopat

UNVDLykia

Kilopat

MehmetSengul

Picopat

UNVDLykia

Kilopat

MehmetSengul

Picopat