Çözüldü HTML listedeki yazılar kutu içerisine nasıl yerleştirilir?

Takumiii · 13 Ekim 2023

Pazarama sitesinin giriş kısmını kendim yapmayı deniyorum fakat takıldığım ve uğraşmama rağmen bir türlü çözemediğim bir sorun var.

"Li" komutu ile yukarıdaki resimdeki gibi (aradaki dikey çizgiler olmadan) bir kategori bölümü yapmaya çalıştım fakat olmadı.

Onun yerine bunun gibi bir şey oldu. Nerede yanlış yaptım ya da yazmam gereken bir kodu yazmadım acaba? Ayrıca yazıların renklerini de değiştiremiyorun. "!important" ile denememe rağmen de olmadı.

spriggan · 13 Ekim 2023

Takumiii dedi:
Denedim ve renkler değişti. Teşekkürler

Dediklerinizi yaptım ve bir miktarda olsa düzeldi.
Eki Görüntüle 1975961

Dediklerinizi yaptıktan sonra da böyle oldu. Şu kenarı nasıl düzelteceğiz peki?

Ekleme: "bottom" özelliğini 60%'a getirerek düzeldi.

Eki Görüntüle 1975968
Anlık olarak böyledir. Şimdilik düzeldi. Yalnızca bu yazıları düzenli bir şekilde yan yana getirmek kaldı. Onları hangi bölüme ve hangi kod ile yazıyorduk peki?

Li etiketinde sabit genişlik ve yükseklik yerine padding kullan. Width ve height kaldır ve padding ver.

533388 · 13 Ekim 2023

@Takumiii kodları atarsan daha iyi olur.

@Takumiii kuhtemlen renk değiştirememe sebebin şu sen yazları ul >li > a içine yazdın ve color özelliğini liye vermeye çalıştın.

spriggan · 13 Ekim 2023

Takumiii dedi:
Pazarama sitesinin giriş kısmını kendim yapmayı deniyorum fakat takıldığım ve uğraşmama rağmen bir türlü çözemediğim bir sorun var.

Eki Görüntüle 1975896

"Li" komutu ile yukarıdaki resimdeki gibi (aradaki dikey çizgiler olmadan) bir kategori bölümü yapmaya çalıştım fakat olmadı.

Eki Görüntüle 1975904

Onun yerine bunun gibi bir şey oldu. Nerede yanlış yaptım ya da yazmam gereken bir kodu yazmadım acaba? Ayrıca yazıların renklerini de değiştiremiyorun. "!important" ile denememe rağmen de olmadı.

Sayfandakili etiketlerini float left ile yan yana getirmişsin. Bunun dışında CSS ile.

Li { float: Left; border-right: 1px Solid Black }
Li a { color:#000; font-weigh: Normal; } gibi linklerini şekillendirmen gerek.

Bu şekilde dener misin? Telefondan yazdım, syntax hatası olabilir. Sen düzeltirsin varsa.

Eklemeler:
Ayrıcali etiketlerine width, height değerleri verip, text-align: Center yaparak yazıları ortalamanda gerekir.

Takumiii · 13 Ekim 2023

533388 dedi:
@Takumiii kodları atarsan daha iyi olur.

Kodları buraya nasıl atıyoruz peki ? İlk defa bu bölümde bir soru soruyorum da kusura bakmayın.

533388 · 13 Ekim 2023

Takumiii dedi:
Kodları buraya nasıl atıyoruz peki? İlk defa bu bölümde bir soru soruyorum da kusura bakmayın.

Kod kısmına tıklayın ve atın oradan dil de seçebilirsiniz.

Takumiii · 13 Ekim 2023

533388 dedi:
Kod kısmına tıklayın ve atın oradan dil de seçebilirsiniz.

HTML:

<!DOCTYPE html>
<html lang="tr">
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap" rel="stylesheet">
   
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pazarama</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
   
<center>

<div class="kutu">
<p style="color: gray;">Marka, ürün veya hizmet ara...</p>

<ul class="Search"></a>Ara

<li class="magnifying"><a href="#"><i class="fa-solid fa-magnifying-glass" style="color: #ffffff;"></i></a></li>

</ul>

</div>

<div class="menu">

    <li><a href="#">Elektronik</a></li>
    <li><a href="#">Anne
                    Bebek</a></li>
    <li><a href="#">Cep Telefonu
                    ve Aksesuar</a></li>
    <li><a href="#">Ev, Yaşam,
                    Yapı Market</a></li>
    <li><a href="#">Ayakkabı,
                    Çanta ve
                    Aksesuar</a></li>
    <li><a href="#">Kitap, Kırtasiye,
                    Hobi, Oyuncak</a></li>
    <li><a href="#">Kişisel Bakım
                    ve Kozmetik</a></li>
    <li><a href="#">Moda</a></li>
    <li><a href="#">Otomobil,
                    Motosiklet ve
                    Aksesuarları</a></li>
    <li><a href="#">Oyun, Konsol ve
                    Dijital Servisler</a></li>
    <li><a href="#">Spor ve Outdoor</a></li>
    <li><a href="#">Süpermarket</a></li>






</div>





</center>



<div>

<img src="logo.jpg" alt="pazarama" width="320px">


</div>










</body>

















</html>

CSS:

.kutu{
width: 650px;
height: 40px;
background-color: white;
margin: 30px;
padding: 5px;
color: white;
border: 2px solid gray;
border-radius: 10px;
font-size: 14px;
font-family: 'Raleway', sans-serif;
text-align: left;
}

.Search{
width: 60px;
height: 20px;
color: white;
background-color: rgba(173, 172, 172, 0.705);
margin: 30px;
padding: 5px;
border: 2px rgba(173, 172, 172, 0.705);
border-radius: 10px;
font-family: 'Raleway', sans-serif;
font-size: 15px;
text-align: center;
position: absolute;
right: 30%;
left: 60%;
top: 1%;
}

.magnifying{
float: left;
}

img{
position: absolute;
top: -10%;
}

a {
text-decoration: none;
font-size: 14px;
color: solid gray;
background-color: solid gray;
font-family: 'Raleway', sans-serif;
}

.menu{
list-style-type: none;
overflow: hidden;
display: block;
position: absolute;
bottom: 70%;
padding: 0%;
padding-right: 10%;
background-color: #e8e8e8;
}


.menu li{
display: inline-block;
color: #231f20!important;
background-color: #e8e8e8!important;
padding: -2px;
margin: -2px;
height: 70px;
position: relative;
bottom: 1%;
}

.li{
float: left;
border-right: 1px solid #e8e8e8;
}

.li a{
color: #231f20;
font-weight: normal;
}

533388 dedi:
@Takumiii kuhtemlen renk değiştirememe sebebin şu sen yazları ul >li > a içine yazdın ve color özelliğini liye vermeye çalıştın.

Aslında ul yerine div>li>a şeklinde yaptım fakat color özelliğini dediğiniz gibi li'ye verdim sanırım ondan olmuyor.

533388 · 13 Ekim 2023

@Takumiii bir a ya verir misin?

Takumiii · 13 Ekim 2023

533388 dedi:
@Takumiii bir a ya verir misin?

Denedim ve renkler değişti. Teşekkürler

spriggan dedi:
Sayfandakili etiketlerini float left ile yan yana getirmişsin. Bunun dışında CSS ile.

Li { float: Left; border-right: 1px Solid Black }
Li a { color:#000; font-weigh: Normal; } gibi linklerini şekillendirmen gerek.

Bu şekilde dener misin? Telefondan yazdım, syntax hatası olabilir. Sen düzeltirsin varsa.

Eklemeler:
Ayrıcali etiketlerine width, height değerleri verip, text-align: Center yaparak yazıları ortalamanda gerekir.

Dediklerinizi yaptım ve bir miktarda olsa düzeldi.

Dediklerinizi yaptıktan sonra da böyle oldu. Şu kenarı nasıl düzelteceğiz peki ?

Ekleme: ''bottom'' özelliğini 60%'a getirerek düzeldi.

Anlık olarak böyledir. Şimdilik düzeldi. Geriye sadece tek bir basit işlem kaldı ve onu da halletmem ile projem bitmiş olacak. Yardımlarınız için hepinize teşekkürler.

spriggan · 13 Ekim 2023

Takumiii dedi:
Denedim ve renkler değişti. Teşekkürler

Dediklerinizi yaptım ve bir miktarda olsa düzeldi.
Eki Görüntüle 1975961

Dediklerinizi yaptıktan sonra da böyle oldu. Şu kenarı nasıl düzelteceğiz peki?

Ekleme: "bottom" özelliğini 60%'a getirerek düzeldi.

Eki Görüntüle 1975968
Anlık olarak böyledir. Şimdilik düzeldi. Yalnızca bu yazıları düzenli bir şekilde yan yana getirmek kaldı. Onları hangi bölüme ve hangi kod ile yazıyorduk peki?

Li etiketinde sabit genişlik ve yükseklik yerine padding kullan. Width ve height kaldır ve padding ver.

Takumiii · 13 Ekim 2023

spriggan dedi:
Li etiketinde sabit genişlik ve yükseklik yerine padding kullan. Width ve height kaldır ve padding ver.

Dediklerinizi yaptım ve tam istediğim şekilde gibi oldu. Çok teşekkür ederim

Çözüldü HTML listedeki yazılar kutu içerisine nasıl yerleştirilir?

Ayrıntılı düzenleme

Takumiii

Kilopat

spriggan

533388

Hectopat

spriggan

Hectopat

Takumiii

Kilopat

533388

Hectopat

Takumiii

Kilopat

533388

Hectopat

Takumiii

Kilopat

spriggan

Hectopat

Takumiii

Kilopat

Benzer konular

Bu konuyu görüntüleyen kullanıcılar