The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Dropdown menu problem.
questionel
post 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:
IPB Image

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 5 2021, 07:15 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
questionel
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 5 2021, 07:37 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
questionel
post 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;
}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 5 2021, 12:10 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:38 PM