I created a sidebar in Google Sheets using an online template. It is working perfectly, but the buttons to update and reset are on the bottom, and I would like them on top of the sidebar list.
I have tried altering the button code in terms of height and other factors but cannot seem to get it to be agreeable.
This is where I believe the code needs to be altered:
.button,
button,
input[type="button"],
input[type="image"],
input[type="reset"],
input[type="submit"] {
background: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
background: -ms-linear-gradient(top, #f5f5f5, #f1f1f1);
background: -o-linear-gradient(top, #f5f5f5, #f1f1f1);
background: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
background: linear-gradient(top, #f5f5f5, #f1f1f1);
border: 1px solid #dcdcdc;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
color: #333;
cursor: default;
font-family: arial, sans-serif;
font-size: 11px;
font-weight: bold;
height: 29px;
line-height: 27px;
margin: 0;
min-width: 72px;
outline: 0;
padding: 0 8px;
text-align: center;
white-space: nowrap;
}
<body>
<div class="container"></div>
<div class="buttons">
<p>
<button class="action" id="action">Add Rejections</button>
<button id="btn">Reset List</button>
</p>
</div>
I would ultimately like the two buttons to be on top of the sidebar list instead of having to scroll to the bottom. Any help would be appreciated.
Related
How can I get the box inside the buttons?
I use dojo toolkit and the button css is as follows:
.button0 {
margin: 2px;
padding: 0px;
background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
background-color: #ffec64;
border-radius: 9px;
border: 3px solid #ffaa22;
display: inline-block;
cursor: pointer;
color: #333333;
font-family: Arial;
font-size: 15px;
font-weight: bold;
text-decoration: none;
outline: none;
outline-color: transparent;
}
.button0:hover {
background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
background-color: #ffab23;
outline: none;
outline-color: transparent;
}
.button0:active {
position: relative;
outline: none;
outline-color: transparent;
}
What I want to remove is the 1px border that has the text.
can't be sure without seeing the html. I'm assuming the css class is on the button element like so
<button class="button0">
and that there are no nested element tags.
add:
.button0:focus{ outline: 0 }
may fix it.
note: for accessibility, its best not to remove the outline.
I try to make into my button a css icon and not with image, and here is my css button :
Button :
<div>
<b>
<asp:Button ID="bt_VaildID" runat="server" Text="Valider" OnClick="bt_VaildID_Click" ValidationGroup="auGoup" CausesValidation="true" CssClass="bt_Valider" />
</b>
</div>
CSS:
.bt_Valider {
display: inline-block;
border: 2px solid #903E71;
color: #000000;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
font-family: Verdana;
width: auto;
height: auto;
font-size: 16px;
padding: 6px 25px;
background-image: linear-gradient(to top, #903E71, #903E71);
background-image: -webkit-linear-gradient(to top, #903E71, #903E71); /* for safari */
background-color: #903E71;
float:right;
}
.bt_Valider:hover, .bt_Valider:after {
border: 2px solid #903E71;
color: #903E71;
background-image: linear-gradient(to top, #FFF, #FFF);
background-image: -webkit-linear-gradient(to top, #FFF, #FFF); /* for safari */
cursor:pointer;
content: "\279C"; /* I found that with this i can make some icon */
}
This code gives me this result : Output image
But I want to get it like this : Desired
not sure if this is your desired result.
be aware that with content: "\279C"; you are using an unicode character, se more here http://tutorialzine.com/2014/12/you-dont-need-icons-here-are-100-unicode-symbols-that-you-can-use/
.bt_Valider {
display: inline-block;
border: 2px solid #903E71;
color: #000000;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
font-family: Verdana;
width: auto;
height: auto;
font-size: 16px;
padding: 6px 25px;
background-image: linear-gradient(to top, #903E71, #903E71);
background-image: -webkit-linear-gradient(to top, #903E71, #903E71); /* for safari */
background-color: #903E71;
/* float:right; */
}
.bt_Valider:hover, .bt_Valider:after {
/* border: 2px solid #903E71; */
color: #000000;
cursor:pointer; background:transparent;
content: "\279C"; /* I found that with this i can make some icon */
}
<div>
<b>
<Button ID="bt_VaildID" runat="server" Text="Valider" OnClick="bt_VaildID_Click" ValidationGroup="auGoup" CausesValidation="true" Class="bt_Valider" >Valider</Button>
</b>
</div>
I don't know if I'll successfully convey what I mean but here goes. I have some CSS and am trying to get the text label of a link in a navigation to button to show if I hover anywhere over that button, not just over where the link should display. What happens is when I hover over most of the button, the button goes all-white. I want it to be white background, but show the text. Make sense?
Just try something as below:
CSS:
.CSSButton {
border: 1px solid #D1D1D1;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.1, #FFFFFF), color-stop(0.9, #D1D1D1) );
background: -moz-linear-gradient( center top, #FFFFFF 10%, #D1D1D1 90% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#D1D1D1');
background-color: #FFFFFF;
-moz-box-shadow: inset 0px 1px 2px 0px #FFFFFF;
-webkit-box-shadow: inset 0px 1px 2px 0px #FFFFFF;
box-shadow: inset 0px 1px 2px 0px #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-shadow: 1px 1px 2px #FFFFFF;
font-weight: bold;
margin: 5px 5px;
padding: 6px 6px;
color: #999999;
letter-spacing: 1px;
font-family: 'Arial', sans-serif;
font-size: 16px;
width: 150px;
text-transform: capitalize;
text-align: center;
text-decoration: none;
cursor: pointer;
display: inline-block;
}
.CSSButton:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.1, #D1D1D1), color-stop(0.9, #FFFFFF) );
background: -moz-linear-gradient( center top, #D1D1D1 10%, #FFFFFF 90% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1D1D1', endColorstr='#FFFFFF');
background-color: #D1D1D1;
}
.CSSButton:active {
position: relative;
top: 1px;
left: 0px;
}
HTML:
<span class="CSSButton">Click Me!</span>
I'm newbie. And I try to make a search box. When I open it on Firefox. It's okay for me. Then I do it in IE, Chrome and Safari. It's not cool actually. Anyone know my problems, please help me fix it?
I want make a search box like this: http://www.behance.net/gallery/Anthracite-EIKON/7171451
<div id="search-box">
<input type="text" name="search" placeholder="Search..."/>
</div>
And CSS:
*{ margin: 0; padding: 0; }
#search-box{
background: -moz-linear-gradient(top right, #353535, #010101);
background: -webkit-linear-gradient(top right, #353535, #010101);
background: -ms-linear-gradient(top right, #353535, #010101);
background: -o-linear-gradient(top right, #353535, #010101);
background: linear-gradient(top right, #353535, #010101);
padding: 30px 0;
position: relative;
}
input {
font-family: Cambria, 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
color: #bebebe;
font-weight: 400;
line-height: 56px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) ;
border-radius: 13px;
border: 1px solid #000000;
background-clip: border-box;
padding: 5px 4px 3px 24px;
width: 94px;
height: 27px;
box-shadow: 0 0 9px #121212 inset;
position: absolute;
right: 25px;
top: 15;
background-color: #444444 ;
background-image: url('images/search_icon.png');
background-repeat: no-repeat;
background-size: 12px 12px;
background-position: 9px 8px;
}
input:hover {
box-shadow: none;
}
input:focus {
width: 200px;
box-shadow: none;
text-shadow: none;
color: #4D4E52;
background-color: white ;
background-image: url('images/search_icon5.png');
background-repeat: no-repeat;
background-position: 9px 8px;
}
In your css for input you need to change top:15 to top:15px and change line-height to 24px;
Example: http://jsfiddle.net/justincook/sMG3R/
I am creating a button with both border radius and gradient.
If you check in IE browser on the right side a background color is taking.
I am trying to resolve this issue but I am unable to do it.
All the browsers are working fine, only IE is facing this issue
Here is the demo: Link
HTML:
<span aria-disabled="false" id="__button2-0" class="sapUiSegmentedButton" role="radiogroup" tabIndex="0" data-sap-ui="__button2-0">
<button aria-haspopup="true" aria-disabled="false" id="__button3-0" class="sapCPDownloadBtn sapCPCartBtn sapUiBtn sapUiBtnNoGradient sapUiBtnNorm sapUiBtnS sapUiBtnStd sapUiMenuButton" role="button" tabIndex="-1" type="button" data-sap-ui="__button3-0">
<span class="sapUiBtnTxt">Download</span>
<span class="sapUiMenuButtonIco"></span>
</button>
</span>
CSS:
.sapCPCartBtn {
width: 205px;
/* fallback */
padding: 10px;
text-align: center;
height: 32px;
box-shadow: none;
color: #FFFFFF !important;
font-weight: bold;
font-size: 1em !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
-khtml-border-radius: 10px !important;
-goog-ms-border-radius: 10px!important;
margin-top: 5px;
text-align: center;
display: inline-block;
cursor: pointer !important;
border: 0px!important;
background-color: #ff0000;
background: -o-linear-gradient(top, #333399, #000066);
background: -moz-linear-gradient(top, #333399, #000066);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066));
}
.sapCPCartBtn {
background: none\9;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001E5799', endColorstr='#bb7db9e8', GradientType=1 )\9;
/* ie */
box-shadow: none\9 !important;
background-position: 1px 1px \9;
}
Try this and one more thing when you are using filter and border radius in a same class in IE rounded corners will not work... try the below css...
.sapCPCartBtn {width: 205px;padding: 10px;text-align: center;height: 32px; box-shadow: none;color: #FFFFFF !important; font-weight: bold;font-size: 1em !important;-moz-border-radius: 10px !important;-webkit-border-radius: 10px !important; border-radius: 10px !important;-khtml-border-radius: 10px !important;-goog-ms-border-radius: 10px !important;margin-top: 5px;text-align: center;display: inline-block;cursor: pointer!important;border: 0px !important;background-color: #ff0000;background: -o-linear-gradient(top, #333399, #000066);background: -moz-linear-gradient(top, #333399, #000066);background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066));filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333399', endColorstr='#000066', GradientType=0 ); /* ie */}