Div sağ üst köşeye nasıl yerleştirilir?

Erdemztrk124

Hectopat
Katılım
6 Temmuz 2017
Mesajlar
43
Daha fazla  
Cinsiyet
Erkek
Merhabalar aşağıda kaynak kodlarını ve ekran görüntüsünü paylaştım. Mavi kutu ustalan classına sahip olan kutunun sağ üst köşesine getirmek istiyorum fakat bir türlü olmuyor.
HTML:
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Anasayfa</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/stil.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>

<body>
    <header>
        <div class="ustalan">
            <div class="logoalan"><a href="#">OYUNCU ODAM<span>:)</span></a></div>
           
            <div class="menualan">
                <ul>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Ürünler</a></li>
                    <li><a href="#">Hakkımızda</a></li>
                </ul>
            </div>
            <div class="a"></div>
        </div>
    </header>
</body>
</html>
CSS:
header{
    width: 100%;
    height: 100px;
    background-color: #313131;
    border-bottom: 3px solid #CA3E47;
}
.ustalan{
    width: 80%;
    height: 100px;
    margin: 0 auto 0 auto;

}
.logoalan{
    width: 350px;
    height: 97px;
    text-align: center;
    float: left;
}
.logoalan a{
    text-decoration: none;
    color: #FFFFFF;
    font-family: 'Press Start 2P', cursive;
    font-size: 50px;
    transition: 5s;
}
.logoalan a:hover{
    color: #CA3E47;
    float: left;
}
.logoalan a span{
    color: #313131;
}
.logoalan a span:hover{
    color: #ffffff;
}
.menualan{
    width:auto;
    height:auto;
    margin: 64px 0 0 0 ;
    float: right;
    display: inline;
   
}
.menualan ul{
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.menualan ul li{
    float: left;
}
.menualan ul li a{
    display: block;
    color: #ffffff;
    padding: 10px 5px 10px 5px;
    text-decoration: none;
    font-family: 'Press Start 2P', cursive;
   
}
.menualan ul li a:hover{
    background-color: #CA3E47;
}
.a{
    background-color: aqua;
    width: 250px;
    height: 25px;
    display: inline;
    float: right;
}
 

Dosya Ekleri

  • resim_2022-10-04_022420848.png
    resim_2022-10-04_022420848.png
    190,9 KB · Görüntüleme: 40
Son düzenleyen: Moderatör:

dgknbzglu

Hectopat
Katılım
5 Mart 2019
Mesajlar
1.056
Çözümler
22
Yer
İstanbul/Maltepe
Daha fazla  
Cinsiyet
Erkek
Meslek
PHP Developer
HTML:
<header>
        <div class="ustalan">
          <div class="xbiralan"></div>
            <div class="logoalan"><a href="#">OYUNCU ODAM<span>:)</span></a></div>
          
            <div class="menualan">
                <ul>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Ürünler</a></li>
                    <li><a href="#">Hakkımızda</a></li>
                </ul>
            </div>
        </div>
    </header>

CSS:
.xbiralan{
    background-color: aqua;
    width: 250px;
    height: 25px;
    display: inline;
    float: right;
}
 
KS
KS
Erdemztrk124

Erdemztrk124

Hectopat
Katılım
6 Temmuz 2017
Mesajlar
43
Daha fazla  
Cinsiyet
Erkek
HTML:
<header>
        <div class="ustalan">
          <div class="xbiralan"></div>
            <div class="logoalan"><a href="#">OYUNCU ODAM<span>:)</span></a></div>
         
            <div class="menualan">
                <ul>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Ürünler</a></li>
                    <li><a href="#">Hakkımızda</a></li>
                </ul>
            </div>
        </div>
    </header>

CSS:
.xbiralan{
    background-color: aqua;
    width: 250px;
    height: 25px;
    display: inline;
    float: right;
}
denedim fakat çalışmadı float: right; verdiğimde menü alanına verdiğim margin top kısmını geçmiyor blokluyor sanki
 

MuratBYRKTR

Zeptopat
Katılım
3 Ekim 2022
Mesajlar
11
Daha fazla  
Cinsiyet
Erkek
Meslek
Full Stack Software Engineer
CSS:
    .a {
        background-color: aqua;
        width: 250px;
        height: 25px;
        margin-left: auto;
    }

a css classina `margin-left: auto;` eklersen icinde bulundugu divin en sagina gidecektir.
 
KS
KS
Erdemztrk124

Erdemztrk124

Hectopat
Katılım
6 Temmuz 2017
Mesajlar
43
Daha fazla  
Cinsiyet
Erkek
CSS:
    .a {
        background-color: aqua;
        width: 250px;
        height: 25px;
        margin-left: auto;
    }

a css classina `margin-left: auto;` eklersen icinde bulundugu divin en sagina gidecektir.
malesef işe yaramadım orda menü alanına takılıp kalıyor
 

Dosya Ekleri

  • resim_2022-10-05_203514005.png
    resim_2022-10-05_203514005.png
    254,8 KB · Görüntüleme: 17

dgknbzglu

Hectopat
Katılım
5 Mart 2019
Mesajlar
1.056
Çözümler
22
Yer
İstanbul/Maltepe
Daha fazla  
Cinsiyet
Erkek
Meslek
PHP Developer
HTML:
<header>
        <div class="ustalan">
          <div class="xbiralan"></div>
            <div class="logoalan"><a href="#">OYUNCU ODAM<span>:)</span></a></div>
         
            <div class="menualan">
                <ul>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Ürünler</a></li>
                    <li><a href="#">Hakkımızda</a></li>
                </ul>
            </div>
        </div>
    </header>

CSS:
.xbiralan{
    background-color: aqua;
    width: 250px;
    height: 25px;
    display: inline;
    float: right;
}

Yukarıda bahsettiğim kodların codepen linki : CodePen

Bu da görseli
1665038742493.png
 

MuratBYRKTR

Zeptopat
Katılım
3 Ekim 2022
Mesajlar
11
Daha fazla  
Cinsiyet
Erkek
Meslek
Full Stack Software Engineer
Maalesef işe yaramadım orada menü alanına takılıp kalıyor
Kod:
 Display: İnline;
 Float: Right;
Bu ikisini silip,
Kod:
margin-left: Auto;
eklemelisin.

Kod:
 .a {
 background-color: aqua;
 width: 250px;
 height: 25px;
 margin-left: auto;
 }

Bu sekilde olmalidir.
 

alicaliskan

Decapat
Katılım
25 Ağustos 2020
Mesajlar
246
Yer
Türkiye
Daha fazla  
Cinsiyet
Erkek
Bu kodları deneyebilir misiniz?

GÖRSEL


Adsız.png

HTML Kodları

HTML:
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Anasayfa</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/stil.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
  
</head>

<body>
    <header>
        <div class="ustalan">
            <div class="logoalan"><a href="#">OYUNCU ODAM<span>:)</span></a></div>
          
            <div class="menualan">
                <ul>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Ürünler</a></li>
                    <li><a href="#">Hakkımızda</a></li>
                </ul>
            </div>
            <div class="a"></div>
        </div>
    </header>
</body>
</html>



CSS Kodları

CSS:
     header{
    width: 100%;
    height: 100px;
    background-color: #313131;
    border-bottom: 3px solid #CA3E47;
}
.ustalan{
    width: 80%;
    height: 100px;
    margin: 0 auto 0 auto;
    position: relative;

}
.logoalan{
    width: 350px;
    height: 97px;
    text-align: center;
    float: left;
}
.logoalan a{
    text-decoration: none;
    color: #FFFFFF;
    font-family: 'Press Start 2P', cursive;
    font-size: 50px;
    transition: 5s;
}
.logoalan a:hover{
    color: #CA3E47;
    float: left;
}
.logoalan a span{
    color: #313131;
}
.logoalan a span:hover{
    color: #ffffff;
}
.menualan{
    width:auto;
    height:auto;
    margin: 64px 0 0 0 ;
    float: right;
    display: inline;
  
}
.menualan ul{
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.menualan ul li{
    float: left;
}
.menualan ul li a{
    display: block;
    color: #ffffff;
    padding: 10px 5px 10px 5px;
    text-decoration: none;
    font-family: 'Press Start 2P', cursive;
  
}
.menualan ul li a:hover{
    background-color: #CA3E47;
}
.a{
    background-color: aqua;
    width: 250px;
    height: 25px;
    position: absolute;
    right: 0px;
}
 
Yukarı