CSS: Listeyi Yan Yana Yazmak,

Ana içeriğe atla

CSS: Listeyi yan yana yazmak,

Nisan 08, 2017

• Bağlantıyı al
• Facebook
• X
• Pinterest
• E-posta
• Diğer Uygulamalar

Merhaba arkadaşlar , normalde listelemek istediğimiz şeyleri en basit haliyle "ul" ve "li" tagları arasına yazarak listeleriz. Ancak burada bazı sıkıntılar çıkmakta. Yaptığımız liste hep üst üste çıkmakta ve istediğimiz şekle bürünemiyor. örnek vermek gerekirse. şöyle bir yapı oluştursak <ul> <li>Ana Sayfa</li> <li>Hakkımda</li> <li>Sayfalarım</li> <li>Resimlerim</li> <li>Videolarım</li> <li>İletişim</li> </ul> bu yapının görüntüsü şu şekilde karşımıza gelir.

• Ana Sayfa
• Hakkımda
• Sayfalarım
• Resimlerim
• Videolarım
• İletişim

Gördüğünüz gibi burada yalnızca yukarıdan aşağıya listeleme yapmaktayız. özellikle yatay menü yapmak isteyenler bu durumu çözmelidir. Bunun için aşağıdaki gibi bir html - css yapısı oluşturmanız yeterli olacaktır. html yapısı

<li>Ana Sayfa</li> <li>Hakkımda</li> <li>Sayfalarım</li> <li>Resimlerim</li> <li>Videolarım</li> <li>İletişim</li>

css yapısı .menu{ list-style: none display: block; } .menu li{ display: inline; margin: 10px; position: relative; } son hali

• Ana Sayfa
• Hakkımda
• Sayfalarım
• Resimlerim
• Videolarım
• İletişim

Gördüğünüz gibi artık dikey değil yatay bir listemiz var. <li> <ul> CSS dizmek li menü yapımı ul yan yana

• Bağlantıyı al
• Facebook
• X
• Pinterest
• E-posta
• Diğer Uygulamalar

Yorumlar

1. jhon5 Aralık 2020 17:36

   teşekkürler

   YanıtlaSilYanıtlar
   Yanıtla
2. asd12324 Ocak 2021 20:50

   saolun

   YanıtlaSilYanıtlar
   Yanıtla
3. Adsız13 Şubat 2022 21:52

   +1

   YanıtlaSilYanıtlar
   Yanıtla

Yorum ekleDaha fazlasını yükle...

Yorum Gönder

Popüler Yayınlar

ŞİİR: Yılmaz Erdoğan - Sevgilim Yoksa Sen ...

Hiçbir yerinde yok asaletin ibresi Sesinde kamaşmasında tensel bir büyünün Atlas hani libas ve kuytu bakışlı mavi gözlerin Sanki hepimize bütün şiirleri hala fısıldayan Bir eski büyük şairmiş gibi Aşk bir erken didişme bir sorgu sualmiş de Mezbele ve yaralıymtş eski yaraların yeniden kanamasından. Hiçbir yerde yok asaletin ibresi Bir adamın yüzünde ya da yalana çok benzeyen bir doğru sözünde belki..... Saçlarının çevriminde ıslak bir beyaz kadının Yüksek rakımlı göllerin buzul saflığında Ve kokusunda çiçeklerinin Kanireşin Elbet şiir olacak şairin tesellisi Ve en kötüsü bile işe yarayacak aşkiaşmaiarın Yazana değilse biie okuyana faydalı Bak aynı başına gelmiş adamın benim başıma gelen O da üzülmüş aynı benim gibi .... benimki daha acıklı değil onunkinden, fiyakalı değil onun acısı benimkinden Sade güzel olan kelimeler.. sade kelime!er... kelimeler.... Sen aşka aşıksın müsaitsin gördüğünü abartmaya Biz olsa olsa bir müddet aşklaştık aşkım aşık olmadık Bîr eli

CSS: Responsive Nedir? Responsive Tasarım Nasıl Yapılır?

Responsive Nedir?           Responsive tasarım; web tasarımında kullanılan bir terimdir. Sitenizin görsel olarak cihazın veya browserın ölçülerine uyum sağlaması anlamındadır. Yapmış olduğunuz sitenin farklı platformlara uygun olarak tasarlanmasıdır. Yazılar, resimler, videolar vs. gibi bütün elemanlar kendi yapacağınız ölçeklendirme ve dizayna göre şekil değiştirdiği gibi yer de değiştirebilir.           Responsive tasarımın faydaları şöyle sıralanabilir.                1- Daha güzel bir görsellik sunar                2- Web sitesinin kullanımında ziyaretçiyi yormaz.                3- Site içi karışıklığı önler.                4- Küçük ekranlı cihazlarda çok daha rahat kullanım sağlar.           Bu faydaları daha da uzatabiliriz.           Responsive tasarımda genelde 5 farklı model belirlenir. Bunlar hem masaüstü bilgisayarlar hem de mobil cihazlara uygunluk açısından belirlenmiştir.                 1. Ölçü: Maksimum 480px (Dikey pozisyonda cep telefonu)