Dropdown menu problem. |
Dropdown menu problem. |
questionel |
Feb 5 2021, 06:55 AM
Post
#1
|
Group: Members Posts: 3 Joined: 5-February 21 Member No.: 27,774 |
So this may be confusing but this is how i tought about it:
I have 3 pages: -page.php -main.php -header.php page.php containts main.php and header.php like so : CODE <body> <div id="mainpage_wrapper"> <div id="header"> <?php include "header.php"; ?> <!-- Header --> </div> <div id="main"> <?php include "main.php"; ?> <!-- Main --> </div> </div> </body> In header.php i have a dropdown menu, but the problem is that it is behind the main page, there should be more items, not only 2: The blue-ish side is the header and the gray side is the main page. Css for header and dropdown: CODE #header_content { position: absolute; width: 100%; height: 200px; top: 0; background-color: #557a95; display: flex; justify-content: space-between; align-items: center; padding: 10px; overflow: hidden; } #header_content ul#menu { position: absolute; margin: 0; width: 200px; height: 50px; left: 20; right: auto; } #header_content ul#menu li { background: red; display: flex; z-index: 1; } And this is the css for the main page ( the one that overlaps my dropdown ): CODE #main_content { position: absolute; color: white; width: 100%; background-color: #5D5C61; top: 200px; z-index: 0; } Can i do something about it? Can it overlap somehow the main page? This post has been edited by questionel: Feb 5 2021, 06:55 AM |
pandy |
Feb 5 2021, 07:15 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
We need the HTML also. Can you link to the page? If you can't, please copy the output (View Source) and paste it in here.
|
questionel |
Feb 5 2021, 07:29 AM
Post
#3
|
Group: Members Posts: 3 Joined: 5-February 21 Member No.: 27,774 |
Here is the code:
CODE <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ULBS Streaming Platform</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="mainpage_wrapper"> <div id="header"> <div id="header_content"> <div id="sitemenu"> <div class="menu_button_bar"></div> <div class="menu_button_bar"></div> <div class="menu_button_bar"></div> <ul class="active_menu" id="menu"> <li><a href="#" id="item1"> Item1 </a></li> <li><a href="#"> Item2 </a></li> <li><a href="#"> Item3 </a></li> <li><a href="#"> Item4 </a></li> </ul> </div> <div id="logo" onclick="window.location='https://www.google.ro/';"> <img style="max-width: 100px; max-height:90px;width:auto;height:auto;" src="images/logo.png"> </div> <div id=profile> <img style="max-width: 50px; max-height:50px; border-radius: 50%;" src="https://lh5.googleusercontent.com/-e6KuMXmI_QQ/AAAAAAAAAAI/AAAAAAAAAAA/AMZuuckPwUb5megHQYgTZ7Bz27xW5Q82PQ/s96-c/photo.jpg"alt="avatar"> <ul class="active_profile" id="user_profile"> <li><a href="#">blabla </a></li> <li><a href="#">blabla 2</a></li> <li><a href="#">blabla 3</a></li> <li><a href="#">blabla 4</a></li> <li> <a href="logout.php"> Logout </a> </li> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script> $(document).ready(function() { $('#sitemenu').click(function() { $('#menu').toggleClass('active_menu'); }); $('#profile').click(function() { $('#user_profile').toggleClass('active_profile'); }); }); </script> <script> $(document).ready ( function () { $('#item1').click(function(){ $('#main').load('classes.php'); }); } ) </script> <!-- Header --> </div> <div id="main"> <div id="main_content"> </div> <!-- Main --> </div> <!-- <div id="footer"> --> <!--<div id="footer_content"> Footer </div> --> <!-- Footer --> <!--</div>--> </div> </body> </html> |
pandy |
Feb 5 2021, 07:37 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
Thanks. Post all of your CSS also. With what you've posted so far I don't see the problem. All four items are visible.
|
questionel |
Feb 5 2021, 08:38 AM
Post
#5
|
Group: Members Posts: 3 Joined: 5-February 21 Member No.: 27,774 |
Thank you ! I also tried to mess around with z-index but no results... Here is the code:
CODE #mainpage_wrapper { display: flex; flex-direction: column; overflow: hidden; } #header_content { position: absolute; width: 100%; height: 200px; top: 0; background-color: #557a95; display: flex; justify-content: space-between; align-items: center; padding: 10px; overflow: hidden; } #sitemenu { order: 1; width: 50px; padding-left: 10px; } #sitemenu:hover { cursor: pointer; } .menu_button_bar { width: 35px; height: 5px; background-color: rgb(201, 218, 218); margin: 6px 0; } .menu_button_bar:hover { background-color: rgb(113, 209, 209); } #logo { order: 2; width: 100px; cursor: pointer; } #profile { order: 3; width: 50px; height: 50px; cursor: pointer; } #main_content { position: absolute; color: white; width: 100%; background-color: #5D5C61; top: 200px; z-index: 0; } #userdata { display: flex; width: 100%; height: 50px; } #sitemenu { top: 0; left: 0; width: 40px; height: 40px; } #header_content ul#menu { position: absolute; margin: 0; width: 200px; height: 50px; left: 20; right: auto; } #header_content ul#user_profile { position: absolute; margin: 0; width: 200px; height: 50px; right: 10; left: auto; } #header_content ul#menu li { background: red; display: flex; z-index: 1; } #header_content ul#user_profile li { background: blue; display: flex; } #header_content ul.active_menu, #header_content ul.active_profile { display: none; } |
pandy |
Feb 5 2021, 12:10 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
Afraid I still see all 4 items. Or, at first I only see the menu button, but when I click it the menu with four items folds out.
Have anything more in there? Some canned JavaScript library maybe? Attached thumbnail(s) |
Lo-Fi Version | Time is now: 27th April 2024 - 09:15 PM |