CSS Margin padding ayarı nasıl olmalı?

Henüz margin veya padding ile ilgili hiçbir şey girmememe rağmen sağa kayık bir şekilde duruyor. padding right da margin right ile 10px ve -10px denedim
padding right 10px yapınca sağa doğru uzuyor ancak -10px yapınca küçülmüyor. O taşmayı kapatmak istiyorum.
Not : İnce olan ve tüm kutucuğun kendisini oluşturan çerçeve bir div ve üstteki içinde yazı yazan turuncu kalın yer bir div ve bu ikinci div ilk divin içinde.
Not 2 : Bu arada margini de padding i de hiç beceremiyorum acaba kodumuzu yükleyip konumlandırmayı görsel olarak elle yapabileceğimiz mouse ile küçültüp büyütebileceğimiz bir site yok mu?

[CODE lang="html" title="index.html"]<div class="anacerceve">

<div class="anacerceve_ust">BİZE ULAŞIN</div>

</div>[/CODE]

[CODE lang="css" title="style.css"].anacerceve {
border: 8px solid #EB5800 ;
border-radius: 80px ;
height: 800px ;
width: 800px ;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}

.anacerceve_ust{
font-family: 'JetBrains Mono',monospace ;
font-size: large ;
font-weight: bold ;
color : white ;
border: 8px solid #EB5800 ;
background-color: #EB5800 ;
height: 100px ;
width: 800px ;
border-top-left-radius: 80px ;
border-top-right-radius: 80px ;
font-style: normal;
text-align: center;
/*
padding-right: ;
padding-left: ;
margin-right: ;
margin-left: ;
margin-top: ;
*/
}[/CODE]

.anacerceve { border: 8px solid #EB5800 ; border-radius: 80px ; height: 800px ; width: 800px ; margin-left: auto; margin-right: auto; margin-top: 150px; display: flex; } .anacerceve_ust{ font-family: 'JetBrains Mono',monospace ; font-size: large ; font-weight: bold ; color : white ; border: 8px solid #EB5800 ; background-color: #EB5800 ; height: 100px ; width: 800px ; border-top-left-radius: 60px ; border-top-right-radius: 60px ; font-style: normal; text-align: center; /* padding-right: ; padding-left: ; margin-right: ; margin-left: ; margin-top: ; */ }
kodu umarım doğru eklemişimdir. ilk div'i display flex yapman gerek o kaymanın olmaması için. içine div koymuşsun bence gerek yok. ben yine o kısmı değiştirmek istemedim, ve radiusları azalttım. 80 kalırsa boşluk kalıyor

ikiikiyedi dedi:

.anacerceve { border: 8px solid #EB5800 ; border-radius: 80px ; height: 800px ; width: 800px ; margin-left: auto; margin-right: auto; margin-top: 150px; display: flex; } .anacerceve_ust{ font-family: 'JetBrains Mono',monospace ; font-size: large ; font-weight: bold ; color : white ; border: 8px solid #EB5800 ; background-color: #EB5800 ; height: 100px ; width: 800px ; border-top-left-radius: 60px ; border-top-right-radius: 60px ; font-style: normal; text-align: center; /* padding-right: ; padding-left: ; margin-right: ; margin-left: ; margin-top: ; */ }
kodu umarım doğru eklemişimdir. ilk div'i display flex yapman gerek o kaymanın olmaması için. içine div koymuşsun bence gerek yok. ben yine o kısmı değiştirmek istemedim, ve radiusları azalttım. 80 kalırsa boşluk kalıyor

Genişletmek için tıkla...

Hocam sağolun düzeldi. Bu arada display flexin anlamı ne tam olarak nerelerde kullanmalıyım onu?

Egid Dikmen dedi:

Hocam sağ olun düzeldi. Bu arada display Flex'in anlamı ne tam olarak nerelerde kullanmalıyım onu?

Genişletmek için tıkla...

CSS Flex ile İlgili Her şey – Tayfun Erbilen Flex yapısı sayesinde içerdeki ögeleri istediğin şekilde konumlandırabilirsin(direction, wrap...). Adı üstünde Flex. Hangi display kullanman gerektiğini bilmiyorsan Flex yazabilirsin genelde sorun çıkarmaz. Bu tarz kartları da bence kendin yapmak ile uğraşma, Bootstrap kullanabilirsin

Bootstrap ile daha kolay yazabilirsiniz bunları. Tabi temel mantığını bilin yine de.

ikiikiyedi dedi:

CSS Flex ile İlgili Her şey – Tayfun Erbilen Flex yapısı sayesinde içerdeki ögeleri istediğin şekilde konumlandırabilirsin(direction, wrap...). Adı üstünde Flex. Hangi display kullanman gerektiğini bilmiyorsan Flex yazabilirsin genelde sorun çıkarmaz. Bu tarz kartları da bence kendin yapmak ile uğraşma, Bootstrap kullanabilirsin

Genişletmek için tıkla...

Elio Talvinen dedi:

Bootstrap ile daha kolay yazabilirsiniz bunları. Tabi temel mantığını bilin yine de.

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

getbootstrap.com

Genişletmek için tıkla...

Burada biraz aşağı inince "outline buttons" yeri var mesela butonun üstüne imleci götürünce butonun rengi ile yazının rengi yer değiştiriyor ben bunu kullanmak istiyorum diyelim ancak rengini nasıl değiştireceğimi bilmiyorum bide siteye eklemem için hangi kodu head kısmının içine yazmam lazım? bu arada seçenekler bu kadar az mı yoksa baloncuk buton gibi şeyler için geniş bir katalog var mı?

Bootstrap oldukça yaygın bir CSS kütüphanesi. Youtube üzerinden arama yaparak çok daha basit sonuçlara ulaşabilirsiniz. Attığınız linkteki sol taraftaki seçenekler Bootstrap'ın bize sunduğu içerikler.

Egid Dikmen dedi:

Burada biraz aşağı inince "outline buttons" yeri var mesela butonun üstüne imleci götürünce butonun rengi ile yazının rengi yer değiştiriyor ben bunu kullanmak istiyorum diyelim ancak rengini nasıl değiştireceğimi bilmiyorum bide siteye eklemem için hangi kodu head kısmının içine yazmam lazım? bu arada seçenekler bu kadar az mı yoksa baloncuk buton gibi şeyler için geniş bir katalog var mı?

Genişletmek için tıkla...

İmleci üzerine getirdiğinde rengin değişmesini istiyorsan hover etiketini kullanabilirsin. class = exp_class ise css içindeki exp_class:hover etiketi altındaki kodlar yalnızca imleç üzerine geldiğinde çalışır.

ikiikiyedi dedi:

İmleci üzerine getirdiğinde rengin değişmesini istiyorsan hover etiketini kullanabilirsin. class = exp_class ise css içindeki exp_class:hover etiketi altındaki kodlar yalnızca imleç üzerine geldiğinde çalışır.

Genişletmek için tıkla...

Aynen hover ile yapmak aklıma geldi ancak siz boostrap'da bunlar var deyince oradan alayım madem diye düşündüm sağolun.

mimario dedi:

Bootstrap oldukça yaygın bir CSS kütüphanesi. Youtube üzerinden arama yaparak çok daha basit sonuçlara ulaşabilirsiniz. Attığınız linkteki sol taraftaki seçenekler Bootstrap'ın bize sunduğu içerikler.

Genişletmek için tıkla...

Bence de bunu öğrenmek işleri bayağı bir hızlandıracak gibi. Teşekkür ederim.

Egid Dikmen dedi:

Aynen hover ile yapmak aklıma geldi ancak siz boostrap'da bunlar var deyince oradan alayım madem diye düşündüm sağolun.

Bence de bunu öğrenmek işleri bayağı bir hızlandıracak gibi. Teşekkür ederim.

Genişletmek için tıkla...

Bootstrap'ten aldığın ögelerde değişiklik yapabilirsin, mesela sadece şekli için alabilirsin. Zaten yazacağın kodlar onun sahip olduğu default ayarlara göre öncelik gösterir. Göstermez ise !important koduna bi göz gezdir. Ama bootstrap kullanmanı tavsiye ediyorum boş yere öge yaratmak ile uğraşma. Bootstrap artık her yerde kullanılıyor, işin basitine kaçmak gibi düşünme.