CSS kodundaki hatalar nasıl anlaşılır?

ErrorCorrection

ErrorCorrection

Decipat
Katılım
11 Ağustos 2022
Mesajlar
2.428
Çözümler
4
biraz karışık yazıyorum onu biliyorum. CSS'i ayrı olarak bir. CSS dosyasında yazmam gerekli olduğunu da biliyorum bunun dışındaki hatalar nelerdir? Koddaki?
@Kxaan @Eray T @Beroski

HTML: 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Shopping</title>
 <style type="text/css">
 body{
 margin: 0;
 padding: 0;
 }.navbar div{
 display: inline-block;
 padding: 5px;
 padding: 10 15px;
 margin-right: 20px;
 transition: .5s;
 }.navbar div a{
 text-decoration: none;
 color: white;
 transition: .5s;
 }

 .navbar{
 background-color:#191825;
 padding: 10px;
 text-align: right;
 border-bottom: 1px solid white;
 }main img{
 width: 200px;
 transition: 1s;
 }main{
 margin: 0 25%;
 text-align: center;
 }main p{
 transition: 1s;
 font-size:15px;
 color: gray;
 }main img:hover{
 width:300px;
 }.buy{
 display: inline-block;
 margin: 20px;
 background-color: #F16767;
 text-decoration: none;
 padding:10px 15px;
 color: white;
 transition: 1s;
 }.buy:hover{
 background-color: white;
 color: #F16767;
 }.navbar div:hover a{
 color: black;
 }.navbar div:hover{
 background-color: white;
 border-radius:10px;
 }.ozellikler ul{
 padding: 0;
 margin:0;
 list-style-type: none;
 text-align: left;
 }.ozellikler ul li{
 margin: 0;
 padding: 8px 15px;
 transition: .3s;
 }.ozellikler{
 padding: 0;
 margin: 0;
 }.ozellikler ul li:hover{
 background-color: #E9A178;
 color: white;

 }
 </style>

</head>
<body>
<div class="navbar">
 <div><a href="#">Shopping</a></div>
 <div><a href="#">Categories</a></div>
 <div><a href="#">My Cart</a></div>
 <div><a href="#">More</a></div>
 </div>
</div>
<main>
 <h1>Macbook-Air</h1>
 <img src="https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-space-gray-select-201810?wid=452&hei=420&fmt=jpeg&qlt=95&.v=1664472289661">
 <h2>$ 2000</h2>
 <p class="yazi">Apple tarafından üretilen pek çok farklı dizüstü bilgisayar modeli arasında incelik ve kolay taşınabilirlik özellikleri ile ön plana çıkan modellerin başında Apple Macbook Air gelir. Adında bulunan “air” kelimesi cihazın hafifliğine en iyi şekilde dikkat çeker.</p>
 <a class="buy" href="https://www.youtube.com/watch?v=6_EFabdC1_E">Buy Now</a>
 <div class="ozellikler">
 <ul>
 <li>RAM Bellek Boyutu: 8 GB.</li>
 <li>İşlemci: M1.</li>
 <li>Ekran kartı: 7 Çekirdekli.</li>
 <li>Sabit disk kapasitesi: 256 GB.</li>
 <li>Ekran Boyutu: 33.78 cm / 13.3 inç</li>
 <li>Çözünürlük: inç başına 227 piksel yoğunlukta 2560 x 1600 özgün.</li>
 <li>Görüntü kalitesi: Full-HD.</li>
 </ul>
 </div>
</main>
</body>
</html>
 
Son düzenleme:
Arkadaşın da dediği gibi kodlar biraz makarna, CSS'i mutlaka farklı bir dosya dizininden çağır, ayrıca belli başlı etiketleri mutlaka Tab ile boşluk bırakarak hizalandır ki daha düzenli olsunlar.

Bu tür yazmaya şimdiden alışmalısın dostum, şu an bu kod gayet normal ancak ileride en basit HTML kodların bile yüzlerce satıra ulaştığında "ulan nereye yazdım, bu nerede, bunu niye böyle yapmışım." dedirtir.
 
ErrorCorrection dedi:
biraz karışık yazıyorum onu biliyorum. CSS'i ayrı olarak bir. CSS dosyasında yazmam gerekli olduğunu da biliyorum bunun dışındaki hatalar nelerdir? Koddaki?

HTML: 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Shopping</title>
 <style type="text/css">
 body{
 margin: 0;
 padding: 0;
 }.navbar div{
 display: inline-block;
 padding: 5px;
 padding: 10 15px;
 margin-right: 20px;
 transition: .5s;
 }.navbar div a{
 text-decoration: none;
 color: white;
 transition: .5s;
 }

 .navbar{
 background-color:#191825;
 padding: 10px;
 text-align: right;
 border-bottom: 1px solid white;
 }main img{
 width: 200px;
 transition: 1s;
 }main{
 margin: 0 25%;
 text-align: center;
 }main p{
 transition: 1s;
 font-size:15px;
 color: gray;
 }main img:hover{
 width:300px;
 }.buy{
 display: inline-block;
 margin: 20px;
 background-color: #F16767;
 text-decoration: none;
 padding:10px 15px;
 color: white;
 transition: 1s;
 }.buy:hover{
 background-color: white;
 color: #F16767;
 }.navbar div:hover a{
 color: black;
 }.navbar div:hover{
 background-color: white;
 border-radius:10px;
 }.ozellikler ul{
 padding: 0;
 margin:0;
 list-style-type: none;
 text-align: left;
 }.ozellikler ul li{
 margin: 0;
 padding: 8px 15px;
 transition: .3s;
 }.ozellikler{
 padding: 0;
 margin: 0;
 }.ozellikler ul li:hover{
 background-color: #E9A178;
 color: white;

 }
 </style>

</head>
<body>
<div class="navbar">
 <div><a href="#">Shopping</a></div>
 <div><a href="#">Categories</a></div>
 <div><a href="#">My Cart</a></div>
 <div><a href="#">More</a></div>
 </div>
</div>
<main>
 <h1>Macbook-Air</h1>
 <img src="https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-space-gray-select-201810?wid=452&hei=420&fmt=jpeg&qlt=95&.v=1664472289661">
 <h2>$ 2000</h2>
 <p class="yazi">Apple tarafından üretilen pek çok farklı dizüstü bilgisayar modeli arasında incelik ve kolay taşınabilirlik özellikleri ile ön plana çıkan modellerin başında Apple Macbook Air gelir. Adında bulunan “air” kelimesi cihazın hafifliğine en iyi şekilde dikkat çeker.</p>
 <a class="buy" href="https://www.youtube.com/watch?v=6_EFabdC1_E">Buy Now</a>
 <div class="ozellikler">
 <ul>
 <li>RAM Bellek Boyutu: 8 GB.</li>
 <li>İşlemci: M1.</li>
 <li>Ekran kartı: 7 Çekirdekli.</li>
 <li>Sabit disk kapasitesi: 256 GB.</li>
 <li>Ekran Boyutu: 33.78 cm / 13.3 inç</li>
 <li>Çözünürlük: inç başına 227 piksel yoğunlukta 2560 x 1600 özgün.</li>
 <li>Görüntü kalitesi: Full-HD.</li>
 </ul>
 </div>
</main>
</body>
</html>
Genişletmek için tıkla...
Site gayet düzgün çalışıyor. CSS'i style.css diye dosya oluşturup onun içine yapıştırın. Prettier kurun lütfen çünkü kodlar tek satırda ve okunurluk düşüyor. Ayırca 83. Satırda ki div hiç bir işe yaramıyor silin.

Boş kodu sildim ve güzelce formatladım.
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Shopping</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            .navbar div {
                display: inline-block;
                padding: 5px;
                padding: 10 15px;
                margin-right: 20px;
                transition: 0.5s;
            }
            .navbar div a {
                text-decoration: none;
                color: white;
                transition: 0.5s;
            }

            .navbar {
                background-color: #191825;
                padding: 10px;
                text-align: right;
                border-bottom: 1px solid white;
            }
            main img {
                width: 200px;
                transition: 1s;
            }
            main {
                margin: 0 25%;
                text-align: center;
            }
            main p {
                transition: 1s;
                font-size: 15px;
                color: gray;
            }
            main img:hover {
                width: 300px;
            }
            .buy {
                display: inline-block;
                margin: 20px;
                background-color: #f16767;
                text-decoration: none;
                padding: 10px 15px;
                color: white;
                transition: 1s;
            }
            .buy:hover {
                background-color: white;
                color: #f16767;
            }
            .navbar div:hover a {
                color: black;
            }
            .navbar div:hover {
                background-color: white;
                border-radius: 10px;
            }
            .ozellikler ul {
                padding: 0;
                margin: 0;
                list-style-type: none;
                text-align: left;
            }
            .ozellikler ul li {
                margin: 0;
                padding: 8px 15px;
                transition: 0.3s;
            }
            .ozellikler {
                padding: 0;
                margin: 0;
            }
            .ozellikler ul li:hover {
                background-color: #e9a178;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="navbar">
            <div><a href="#">Shopping</a></div>
            <div><a href="#">Categories</a></div>
            <div><a href="#">My Cart</a></div>
            <div><a href="#">More</a></div>
        </div>

        <main>
            <h1>Macbook-Air</h1>
            <img
                src="https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-space-gray-select-201810?wid=452&hei=420&fmt=jpeg&qlt=95&.v=1664472289661"
            />
            <h2>$ 2000</h2>
            <p class="yazi">
                Apple tarafından üretilen pek çok farklı dizüstü bilgisayar modeli
                arasında incelik ve kolay taşınabilirlik özellikleri ile ön plana çıkan
                modellerin başında Apple Macbook Air gelir. Adında bulunan “air”
                kelimesi cihazın hafifliğine en iyi şekilde dikkat çeker.
            </p>
            <a class="buy" href="https://www.youtube.com/watch?v=6_EFabdC1_E"
                >Buy Now</a
            >
            <div class="ozellikler">
                <ul>
                    <li>RAM Bellek Boyutu: 8 GB.</li>
                    <li>İşlemci: M1.</li>
                    <li>Ekran kartı: 7 Çekirdekli.</li>
                    <li>Sabit disk kapasitesi: 256 GB.</li>
                    <li>Ekran Boyutu: 33.78 cm / 13.3 inç</li>
                    <li>
                        Çözünürlük: inç başına 227 piksel yoğunlukta 2560 x 1600 özgün.
                    </li>
                    <li>Görüntü kalitesi: Full-HD.</li>
                </ul>
            </div>
        </main>
    </body>
</html>
 
serhatcandev dedi:
Site gayet düzgün çalışıyor. CSS'i style.css diye dosya oluşturup onun içine yapıştırın. Prettier kurun lütfen çünkü kodlar tek satırda ve okunurluk düşüyor. Ayırca 83. Satırda ki div hiç bir işe yaramıyor silin.

Boş kodu sildim ve güzelce formatladım.
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Shopping</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            .navbar div {
                display: inline-block;
                padding: 5px;
                padding: 10 15px;
                margin-right: 20px;
                transition: 0.5s;
            }
            .navbar div a {
                text-decoration: none;
                color: white;
                transition: 0.5s;
            }

            .navbar {
                background-color: #191825;
                padding: 10px;
                text-align: right;
                border-bottom: 1px solid white;
            }
            main img {
                width: 200px;
                transition: 1s;
            }
            main {
                margin: 0 25%;
                text-align: center;
            }
            main p {
                transition: 1s;
                font-size: 15px;
                color: gray;
            }
            main img:hover {
                width: 300px;
            }
            .buy {
                display: inline-block;
                margin: 20px;
                background-color: #f16767;
                text-decoration: none;
                padding: 10px 15px;
                color: white;
                transition: 1s;
            }
            .buy:hover {
                background-color: white;
                color: #f16767;
            }
            .navbar div:hover a {
                color: black;
            }
            .navbar div:hover {
                background-color: white;
                border-radius: 10px;
            }
            .ozellikler ul {
                padding: 0;
                margin: 0;
                list-style-type: none;
                text-align: left;
            }
            .ozellikler ul li {
                margin: 0;
                padding: 8px 15px;
                transition: 0.3s;
            }
            .ozellikler {
                padding: 0;
                margin: 0;
            }
            .ozellikler ul li:hover {
                background-color: #e9a178;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="navbar">
            <div><a href="#">Shopping</a></div>
            <div><a href="#">Categories</a></div>
            <div><a href="#">My Cart</a></div>
            <div><a href="#">More</a></div>
        </div>

        <main>
            <h1>Macbook-Air</h1>
            <img
                src="https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-space-gray-select-201810?wid=452&hei=420&fmt=jpeg&qlt=95&.v=1664472289661"
            />
            <h2>$ 2000</h2>
            <p class="yazi">
                Apple tarafından üretilen pek çok farklı dizüstü bilgisayar modeli
                arasında incelik ve kolay taşınabilirlik özellikleri ile ön plana çıkan
                modellerin başında Apple Macbook Air gelir. Adında bulunan “air”
                kelimesi cihazın hafifliğine en iyi şekilde dikkat çeker.
            </p>
            <a class="buy" href="https://www.youtube.com/watch?v=6_EFabdC1_E"
                >Buy Now</a
            >
            <div class="ozellikler">
                <ul>
                    <li>RAM Bellek Boyutu: 8 GB.</li>
                    <li>İşlemci: M1.</li>
                    <li>Ekran kartı: 7 Çekirdekli.</li>
                    <li>Sabit disk kapasitesi: 256 GB.</li>
                    <li>Ekran Boyutu: 33.78 cm / 13.3 inç</li>
                    <li>
                        Çözünürlük: inç başına 227 piksel yoğunlukta 2560 x 1600 özgün.
                    </li>
                    <li>Görüntü kalitesi: Full-HD.</li>
                </ul>
            </div>
        </main>
    </body>
</html>
Genişletmek için tıkla...
Tam anlamıyla güzel bir örnek...
 
serhatcandev dedi:
Site gayet düzgün çalışıyor. CSS'i style.css diye dosya oluşturup onun içine yapıştırın. Prettier kurun lütfen çünkü kodlar tek satırda ve okunurluk düşüyor. Ayırca 83. Satırda ki div hiç bir işe yaramıyor silin.

Boş kodu sildim ve güzelce formatladım.
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Shopping</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            .navbar div {
                display: inline-block;
                padding: 5px;
                padding: 10 15px;
                margin-right: 20px;
                transition: 0.5s;
            }
            .navbar div a {
                text-decoration: none;
                color: white;
                transition: 0.5s;
            }

            .navbar {
                background-color: #191825;
                padding: 10px;
                text-align: right;
                border-bottom: 1px solid white;
            }
            main img {
                width: 200px;
                transition: 1s;
            }
            main {
                margin: 0 25%;
                text-align: center;
            }
            main p {
                transition: 1s;
                font-size: 15px;
                color: gray;
            }
            main img:hover {
                width: 300px;
            }
            .buy {
                display: inline-block;
                margin: 20px;
                background-color: #f16767;
                text-decoration: none;
                padding: 10px 15px;
                color: white;
                transition: 1s;
            }
            .buy:hover {
                background-color: white;
                color: #f16767;
            }
            .navbar div:hover a {
                color: black;
            }
            .navbar div:hover {
                background-color: white;
                border-radius: 10px;
            }
            .ozellikler ul {
                padding: 0;
                margin: 0;
                list-style-type: none;
                text-align: left;
            }
            .ozellikler ul li {
                margin: 0;
                padding: 8px 15px;
                transition: 0.3s;
            }
            .ozellikler {
                padding: 0;
                margin: 0;
            }
            .ozellikler ul li:hover {
                background-color: #e9a178;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="navbar">
            <div><a href="#">Shopping</a></div>
            <div><a href="#">Categories</a></div>
            <div><a href="#">My Cart</a></div>
            <div><a href="#">More</a></div>
        </div>

        <main>
            <h1>Macbook-Air</h1>
            <img
                src="https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-space-gray-select-201810?wid=452&hei=420&fmt=jpeg&qlt=95&.v=1664472289661"
            />
            <h2>$ 2000</h2>
            <p class="yazi">
                Apple tarafından üretilen pek çok farklı dizüstü bilgisayar modeli
                arasında incelik ve kolay taşınabilirlik özellikleri ile ön plana çıkan
                modellerin başında Apple Macbook Air gelir. Adında bulunan “air”
                kelimesi cihazın hafifliğine en iyi şekilde dikkat çeker.
            </p>
            <a class="buy" href="https://www.youtube.com/watch?v=6_EFabdC1_E"
                >Buy Now</a
            >
            <div class="ozellikler">
                <ul>
                    <li>RAM Bellek Boyutu: 8 GB.</li>
                    <li>İşlemci: M1.</li>
                    <li>Ekran kartı: 7 Çekirdekli.</li>
                    <li>Sabit disk kapasitesi: 256 GB.</li>
                    <li>Ekran Boyutu: 33.78 cm / 13.3 inç</li>
                    <li>
                        Çözünürlük: inç başına 227 piksel yoğunlukta 2560 x 1600 özgün.
                    </li>
                    <li>Görüntü kalitesi: Full-HD.</li>
                </ul>
            </div>
        </main>
    </body>
</html>
Genişletmek için tıkla...
Sublime Text kullanıyorum hocam prettier var mı?
 

Benzer konular

K
  • Çözüldü
Çözüldü  CSS calc() kodundaki hata nedir?
Mesaj
3
Görüntüleme
363
Elio Talvinen
Elio Talvinen
MidI0ck
CSS nasıl öğrenilir?
2
Mesaj
12
Görüntüleme
558
Lysoth
Lysoth
ogingsan
Akıcı CSS nasıl öğrenilir?
Mesaj
5
Görüntüleme
2B
Preety Surekha
Preety Surekha
Soyluu25
  • Çözüldü
Çözüldü  CSS NavBar Nasıl Alta Alınır?
Mesaj
3
Görüntüleme
958
BreaKSooN05
B
ErrorCorrection
CSS becerisi nasıl gelişir?
Mesaj
1
Görüntüleme
178
delikarga
delikarga

Yeni konular

Yeni mesajlar

Geri
Yukarı