Hocam negatif margin CSS'te geçerli; tek başına kötü kod anlamına gelmez. Negatif padding ise geçersizdir. Örneğin padding: -10px bildirimi uygulanmaz; sayfanın düzgün görünmesi bu değerin çalıştığını göstermez. W3C standardında ikisinin ayrımı açıkça yazıyor:
100'ü aşan bir değer de tek başına hata değil; hangi özellikte, hangi birimle ve ne amaçla kullandığın önemli. Logo ve menü gibi ana yerleşimde önce kapsayıcının flex hizalamasını kullan: align-items çapraz eksendeki, justify-content ana eksendeki hizalamayı kontrol eder. Elemanlar arasındaki boşluk için gap kullanılabilir. Sürekli left/top değerleriyle düzeltme yapmak, menü yazısı veya ekran genişliği değişince ek düzeltme gerektirebilir. Flex hizalama açıklaması:
Cihaz modunda düzgün görünmesi iyi bir başlangıç. Seçili telefon ölçülerinin arasındaki genişlikleri, daha uzun menü metinlerini, tarayıcıda %200 yakınlaştırmayı ve mümkünse gerçek telefonda menünün kullanımını da dene. Müşteriye teslim açısından sonradan içerik değişince bozulmaması ve kolay düzenlenmesi önemli.
Logo/nav bölümünün küçük bir HTML/CSS örneğini paylaşabilir misin? Özellikle position: relative mi, absolute mu kullandığını ve eksi verdiğin satırları görürsek, mevcut yerleşimi bozmadan nerede sadeleştirilebileceğini söylemek daha kolay olur.
2 gün süren uğraşlarım sonucu sonunda doğru yapıyı buldum.
aslında binevi bundan bu başlığı açmıştım
. kodumun son hali bu:
#header{
height:100px;
background-color: whitesmoke;
display: flex;
align-items: center;
gap:160px;
}
#logo{
height: 50%;
width:auto;
margin-left: 100px;
}
.main-menu{
display: flex;
gap:30px;
font-size:100%;
}
a{
color: black;
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.1rem;
}
.promotion{
display: flex;
flex-direction: column;
margin-left: 50px;
}
h1{
font-size:2.2rem;
text-align: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 500;
}
#image-one{
width: 43%;
}
h2{
font-size: 1.42rem;
white-space: nowrap;
text-align: left;
}
#promotion-text-one{
font-size:0.99rem;
width: 43%;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
text-align:left;
}
#footer{
color: white;
}
footer{
background-color: black;
}
sorunun kendisine gelecek olursak;eğer ben bunun yerine, bu yapıyı tercih etseydim, mesela(söylediğim şey sadece web için geçerli responsive kısmını kurcalarım isterseniz bu arada sizin için olan kodu bozdum çünkü bu başlığa cevap verileceğini düşünmemiştim açıkçası
);
#header{
height:100px;
background-color: whitesmoke;
display: flex;
align-items: center;
}
#logo{
height: 50%;
width:auto;
margin-left: 120px;
}
.main-menu{
display: flex;
gap:30px;
font-size:100%;
position: absolute;
left: 400px;
}
a{
color: black;
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.1rem;
}
.promotion{
display: flex;
flex-direction: column;
margin-left: 200px;
}
h1{
font-size:2.2rem;
text-align: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 500;
margin-right: -200px;
}
#image-one{
width: 43%;
}
h2{
font-size: 1.42rem;
white-space: nowrap;
text-align: left;
}
#promotion-text-one{
font-size:0.99rem;
width: 43%;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
text-align:left;
}
#footer{
color: white;
}
footer{
background-color: black;
} yine geçerli olur muydu olsa bile ?
