Çözüldü CSS divi diğer divin üstüne nasıl alırız?

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

Elontidirax

Picopat
Katılım
12 Mayıs 2021
Mesajlar
576
Merhaba, başlık sorunu tamamen anlatmıyor olabilir, sorunum şu; ben bir menu yapıyorum ve menu de dropdown menu tarzı bir şey olacak, fakat hover ile üzerine gelince tamamen yukarı gelmiyor, ben tamamen yukarı gelmesini istiyorum.

menu1.png


Menu bu, bu aşağıda olanda hover ile üzerine gelince olan, fakat ben bu gri div'in tamamının menu kısmını kaplamasını istiyorum, yani şu menu yazan kısımda da gri şey olacak ve menu yazı kısmı görünmeyecek, z-index denedim ama bir işe yaramadı.

menu2.png
 
Son düzenleme:
Çözüm
CSS:
.category{
    background-color: grey;
    height: 500px;
    width: 250px;
    position: relative;
    z-index: 2;
    display: none;
    transition-property: display;
    transition-duration: 2s;
    margin: -75px 0 0 0;
}

Aklıma bu geldi şimdilik.
KS
KS
Elontidirax

Elontidirax

Picopat
Katılım
12 Mayıs 2021
Mesajlar
576
Kodları atar mısınız?

html:
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</head>
<body>
    <div class="bar">
        <nav id="navbar">
            <ul id="navbarlist">
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks" class="categorys">Menu
                    <div class="category">
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</body>
</html>

</html>

CSS:
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.bar{
    background-color: rgb(62, 152, 255);
    width: 1000px;
    height: 50px;
    border: 10px rgb(68, 68, 68) solid;
    margin: auto;
    box-shadow: 0px 0px 2px black;
    position: relative;
}

nav ul{
    list-style-type: none;
    text-align: center;
}

nav ul li{
    float: left;
    font-size: 20px;
    width: 196px;
    height: 36px;
    z-index: 1;
}

#navbarlinks:hover{
    background-color: rgb(3, 66, 148);
    transition-property: all;
    transition-duration: 250ms;
}

a{
    text-decoration: none;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-right: 76px;
    padding-left: 76px;
    color: rgb(221, 221, 221);
}

a:hover{
    color: rgb(146, 146, 146);
}

.category{
    background-color: grey;
    height: 500px;
    width: 250px;
    position: relative;
    z-index: 2;
    display: none;
    transition-property: display;
    transition-duration: 2s;
}

.categorys:hover .category{
    display: block;
}
 

470650

Gigapat
Katılım
28 Ocak 2020
Mesajlar
11.658
Makaleler
32
Çözümler
187
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">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <div class="bar">
        <nav id="navbar">
            <ul id="navbarlist">
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks" class="categorys">Menu
                    <div class="category">
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</body>
</html>

</html>

CSS:
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.bar{
    background-color: rgb(62, 152, 255);
    width: 1000px;
    height: 50px;
    border: 10px rgb(68, 68, 68) solid;
    margin: auto;
    box-shadow: 0px 0px 2px black;
    position: relative;
}

nav ul{
    list-style-type: none;
    text-align: center;
}

nav ul li{
    float: left;
    font-size: 20px;
    width: 196px;
    height: 36px;
    z-index: 1;
}

#navbarlinks:hover{
    background-color: rgb(3, 66, 148);
    transition-property: all;
    transition-duration: 250ms;
}

#navbarlinks:hover:nth-child(5){
    background-color: gray;
    color: gray;
}
#last:hover{  background-color: rgb(3, 66, 148);
    transition-property: all;
    transition-duration: 250ms; }

a{
    text-decoration: none;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-right: 76px;
    padding-left: 76px;
    color: rgb(221, 221, 221);
}

a:hover{
    color: rgb(146, 146, 146);
}

.category{
    background-color: grey;
    height: 500px;
    width: 250px;
    position: relative;
    z-index: 2;
    display: none;
    transition-property: display;
    transition-duration: 2s;
}


.categorys:hover .category{
    display: block;
}
@Elontidirax istediğiniz bu sanırım?
 
KS
KS
Elontidirax

Elontidirax

Picopat
Katılım
12 Mayıs 2021
Mesajlar
576
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">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <div class="bar">
        <nav id="navbar">
            <ul id="navbarlist">
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks"><a href="">Menu</a></li>
                <li id="navbarlinks" class="categorys">Menu
                    <div class="category">
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</body>
</html>

</html>

CSS:
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.bar{
    background-color: rgb(62, 152, 255);
    width: 1000px;
    height: 50px;
    border: 10px rgb(68, 68, 68) solid;
    margin: auto;
    box-shadow: 0px 0px 2px black;
    position: relative;
}

nav ul{
    list-style-type: none;
    text-align: center;
}

nav ul li{
    float: left;
    font-size: 20px;
    width: 196px;
    height: 36px;
    z-index: 1;
}

#navbarlinks:hover{
    background-color: rgb(3, 66, 148);
    transition-property: all;
    transition-duration: 250ms;
}

#navbarlinks:hover:nth-child(5){
    background-color: gray;
    color: gray;
}
#last:hover{  background-color: rgb(3, 66, 148);
    transition-property: all;
    transition-duration: 250ms; }

a{
    text-decoration: none;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-right: 76px;
    padding-left: 76px;
    color: rgb(221, 221, 221);
}

a:hover{
    color: rgb(146, 146, 146);
}

.category{
    background-color: grey;
    height: 500px;
    width: 250px;
    position: relative;
    z-index: 2;
    display: none;
    transition-property: display;
    transition-duration: 2s;
}


.categorys:hover .category{
    display: block;
}
@Elontidirax istediğiniz bu sanırım?

Yok hocam öyle değil, alta bulunan gri dikdörtgen şekli yukarı getirmek istiyorum, menu yazan kısmın üzerine, menu kısmı görünmeyecek şekilde, ama nasıl getireceğimi anlayamadım.

Şu şekilde painten göstermelik yapmaya çalıştım.

menu2.png


Yerine.


menu2.png
 

470650

Gigapat
Katılım
28 Ocak 2020
Mesajlar
11.658
Makaleler
32
Çözümler
187
CSS:
.category{
    background-color: grey;
    height: 500px;
    width: 250px;
    position: relative;
    z-index: 2;
    display: none;
    transition-property: display;
    transition-duration: 2s;
    margin: -75px 0 0 0;
}

Aklıma bu geldi şimdilik.
 
Çözüm
KS
KS
Elontidirax

Elontidirax

Picopat
Katılım
12 Mayıs 2021
Mesajlar
576
CSS:
.category{
    background-color: grey;
    height: 500px;
    width: 250px;
    position: relative;
    z-index: 2;
    display: none;
    transition-property: display;
    transition-duration: 2s;
    margin: -75px 0 0 0;
}

Aklıma bu geldi şimdilik.

Evet hocam böyle, margini "margin: -23px 0 0 0;" yaptığımda tam istediğim gibi oldu, marginin - özelliği olduğunu bilmiyordum, bu bilgi içinde teşekkürler.
 
Yukarı