Css Kod Düzeni ile İlgili Sorum ?

[umut3200]

Flex conteiner da bazen padding ve margin'e eksi değer giriyorum, henüz öğrenme aşamasındayım; bazen nav ve logoyu position ile hizalıyorum bazen değer +100 ü aşıyor ancak yapay zeka bunları yapmamam gerektiğini söylüyor, freelancer piyasasında site yaparken bu durum çok sorun olur mu?

Ama yapay zekanın söylediğinin aksine farklı cihazlarda işe bile işe yaradığını farkettim yani google developer mod da görüntüde bozulma olmuyor

 

[LowPriceHosting]

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:

CSS Box Model Module Level 3

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ı:

CSS Flexible Box Layout Module Level 1

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.

 

[umut3200]

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:

CSS Box Model Module Level 3

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ı:

CSS Flexible Box Layout Module Level 1

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 ?

 

[LowPriceHosting]

Kodu paylaşman iyi oldu hocam. Evet, ikinci örnekteki position: absolute, left: 400px ve margin-right: -200px geçerli CSS. Ama menü absolute olunca header’ın normal flex akışından çıkar; diğer elemanların yerleşiminde menüye yer ayrılmaz. Logo veya menü metni büyüyünce üst üste gelebilir. Ayrıca gösterdiğin #header’da position tanımlı değil; left: 400px’in header’a göre hesaplandığını varsayamayız. Hangi üst elemanın konumlandırma için referans olduğu önemli. W3C açıklaması:

CSS Positioned Layout Module Level 3

Logo ve menü için ilk flex düzeninden devam ederdim. Yalnız gap: 160px ve logodaki margin-left: 100px de sabit boşluklar; masaüstünde pencere daralınca, menü yazısı uzayınca veya %200 yakınlaştırınca taşma olabilir. Kenar boşluğunu header’ın padding’iyle, logo–menü aralığını uygun bir gap ile yönetmek daha anlaşılır olur. h1’deki eksi margin yerine de başlık ve içeriğin kapsayıcı hizalamasını düzenlemek sonradan işini kolaylaştırır.

Yani ikinci yapı kullanılabilir; teslim açısından asıl ölçüt, tek ekranda düzgün görünmesinin yanında içerik ve pencere boyutu değişince de düzenin korunması.

 

[umut3200]

Kodu paylaşman iyi oldu hocam. Evet, ikinci örnekteki position: absolute, left: 400px ve margin-right: -200px geçerli CSS. Ama menü absolute olunca header’ın normal flex akışından çıkar; diğer elemanların yerleşiminde menüye yer ayrılmaz. Logo veya menü metni büyüyünce üst üste gelebilir. Ayrıca gösterdiğin #header’da position tanımlı değil; left: 400px’in header’a göre hesaplandığını varsayamayız. Hangi üst elemanın konumlandırma için referans olduğu önemli. W3C açıklaması:

CSS Positioned Layout Module Level 3

Logo ve menü için ilk flex düzeninden devam ederdim. Yalnız gap: 160px ve logodaki margin-left: 100px de sabit boşluklar; masaüstünde pencere daralınca, menü yazısı uzayınca veya %200 yakınlaştırınca taşma olabilir. Kenar boşluğunu header’ın padding’iyle, logo–menü aralığını uygun bir gap ile yönetmek daha anlaşılır olur. h1’deki eksi margin yerine de başlık ve içeriğin kapsayıcı hizalamasını düzenlemek sonradan işini kolaylaştırır.

Yani ikinci yapı kullanılabilir; teslim açısından asıl ölçüt, tek ekranda düzgün görünmesinin yanında içerik ve pencere boyutu değişince de düzenin korunması.

Teşekkürler bilgiler için.

 

[NedoxBey]

hocam genel inceledim de ben acikcasi Boyle px kullanimini pek önermiyorum. Sonrasında responsive icin ayarlarken sorun çıkarabilir gibi geldi. Rem veya em kullanimi % kullanımı daha uygun olur. Body uzerinden tabii ki % kullanımı.

 

[umut3200]

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 ?

hocam bu arada ben o gapı menü ile logo arasında boşluk vermek için kullandım. eğer sabit değer dediğiniz gibi sıkıntı yaratacaksa gapı % olarak kullanabilirim. dediğiniz gibi logoyu gri headerin solundaki sınırdan uzaklaştırıp boşluk vermek için padding değerini kullandım. bu sefer % olarak denedim.

 

[umut3200]

Kodu paylaşman iyi oldu hocam. Evet, ikinci örnekteki position: absolute, left: 400px ve margin-right: -200px geçerli CSS. Ama menü absolute olunca header’ın normal flex akışından çıkar; diğer elemanların yerleşiminde menüye yer ayrılmaz. Logo veya menü metni büyüyünce üst üste gelebilir. Ayrıca gösterdiğin #header’da position tanımlı değil; left: 400px’in header’a göre hesaplandığını varsayamayız. Hangi üst elemanın konumlandırma için referans olduğu önemli. W3C açıklaması:

CSS Positioned Layout Module Level 3

Logo ve menü için ilk flex düzeninden devam ederdim. Yalnız gap: 160px ve logodaki margin-left: 100px de sabit boşluklar; masaüstünde pencere daralınca, menü yazısı uzayınca veya %200 yakınlaştırınca taşma olabilir. Kenar boşluğunu header’ın padding’iyle, logo–menü aralığını uygun bir gap ile yönetmek daha anlaşılır olur. h1’deki eksi margin yerine de başlık ve içeriğin kapsayıcı hizalamasını düzenlemek sonradan işini kolaylaştırır.

Yani ikinci yapı kullanılabilir; teslim açısından asıl ölçüt, tek ekranda düzgün görünmesinin yanında içerik ve pencere boyutu değişince de düzenin korunması.

bir önceki mesajımı ciddiye almayın karışıklık oldu. 160px olan gapı logo ile menuyu birbirinden ayırmak için vermiştim. dediğiniz gibi logoyu headerin solundan uzaklaştırıp soldan boşluk bırakmak için padding kullandım. peki logo ve menü arasındaki boşluk için padding absürt olmaz mı ? gapı yüzde olarak kullanabilirim değil mi? gerçi baktımda dökümana kullanılmasında bir sakınca olduğuna dair bir şey okumadım

 

[flyingatm]

Geçerli olması ila best practice olması ayrı şeyler. Bu best practice bir uygulama değil. Container'a eksi margin vermen gerekiyorsa; parent'da ya da child'da bir yerde başka bir problem vardır. 10 seneden fazladır web yazılım sektöründeyim; hayatımda - margin verdiğim senaryolar sadece aşırı takıntılı müşterilerin; SVG ikonları yazıya optik olarak kusursuz ortalamam için revize verdiği senaryolar hariç yok.

CSS'in temellerini anladıktan sonra tez zamanda TailwindCSS'e geçmenizi öneririm. Artık sektör standartı.

Bu konuları artık forumlara sormanıza gerek yok. AI'a daha detaylı bilgi verirseniz; sizin parent ya da chil'da yaptığınız hataları söyleyecektir.

 

[umut3200]

Geçerli olması ila best practice olması ayrı şeyler. Bu best practice bir uygulama değil. Container'a eksi margin vermen gerekiyorsa; parent'da ya da child'da bir yerde başka bir problem vardır. 10 seneden fazladır web yazılım sektöründeyim; hayatımda - margin verdiğim senaryolar sadece aşırı takıntılı müşterilerin; SVG ikonları yazıya optik olarak kusursuz ortalamam için revize verdiği senaryolar hariç yok.

CSS'in temellerini anladıktan sonra tez zamanda TailwindCSS'e geçmenizi öneririm. Artık sektör standartı.

Bu konuları artık forumlara sormanıza gerek yok. AI'a daha detaylı bilgi verirseniz; sizin parent ya da chil'da yaptığınız hataları söyleyecektir.

hocam normalde haklısında tasarımla ilgili hata yapmamak adına insanlara soruyorum çünkü yapay zeka bazen kafayı yiyip yanlış bilgi verebiliyor. bir dahakine mdnye iyice bakmaya çalışacağım.

 

[flyingatm]

hocam normalde haklısında tasarımla ilgili hata yapmamak adına insanlara soruyorum çünkü yapay zeka bazen kafayı yiyip yanlış bilgi verebiliyor. bir dahakine mdnye iyice bakmaya çalışacağım.

İnan bana yapay zeka böyle bariz bir konuda hata yapmaz, hele ki CSS. Hata yaptığını düşünüyorsan ya eksik bilgi veriyorsundur ya da başka bir şeydir.

Ne yazık ki AI bu konuda çok önde.

Ben 2026 senesinde "temel", "algoritma, syntax", "tümden gelin ve tüme gidim", "P ve Q, P veya Q öğrenimi" ve "algoritmik düşünce" öğrenme harici her yazılım eyleminin gereksiz olduğunu söylüyorum herkese. 10 senede sayısız şirkette, hemen her pozisyonda, milyonlarca satır kod yazdım. Son 1 senedir 1 satır dahi ne CSS, ne TS, ne de SQL tabanlı tek kod yazmadım.

Bunlara merak salmanız ve araştırmanız çok güzel ama bence bir noktaya kadar yapmanız yeterli.

 

[umut3200]

İnan bana yapay zeka böyle bariz bir konuda hata yapmaz, hele ki CSS. Hata yaptığını düşünüyorsan ya eksik bilgi veriyorsundur ya da başka bir şeydir.

Ne yazık ki AI bu konuda çok önde.

Ben 2026 senesinde "temel", "algoritma, syntax", "tümden gelin ve tüme gidim", "P ve Q, P veya Q öğrenimi" ve "algoritmik düşünce" öğrenme harici her yazılım eyleminin gereksiz olduğunu söylüyorum herkese. 10 senede sayısız şirkette, hemen her pozisyonda, milyonlarca satır kod yazdım. Son 1 senedir 1 satır dahi ne CSS, ne TS, ne de SQL tabanlı tek kod yazmadım.

Bunlara merak salmanız ve araştırmanız çok güzel ama bence bir noktaya kadar yapmanız yeterli.

bundan sonrasını ben hallederim. içimi rahatlattınız. konu kilit