asp:menu with image has padding above - c#

I have a menu bar in the site master in a table. For some reason I cant figure out there is always padding above it.
This is the css:
div.menu
{
padding: 0px 0px 0px 0px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
}
div.menu ul li
{
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a
{
padding: 4px 20px;
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
background-color: #2c4257;
}
div.menu a ul li a:visited
{
background-color: #25394B;
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #25394B;
color: #ef7c31;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #25394B;
color: #ef7c31;
text-decoration: none;
text-align:left
}
and this is in the site master
<table style="background-color: #2E4459">
<tr>
<td>
<asp:Menu ID="SettingsMenu" runat="server" EnableViewState="True" IncludeStyleBlock="false" Orientation="Horizontal" CssClass="menu">
<DynamicSelectedStyle ForeColor="#ef7c31" />
<Items>
<asp:MenuItem ImageUrl="Images/settings.png">
<asp:MenuItem NavigateUrl="~/Pages/CRMSettings/Area.aspx" Text="Area" />
<asp:MenuItem NavigateUrl="~/Pages/CRMSettings/Post.aspx" Text="Post" />
I don't know how to fix it there is around 30 px.
Its also happening with out the image, if I just put text.
This is the setting.png


div.menu
{
padding: 0px !important;
}
try that


I think this is what you need. Try this. Add this to your CSS
html,body
{
padding:0px;
margin:0px;
}


what I figured-out was there is a padding padding: 4px 20px; value for div.menu ul li a changing that will help you. change it to div.menu ul li ul li a
div.menu ul li ul li a
{
padding: 4px 20px;
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
background-color: #2c4257;
}

Related

How Can I Convert My Html Radio Button To ASP .NET

I Created a radio button in HTML:
.wrapper {
display: inline-flex;
background: #fff;
height: 100px;
width: 400px;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 20px 15px;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}
.wrapper .option {
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot {
height: 20px;
width: 20px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before {
position: absolute;
content: "";
top: 4px;
left: 4px;
width: 12px;
height: 12px;
background: #0069d9;
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"] {
display: none;
}
#option-1:checked:checked~.option-1,
#option-2:checked:checked~.option-2 {
border-color: #0069d9;
background: #0069d9;
}
#option-1:checked:checked~.option-1 .dot,
#option-2:checked:checked~.option-2 .dot {
background: #fff;
}
#option-1:checked:checked~.option-1 .dot::before,
#option-2:checked:checked~.option-2 .dot::before {
opacity: 1;
transform: scale(1);
}
.wrapper .option span {
font-size: 20px;
color: #808080;
}
#option-1:checked:checked~.option-1 span,
#option-2:checked:checked~.option-2 span {
color: #fff;
}
#import url('https://fonts.googleapis.com/css?family=Lato:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
.wrapper {
display: inline-flex;
height: 100px;
width: 400px;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 20px 15px;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
}
.wrapper .option {
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot {
height: 20px;
width: 20px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before {
position: absolute;
content: "";
top: 4px;
left: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"] {
display: none;
}
#option-1:checked:checked~.option-1,
#option-2:checked:checked~.option-2 {
border-color: #0069d9;
background: #0069d9;
}
#option-1:checked:checked~.option-1 .dot,
#option-2:checked:checked~.option-2 .dot {
background: #fff;
}
#option-1:checked:checked~.option-1 .dot::before,
#option-2:checked:checked~.option-2 .dot::before {
opacity: 1;
transform: scale(1);
}
.wrapper .option span {
font-size: 20px;
color: #808080;
}
#option-1:checked:checked~.option-1 span,
#option-2:checked:checked~.option-2 span {
color: #fff;
}
<div class="wrapper">
<input type="radio" name="select" id="option-1" checked>
<input type="radio" name="select" id="option-2">
<label for="option-1" class="option option-1">
<div class="dot"></div>
<span>MP3</span>
</label>
<label for="option-2" class="option option-2">
<div class="dot"></div>
<span>MP4</span>
</label>
</div>
I want To convert this into asp radio button and validate user input. Like if user selected mp4 then do this else do that.
I Tried To Do The same But Failed. Please HElp Me With This
Please help me. I am new in this Field
Adding Loream Ipsum For The Platform To Allow ME To Post This Question Because of less Words.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Clicking this button in C# selenium

How do I click this specific button in selenium in C#
I tried the a tag but it doesn't work
<a class="btn-primary" href="http://myjunkyard.co.za/confirm" itemprop="url" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 16px; color: #FFF; text-decoration: none; line-height: 2em; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 30px; background-color: #201D19; margin: 0; padding: 5px 30px;" target="_blank">Confirm email address</a>

You can try locating this element with this XPath:
"//a[contains(#href,'http://myjunkyard.co.za/confirm')]"
Or this
"//a[text()='Confirm email address']"

Drop-down menu between ul and li tags doesn't appear

Am I missing something?
I am trying to make the dropdown menu to appear. when i make the page smaller i can see that the menu appear on the bar (i can see only the tip of the "home" option). but, when the page is wide open it seems like it doesn't open at all.
<ul>
<li><a style="color:#1a1a1a;" class="welcometitle">Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
<li style="float:right; background-color: #4CAF50;" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" <%--onclick="myfunction()"--%> href="#">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu" role="listbox">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li style="float:right; padding-right:10px; padding-top:5px; padding-left:5px;"><input type="text" class="form-control" placeholder="Search.." name="search"/></li>
<li style="float:right; padding-right:0px; padding-top:5px; background-color:#ffffff"><button class="btn" type="submit"><i class="fa fa-search" style=""></i></button></li>
</ul>
this is my css code, i really don't understand where am I wrong
.searchbar {
float: left;
margin: 0px 0;
}
ul#navigation {
float: left;
margin: 0 20px 0 0;
}
ul#navigation li {
display: inline;
margin-right: 10px;
}
* {box-sizing: border-box;}
ul {
list-style-type: none;
margin: 0;
padding-left: 160px;
overflow: hidden;
background-color: #1160a2;
top:0;
width:100%;
position:fixed;
}
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
li {
float: left;
}
li a {
/*display: block;*/
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
}
.active {
background-color: #4CAF50;
}
.search-container {
float: right;
}
.li input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 25px;
border: none;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 2px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.search-container button:hover {
background: #ccc;
}

in case someone has the same problem i found out that the answer was on the css class:
.show {display: block;}
just added "position: fixed" and that was it
.show {display: block;
position: fixed;
}

White space under footer page on website

I have a white space under my website.
http://braulionova-001-site18.atempurl.com/DirectorioMedico.aspx
I check css, break tags.
Some pages are fine but other have this white space under footer page.

Looks like the element .autocomplete_completionListElement has a visibility: hidden with height 200px.
visibility: hidden keeps the element there, with height and width but turns it invisible. Seems like you don't want it there since you tried hiding it. To get rid of it just use display: none.

you have a class in a your css named autocomplete_completionListElement which has a been given a height of 200px. try commenting the height and check as givne below. Hope this helps.
.autocomplete_completionListElement {
visibility: hidden;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
/* height: 200px; */
text-align: left;
list-style-type: none;
}
Hope this helps.

The problem is because of the element with class .autocomplete_completionListElement.
Update your code with the code below. It will work fine.
.autocomplete_completionListElement {
/*visibility: hidden;*/
display: none;
margin: 0px !important;
background-color: White;
background: white;
color: windowtext;
border: buttonshadow;
border-width: 1px;
border-style: solid;
cursor: 'default';
overflow: auto;
height: 200px;
text-align: left;
list-style-type: none;
}

Try to This CSS code..
.footer
{
background:#333333;
color:#848484;
font-size:12px;
font-size:12px;
font-family:Open Sans,sans-serif;
font-weight:bold;
text-align:center;
padding:7px 50px 10px 0px;
vertical-align:middle;
margin-top:10px;
}

styling the asp:fileupload control

I have a file upload control in asp.net like so:
<asp:FileUpload ID="File1" runat="server" Font-Size="Small" Width="100%" />
For some reason the Browse... button does not apply the standard CSS that I have applied to any input[type="button"] controls.
How can I apply the same CSS to the Browse button of that control?

try this
<input type="file" class="hidden" id="uploadFile"/>
<div class="button" id="uploadTrigger">Browse</div>
some css
.hidden {
display:none;
}
.button {
border: 1px solid #333;
padding: 10px;
margin: 5px;
background: #777;
color: #fff;
width:75px;
}
JS
$("#uploadTrigger").click(function(){
$("#uploadFile").click();
});
Demo

Since the OP was about ASP.NET and the accepted answer was HTML / javascript, I thought I'd answer it in ASP.NET terms:
ASP.NET portion:
<asp:FileUpload ID="fileUpload" runat="server" style="display:none" />
<input type="button" value="Select your file" id="browse"></input>
JQuery, with jQuery UI for .button() portion:
$("input:button").button();
...
$("#browse").click(function () {
$("#<%= fileUpload.ClientID %>").click();
});

in aspx form:
<div class="fileupload-group">
<button type="button" runat="server" id="btnFileupload" class="btnFileupload btnRed">
Select File <i class="fa fa-folder-open"></i>
<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="True" />
</button>
<input type="text" runat="server" id="txtFileuploadName" class="fileupload-name txtRight" readonly="readonly" />
</div>
and in javascript
$('input[id="<%= FileUpload1.ClientID %>"]').change(function () {
var names = [];
var length = $(this).get(0).files.length;
for (var i = 0; i < $(this).get(0).files.length; ++i) {
names.push($(this).get(0).files[i].name);
}
if (length > 2) {
$("#<%=txtFileuploadName.ClientID%>").attr("value", length + " selected files");
}
else {
$("#<%=txtFileuploadName.ClientID%>").attr("value", names);
}
});
and in css:
/* txtRight ----------------------------*/
.txtRight {
display: inline-block;
margin-bottom: 3px;
border: 1px solid #CCC;
background-color: #FFF;
font-size: 14px;
line-height: 20px;
color: #555;
vertical-align: middle;
position: relative;
font-weight: normal;
padding: 2px 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px #000000;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px #000000;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-ms-box-shadow: inset 0 1px 1px #000000;
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px #000000;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
-ms-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}
.txtRight:focus {
border-color: #52a8ec;
border-color: rgba(82,168,236,0.8);
outline: 0;
-webkit-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
-moz-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
-ms-box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px #000000,0 0 8px #52a8ec;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
}
.txtRight {
font-family: iransans !important;
font-weight: normal !important;
direction: rtl;
text-align: right;
margin-right: 0;
top: 0;
right: 0;
}
.txtRight:disabled {
background-color: #f7f7f7 !important;
}
select.txtRight {
padding: 1px 2px !important;
font-size: 13px !important;
}
/* --------------------------------------*/
/* btnRed ------------------------------ */
.btnRed, a.btnRed {
-ms-text-shadow: none;
text-shadow: none;
background: #ed1c24;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.btnRed:hover, .btnRed:focus, .btnRed, .btnRed:visited, .btnRed:disabled,
a.btnRed:hover, a.btnRed:focus, a.btnRed, a.btnRed:visited, a.btnRed:disabled, a.btnMoulinexRed:link {
border: none;
color: white;
text-decoration: none;
padding: 5px;
font-family: iransans;
font-weight: normal;
font-size: 12px;
cursor: pointer;
}
.btnRed:hover, .btnRed:hover:enabled, .btnRed:focus, .btnRed:focus:enabled,
a.btnRed:hover, a.btnRed:hover:enabled, .btnRed:focus, a.btnRed:focus:enabled {
background: #830022;
background-color: #830022 !important;
color: white !important;
}
.btnRed:visited, .btnRed:link, /*a.btnRed, */
a.btnRed:visited, a.btnRed:link {
background: #ed1c24;
background-color: #ed1c24;
color: white;
}
.btnRed:active, .btnRed:active:enabled,
a.btnRed:active, a.btnRed:active:enabled
{
background: #e6e6e6 !important;
background-color: #e6e6e6 !important;
color: #333 !important;
}
.btnRed:disabled,
a.btnRed:disabled, a.aspNetDisabled {
color: #333 !important;
background-color: #D6D1D1 !important;
}
/* --------------------------------------*/
/* FileUpload ---------------------------*/
.fileupload-group {
position: relative;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
margin-top: 3px;
margin-bottom: 8px;
}
.fileupload-group .fileupload-name {
display: inline-block;
position: relative;
width: 67%;
margin-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btnFileupload {
display: inline-block;
position: relative;
white-space: nowrap;
width: 17%;
vertical-align: middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-ms-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.fileupload-group .btnUpload {
width: 15%;
vertical-align: middle;
}
.fileupload-name {
padding: 0;
width: 100%;
white-space: nowrap;
height: 29px;
padding: 4px 12px;
font-size: 14px;
}
.fileupload-name.txtRight {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-border-top-right-radius: 0 ;
border-top-right-radius: 0;
-ms-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
display: inline-block;
margin-right: -6px;
}
.fileupload-name.txtRight {
background-color:#FFF;
-ms-opacity: 1;
opacity: 1;
border: 1px solid #ffaaaa;
}
.fileupload-name.txtRight:disabled {
background-color:#FFF;
-ms-opacity: 1;
opacity: 1;
border: 1px solid #ccc;
}
.fileupload-group input[type=file] {
display:inline-block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-ms-opacity: 0;
opacity: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* --------------------------------------*/
Make sure to use the latest browser version to run

Categories

Resources