Adjusting fixed width to div and creating effect on css button click - css

I have used div event which appear with scrollbar on the page to show content.
Though I have adjusted the width of div, When it appears on the page; it reaches to right corner of the screen.
code:
<div id="txtHint" align="justify" style="z-index: 1; color:green; left: 350px; top: 270px; position: absolute; margin-top: 0px; width:500px;height:250px;overflow:auto;">
Height gets adjusted correctly, for width whatever I take i.e. 200,300, or 800px. It spans up right end.
I checked in mozilla and chrome both. I am testing it for my ec2 amazon instance.
Similarly my css button :
<input class="uibutton confirm large" type="submit" value="Connect with facebook" onclick="AjaxResponse()" >
When I click it, all actions performed correctly but it does not show any effect so that user can realize whether button is clicked or not.
Can someone tell me effect which can be realized on click event. I tried on google with css button click effect and tested someof them. But does not make any difference.
Here is css for this:
.uibutton,
.uibutton:visited {
position: relative;
z-index: 1;
overflow: visible;
display: inline-block;
padding: 0.5em 0.8em 0.5em;
border: 1px solid #999;
border-bottom-color: #888;
margin: 0;
text-decoration: none;
text-align: center;
font: bold 13px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
white-space: nowrap;
cursor: pointer;
/* outline: none; */
color: #333;
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
background-image: linear-gradient(#f5f6f6, #e4e4e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
/* IE hacks */
zoom: 1;
*display: inline;
}
.uibutton:hover,
.uibutton:focus,
.uibutton:active {
border-color: #777 #777 #666;
}
.uibutton:active {
border-color: #aaa;
background: #ddd;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* overrides extra padding on button elements in Firefox */
.uibutton::-moz-focus-inner {
padding: 2.0px;
border: 0;
}
.uibutton.large {
font-size: 16px;
}
/* ............................................................................................................. Submit, etc */
.uibutton.confirm {
border-color: #29447e #29447e #1a356e;
color: #fff;
background-color: #5B74A8;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}
.uibutton.confirm:active {
border-color: #29447E;
background: #4F6AA3;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

Sounds a lot like you need css click events. This can be achieved with a simple checkbox.
Here is a link demonstrating it:
http://tympanus.net/Tutorials/CSSClickEvents/index.html
http://jsfiddle.net/Hive7/gd7AJ/
Edit
To do the current element you give the class of css effect to the current element
Edit
Also if you want to make the clicked element change you need to put the checkbox before
Here is a fiddle demo of both:
http://jsfiddle.net/Hive7/gd7AJ/1/

Related

Couldn't change the border color for each item on main menu

I have set CSS for each button on main menu. I want to change the border color for each item.
I can change the color what ever I want. But I want to pick out some specific color for each button.
This part of CSS define the border color:
#main-nav .menu-sub-content {
display: none;
padding: 0;
position: absolute;
z-index: 205;
border-top: 12px solid ;/*#F88C00*/
border-top-color: transparent !important; /*I change to transparent*/
background: #fff;/*2d2d2d*/
color:#999;
-webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius : 3px;
-moz-border-radius-bottomright : 3px;
-moz-border-radius-bottomleft : 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius : 3px;
}
First I tried this
border-top-color: transparent !important;
And then I put this CSS for 3rd button
.ucuncu-nav.menu-sub-content{
/*border-top:12px solid;*/
border-top-color:#669900 !important;
}
But it didn't changed. How can I change it now?
Elements of your list have id's which you can use when adding separate borders for what you display on hover. Try this code:
#menu-item-17:hover .mega-menu-block {
border-top: 3px solid red !important;
}
#menu-item-7:hover .mega-menu-block {
border-top: 3px solid green !important;
}
etc, for all your <li> menu items with different id's. !important rule is here a quick solution because the is overridden for some default styles.

Can't align vertically in div with inline Bootstrap buttons

I wrote a small Angular directive that generates a step input control for numbers. I've used Bootstrap buttons (xs) for the inc/dec controls and somehow managed to simulate a fake focus on the outer container. The problem is centring vertically the spans and the input in a stable layout that keeps together when zoomed.
This is the directive template:
<ng-form name="stepNumberForm" novalidate \>
<div class="step-number"
tabindex="{{$id}}"
ng-class="{\'fake-focus\': fakeFocus}"
ng-keyup="keyControl($event)">
<span
ng-disabled="incDisable"
class="btn-primary"
ng-click="inc()">
<i class="glyphicon glyphicon-plus ">
</i>
</span>
<input type="text"
ng-style="setWidth()"
name="value"
ng-keyup="keyControl($event)"
ng-model="value"
ng-focus="selectAll($event)"
ng-blur="validate()"
class="input-xs">
<span
ng-disabled="decDisable"
class="btn-primary"
ng-click="dec()">
<i class="glyphicon glyphicon-minus">
</i>
</span>
</div>
</ng-form>
The CSS I've used is:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.step-number{
border:1px solid;
display:inline-block;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
border-radius:4px;
}
.input-xs {
font-size: 1em;
text-align: center;
border:none;
line-height: 1em;
height:1.1em;
vertical-align: middle;
}
.step-number span{
display: inline;
height: 100%;
width: 18px;
margin-bottom: 1px;
margin-top: 1px;
text-align: center;
}
.step-number span:first-child{
margin-left: 1px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.step-number span:last-child{
margin-right: 1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.input-xs:focus{
outline:none;
}
.step-number:focus{
outline:none;
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
-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);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}
.fake-focus{
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
-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);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}
.step-date{
display: inline-block;
}
The whole project is available at github.
There is also a working demo and it's available for install through $ bower install stepper
I would greatly appreciate a helping hand from anybody finding this useful. All contributors are welcome to make this small directive look good. This means: input centred vertically, buttons centred vertically, a 1px border padding inside the element, cross-browser stable and zoom stable.
I've added these CSS rules at the span or the button element that has the + sign:
padding: 1px;
position: relative;
top: -1px;
It seems to be working just fine (I've also tried resizing the viewport - tested with Firefox).
Here is a screenshot of the outcome (remember, only applied to the plus sign)
You could add the above rules to a class .stepper-buttons and add it to the span or the button element (tested with both).
Let me know if this worked for you.

CSS Positioning element relative to grandparent?

I'm trying to position an element (a button) relative to the element 2 elements before it (a picture). There is a varying amount of text between the picture and the button. Take a look at my site:
http://gorilla-gym.com/product-category/fitness-attachments/
What I'm trying to achieve is having the "Shop Now" buttons align horizontally for each product listing regardless of how much text is underneath the picture.
It seemed to me the most logical way to do this way to position the button relative to the picture, but I can't figure out how to do this. Let me know if you guys have an idea of how to do this, or if there's a better way to achieve what I want to do.
Thanks in advance.
check this one i think you want something like this
http://jsfiddle.net/FWzzR/1/
css
ul.products {
display:table;
width:100%;
table-layout:fixed;
border-collapse:separate;
border-spacing:10px;
}
.products > li {
background-color: #4F81BD;
border:2px solid #385D8A;
position: relative;
width: 22.05%;
display: table-cell;
padding:10px;
padding-bottom:50px;
text-align:center;
vertical-align:top;
}
.products > li >a {
display:block;
}
.products a.button {
position:absolute;
bottom:10px;
left:50%;
margin-left:-40px;
font-size: 100%;
line-height: 1em;
cursor: pointer;
text-decoration: none;
padding: 6px 10px;
font-family: inherit;
font-weight: bold;
color: #FFF;
text-shadow: 0 1px 0 #FF6311;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
border: 1px solid #973100;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #FD5200;
background: -webkit-gradient(linear, left top, left bottom, from(#FD5200), to(#CA4100));
background: -webkit-linear-gradient(#FD5200, #CA4100);
background: -moz-linear-gradient(center top, #FD5200 0%, #CA4100 100%);
background: -moz-gradient(center top, #FD5200 0%, #CA4100 100%);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}
If all you want is to center align the "Shop Now" button at the bottom, then
.shopnow_button{
display: block;
margin: 0 auto; //something was overriding so I had to do !important here
width: 57px; // can be any value < the width of the parent container(Ofcourse !)
}
If there is a varying amount of text underneath the picture, then the elements will all be of varying height and you cannot align the "Shop Now" button horizontally beneath the picture. The only way to accomplish this is by making sure that all the divs are the same height, then you just position the shop now button as follows:
<div class="shop-now-div">
<img src="yourimage.jpg">
Lorem ipsum....
<a class="button" href="#">Shop Now</a>
</div>
.button { position: absolute; bottom: 5px; right: 5px; }
.shop-now-div { position: relative; }
There are two ways to make your div's the same height
1) JavaScript (not recommended, it's a pain)
2) A table (do it in CSS so you aren't messing with semantics)
UNFORTUNATELY, some modern browsers (Firefox, I believe) will not support position: relative on table-cell's (which you will need), so you are stuck with having to use JS to make your div's the same height....
Easiest solution:
Stick your shop now button on top of the image - that way you can easily align them horizontally. :)
This question is better answered here How to set relative position with Grandfather! element? simply setting position: relative on the grandfather element and position: absolute on the subject element.
That solution does rely on there being no positioning set on intermediate elements.

What is the purpose of noise images blended into a CSS button?

I noticed that the buttons on unfuddle.com use a layer of noise, i was just wondering what the purpose of this is, i can't visibly notice the difference, but perhaps this is some cross browser hack?
It seems silly to build such an awesome CSS3 button that uses no images only to still load a noise image anyway.
Here is their CSS that goes with the buttons in question, note the gnoise.png?cbv-1346878364
.gp_button, a.gp_button, input.gp_button:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
color: #FFFFFF;
display: inline-block;
font-family: "Lato","Arial",sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 34px;
margin-right: 1px;
padding: 0 1em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.gp_button:hover, a.gp_button:hover, input.gp_button:hover:not([type="radio"]) {
background-color: #A5C416;
background-image: radial-gradient(at center center , #85C700 20%, #7EBD00 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
}
.gp_button:visited, a.gp_button:visited, input.gp_button:visited:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
}
.gp_button:active, a.gp_button:active, input.gp_button:active:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #90D900;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
}
.oldie .gp_button, .oldie a.gp_button, .oldie input.gp_button:not([type="radio"]) {
background-color: #7EBD00;
border-color: #7FBF00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
color: #FFFFFF;
display: inline-block;
font-family: "Lato","Arial",sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 34px;
margin-right: 1px;
padding: 0 1em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.oldie .gp_button:hover, .oldie a.gp_button:hover, .oldie input.gp_button:hover:not([type="radio"]) {
background-color: #85C700;
}
.oldie .gp_button:visited, .oldie a.gp_button:visited, .oldie input.gp_button:visited:not([type="radio"]) {
background-color: #7EBD00;
}
.oldie .gp_button:active, .oldie a.gp_button:active, .oldie input.gp_button:active:not([type="radio"]) {
background-color: #7EBD00;
border-color: #90D900;
}
gnoise.png goes on top of the background-color (along with the radial gradient) to add some visual complexity to an otherwise flat image. The effect is barely visible on a.gp_button, but you can see it if you zoom in on a screenshot using Photoshop, or use the eyedropper to compare pixel colors. The effect is more visible on the <footer> element, because of its darker background color.
By re-using one image on top of solid colors, they get a variety of colors while avoiding multiple HTTP requests which might slow down page loading.
It's just a guess, but the get parameter (?cbv=1346878364) could be used to ensure that, after an update to the image files, a new image file is actually pulled from the server instead of using a browser-cached version.
My guess is that it could have been there for browsers that don't support CSS3. However when I inspect the button in chrome it is overwritten by another image, which makes me believe that is not the case.
If it is not there for older browsers then chances are it is just a coding error. maybe they used it at some point and forgot to take it out.
But to answer your question. It isn't used for anything because it is been overwritten by this image. And if you are looking to replicate what they are doing then I would just remove it.
background-image: -webkit-radial-gradient(center center, #7ebd00 20%,#77b300 80%),url('/images/gnoise.png?cbv=1346878364');

CSS -- How to skin a select box with css

I've been trying to skin a select box with css to make a custom form. I've been able to successfully do with firefox but chrome and safari have some extra parts to it not allowing me to do it.
Set an appearence: none and you can do almost anything with it: https://jsfiddle.net/CUA9p/1475/
body {
background-color: #fef;
margin: 2em;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
background-color: #103;
background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 10px, transparent 10px, transparent 20px);
border: 1px solid white;
border-radius: 2px;
box-shadow: 0 0 0 2px #103, 0 3px 0 2px #649;
color: white;
font-family: sans-serif;
font-style: italic;
margin: 2px;
outline: none;
text-align: center;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
text-transform: lowercase;
width: 100px;
}
<select>
<option>Hello</option>
<option>World</option>
</select>
Also take a look at this: http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/
Here's a great site that will keep all your form elements looking consistent. http://formalize.me/
i dnt think it is possible with css alone..cause select box is a control that is browser specific.. you will have to use javascript or jquery.
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Resources