Absolute elemanı başka bir elemana göre konumlandırma

Primearc

Hectopat
Katılım
3 Ocak 2021
Mesajlar
1.489
Makaleler
3
Çözümler
13
Yer
Matrix
Açılır menü çubuğu yaparken bir sorunla karşılaştım. Alt menü, üst menünün arasına giriyor ve görüntüyü bozuyor. Ben de alt menünün diğer elemanlardan tamamen bağımsız olmasını, ama üst menünün hemen altına gelmesini istiyorum. Bunu nasıl yapabilirim?
 
[CODE lang="css" highlight="3"].altmenu {
position: absolute;
top: -100px;
}[/CODE]

top değerini eksi üst menünün yüksekliği şeklinde yapmalısın.
 
Sayfa boyutu değiştikçe oranlar bozulacağından bu yöntemi kullanmak istemiyorum.
Height değişmez ki barların height değeri sabit verilir.Ama değişmesini istiyorsan altmenüyü üstmenü içine alıp üstmenüye position: relative; verip bottom: -100px verebilirsin.Kapsayıcısı relative olan absolute'lar relative'e göre pozisyonlanır.
 
Height değişmez ki barların height değeri sabit verilir.Ama değişmesini istiyorsan altmenüyü üstmenü içine alıp üstmenüye position: relative; verip bottom: -100px verebilirsin.Kapsayıcısı relative olan absolute'lar relative'e göre pozisyonlanır.
max-height ile o olayı hallettim zaten. Görsel atarsam neyden bahsedildiği daha rahat anlaşılacaktır.
Normalde durum tam istediğim gibi şöyle:
Ekran görüntüsü 2021-03-18 215329.png



Ama Dillerin altına bir ul elemanı daha ekleyince şöyle oluyor:
Ekran görüntüsü 2021-03-18 215312.png



Yapmak istediğim şey en üstteki fotoğraftaki Diller in altına şu mavi listeyi getirmek.
Daha sonra da eklediğim listeyi düzenleyip. display: none; yapacağım. Üstüne geldiğimde açılması içinse hover seçicisiyle display: inline block; yapacağım. Böylece sadece üzerine geldiğimde gözükdecek. Ama bu şekilde araya girmesini istemiyorum sadece altına gelmesin istiyorum.
 
Son düzenleme:
max-height ile o olayı hallettim zaten. Görsel atarsam neyden bahsedildiği daha rahat anlaşılacaktır.
Normalde durum tam istediğim gibi şöyle:
Eki Görüntüle 929169


Ama Dillerin altına bir ul elemanı daha ekleyince şöyle oluyor:
Eki Görüntüle 929175


Yapmak istediğim şey en üstteki fotoğraftaki Diller in altına şu mavi listeyi getirmek.
Daha sonra da eklediğim listeyi düzenleyip. display: none; yapacağım. Üstüne geldiğimde açılması içinse hover seçicisiyle display: inline block; yapacağım. Böylece sadece üzerine geldiğimde gözükdecek. Ama bu şekilde araya girmesini istemiyorum sadece altına gelmesin istiyorum.
İstediğinizi gayet iyi anladım, ama html'i görmeden yorum yapmak boşa sıkmak gibi olur.HTML'i atarsanız yardımcı olabilirim.
 
Kodu atamıyorum daha sonra tekrar deneyeceğim şöyle bir hata alıyorum nedense Technopattan

Bir sorun ile karşılaştık. Lütfen daha sonra tekrar deneyin. Tarayıcı konsolunda daha fazla hata detayı olabilir.
CSS:
* {
    margin: 0px;
    font-family: 'Work Sans', sans-serif;
    font-weight: lighter;
}

body {
    background-color: #2F3036;
    max-width: 1000vh;
}

nav {
    display: flex;
    position: relative;
    background-color: #2F303F;
    opacity: 0.97;
    height: 40px;
    text-align: center;
    align-items: center;
    justify-content: center;
    top: 0;
}

footer a,
p {
    color: #d6d6d6;
    margin: 10px;

}

footer a:hover {
    color: white;
    transition: 1s;

}

.HeadImage1 {
    
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 940px;
}

.HeadImage2 {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 470px;
}

.Nav2 {
    background-color: #555d50;
    opacity: 0.9;
    max-height: 200px;
    align-items: center;
    justify-content: center;
    position: sticky;
}

.Nav2> ul {
  
    list-style: none;
    text-align: center;
}

.Nav2> ul> li {
    display: inline-block;
    margin-right: 25px;
    
    
    
    
}
.Nav2> ul> li> a {
    color: #d6d6d6;
    display: inline-block;
    line-height: 50px;
    padding:0px 5px;
    text-decoration: none;
  
}

.Nav2 ul li a:hover {
    color: white;
    transition: 500ms;
}


#Logo {
    margin-left: 20px;
    text-align: left;
    color: #d6d6d6;
    font-family: 'Major Mono Display', monospace;
    font-weight: bold;
    text-decoration: none;
    font-size: 20px;
}

#Logo:hover {
    color: white;
    transition: 500ms;
}


#NavbarUl li a {
    display: block;
    text-decoration: none;
    color: #d6d6d6;
    font-family: 'Palanquin', sans-serif;
    font-weight: lighter;
    word-spacing: 5px;
    min-width: 150px;
    text-align: center;


}



#NavbarUl li a:hover {
    color: white;
    transition: 500ms;
}

#NavbarUl li {
    list-style: none;
    display: inline-block;
    margin-right: 1px;
    padding: 0px 20px;
}


#HeadTitle {
    color: ghostwhite;
    font-family: 'Major Mono Display', monospace;
    font-size: 100px;
    display: inline-block;
    position: relative;
    font-weight: lighter;
    margin: 20px;
}

#Footer {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    background-color: #333333;
    width: 100%;
    height: 200px;
}
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yazılım-RA9</title>

    <link rel="stylesheet" href="Genel.css">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap" rel="stylesheet">

    <script src="https://kit.fontawesome.com/82039359a4.js" crossorigin="anonymous"></script>

    <style>
        .HeadImage2 {
            background-image: url(img/Software-Engineering-2.jpg);
        }
        
    </style>

</head>
HTML:
<body>

    <nav>

        <span><a id="Logo" href="MainMenu.html">A</a></span>

        <ul id="NavbarUl">

            <li><a href="Donanım.html">Donanım</a></li>
            <li><a style="color: #9999;"  href="Yazılım.html">Yazılım</a></li>
            <li><a href="MainMenu.html">RA9 Nedir?</a></li>
            <li><a href="NotFound.html">Destek Olun</a></li>

        </ul>

    </nav>

    <header>

        <div class="HeadImage2">
            <h1 id="HeadTitle">
                Yazılım
            </h1>


        </div>

        <div class="Nav2">
            <ul>
                <li><a href="">Diller</a></li>
            <ul>
                <li><a href="">fsdfsda</a></li>
                <li><a href="">asdf</a></li>
                <li><a href="">asdf</a></li>
                <li><a href="">asdsadf</a></li>
                <li><a href="">asdf</a></li>
                <li><a href="">asdfasdfasdf</a></li>
                <li><a href="">asdf</a></li>
                <li><a href="">sadf</a></li>
                <li><a href="">asdfsdaf</a></li>
                <li><a href="">adsf</a></li>
            </ul> 
                <li><a href="">Algoritma</a></li>             
                <li><a href="">Programlama</a></li>
                <li><a href="">Yapay Zeka</a></li>
                <li><a href="">İşletim Sistemleri</a></li>
                <li><a href="">Kripto Paralar ve Veri Madenciliği</a></li>
                <li><a href="">Programlar</a></li>
                <li><a href="">Grafik Tasarım</a></li>


            </ul>
        </div>

    </header>


    <footer id="Footer">
        <p>©</p>
       <a href="NotFound.html"><i class="fab fa-youtube"></i></a>
       <a href="NotFound.html"><i class="fab fa-discord"></i></a>

    </footer>

</body>
</html>
Hatadan böyle yazmak zorunda kaldım. Üst taraf head alt taraf body kısmı. Yalnız body kısmını <body> etiketi yok ve eklenmiyor da ekleyince hata veriyor yine. Onu eklemeyi unutmayın
Ekleyebildim sonunda şu an kod temiz
 
Son düzenleme:
Hocam buyurun yapıyı biraz değiştirmem gerekti, marginleri, paddingleri, renkleri vs. kendi zevkinize göre ayarlayabilirsiniz.(Bende de kod atarken hata veriyor bu yüzden jsfiddle üzerinden atıyorum. Moderatörler görüyorsa bir el atarlar umarım.)

 
Hocam buyurun yapıyı biraz değiştirmem gerekti, marginleri, paddingleri, renkleri vs. kendi zevkinize göre ayarlayabilirsiniz.(Bende de kod atarken hata veriyor bu yüzden jsfiddle üzerinden atıyorum. Moderatörler görüyorsa bir el atarlar umarım.)

Elinize sağlık öncelikle ama istediğim bu değildi. Gördüğün gibi altında liste olan eleman yukarı çıkıyor. Ben se onunda diğer elemanlar ile aynı satırda olmasını ve yukarı çıkmasını istemiyorum. Max-height vermemde de yukarı taşıyor. Aslında ihtiyacım olan şeyi biliyorum. Örneğin Yazılım elemanına öyle bir özellik vermeliyim ki onu hiç bir şey hareket ettirmemeli. Ama böyle bir kod var mı bilmiyorum. İkincisi bu komutta kendi başına sorun yaratacak.. Ekran küçüldüğünde hareket etmemesini istemem. Benim için tek çare başlıkta da belirttiğim gibi eleman hem absolue olmalı, hem de başka bir elemana göre konumlandırılabilmeli.
 
Elinize sağlık öncelikle ama istediğim bu değildi. Gördüğün gibi altında liste olan eleman yukarı çıkıyor. Ben se onunda diğer elemanlar ile aynı satırda olmasını ve yukarı çıkmasını istemiyorum. Max-height vermemde de yukarı taşıyor. Aslında ihtiyacım olan şeyi biliyorum. Örneğin Yazılım elemanına öyle bir özellik vermeliyim ki onu hiç bir şey hareket ettirmemeli. Ama böyle bir kod var mı bilmiyorum. İkincisi bu komutta kendi başına sorun yaratacak.. Ekran küçüldüğünde hareket etmemesini istemem. Benim için tek çare başlıkta da belirttiğim gibi eleman hem absolue olmalı, hem de başka bir elemana göre konumlandırılabilmeli.
Ekran küçüldüğünde sıkıntı yaratmaması için taşıyıcıya flex-wrap: wrap; vermelisin.Diğer sorunun nasıl çözüleceği aklımda oluştu ama tam emin değilim ve şuan telefondayım, eğer bir aksilik olmazsa yarın bilgisayardan deneyip yine jsfiddle ile paylaşırım.İyi geceler dilerim.
 

Yeni konular

Geri
Yukarı