I wrote the hover pseudo-class for all input and label elements as shown in the image ,but when when I hover my mouse on one label the other indent directly to the right
Preview
The code is shown:
<Style>
label {
width: 180px;
float: left;
text-align: right;
margin-right: 0.1em;
display:inline-block;
}
label[type:checkbox]+[type:radio]{
width: auto;
input:hover { font-size:25px }
label:hover { font-size:25px }
</style>
First of all, you should make clear that your markup is valid. As already mentioned in the comments, you forgot a curly brace { for your label[type...] descriptor.
To avoid the shifting of other elements on hover, you should make clear, that the hovered label height doesn't become greater than the height of the input element next to it. Therefore the line-height of the label and the height of the inputs should at least be 25px.
Since you haven't provided a Minimal, Complete, and Verifiable example the exact code is hard to guess, but the following should work:
input {
height: 25px; /* <- */
}
label {
width: 180px;
float: left;
text-align: right;
margin-right: 0.1em;
display: inline-block;
line-height: 25px; /* <- */
}
label[type:checkbox]+[type:radio] {
width: auto;
}
input:hover {
font-size: 25px
}
label:hover {
font-size: 25px
}
Related
When you hover over the paragraph text in JS Fiddle the image gets covered with the background. Using z-index everywhere I could think of doesn't have any effect. (I left the useless z-index stuff in there so show you what I tried.) I also tried pointer-events: none; in various places.
I also tried this type of thing elm1:hover elm2{}, but that didn't help. I'm new to CSS and I'm applying what I have searched and found.
Edit: The problem: on hover background color covers image
Markup:
<div id="col2-middle" class="three-cols-middle three-cols">
<a href="About.php#how-we-work- projects">
<h1 class="h-big-font">Specific Projects</h1>
<img class="col-img" src="3dplotCroppedWithFinancial.png" alt="3dplot">
<p class="p-on-white">
XXXXXXXX XXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX hover here to cover img XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<br/>
<br/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</p>
</a>
</div>
css:
div.three-cols {
float: left;
width: 29.33%;
position: relative;
left: 70.67%;
overflow: auto;
padding: 1% 1% 1% 1%;
min-width: 200px;
z-index:-1;
}
.three-cols a {
position: relative;
text-decoration: none;
color: #000;
}
.three-cols a p:hover {
background-color: #ecebeb;
}
.col-img {
float: left;
padding: 4%;
z-index: 1;
}
.three-cols h1 {
margin-bottom: 2%;
text-align: center;
}
.three-cols p {
padding: 0.5% 0 3% 0;
z-index: -1;
}
p {
word-wrap: break-word;
color: #000;
margin: 0;
padding: 10px 20px;
font-size: 16px;
}
Here is my demo:
http://jsfiddle.net/pxD33/
PS - needs to be responsive and solution all in CSS and HTML.
<a> is by default an inline-level element. Once you set display: block to it, it fixes the issue.
.three-cols a {
display: block;
position: relative;
text-decoration: none;
color: #000;
}
http://jsfiddle.net/teddyrised/pxD33/2/
p/s: You don't need z-index for your case. You can safely remove all of them.
Anything you use a z-index with has to also have a position attribute.
I hope this helps!
You can get rid of the z-indexes, and then change
.three-cols a p:hover {
background-color: #ecebeb;
}
to
.three-cols:hover {
background-color: #ecebeb;
}
Updated fiddle: http://jsfiddle.net/pxD33/1/
updated fiddle: Fiddle
just change anchor's display to block:
.three-cols a {
display:block;
position: relative;
text-decoration: none;
color: #000;
}
and give hover class to a not p:
.three-cols a:hover {
background-color: #ecebeb;
}
As #Terry said, setting display: block on your three-cols a element should do the trick.
If you want to have a "free hanging" picture on the left of your text, you could also use a media object.
Simply add the following rules
display: block;
overflow: hidden;
to col-img and three-cols p.
You can read more about the media object here.
Whenever I click on the checkbox, the browser window (firefox) will scroll on the top of the screen.
How can I prevent this behavior so when I click on the checkbox the browser window will not scroll on top?
Here is the code found from here http://jsfiddle.net/zAFND/6/
Thank you.
<html>
<head>
<title>Test</title>
<style>
div label input {
margin-right: 100px;
}
body {
font-family:sans-serif;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
}
#ck-button:hover {
margin: 4px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid red;
overflow: auto;
float: left;
color: red;
}
#ck-button label {
float: left;
width: 4.0em;
}
#ck-button label span {
text-align: center;
padding: 3px 0px;
display: block;
}
#ck-button label input {
position: absolute;
top: -20px;
}
#ck-button input:checked + span {
background-color: #911;
color: #fff;
}
</style>
</head>
<body>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="ck-button">
<label>
<input type="checkbox" value="1"><span>red</span>
</label>
</div>
</body>
The problem is this rule:
#ck-button label input {
position:absolute;
top:-20px;
}
When you click on a label the browser tries to focus the related input. In your case the checkbox element is lying at the top of the page, even outside the viewport – so Firefox tries to scroll there.
You can solve it like this by adding:
#ck-button label {
display: block;
position: relative;
overflow: hidden;
}
Demo
Try before buy
Alternative
Heisenberg points out a problem in his answer which can occur when using extreme values. Unfortunately the proposed idea has the same quirk as the one shown above.
So an alternative solution is simply to hide the input. The functionality is not affected.
CSS
#ck-button label input {
display: none;
}
Demo
Try before buy
The answer accepted is not entirely true. Works, but not in all cases.
If you use the common css to hide elements (probably -999em or similar) at the "top" attribute, in this case position:relative has nothing to do because always -999em will be much higher than the viewport.
The answer accepted works fine because the "top" is only -20px . Try to set it a more higher number and you´ll see the problem.
So, the solution is not to set a relative position.
I think the correct way is only to set a negative value at left position (not top).
Try it. :)
you could hide your checkbox input like this:
#ck-button label input {
position:absolute;
top:+20px;
visibility: hidden;
}
I have some links to my facebook and twitter, these links are images. I want these links to turn lighter when I hover over them. I was thinking I could do this by making two images and making the images change when I hover over the image link. Is this the best way to do it and if it is how do i do it? I couldn't find any help on how to do it this way.
Here is my HTML:
<div class="social">
<a href="https://www.facebook.com/seth.urquhart?sk=wall&v=wall">
<img src="../img/facebook_logo_extended.jpg"/>
</a>
</div>
<br>
<div class="social">
<a href="https://twitter.com/SethUrquhart">
<img src="../img/twitter_logo_extended.jpg"/>
</a>
</div>
Here is my CSS:
p {
color: #232323;
text-indent:0px;
margin-left:30px;
padding-right: 30px;
}
ul {
text-align: center;
color: gray;
}
ul a {
text-decoration: none;
color: black;
}
ul a:hover {
text-decoration: underline;
margin-right: auto;
margin-left: auto;
}
html {
background: #e8e9e1;
}
h1 {
text-align: center;
}
body {
font-family: sans-serif;
color: #232323;
}
.wrap {
min-width: 600px;
width: 1200px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}
.content {
background: #ffffff;
width: 900px;
margin-left: auto;
margin-right:auto;
height: auto;
text-indent: 50px;
}
.footer {
text-align: center;
background-color: #383838;
width: 900px;
margin-left: auto;
margin-right: auto;
color: #e8e9e1;
}
.social {
width: 900px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}
.social:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
ul#list-nav {
padding: 0;
list-style: none;
width: 605px;
margin: 0 auto;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
Assuming you're willing to use CSS3, I created an example showing one way to get a brief widening effect for the icons (I suppose that is what "dense" means in the question). Reduced code here:
.icon {
-webkit-transition: 0.25s;
transition: 0.25s;
}
.icon:hover {
position: relative;
z-index: 1;
transform: scale(1.7);
-ms-transform: scale(1.7); /* IE 9 */
-webkit-transform: scale(1.7); /* Safari and Chrome */
}
The transform property has good support. The effect with transition isn't so well supported (no IE9 support), but if you are thinking on graceful degration, I think it's quite valid to use that.
EDIT
I'm updating this answer because it could help other people in future. The accepted answer isn't the right approach, since it's using obtrusive JavaScript to do things about styling, where CSS is the right tool. I really hope the OP will take a look here and change their code.
Based on the OP's feedback, I updated the example showing how to get a brightness effect simulated by changing the opacity property with a fallback using filter for IE6-8. In short, here's the code:
.icon {
opacity: 1;
filter: Alpha(Opacity=100);
}
.icon:hover {
opacity: .6;
filter: Alpha(Opacity=60);
}
It's easy and works very well when the parent's background-color is lighter than the element. If you need something more elaborated (if you really want changing between two images), I really suggests you to use CSS sprites.
I don't know what you mean by dense, but you can alter any image property via the onmouseover and restore it with onmouseout. Here's a code snippet to show how to do it. This code simply makes an image dimmer when the mouse is over it, then restores it when the mouse leaves:
<img
src = "test.jpg"
style = "width:50%;"
id = "test"
onmouseover = "document.getElementById('test').style.opacity=0.5"
onmouseout = "document.getElementById('test').style.opacity=1" />
If you wanted to make the images bigger on the hover, you'd change any of the size attributes. For instance, here's a particularly dramatic size jump:
<img
src = "test.jpg"
style = "width:50%;"
id = "test"
onmouseover = "document.getElementById('test').style.width='75%'"
onmouseout = "document.getElementById('test').style.width='50%'" />
Please note that the above is for illustrative purposes only. There are other ways of doing this, and I am not saying the way I presented is the best or even a good one. However, it's clear and I just want you to clearly see how this can be done.
The simpliest solution would probably for you to use background-images rather than images so you can just switch between them. You can even go as far as creating 3 states this way.. inactive, hover, and selected..
Consider cascades and specificity.. If you define your inactive state first, hover state is defined second overwriting the same definitions, selected state is defined last, again with the same definitions and level of specificity. Now each will overwrite the other in the appropriate or they will happen.
An image
div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }
On hover display a different image
div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }
If the element is an anchor or has some onclick function defined with it.. display a different image on select with a new class
div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }
I have: http://jsfiddle.net/Gkz4v/9/
.pagination li a {
float: left;
width: 6px;
height: 6px;
line-height: 6px;
margin-right: 3px;
text-indent: -9999px;
background-color: #4b4b4b;
}
In the class above, if I remove line "float:left", result is displayed differently than if the line is there. Please try it in my fiddle above.
I want items on different lines with the effect of "float:left"
Can you please explain how does this work?
The effect that you describe, would be the size of the elements? You're trying to do something like this: http://jsfiddle.net/Gkz4v/10/
It is necessary to add a display: block in <a>. This is necessary because <a> is an element with display: inline and inline elements do not respect size rules.
The a tag is an inline element by default, which do not obey widths and heights. floating an element is one way to make it obey widths (which is why you noticed the effect), but in this case, you can just change the display to block to get your desired look.
.pagination
{
padding: 3px 0 3px 3px;
}
.pagination li a
{
display: block; /* change here */
width: 6px;
height: 6px;
line-height: 6px;
margin-bottom: 3px; /* changed the margin too, so it's nice and spaced out */
text-indent: -9999px;
background-color: #4b4b4b;
}
.pagination li.on a
{
background-color: #1f84e3;
}
ol { list-style: none; } /* JSFiddle adds this automatically I think, but in the general case, this will remove the dots in the list */
Working example.
I have a very little but hard (for me) problem to solve.
I have a text input, and a submit button. I need them to be the exact same height and for this to be true across Chrome and Firefox, ideally internet explorer also.
HTML
<input type="text" name="email" /><input type="submit" value="»" />
CSS
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 9px;
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
}
I've setup this basic code on a jsfiddle here.
You should notice if you load it in chrome, the button is less height than the text input and in firefox, its larger.
What am I missing?
Remove/add line-height: 18px; for both.
Vertical padding of the submit button has no effect. This seems to be a webkit bug. You can solve the problem by specifying explit heights and increasing the height of the submit button by the top and bottom padding of the input field.
input[type=text] {height: 60px;}
input[type=submit] {height: 78px;}
The problem is your padding that is applying wrong to your button.
Trying solving it like this.
input[type=submit], input[type=text] {
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
height: 30px; /* or whatever height necessary */
}
Additionally, you can keep the padding left and right on your button like this.
input[type=submit] {
background: #000;
color: #fff;
padding: 0px 9px;
}
input {
height: 19px;
}
This maybe?
Also, remove the padding property.
http://jsfiddle.net/xkeshav/e6aTd/1/
Maybe it's the padding that is making problems. Try removing the padding, setting the button to a fixed height and make the offset with line-height.
You need to remove the height and work on the actual height of the input text field just by padding/font-size
jsfiddle
Removing/adding line-height: 18px; for both is not a perfect solution because I see a little difference height in firefox...
The best solution I found is to put a div arround and set its style to display: flex.
All is perfect this way.
body {
background: #ccc;
}
div{
display: flex;
}
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 5px;
font-size: 25px;
border: 0;
margin: 0;
}
<div><input type="text" name="email" /><input type="submit" value="»" /></div>
TRY
body {
background-color: #ccc;
}
input[type=text] {
width: 218px;
}
Working DEMO