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

Ayrıntılı düzenleme

UNVDLykia

Kilopat

WD40

Ziyaretçi

dgknbzglu

Megapat

MehmetSengul

Picopat

UNVDLykia

Kilopat

MehmetSengul

Picopat

UNVDLykia

Kilopat

MehmetSengul

Picopat

UNVDLykia

Kilopat

MehmetSengul

Picopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz