Çözüldü HTML'de hızlı erişim öğrelerini sağa yaslama

llama01 · 18 Nisan 2022

Şu daire içine aldığım yeri sağ yaslamaya çalışıyorum ama olmuyor. Yardım edebilecek var mı?
css

CSS:

.logo{
 border-top:4px solid #66b933;
}
.genislik{
 width: 1024px;
 margin: auto.
 }
.anamenu{
 background: #e8e8e8;
}
.anamenu h3{
 display: inline-block;
 font-size: 45px;
 color: black;
 padding-left: 20px;
}
.anamenu p{
 display: inline-block;
 border-left:1px solid #66b933;
 margin-left: 5px;
 padding-left: 10px;
 color: #606060;
}
.anamenu a{
 width: 150px;
 height: 25px;
 padding-left: 10px;
 text-decoration: none;
 color: black;
 font-size: 20px;
}
.anamenu a:hover{
 color: #66b933;
}

HTML.

HTML:

<div class="logo"></div>
 <div class="anamenu genislik">
 <h3>RAZER</h3>
 <p>For Gamers<br>By Gamers</p>
 <a href="#">ANA SAYFA</a>
 <a href="#">HAKIMIZDA</a>
 <a href="#">SERVİSLER</a>
 <a href="#">ÜRÜNLER</a>
 <a href="#">MAĞAZA</a>
 <a href="#">İLETİŞİM</a>
 </div>

llama01 · 21 Nisan 2022

Moderasyon Ekibi dedi:
Nasıl çözdünüz?

Değiştireli iki gün oldu ama CSS'ini atabilirim.

CSS:

.anamenu{
    background: #e8e8e8;
    text-align: right;
    padding-right: 50px;
}
.anamenu h3{
    display: inline-block;
    font-size: 45px;
    color: black;
    padding-left: 20px;   
}
.anamenu p{
    display: inline-block;
    border-left:1px solid #66b933;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 150px;
    color: #606060;
}
.anamenu a{
    width: 150px;
    height: 25px;
    padding-left: 10px;
    text-decoration: none;
    color: black;
    font-size: 20px;
}
.anamenu a:hover{
    color: #66b933;

RamazanQs · 18 Nisan 2022

Position komutu ile yapılıyordu uzun zaman oldu her şeyi unuttum ama şu video işinizi görebilir

Ecmel · 18 Nisan 2022

Kodunda oldukça fazla hata mevcut. Responsive tasarıma aykırı şeyleri yapmışsın, öncelikle bu konuda kendini geliştirmen lazım.

Bu haliyle çözülsün istiyorsan "anamenu" adlı classına display:flex;, align-items: center; vermelisin. Ondan sonra a taglarının hepsini bir div içine alıp o dive margin-left:auto; vermen yeterli. Fakat kodun hiç sağlıklı değil, baştan yazılsa daha faydalı olur.

RamazanQs · 18 Nisan 2022

Ecmel dedi:
Kodunda oldukça fazla hata mevcut. Responsive tasarıma aykırı şeyleri yapmışsın, öncelikle bu konuda kendini geliştirmen lazım.

Bu haliyle çözülsün istiyorsan "ana menü" adlı classına display:flex;, align-items: center;
Ve margin-left:auto; özelliklerini vermen yeterli. Fakat kodun hiç sağlıklı değil, baştan yazılsa daha faydalı olur.

Sanırım arkadaş zaten öğrenme aşamasında bu siteyi kullanmak için yaptığını düşünmüyorum o yüzden kusursuz bir koda ihtiyacı olduğunu sanmıyorum ama kendini geliştirmesi gereken kısımlar hakkında bilgi vermeniz çok doğru bu yüzden bir daha ki yazdığı kodlar daha kaliteli olacaktır.

Ecmel · 18 Nisan 2022

RamazanQs dedi:
Sanırım arkadaş zaten öğrenme aşamasında bu siteyi kullanmak için yaptığını düşünmüyorum. O yüzden kusursuz bir koda ihtiyacı olduğunu sanmıyorum.

Öğrenirken ne kadar düzgün öğrenirsen o kadar hızlı ilerlersin. Koddaki hatalarını öğrenme aşamasında kendisi tespit ederse ve düzeltirse daha fazla katkı alır. Sırf öğreniyorum diye baştan sağma olmaya gerek yok.

Fena gitmemiş ama öğrenmesi gereken ve düzeltmesi gereken yerler mevcut. Başta responsive tasarım var.

llama01 · 19 Nisan 2022

Ecmel dedi:
Öğrenirken ne kadar düzgün öğrenirsen o kadar hızlı ilerlersin. Koddaki hatalarını öğrenme aşamasında kendisi tespit ederse ve düzeltirse daha fazla katkı alır. Sırf öğreniyorum diye baştan sağma olmaya gerek yok.

Fena gitmemiş ama öğrenmesi gereken ve düzeltmesi gereken yerler mevcut. Başta responsive tasarım var.

Hocam çok teşekkürler bir şekilde çözdüm. Diğer arkadaşın dediği gibi daha yeni öğreniyorum.

Moderasyon Ekibi · 19 Nisan 2022

Nasıl çözdünüz?

llama01 · 21 Nisan 2022

Moderasyon Ekibi dedi:
Nasıl çözdünüz?

Değiştireli iki gün oldu ama CSS'ini atabilirim.

CSS:

.anamenu{
    background: #e8e8e8;
    text-align: right;
    padding-right: 50px;
}
.anamenu h3{
    display: inline-block;
    font-size: 45px;
    color: black;
    padding-left: 20px;   
}
.anamenu p{
    display: inline-block;
    border-left:1px solid #66b933;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 150px;
    color: #606060;
}
.anamenu a{
    width: 150px;
    height: 25px;
    padding-left: 10px;
    text-decoration: none;
    color: black;
    font-size: 20px;
}
.anamenu a:hover{
    color: #66b933;

Çözüldü HTML'de hızlı erişim öğrelerini sağa yaslama

Ayrıntılı düzenleme

llama01

Hectopat

llama01

RamazanQs

Hectopat

Ecmel

Megapat

RamazanQs

Hectopat

Ecmel

Megapat

llama01

Hectopat

Moderasyon Ekibi

Yetkili Üye

llama01

Hectopat

Benzer konular

Bu konuyu görüntüleyen kullanıcılar