I have a set of elements placed one after another. If user clicks an element, 1px width border is set to it. As result other img elements are shifted.
How can I reserve 1px width space around every img element?
Either use margin (MDN)
margin: 1px;
or set the border-color (MDN) to transparent and just switch the color
border-color: transparent;
when you add the border you can add margin: -1px; to the element too (make sure you reverse the process properly when taking the border off)
Alternatively give all border: 1px solid transparent (think they all support that these days) then you just need change the border colour. You could tinker with border-color: rgba(222,0,0,0); and then rgba(222,0,0,1) for the active element, where a is the transparency. However, rgba is not very well supported in IE atm.
Related
I am looking to color the bottom pixel (the bottom width pixel, along all the length of the image) of my image to one particular color when I click on it. I would like not to add anything in the html.
Can that be achieved only in css doing something like :
.image:active{
width: 1.5px;
background-color: my_color;
length: 100%;
}
Yes, you can use :active state selector. Basically, you can either add a border on the bottom or create a pseudo-element for this image's child (because not all browsers support :before and :after on images).
Border solution:
.image:active {
border-bottom: 1px solid red;
}
I think you wanna add an border at the bottom of your image on css like :
.image:active {
border-bottom: 1.5px solid #123;
}
I have four boxes in a row and they all have the same class. They all should be the same width but one is 1 pixel wider than the rest and it's throwing the row out. As far as I can see, the content is not pushing it, and there is nothing in the box to make it 1 pixel wider. It's the second last box to the right with the contact form in it on this site: http://www.guitarworldcityarcade.com.au/
If it's not content, how can I tell what's making this particular div 1 pixel wider than the rest?
I had compensated for the border in the widths of each box: layout is 1120px wide. 1120/4 = 280. Each box has a padding of 5px, so thats 5 on the left and right. 280-10=270. Then the border, which is 1px on each side, so thats 270-2 = 268. I have set my class for the boxes to be 268px wide and yet one is one pixel wider. I don't really want to sacrifice the border (yet).
You are using border: 1px solid #111111; on line 247 of global.css.
So if you are aware of CSS Box Model
The border is counted outside of the element and not inside hence it offsets your element by 2px and not 1px because it takes 1px on the left, 1px on the right as well as top and bottom too.
So two solutions here, either you can use border: 0; or you need to use box-sizing: border-box; on that element, which will count the border inside instead of outside.
That extra space is coming because of border. So you need to set it to zero.
Declare border: none; for the last box and it will work.
Add this code in your class
border: none;
outline: none;
width:0;
Remove the css border property to that div
border:0px;
Sometimes I find myself in a situation where I want to define a border rule for the left and right side of an element. But honestly, border-left: solid 1px #999; border-right: solid 1px #999 is little clumsy. It wastes space, I have to apply changes twice and it may or may not be rendered less efficiently.
Is there a way to define horizontal borders or vertical borders in one go?
<div id="myDiv">Your Div</div>
CSS:
#myDiv
{
border-width:0 1px 0 1px;
border-color:#ddd;
}
You can do it in one go like this:
#myDiv
{
width: 100px;
height: 100px;
border: 1px solid #999;
border-width: 0 1px; /*horizontal, vertical*/
}
http://jsfiddle.net/52AEP/
No.
From https://developer.mozilla.org/en-US/docs/CSS/border:
While the border-width, border-style, and border-color properties and
even the margin and padding shorthand properties accept up to four
values, allowing to set different width, style or color, for the
different border, this property only accepts one value for each
property, leading to the same border for the four edges.
So you could switch to using separate border-width, border-style, and border-color properties, using their shorthand properties to set per-side styles - but I think you're best off as you have it.
That said, ensure that you're saving your style definition as a CSS class - that can then be re-used across elements, rather than applying these one-by-one in "style" attributes on elements throughout your page.
unfortunately there is not an option in css ... you must write all border params manually.
Right now, our mockups / live demo use images to achieve this effect (including button text). This is less than desirable for all of the standard reasons. I can get everything working except that pesky outer border. I'd really like to not add markup to my document just to have that.
I've got my test code on jsfiddle, although it doesn't work as well there as it does on my local machine: http://jsfiddle.net/Axtjm/
tldr: how to add inset border like that and keep rounded corners without extra markup.
As unintuitive as this sounds, don't use outline for outlines. Use box-shadow with a 1px spread:
box-shadow: 0px 0px 1px 1px #049ED9;
Demo: http://jsfiddle.net/Axtjm/4/
The easiest option is to add the extra container element and give each a border.
But the challenge is to do it without the border. Some ideas:
use a border and then a very thin box-shadow.
use the border style attribute AND the outline style attribute
(both dependent on the browser supporting them)
Quick JSBIN demo: http://jsbin.com/irabul
it is using border-radius property of CSS3
and simple CSS border techniques,
some of the border property,
solid Specifies a solid border
double Specifies a double border
groove Specifies a 3D grooved border. The effect depends on the border-color value
ridge Specifies a 3D ridged border. The effect depends on the border-color value
inset Specifies a 3D inset border. The effect depends on the border-color value
outset Specifies a 3D outset border. The effect depends on the border-color value
inherit Specifies that the border style should be inherited from the parent element
and here is the border-radius in detail,
http://www.css3.info/preview/rounded-border/
Use an inset box-shadow. If you're already using a box-shadow on your buttons, remember that you can stack box-shadows by using commas to separate each.
button {
border: 1px solid #369;
box-shadow: inset 0 0 1px #fff, 1px 1px 2px #000;
}
The above is just an example; replace the values with your own if necessary. If you want a bolder inset shadow, you can also stack two insets of the same value to achieve that.
Live example: http://jsfiddle.net/Axtjm/5/
I'm trying to highlight the row the mouse is over in a table of data. I'm trying to do this with a border-top and border-bottom. To help the readability i also have a light transparent png on alternate rows.
It seems that when I turn on and off the borders (works in IE8+ and FF) the rows jump around a little. I think I can fix it by having a a non-hover transparent border, rather than none at all. Is this x-browser compatible now days?
In Chrome, the highlighted row's border does not go away when you move the mouse off the row, why?
http://justinzaun.com/Tree/people/
Update: I've fixed the border issue in chrome where they wouldn't go away. I moved the border to the TDs rather than the TR. The rows are still jumping around though.
Thanks!
put an transparent border on your normal state elements.
When the :hover is applied the size of the border changes the size the element takes up.
eg:
.myelement
{
border:4px solid transparent;
}
.myelement:hover
{
border: 4px solid green;
}
http://jsfiddle.net/mPmRA/
EDIT:- more specifically to your table (ugh: tables ... collapse border makes the above not work properly)
http://jsfiddle.net/mPmRA/1/
put the transperant border on the tr
tr
{
border-top:4px solid transparent;
border-bottom:4px solid transparent;
}
And for the hover do something like:
tr:hover td
{
border-top:4px solid green;
border-bottom:4px solid green;
}
The td borders will then appear ABOVE the row's border.
An easier way is adding "margin-top:-1px; margin-bottom: -1px;" to the :hover style, this corrects the new height with the border.
Make sure your border is set to the INSIDE instead of the outside. Unfortunetly, the inset option for borders is not yet part of CSS. Here's a bit of CSS to make the borders inside the element using box shadows:
.mytable tr:hover {
-moz-box-shadow: inset 0 0 1px #000;
}
That will make a 1px black border on the INSIDE of your element! :D
I hope this helps, if you're set on a black dotted border, your only option is to set absolute positioning, and position each table row individually, which is a pain in the ass. :/
If you've got relative or static positioning, elements will move when other increase in size. Wulf's idea may work with a little configuring, but to be honest, the box shadow is a much nicer border then the dotted one. (a bit tacky if I say so myself. ^_^ Sorry.)