Änderungen css dass Buttons von UserMenu sowie Language button rechts mitverschoben werden

This commit is contained in:
ja
2021-09-03 13:22:01 +02:00
parent 508517ec35
commit 112d57c556
4 changed files with 154 additions and 35 deletions

View File

@@ -4,7 +4,7 @@
</asp:Content> </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" Runat="Server"> <asp:Content ID="Content2" ContentPlaceHolderID="head" Runat="Server">
<!-- Bootstrap --> <!-- Bootstrap -->
<html lang="en"></html> w <html lang="en"></html>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" title="Verag Spedition AG AvisoTV Flex"/> <meta name="viewport" content="width=device-width, initial-scale=1" title="Verag Spedition AG AvisoTV Flex"/>

View File

@@ -72,9 +72,7 @@
' Return "asd" ' Return "asd"
' End Get ' End Get
' End Property, ' End Property,
</script> </script>
<script type="text/javascript" src="../js/languageupdatescript.js"></script> <script type="text/javascript" src="../js/languageupdatescript.js"></script>
@@ -119,8 +117,8 @@
<!--Hover Info --> <!--Hover Info -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> --> <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> -->
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
$(".btn").click(function () { $(".btn").click(function () {
$("#myModal").modal("show"); $("#myModal").modal("show");
@@ -253,8 +251,8 @@
<li> <li>
<a href="#UserSubmenu1" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle">User: <%=Me.Page.User.Identity.Name %></a> <a href="#UserSubmenu1" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle">User: <%=Me.Page.User.Identity.Name %></a>
<ul style="list-style: none;"class="collapse list-unstyled" id="UserSubmenu1"> <ul style="list-style: none;"class="collapse list-unstyled" id="UserSubmenu1">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
<li> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" style="text-decoration: none;background-color:#fff;color:#043381;text-align:left;border:none;font-size:16px;"><img src="../images/Icons/main/gear_blue.png"; style="width:15px; height:15px;color:#043381;background-color:#fff;margin-right:6px;" />Profil bearbeiten</button> </li> <li> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" style="text-decoration: none;background-color:#fff;color:#043381;text-align:left;border:none;font-size:16px;"><img src="../images/Icons/main/gear_blue.png"; style="width:15px; height:15px;color:#043381;background-color:#fff;margin-right:6px;" />Profil bearbeiten</button> </li>
<li> <button type="button" onclick="LogoutButton_Click" style="text-decoration: none;background-color:#fff;color:#043381;text-align:left;border:none;font-size:16px;"><img src="../images/Icons/main/Logout.svg.png"; style="width:20px; height:20px;color:#043381;background-color:#fff; margin-right:6px;"/>Logout</button> </li> <li> <button type="button" onclick="LogoutButton_Click" style="text-decoration: none;background-color:#fff;color:#043381;text-align:left;border:none;font-size:16px;"><img src="../images/Icons/main/Logout.svg.png"; style="width:20px; height:20px;color:#043381;background-color:#fff; margin-right:6px;"/>Logout</button> </li>
</ul> </ul>
</li> </li>
@@ -405,7 +403,7 @@
</div> </div>
<div class="btn-group"> <div class="btn-group">
<%If Me.Page.User.Identity.Name = "test" Then %> <%If Me.Page.User.Identity.Name = "test" Then %>
<a type="button" class="btn btn-primary">Rechnungen</a> <a type="button" class="btn btn-primary" href="Invoices.aspx">Rechnungen</a>
<%ElseIf Me.Page.User.Identity.Name = "test2" Then%> <%ElseIf Me.Page.User.Identity.Name = "test2" Then%>
<a type="button" class="btn btn-primary" href="Cards_Boxes.aspx">Karten_Boxen</a> <a type="button" class="btn btn-primary" href="Cards_Boxes.aspx">Karten_Boxen</a>
<% End If %> <% End If %>
@@ -422,21 +420,21 @@
</div> </div>
</div> </div>
<div style="width:110px;"></div>
<div class="dropdown" id="dropdownbtnmain"> <div class="dropdown" id="dropdownbtnmain" style="position: absolute; top:-20px; right:170px; width:30px;z-index:1032">
<button class="dropbtn" id="dropbtnbtnbtn" <button class="dropbtn" id="dropbtnbtnbtn" style="height:50px; width:120px"
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" style="background-color:#fff;color:#043381"><img src="../images/samples/default-avatar.jpg"; width="15"; /><a data-bs-toggle="modal" data-bs-target="#exampleModal"><asp:LoginName class="pointer" ID="LoginName2" runat="server" style="margin-left:6px"/></a></button> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" style="background-color:#fff;color:#043381; width:30px;height:50px"><img src="../images/samples/default-avatar.jpg"; width="15"; /><a data-bs-toggle="modal" data-bs-target="#exampleModal"><asp:LoginName class="pointer" ID="LoginName2" runat="server" style="margin-left:6px"/></a></button>
</button> </button>
<ul class="dropdown-content" id="dropdownmenuecont" style="top:15%"> <ul class="dropdown-content" id="dropdownmenuecont" style="top:50px;z-index:1032">
<li> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" style="text-decoration: none;background-color:#fff;color:#043381;text-align:left;border:none;font-size:16px;"><img src="../images/Icons/main/gear_blue.png"; style="width:15px; height:15px;color:#043381;background-color:#fff;margin-right:6px;" />Profil bearbeiten</button> </li> <li> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" style="text-decoration: none;background-color:#fff;color:#043381;text-align:left;border:none;font-size:16px;"><img src="../images/Icons/main/gear_blue.png"; style="width:15px; height:15px;color:#043381;background-color:#fff;margin-right:6px;" />Profil bearbeiten</button> </li>
<li> <button type="button" onclick="LogoutButton_Click" style="text-decoration: none;background-color:#fff;color:#043381;text-align:left;border:none;font-size:16px;"><img src="../images/Icons/main/Logout.svg.png"; style="width:20px; height:20px;color:#043381;background-color:#fff; margin-right:6px;"/>Logout</button> </li> <li> <button type="button" onclick="LogoutButton_Click" style="text-decoration: none;background-color:#fff;color:#043381;text-align:left;border:none;font-size:16px;"><img src="../images/Icons/main/Logout.svg.png"; style="width:20px; height:20px;color:#043381;background-color:#fff; margin-right:6px;"/>Logout</button> </li>
<!-- <div class="dropdown-divider"></div>--> <!-- <div class="dropdown-divider"></div>-->
</ul></div> </ul></div>
<div class="dropdown" style="background-color:#fff; color:#043381;position:absolute;right:15%;top:15%;z-index:1031"> <div class="dropdown" id="langbutmenu" style="background-color:#fff; color:#043381;position:absolute;top:17%;right:170px;z-index:1031">
<button class="dropbtn" id="dropbtnlang" style="color:#043381;background-color:#fff;position:absolute;top:15%;z-index:1031"><center><img id="myImage" src="../<%=flagpath%>" style="border:1px solid #fff;width:32px; justify-items:center;" alt="Logo Schriftzug: Verag Spedition AG Blaue Schrift: Verag Spedition Graue Schrift: AG" /></center></button> <button class="dropbtn" id="dropbtnlang" style="color:#043381;background-color:#fff;position:absolute;top:17%;z-index:1031"><center><img id="myImage" src="../<%=flagpath%>" style="border:1px solid #fff;width:32px; justify-items:center;" alt="Logo Schriftzug: Verag Spedition AG Blaue Schrift: Verag Spedition Graue Schrift: AG" /></center></button>
<div class="dropdown-content" id="langdropdown"> <div class="dropdown-content" id="langdropdown" style="position:absolute;top:2%;z-index:1031">
<% Dim stringDE = "&nbsp DE" <% Dim stringDE = "&nbsp DE"
Dim stringEN = "&nbsp EN" Dim stringEN = "&nbsp EN"
Dim stringBIH = "&nbsp BIH" Dim stringBIH = "&nbsp BIH"
@@ -452,7 +450,7 @@
<a id="ButtonBulgariaLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=BG&lan3=0" style="color:#043381;background-color:#fff"><img src="../<%= imgPath%>images/flags/flagge_BG_big.gif"; width="20"; <% If laenderkuerzel = "bg" Then Response.Write("style='border:1px solid #000'")%>/><%=stringBG%></a> <a id="ButtonBulgariaLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=BG&lan3=0" style="color:#043381;background-color:#fff"><img src="../<%= imgPath%>images/flags/flagge_BG_big.gif"; width="20"; <% If laenderkuerzel = "bg" Then Response.Write("style='border:1px solid #000'")%>/><%=stringBG%></a>
</div> </div>
</div> </div>
</nav> </div> </nav></div>
<!-- Container zur Ausrichtung des Contents--> <!-- Container zur Ausrichtung des Contents-->
<div style="margin-left:5px;margin-right:5px"> <div style="margin-left:5px;margin-right:5px">
<div style="height:95px;"></div> <div style="height:95px;"></div>

View File

@@ -279,7 +279,7 @@ ContentPlaceHolder1 {
color: #043381; color: #043381;
position: absolute; position: absolute;
right: 7%; right: 7%;
top: -5%; top: -10%;
z-index: 1031; z-index: 1031;
} }
#dropdownmenueuser { #dropdownmenueuser {
@@ -287,17 +287,24 @@ ContentPlaceHolder1 {
top: -170px; top: -170px;
right: -952px; right: -952px;
} }
#dropbtnbtnbtn { #dropbtnbtnbtn {
background-color: #fff; background-color: #fff;
color: #043381; color: #043381;
border: none; border: none;
z-index: 1031; z-index: 1031;
position: sticky padding-top: 2px;
left: 1025px;
padding-bottom: 0px;
} }
#dropdownmenuecont { #dropdownmenuecont {
margin-right: -5px; position:absolute;
top: 5px; padding-top: -10px;
} left:1025px;
padding-bottom: 0px;
height: 86px;
}
}
#dropdownmenuecont ul li .button { #dropdownmenuecont ul li .button {
font-size: 17px; font-size: 17px;
} }
@@ -393,24 +400,28 @@ ContentPlaceHolder1 {
cursor:pointer; cursor:pointer;
} }
#dropdownmenuecont { #dropdownmenuecont {
position: absolute; position: absolute;
top: -90px; padding-top: 25px;
right: -1072px; padding-left:-150px;
height: 75px; padding-bottom: 0px;
height: 86px;
} }
#dropbtnbtnbtn { #dropbtnbtnbtn {
background-color: #fff; background-color: #fff;
color: #043381; color: #043381;
border: none; right: 0px;
z-index: 1031; position:absolute;
position: absolute; padding-top: 0px;
height:52px; padding-right: 0px;
top:-70px; padding-left: 0px;
right:-1072px; padding-bottom: 0px;
} z-index:1031;
#langdropdown{ margin-bottom: 1px;
height:auto; margin-top: -10px;
width:100px;
height:20px;
} }
#dropdownmenuecont ul li .button{ #dropdownmenuecont ul li .button{
font-size:16px; font-size:16px;
} }
@@ -441,4 +452,8 @@ ContentPlaceHolder1 {
#dropbtnlang { #dropbtnlang {
margin-right: -39%; margin-right: -39%;
margin-top: 5%; margin-top: 5%;
}
#langdropdown{
margin-right: -39%;
margin-top:50px;
} }

106
css/Dropdown2.css Normal file
View File

@@ -0,0 +1,106 @@
/*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;
color:#043381;
}
@media (min-width: 558.98px) {
.dropdown {
position: sticky;
margin-left: 645px;
}
}
#ButtonDeutschLangPicker {
text-align: left;
background-color: #fff;
color: #043381;
text-decoration: none;
width: max-content;
}
#ButtonTürkeiLangPicker {
text-align: left;
background-color: #fff;
color: #043381;
text-decoration: none;
width: max-content;
}
#ButtonEnglischLangPicker {
text-align: left;
background-color: #fff;
color: #043381;
text-decoration: none;
width: max-content;
}
#ButtonSerbischLangPicker {
text-align: left;
background-color: #fff;
color: #043381;
text-decoration: none;
width: max-content;
}
#ButtonSerbischZweiLangPicker {
text-align: left;
background-color: #fff;
color: #043381;
text-decoration: none;
width: max-content;
}
#ButtonBulgariaLangPicker {
text-align: left;
background-color: #fff;
color: #043381;
text-decoration: none;
width: max-content;
}