CSS Yazı Hizalama Yardım

Question

arkadaşlar merhaba. Aşağıda We diye başlayan yeri üstteki logoya nasıl yaklaştırabilirim ? Değerleri girdim fakat yapamadım. Böyle çirkin oldu

Lumidee · Answer

bottom yada top margin ayarlarını değiştirin

canbudak99 · Answer

Lumidee adlı üyeden alıntı:						mesajı görüntüle									bottom yada top margin ayarlarını değiştirin 		header h1 {
    color: #282a35;
    font-size: 4.5rem;
    margin-top: 0.1rem;
}

bu şekilde ama değişmiyor hocam.

header {
    background-color: #fff4a3;
    height: 700px;
    padding-top: calc(50px + 0.1rem);
    text-align: center;

burası da header kısmı.

.img-fluid {
    max-width: 400px;
    height: auto;
}

burasıda logo. Anlamadım valla.

ncinar · Answer

Dış  div için position:relative
yazı için position:absolute yaptıktan sonra top ve left değerlerini vermen yeterli olur.
yada margin-top değerini - vermen lazım bu olmayabilir.

canbudak99 · Answer

ncinar adlı üyeden alıntı:						mesajı görüntüle									Dış div için position:relative
yazı için position:absolute yaptıktan sonra top ve left değerlerini vermen yeterli olur.
yada margin-top değerini - vermen lazım bu olmayabilir. 		dış div dediğin yer tam olarak neresi oluyor hocam ?

ncinar · Answer

header h1 {
color: #282a35;
font-size: 4.5rem;
position:absolute;
left:%40 yada
left: calc(%50 - 100px) 100px değeri yazının width kadar
top:200px;
}

bu şekilde ama değişmiyor hocam.

header {
position:relative
background-color: #fff4a3;
height: 700px;
padding-top: calc(50px + 0.1rem);
text-align: center;

burası da header kısmı.

.img-fluid {
position:absolute
top:150px;
max-width: 400px;
height: auto;
}
Yukarda relative ve absolute kullandım deneyebilirsiniz.

canbudak99 · Answer

ncinar adlı üyeden alıntı:						mesajı görüntüle									header h1 {
color: #282a35;
font-size: 4.5rem;
position:absolute;
left:%40 yada
left: calc(%50 - 100px) 100px değeri yazının width kadar
top:200px;
}

bu şekilde ama değişmiyor hocam.

header {
position:relative
background-color: #fff4a3;
height: 700px;
padding-top: calc(50px + 0.1rem);
text-align: center;

burası da header kısmı.

.img-fluid {
position:absolute
top:150px;
max-width: 400px;
height: auto;
}
Yukarda relative ve absolute kullandım deneyebilirsiniz. 		Hocam header h1 {
    color: #282a35;
    font-size: 4.5rem;
    position: absolute;
    left: 32%;
    top: 350px;

}

yazdım oldu. Diğer dediklerinizi uygulamadım. Bu şekilde tam ortaladım yazıyı.

ncinar · Answer

canbudak99 adlı üyeden alıntı:						mesajı görüntüle									Hocam header h1 {
color: #282a35;
font-size: 4.5rem;
position: absolute;
left: 32%;
top: 350px;

}

yazdım oldu. Diğer dediklerinizi uygulamadım. Bu şekilde tam ortaladım yazıyı. 		Burda sorun olmaz hocam ama responsive yaptığınızda top:350 çok gelebilir. "%" ile ççalışmanız gerekebilir yada responsive'de 
@media media-type (media-feature){
/*Styles go here*/
} 
içerisinde yaparsanız sizin için iyi olur

mustafasatirogl · Answer

Kapsayıcı divin class'ına CSS ile display:flex; flex-direction:column; gap:10px ver olsun bitsin&#9786;&#65039;

canbudak99 · Answer

mustafasatirogl adlı üyeden alıntı:						mesajı görüntüle									Kapsayıcı divin class'ına CSS ile display:flex; flex-direction:column; gap:10px ver olsun bitsin&#9786;&#65039; 		Bu hiç olmadı hocam

canbudak99 · Answer

ncinar adlı üyeden alıntı:						mesajı görüntüle									Burda sorun olmaz hocam ama responsive yaptığınızda top:350 çok gelebilir. "%" ile ççalışmanız gerekebilir yada responsive'de
@media media-type (media-feature){
/*Styles go here*/
}
içerisinde yaparsanız sizin için iyi olur 		top: 35%; iyi oldu hocam

mustafasatirogl · Answer

canbudak99 adlı üyeden alıntı:						mesajı görüntüle									Bu hiç olmadı hocam  		Kodları görmek lazım tâbi.&#9786;&#65039;