Ä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 ID="Content2" ContentPlaceHolderID="head" Runat="Server">
<!-- Bootstrap -->
<html lang="en"></html>
w <html lang="en"></html>
<!-- Required meta tags -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" title="Verag Spedition AG AvisoTV Flex"/>

View File

@@ -72,9 +72,7 @@
' Return "asd"
' End Get
' End Property,
</script>
</script>
<script type="text/javascript" src="../js/languageupdatescript.js"></script>
@@ -119,8 +117,8 @@
<!--Hover Info -->
<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 type="text/javascript">
$(document).ready(function () {
$(".btn").click(function () {
$("#myModal").modal("show");
@@ -253,8 +251,8 @@
<li>
<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">
<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>
<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" 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>
</li>
@@ -405,7 +403,7 @@
</div>
<div class="btn-group">
<%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%>
<a type="button" class="btn btn-primary" href="Cards_Boxes.aspx">Karten_Boxen</a>
<% End If %>
@@ -422,21 +420,21 @@
</div>
</div>
<div style="width:110px;"></div>
<div class="dropdown" id="dropdownbtnmain">
<button class="dropbtn" id="dropbtnbtnbtn"
<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>
<div class="dropdown" id="dropdownbtnmain" style="position: absolute; top:-20px; right:170px; width:30px;z-index:1032">
<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; 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>
<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" 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>-->
</ul></div>
<div class="dropdown" style="background-color:#fff; color:#043381;position:absolute;right:15%;top:15%;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>
<div class="dropdown-content" id="langdropdown">
<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: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" style="position:absolute;top:2%;z-index:1031">
<% Dim stringDE = "&nbsp DE"
Dim stringEN = "&nbsp EN"
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>
</div>
</div>
</nav> </div>
</nav></div>
<!-- Container zur Ausrichtung des Contents-->
<div style="margin-left:5px;margin-right:5px">
<div style="height:95px;"></div>

View File

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