CSS Yeni Öğreniyorum Yanlışlarım İçin Yardım
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>USS Archouse</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="logo"><a href="#"><img src="img/logobig.png" height="78"></div>
<div class="nav">
<ul>
<li>
<a href="#">ANASAYFA</a>
</li>
<li>
<a href="#">HAKKIMIZDA</a>
</li>
<li>
<a href="#">PROJELER</a>
</li>
<li>
<a href="#">ÇALIŞANLARIMIZ</a>
</li>
<li>
<a href="#">İLETİŞİM</a>
</li>
</ul>
</div>
<div class="slider">
<div class="slider1">
<img src="img/slider1.png">
<h1>AKHİSAR</h1>
<h1>VİLLA</h1>
<h3><a href="#">PROJEYİ GÖR</a></h3>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
background-color: #000;
font-family: arial;
}
.nav ul li a{
color: white;
text-decoration: none;
}
.nav ul li{
list-style-type: none;
float: left;
margin: 30px;
display: block;
margin-top: 45px;
}
.nav{
position: absolute;
left: 30%;
}
.logo{
position: absolute;
left: 1%;
top: 2%;
}
.slider img{
width: 740px;
position: relative;
left: 55%;
margin-top: 10%;
}
.slider h1{
position: relative;
color: whitesmoke;
display: block;
margin-left: 150px;
bottom: 350px;
}
.slider h3 a{
color: whitesmoke;
text-decoration: none;
border: 2px whitesmoke solid;
padding: 15px;
}
.slider h3 a:hover{
color: black;
transition: 0.5s;
background-color: white;
}
.slider h3{
position: absolute;
left: 150px;
bottom: 400px;
}
Css öğrenmeye başlayalı 2 gün oldu daha öncesinde lisede web tasarım dersi görmüştüm
lisedeki hatalarımı tekrarlıyor gibiyim css kısmında istediğim görüntüyü oluşturabiliyorum fakat
görüntüyü oluştururken yanlış kodlarla oluşturduğumu düşünüyorum sizin düşüncelerini almak istedim
yazdığım kodlar hatalımı yoksa ben yanlış mı düşünüyorum
böyle devam etmelimiyim cevaplarınıza göre tekrardan css derslerine başlayacağım
şuanda PROTOTURK Youtube kanalında css derslerinin 82. bölümündeyim
imgler olduğunda bu şekilde gözüküyor
Öncelikle HTML iskeletini doğru bir şekilde çıkarmanı tavsiye ederim. Tasarım bir yerde çiziliyse zaten kolay, ne nereye gelecek görüyorsun. Ama ortada çizilmiş bir tasarım yoksa (pdf, sketch, figma vs.), tasarımı da kendin yapıyorsan önce bir gözünü kapa ve ne nereye gelecek kararlaştır, daha sonra divler ile veya Semantic Elementler yardımıyla bir iskelet oluştur.
Örneğin Prototürk'ü ele alalım (web için). Üst tarafta bir header var, solda bir sidebar var ve geri kalan alan da içerik kısmı. Bunu nasıl bölümlere ayırmalıyız diye kendimize sormalıyız. Öncelikle header'ı bir header etiketi içerisinde ekleyelim içerisine de logo için, arama kutusu için ve profil seçenekleri için divler yerleştirelim. Şimdi sırada sidebar ve içerik kısmı var. Bu ikisini beraber bir element içerisine almak daha mantıklı olacaktır. Örneğin Prototürk'te main etiketi içerisine alınmış, sidebar da aside etiketi içerine alınmış, geriye kalan içerik kısmı ise div.content etiketi içerisine alınmış ve main etiketine display: flex verilerek bu iki element yan yana getirilmiş, ayrıca main yüksekliği de calc yardımıyla 100vh - 60px (header'in yüksekliği) olarak atanmış. Sen de kendi tasarımına göre böyle basit bir iskelet oluşturduktan sonra geri kalan kısımları tamamlaman hem daha kolay olur hem de varsa takım arkadaşların tarafından kodun ortak bir paydada okunabilirliğini artırır, hata çözümlerini kolaylaştırır.
Bunları anlatıyorum çünkü her şey CSS değil. Biliyorum sen CSS için soru sormuşsun fakat bu tarz küçük detayları da atlamadan geliştirmeye devam edersen, CSS yazman da kolaylaşacaktır.