Whenever I'm using this in CSS (which is important to me) :
.button:active {
position: relative;
top: 2px;
left:2px;
}
Buttons don't want to function on particular areas depending where you click on them. (positions do happen but jQuery doesn't start)
Here is the DEMO
You'll see that sometimes they don't react depending if you hit the right spot. Its a little bit harder to notice because it happens. For example, try hitting the contact button just a little bit bellow the letter A. Or hit the About button just below the O letter.
When I delete the :active function buttons work normally. How can I fix this?
I changed the height on all the buttons to 100% and it eliminated the problem on my browser. I am using Chrome. Here is what i did.
#btnhome {
margin-left: 121px;
width: 84px;
**height: 100%;**
background-color: black;
border: none;
color: white;
font-size: 14px;
font-weight: 700;
}
Related
So I have code like
<button id="create_btn" class="btn" type="button" title="List Available Games">List Games</button>
and I want to have the color always be white, even after visited. My CSS looks like:
.btn {
border-radius: 0px;
color: white;
display: inline-block;
}
.btn:hover {
color: white;
}
#create_btn {
background-color: firebrick;
width: 120px;
height: 42px;
}
but I don't know how to make the color stay white when I click it, even though it currently does nothing (in the application, it's going to create or list the games on a table below without refreshing, so what should I do? I tried .btn:visited { color: white;} but that doesn't work, also tried adding <a></a> around it and changing the a:visited but the text still is black when clicked.
I'm not even sure if it's the 'visited' concept, because when I click the button, I haven't added the JS functionality for it to do anything yet, so it just sits there loading until I click somewhere else. While it's 'loading' after clicked, it's black, and I'd like it to stay white.
It seems that your CSS gets overwritten. Please use FireBug (http://getfirebug.com/enable) and check the class/id for overrides
https://jsfiddle.net/z7h0kc79/ - seems fine.
<button id="create_btn" class="btn" type="button" title="List Available Games">List Games</button>
.btn {
border-radius: 0px;
color: white;
display: inline-block;
}
.btn:hover { color: white; }
#create_btn {
background-color: firebrick;
width: 120px;
height: 42px;
}
You've got your CSS written to style the button as well as when you hover on the button. What you're missing is the CSS styling for visited. This can be added to your CSS stylesheet:
.btn:visited { }
Put your "background-color" (which will color the entire button). Remember that "color" only ever applies to text.
You can also changed the visited button to an image after its been visited. Drawing the image in CSS is fairly simple. You end up with .btn:visited {background-image: }
I'm trying to make an HTML search form similar to Amazon's. I created the desired look, but when I went to actually try the search the text box wasn't taking any input. At first I thought the text was white or something but after clicking the search button I realized this was not the case. I have tried using Chrome's Inspect Element to see the problem and when I hovered over the input box code, the input box was showing beneath the code.
Here's the JSFiddle.
This is the CSS for the box but I don't see an issue here:
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
I'm not sure whether the other elements are interfering or if something is wrong with the search box. How do I fix this issue?
Add float left to .select-style:
.select-style {
...
float: left;
...
}
Lower the width of #search-box input[type="text"]. 80% seems good:
#search-box input[type="text"] {
width: 80%;
...
}
I'm creating a custom select menu for a form which uses a background image as a downward arrow button. I achieve this effect with this CSS:
.calculator_select select {
background: url(../img/arrow.png) no-repeat right 65px top -3px #95957A;
overflow: hidden;
width: 110%;
padding: 5px;
line-height: 1;
border: 0;
border-radius: 0;
height: 25px;
-webkit-appearance: none;
color: white;
padding-left: 25px;
position: relative;
}
.calculator_select select:focus {
background: url(../img/arrow-flipped.png) no-repeat right 65px top -1px #95957A;
}
This works almost perfectly except that the CSS remains in the focused state once an option has been selected and only returns to the first state when the user focuses on another element. Is there some way around this? i.e. CSS is only in the second state when the menu is open? Thanks!
For slaps and giggles, I took a shot and came up with an inelegant solution - FIDDLE.
In this code, you determine which of your ul elements will give a dropdown, and use that element definition to trigger a mouseover/mouseout sequence.
JS
$
( 'nav ul li:nth-child(2)' ).mouseover(function(){
$('.statusdiv').css('background-color', 'green');
});
$( 'nav ul li:nth-child(2)' ).mouseout(function(){
$('.statusdiv').css('background-color', 'red');
});
Again, more of a brute-force approach, but perhaps it will give others some ideas to make it better.
I would like to adjust the CSS code for the Fiore theme on Wordpress. My URL is theuniversalasian.wordpress.com. It is an upgraded premium wordpress account.
With the upgrade, I am able to edit the CSS, but a number of problems are happening. If you could help me with the code, I'd appreciate it!
I want to make a white background for the post texts. When I do that, it moves the date, comments, edit links on the left side. I would like those to stay up top near the post title ribbon. At the moment, the site does not show the changes I wanted because I keep fiddling with the code....
If possible, I'd like the white background for the text to have rounded corners....
The left column somehow loses the graphics....There should be a top cherry blossom graphic like the original theme (http://fioredemo.wordpress.com/), along with the rest of the ribbon image for the post titles.
I cannot paste the entire code here..., but hopefully you will know what I mean from the site...
For the first two, I'll work on the last now, you needed to locate the .entry-content class in your css file.
The first style I added was the background: #fff; which added the white background and then I added border-radius: 7px; which gives it rounded corners.
.entry-content {
color: #2b2b2b; /* changed to black font since you wanted a white background */
width: 300px;
padding: 10px;
border: 0 solid #000;
margin-left: 10%;
margin-bottom: 10px;
margin-top: 10px;
background: #fff;
border-radius: 7px;
}
For the third question, I am not 100% positive but since you removed the nav on your site I believe you removed the image as well. For some reason on the template page I can not find any styles when you inspect an element. The image is apart of the nav/header area so this is just my best guess.
EDIT: Moving the comment/date block around.
.entry-meta {
color: #333;
font-size: 12px;
font-size: 1.2rem;
letter-spacing: 1px;
position: absolute;
text-align: right;
text-transform: uppercase;
width: 150px;
top: 0;
left: 35%;
}
Here's a screenshot.
And my CSS markup:
.submitbutton
{
background: url("/Content/SiteImages/button.png") no-repeat scroll 0 0 transparent;
color: white;
cursor: pointer;
height: 26px;
width: 76px;
margin-left: 8px;
margin-top: 12px;
}
Also, I'd like the background image to stretch to fit into the dimensions of the button. Currently it's displaying full size (I think). Any tips for this new HTML web developer?
HTML buttons always have a border, simply setting border:0; should fix this.
Try stating
background: 0; outline: 0;
on it.
Note: This should only be used for testing purposes, disabling the outline makes people who navigate with their keyboards to not receive feedback when focusing on your button.
If it works, try using a more subtle outline.