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

Elontidirax · 2 Aralık 2021

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.

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ı.

300319 · 2 Aralık 2021

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.

300319 · 2 Aralık 2021

Kodları atar mısınız?

Elontidirax · 2 Aralık 2021

300319 dedi:
Kodları atar mısınız?

[CODE lang="html" title="html" highlight="154"]<!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>[/CODE]

[CODE lang="css" title="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;
}[/CODE]

300319 · 2 Aralık 2021

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?

Elontidirax · 2 Aralık 2021

300319 dedi:

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.

Yerine.

300319 · 2 Aralık 2021

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.

Elontidirax · 2 Aralık 2021

300319 dedi:

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.

300319 · 2 Aralık 2021

@Elontidirax aklıma şu an tek gelen bu doğrusu Aklıma daha sonra daha iyi bir fikir gelirse yazarım. Rica ederim. İyi geceler

Elontidirax · 2 Aralık 2021

300319 dedi:
@Elontidirax aklıma şu an tek gelen bu doğrusu Aklıma daha sonra daha iyi bir fikir gelirse yazarım. Rica ederim. İyi geceler

Size de iyi geceler.

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

Ayrıntılı düzenleme

Elontidirax

Picopat

300319

300319

Zettapat

Elontidirax

Picopat

300319

Zettapat

Elontidirax

Picopat

300319

Zettapat

Elontidirax

Picopat

300319

Zettapat

Elontidirax

Picopat

Benzer konular