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

Erdemztrk124

Erdemztrk124

Kilopat
Katılım
6 Temmuz 2017
Mesajlar
120
Yer
Amasya/Suluova
Daha fazla  
Sistem Özellikleri
֎RYZEN 5 5500
֎ASUS PRIME A320M-K
֎ADATA XPG 8GB 3200MHZ CL16 X2
֎WD SN570 500GB 3500MB/2300MB
֎ASUS GEFORCE DUAL RTX 3060 V2 OC 12GB
֎VENTO VG10F
֎FSP HYPER H3-550 80+ PRO 550W
Cinsiyet
Erkek
Meslek
BİLGİSAYAR TEKNİKERİ
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: 103
Son düzenleyen: Moderatör:
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;
}
 
dgknbzglu dedi:
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;
}
Genişletmek için tıkla...
denedim fakat çalışmadı float: right; verdiğimde menü alanına verdiğim margin top kısmını geçmiyor blokluyor sanki
 
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.
 
MuratBYRKTR dedi:
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.
Genişletmek için tıkla...
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: 99
dgknbzglu dedi:
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;
}
Genişletmek için tıkla...

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

Bu da görseli
1665038742493.png
 
Erdemztrk124 dedi:
Maalesef işe yaramadım orada menü alanına takılıp kalıyor
Genişletmek için tıkla...
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.
 
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;
}
 

Benzer konular

B
HTML CSS div nasıl konumlandırılır?
Mesaj
7
Görüntüleme
578
WoqZ
WoqZ
Egit DİKMEN
  • Çözüldü
Çözüldü  CSS div içerisindeki divlerin taşması nasıl sağlanır?
Mesaj
7
Görüntüleme
1.184
Diego
D
emregunel0
HTML <div> yanına yeni div nasıl açılır?
Mesaj
3
Görüntüleme
1.199
emregunel0
emregunel0
NaberKanki
HTML CSS nasıl öğrenilir?
2
Mesaj
14
Görüntüleme
2.172
Regicide
Regicide
erenghlt
HTML CSS loader ekleme
Mesaj
5
Görüntüleme
1.144
erenghlt
erenghlt

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı