DropDown.css wurde erstellt und bei AVISO-TV ausgelagert.

AvisoTV_FLEX.aspx

@@ -72,7 +72,7 @@
         <link rel="stylesheet" type="text/css" href="css/status.css"/>
         <link rel="SHORTCUT ICON" href="images/Icons/favicon/favicon.ico" />
     <!-- <link rel="stylesheet" type="text/css" href="css/edit_main.css"> -->
-
+    <link rel="stylesheet" type="text/css" href="css/Dropdown.css" />
     <style>        
         body{
              background-image: url(images/road.jpg);
@@ -86,50 +86,14 @@
             background-color:aliceblue;
             color:#043381;
         }
-        .dropbtn {
+       
-                    background-color: #043381;
-                    position: absolute;
-                    color: #043381;
-                    background-color:#fff;
-                    padding: 1em;
-                    font-size: 1em;
-                    border: none;
-        }
         #bodycontent{
             background-color:#fff;
             /*padding:2px 13px 0px 13px;*/
             padding: 0.07849293563579278vw  0.5102040816326531vw 0vw  0.5102040816326531vw;
              max-width: /*575px;*/ 126.65198237885463vw;
         }
-        /* Dropdown Content (Hidden by Default) */
+        
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #fff;
-            min-width:160px;            
-            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-            z-index: 1;
-        }
-         /* Links inside the dropdown */
-         .dropdown-content a {
-             color: black;
-             padding:0.75em 1em;
-             text-decoration: none;
-             display: block;
-         }
-          /* Change color of dropdown links on hover */
-          .dropdown-content a:hover {
-             background-color: #043381;
-             color: #fff;                   
-          }
-        /* Show the dropdown menu on hover */
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-        /* Change the background color of the dropdown button when the dropdown content is shown */
-        .dropdown:hover .dropbtn {
-            background-color: #043381;
-        }          
         table{           
             border-collapse: collapse;
             border-spacing: 0px;            
@@ -185,61 +149,7 @@
             color: #000;
             border-color: #cbccce
         }         
-        /*Button Dropdown Menue Language Picker*/
+        
-        .dropbtn {
-        background-color: #fff;      
-        left: 65%;
-        right: auto;
-        width: 100px;   
-        height: 20%;
-        position: relative;
-        color: #043381;
-        padding: 0px;
-        font-size:16px;
-        font-size: 1em;    
-        border: none;
-        z-index:562;
-        }
-        /* Dropdown Content (Hidden by Default) */
-        .dropdown-content {
-            display: none;
-            position: relative;
-            left: 65%;
-            color:#043381;
-            background-color: #fff;
-            min-width: 30px;
-            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-            z-index: 1000;
-        }
-        /* Links inside the dropdown */
-        .dropdown-content a {
-            color: black;
-            /*padding: 12px 16px;*/
-            padding: 0.8492569002123143vw 1.132342533616419vw;
-            text-decoration: none;  
-            z-index:812;
-        }
-        /* Change color of dropdown links on hover */
-        .dropdown-content a:hover {
-            background-color: #fff;
-            color:#043381;
-            background-color: floralwhite;           
-        }
-        /* Show the dropdown menu on hover */
-        .dropdown:hover .dropdown-content {
-            display: block;
-            z-index:5000;
-        }
-        /* Change the background color of the dropdown button when the dropdown content is shown */
-        .dropdown:hover .dropbtn {
-            background-color: #fff;
-            color:#043381;
-        }
-        .btn btn-primary btn-sm{
-             background-color: #fff;
-             color:#043381;
-        }
-
         /*Um alle Items der navbar nach rechts zu shiften außer das Nav-Brand(Logo) */
         .navbar-nav {
             margin-left: auto;

css/Dropdown.css

@@ -1,13 +1,14 @@
-.dropbtn {
+/*Button Dropdown Menue Language Picker*/
-    background-color: #043381;   
+.dropbtn {
-    top:5%;
+    background-color: #043381;
-    left: 75%;
-    width: 100px;
-    height: 40px;
     position: absolute;
-    color: white;
+    color: #043381;
+    background-color: #fff;
     padding: 16px;
+    /*padding: 1em;
+                    padding: 2.083333333333333vw;*/
     font-size: 16px;
+    /* font-size:1em;*/
     border: none;
 }
 
@@ -15,11 +16,10 @@
 .dropdown-content {
     display: none;
     position: absolute;
-    left: 85%;
     background-color: #fff;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    z-index: 1;
+    z-index: 10;
 }
 
     /* Links inside the dropdown */
@@ -45,3 +45,13 @@
 .dropdown:hover .dropbtn {
     background-color: #043381;
 }
+
+btn btn-primary btn-sm {
+    background-color: #fff;
+}
+@media (min-width: 558.98px) {
+    .dropdown {
+        position: sticky;
+        margin-left: 645px;
+    }
+}

status_Julius.aspx

@@ -79,7 +79,7 @@
         }
     </script>
     <script type="text/javascript" src="js/toptions/top_up-min.js"></script>
-   
+   <link rel="stylesheet" type="text/css" href="css/Dropdown.css"/>
  <style>
      p{
          font-size:1em;
@@ -149,57 +149,7 @@
         margin-top:-23px;              
         margin-right:5%
     }
-         /*Button Dropdown Menue Language Picker*/
+       
-    .dropbtn {
-                    background-color: #043381;
-                    position: absolute;
-                    color: #043381;
-                    background-color:#fff;
-                    padding: 16px;
-                  /*padding: 1em;
-                    padding: 2.083333333333333vw;*/
-                    font-size: 16px;
-                   /* font-size:1em;*/                 
-                    border: none;
-                }
-
-        /* Dropdown Content (Hidden by Default) */
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #fff;
-            min-width: 160px;                   
-            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);            
-            z-index: 10;
-        }
-
-         /* Links inside the dropdown */
-         .dropdown-content a {
-                color: black;
-                padding: 12px 16px;                
-                text-decoration: none;
-                display: block;
-         }
-
-                /* Change color of dropdown links on hover */
-          .dropdown-content a:hover {
-               background-color: #043381;
-               color: #fff;                   
-          }
-
-        /* Show the dropdown menu on hover */
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        /* Change the background color of the dropdown button when the dropdown content is shown */
-        .dropdown:hover .dropbtn {
-            background-color: #043381;
-        }
-
-        btn btn-primary btn-sm{
-            background-color:#fff;
-        }
         /*Um alle Einträge der navbar nach rechts zu shiften außer das Nav-Brand(Logo) */
         .navbar-nav {
             margin-left: auto;
@@ -369,10 +319,7 @@
                    font-size: initial;
                    overflow: hidden;
                }
-               .dropdown{
+              
-                   position:sticky;
-                    margin-left: 645px;
-               }
                #sidebar.active {                   
                     margin-left: -0px;
                 }