HTML'de liste girintili çıkıntılı nasıl yapılır?

qdexz_vl · 10 Ekim 2024

HTML'e yeni başladım ve örnekler yaparak kendimi geliştirmeye çalışıyorum. Fakat fotoğraftaki listeyi girintili çıkıntılı yapamıyorum çok kez denedim onun ayarı nedir? Neyi yanlış yapıyorum veya yapamıyorum anlatabilir misiniz?

1. resim yapmaya çalıştığım resim
2. resim benim yaptığım liste
3. resim yaptığım kod

caged_gorillabas · 10 Ekim 2024

ul etiketlerini iç içe yuvalamalısın, "nested" bir hale getirmelisin, şu şekilde:

HTML:

<ul type="disc">
    <li>Anakart</li>
    <li>RAM</li>
    <ul type="circle"> <!-- buraya dikkat -->
        <li>statik</li>
        <li>dinamik</li>
    </ul>
    <li>klavye</li>
    <!-- buradan devam -->
</ul>

Şöyle düşünürsen kolay anlaşılır:

Senin paylaştığın kodda, birbirinden bağımsız 2 farklı liste (ul) var.

Benim paylaştığım kodda ise tek bir ul var, bir diğer ul de onun elemanı.

qdexz_vl · 10 Ekim 2024

caged_gorillabas dedi:
ul etiketlerini iç içe yuvalamalısın, "nested" bir hale getirmelisin, şu şekilde:

HTML:

<ul type="disc"> <li>Anakart</li> <li>RAM</li> <ul type="circle">  <li>statik</li> <li>dinamik</li> </ul> <li>klavye</li>  </ul>

Şöyle düşünürsen kolay anlaşılır:

Senin paylaştığın kodda, birbirinden bağımsız 2 farklı liste (ul) var.

Benim paylaştığım kodda ise tek bir ul var, bir diğer ul de onun elemanı.

Tamam teşekkürler

caged_gorillabas dedi:
ul etiketlerini iç içe yuvalamalısın, "nested" bir hale getirmelisin, şu şekilde:

HTML:

<ul type="disc"> <li>Anakart</li> <li>RAM</li> <ul type="circle">  <li>statik</li> <li>dinamik</li> </ul> <li>klavye</li>  </ul>

Şöyle düşünürsen kolay anlaşılır:

Senin paylaştığın kodda, birbirinden bağımsız 2 farklı liste (ul) var.

Benim paylaştığım kodda ise tek bir ul var, bir diğer ul de onun elemanı.

Yine olmadı?

Syeux · 10 Ekim 2024

HTML:

    <ul>
        <li>anakart</li>
        <li>ram
            <ul>
                <li>statik</li>
                <li>dinamik</li>
            </ul>
        </li>
        <li>klavye
            <ul>
                <li>kablolu</li>
                <li>kablosuz
                    <ul>
                        <li>wireless</li>
                        <li>bluetooth</li>
                        <li>infra red</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>klavye</li>
        <li>sabitdisk
            <ul>
                <li>ssdi</li>
                <li>sata</li>
                <li>pata</li>
            </ul>
        </li>
    </ul>

qdexz_vl · 11 Ekim 2024

Syeux dedi:

HTML:

    <ul>
        <li>anakart</li>
        <li>ram
            <ul>
                <li>statik</li>
                <li>dinamik</li>
            </ul>
        </li>
        <li>klavye
            <ul>
                <li>kablolu</li>
                <li>kablosuz
                    <ul>
                        <li>wireless</li>
                        <li>bluetooth</li>
                        <li>infra red</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>klavye</li>
        <li>sabitdisk
            <ul>
                <li>ssdi</li>
                <li>sata</li>
                <li>pata</li>
            </ul>
        </li>
    </ul>

Fark ne?

Syeux · 11 Ekim 2024

qdexz_vl dedi:
Fark ne?

ul yi div gibi düşün. Grup içinde grup oluşturuyorsun htmlin mantığı bu. Farkındaysan hepsi tek bir ul içinde olduğu için grupluyor.

qdexz_vl · 11 Ekim 2024

Syeux dedi:
Ul yi div gibi düşün. Grup içinde grup oluşturuyorsun HTML'in mantığı bu. Farkındaysan hepsi tek bir ul içinde olduğu için grupluyor.

Hayır hocam onu demiyorum benim 2. attığımla sizin attığınız aynı ama benimki olmuyor ya da farklı ama farkı ben görmüyorum 2. attığım SS'e bakın bir isterseniz

BigDesigner · 14 Ekim 2024

Problemler ve Çözümler:

İç içe geçmiş listelerin mantıksız kullanımı:
- "Klavye" öğesi iki kez kullanılmış ve farklı listeler içinde yer almaktadır. Bu durum, içeriğin anlaşılmasını zorlaştırmaktadır.
- Listelerin hiyerarşisi, bileşenler arasındaki ilişkiyi doğru bir şekilde yansıtmamaktadır.
"squared" tipi liste kullanımı:
- HTML'de standart bir "squared" liste tipi bulunmamaktadır. Bu, tarayıcılar tarafından farklı şekilde yorumlanabilir. "square" yerine "disc" veya "circle" gibi standart tipler kullanılmalıdır.
Kapatılmamış listeler:
- Kodda bazı listelerin kapanış etiketleri (</ul>) eksik veya yanlış yerde kullanılmıştır.

Düzenlenmiş Kod:

HTML:

<ul>
    <li>Anakart</li>
    <li>RAM
        <ul>
            <li>Statik</li>
            <li>Dinamik</li>
        </ul>
    </li>
    <li>Klavye
        <ul>
            <li>Kablolu</li>
            <li>Kablosuz
                <ul>
                    <li>Wi-Fi</li>
                    <li>Bluetooth</li>
                    <li>Infra Red</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Sabit Disk
        <ul>
            <li>SSD</li>
            <li>SATA</li>
            <li>PATA</li>
        </ul>
    </li>
</ul>

Düzenleme Açıklaması:

Klavye öğesi: İki farklı klavye türü olduğu için "Kablolu" ve "Kablosuz" olarak iki ayrı liste öğesi altında toplanmıştır.
Liste hiyerarşisi: Bileşenler arasındaki ilişkiyi daha iyi yansıtmak için listelerin hiyerarşisi düzenlenmiştir. Örneğin, "Kablosuz" klavyelerin alt türleri ayrı bir liste içinde gösterilmiştir.
Liste tipleri: Tüm listeler için standart olan "disc" veya "circle" tipleri kullanılmıştır. "squared" tipi kaldırılmıştır.
Kapanış etiketleri: Tüm listelerin kapanış etiketleri eksiksiz ve doğru yerlerde kullanılmıştır.

Umarım anlaşılır olmuştur.

HTML'de liste girintili çıkıntılı nasıl yapılır?

Ayrıntılı düzenleme

qdexz_vl

Hectopat

caged_gorillabas

Centipat

qdexz_vl

Hectopat

Syeux

Hectopat

qdexz_vl

Hectopat

Syeux

Hectopat

qdexz_vl

Hectopat

BigDesigner

Centipat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz