I have table cells where I've set various images as the border with no margin around the cell. Is there a way to then put a coloured border inside the images, pushing the border into the cell rather than right at the edges?
If you can use CSS3, just look towards outline property.
This example makes 2px blue border inside table cell.
CSS:
td.bordred {
outline: solid 2px #377bb5;
outline-offset: -2px;
}
Have you tried playing with border-style: inset;?
Related
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;
I need to create a sidebar menu like this http://wrapbootstrap.com/preview/WB07061TJ, but I can't find the image asset of the current item (a white arrow).
How can I do this?
This is a CSS border triangle trick:
You can achieve this with a span element in absolute position where you want the arrow and the following class
.triangle {
display: inline-block;
width: 0px;
height: 0px;
border: 5px solid transparent;
border-right: 5px solid white;
}
As a side not: this "feature" is nothing bug an edge case of this http://jsfiddle.net/Xjmp5/
the arrow is made from 2 div-s
you can see the code ,he set the div width:0,height:0,line-height:0,font-size:0 to make sure the have no width and height
in this case ,if you set the border into 4 different colors ,you will see 4 triangles,in the shape of a square
what to do next is to set the border-left,border-top,border-bottom transparent .then you get a triangle,
the last thing you want to do is make another white triangle and cover it on the first one ,then you will get the arrow
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.
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.)