I need to make a css class for a table created from CMS with tinyMCE so it will look like one below.
http://i.stack.imgur.com/0xcdT.png
Everything is pretty trivial except that dashed vertical delimeter with cirles. Actually having no idea how can I do it.
Here's what I have atm. Just a dashed line.
http://i.stack.imgur.com/Wp6M6.png
table.testclass {width: 100%; font-size: 1.3em; -webkit-border-vertical-spacing: 1px; -webkit-border-horizontal-spacing: 0px;}
.testclass tr:first-child td:first-child{border:0px; }
.testclass tr:first-child td:last-child{border: 0px;}
.testclass td{ height: 50px; border-bottom: 1px; border-top: 1px; border-color: black; border-style: solid; vertical-align: middle;}
.testclass tr td:first-child {text-align: right; border-left: 1px solid black; padding-right: 0px; border-right: 1px dashed rgba(0, 0, 0, 0.33) !important; width: 33%; padding-right: 25px; }
.testclass tr td:last-child {text-align: left;border-right: 1px solid black; padding-left: 25px;}
Here's HTML generated:
<table class="testclass" border="0">
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>assdava</td>
<td>zxcv234vbzx</td>
</tr>
<tr>
<td>23dfasdfadq2</td>
<td>sdfWFASDF</td>
</tr>
</tbody>
</table>
Here is a way entirely using CSS and pseudo elements. Can't speak to how cross-compatible it is, but you should experiment and see if it is flexible enough for you (based on the CSS you used, with assigned heights and such on the td elements, it would work in functioning browsers).
See the fiddle
Relevant code:
.testclass, .testclass td {
position:relative; /* allows proper positioning of absolute elements */
}
.testclass tr td:first-child:before {
content:'';
position:absolute;
right:1px;
top:18px; /* positions it at the top of the circle */
width:1px;
height:100px; /* whatever you want (here is td height * 2).. but has bearing on other code */
border-right:1px dashed #555;
}
.testclass tr td:first-child:after {
content:'';
position:absolute;
right:-7px; /* width of circle/2 */
top:18px; /* height of td - height of circle/2 */
height:14px;
width:14px;
border-radius:50%; /* don't forget vendor prefixes -- makes it a circle */
background:#fff;
z-index:2; /* puts it on top of the vertical dashed line */
border:1px dashed #666;
}
/* this one is the final circle below the entire table */
.testclass:after {
content:'';
position:absolute;
left:33%; /* width of the left-most td element */
margin-left:-9px;/* width of circle/2 */
bottom:-75px; /* height of td/2 - height of :after element */
height:14px;
width:14px;
border-radius:50%;
background:#fff;
z-index:2;
border:1px dashed #666;
}
Understandable if this isn't a method you can use. for something that would work in older browsers, you would really need to use different HTML markup. You could also, if needed, use an image for the circle (which would mean border-radius wasn't necessary). I didn't vendor prefix or anything... only tested in chrome.
I tried to add comments to the measurements to explain how they were derived. I don't think I used any magic numbers.
Related
I'm having trouble with borders overlapping themselves because of the different width the border-top has.
Here is an example code of my problem:
http://jsfiddle.net/u7KhX/
.border{ width: 200px; height: 200px; border-top:5px solid #894b9d; border-right: 1px solid #dad9d9; border-bottom: 1px solid #dad9d9; border-left: 1px solid #dad9d9;
As you can see the purple part is not complete.
Any Ideas?
You can make the top border a perfect rectangle and still have the other borders the way you want them by using the div's ::after pseudo element.
Put the top border on the div itself and the other three borders on the pseudo-element.
For example:
.border {
width: 200px; height: 200px; border-top:5px solid #894b9d;
padding: 0 1px 1px 1px;
position:relative;
}
.border::after {
display:block; content:'';
position:absolute; top:0; left:0;
width:200px; height:200px;
border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}
See updated fiddle.
Edit:
Or if you don't want to rely on a given width and height, like this:
.border {
display:inline-block;
position:relative;
padding:.5em;
border-top:5px solid #894b9d;
}
.border::after {
display:block; content:'';
position:absolute; top:0; left:0;
width:100%; height:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}
I've made it an inline-block, to show that it works fine with dynamic content sizes, but you can work with all kinds of widths.
more updated fiddle.
The spec is pretty vague about this, but all browsers implement it the same way:
Wherever 2 borders meet, there will always be an abrupt diagonal line.
This has been put to good use, by making triangle & other shapes in pure CSS. Check out this gallery:
The shapes of CSS, by Chris Coyer.
If I use box-sizing: "border-box" for images the images will get smaller, like on hover: Example JsFiddle
Is it possible to do the same effect without the image getting cropped?
Solution #1 Outline property. Try to use outline instead of border with negative outline-offset value equal to outline width:
img:hover {
box-sizing:border-box;
outline: solid 10px #f80;
outline-offset: -10px;
}
http://jsfiddle.net/dfsq/BPRyZ/2/
Also since IE does not understand this property you can leave box-sizing to be used by IE8+.
Solution #2 Using div as wrapper + :after:
<div class="img-wrap">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" class="img1" />
</div>
CSS:
.img-wrap:after {
border: 0;
}
.img-wrap:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: solid 10px #f80;
}
http://jsfiddle.net/dfsq/BPRyZ/7/
The question you need to answer is, do you want the image itself to be 200px, or the entire box to be 200px. There are 4 different ways to code this depending on your answer to the previous question...
If you want the entire box to be 200px wide, then you can use border-box with the following code...
http://jsfiddle.net/BPRyZ/8/
img {
width:200px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
If you want the entire box to be 200px wide, then you could also use this code...
img {
width:180px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
If you want the image itself to be 200px, then you need this code... (this means your total box width is actually 220px)
img {
width:220px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
For the above you could also use...
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
I updated your jsfiddle
CSS:
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
width:220px;
}
I have a table. Inside that table some td have the class "arrow". For the td that have this class I would like to put an arrow (triangle) on the left border of that td. I would like to use only css to achieve that. Note that I wish the arrow to start below the top border and end above the bottom border. I tried to apply several "pure css arrows tutorials" I found on the internet but I do not manage to make it work on td. I hope I was clear and I hope someone might help. Thank you in advance for your replies. Cheers. Marc.
http://cssdesk.com/PzASe
My HTML :
<table>
<tr>
<td>td1</td>
<td class="arrow">td2</td>
<td class="arrow">td three</td>
</tr>
<tr>
<td>td4</td>
<td class="arrow">td five</td>
<td class="arrow">td6</td>
</tr>
</table>
My CSS:
table{
border-spacing: 0px;
border-collapse: collapse;
text-align:center;
vertical-align:middle;}
td{
padding:10px;
border:1px solid purple;}
.arrow:before {
content:'';
position: relative;
top: 0;
left: -10;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid transparent;
border-left: 5px solid black;
}
What is your target audience with this? Most of the CSS techniques for drawing shapes like triangles involve things like insert new elements, and advanced CSS properties (read: don't work in IE), I would suggest biting the bullet and using an old-fashioned background image.
If you're doing it as a proof of concept, and you don't care what browser a visitor is using, have you looked at this tutorial on CSS tricks?
You would need to insert a <div> into those cells, and then apply styling like this:
.arrow div {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;
}
Try this css. Your td was center aligned which added that odd space before your arrow. (see it in action here css code
table{
border-spacing: 0px;
border-collapse: collapse;
text-align:center;
vertical-align:middle;}
td{
padding:10px;
border:1px solid purple;}
.arrow:before {
content:'';
position: relative;
top: 0;
left: -10;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid transparent;
border-left: 5px solid black;
}
.arrow {
text-align:left;
}
No sure why the borders are not displaying correctly. I tried:
/* ------ global ------ */
body {
margin: 0 auto;
padding:0 0;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
color:#000;
}
/* ------ Content Wrapper ------ */
#wrapper {
margin: 0 auto;
width:760px;
text-align:left;
}
#content table {
font-size:.8em;
border-collapse:collapse;
text-align:left;
width:100%;
}
#content table td {
border:solid 1px black;
}
Do I need to list all the CSS border properties to get the borders on the whole table, like this:
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
or more ......
I haven't done this yet, but I have had to do this in the past with some tables to get the borders on all sides for lte IE7. It was just as a last resort since I didn't know what else to do.
Consider the following jsFiddle, which works correctly in IE7 by showing a 1 pixel solid black border on table cells.
I didn't change any of your code, but added a rule to include borders on table header cells table th as well as table data cells table td.
HTML:
<div id="content">
<table>
<tr>
<th scope="col">Column</th>
<th scope="col">Column</th>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
</div>
CSS:
#content table {
font-size: 0.8em;
border-collapse: collapse;
text-align: left;
width: 100%;
}
#content table th,
#content table td {
border: solid 1px black;
padding: 5px 10px;
}
If your table cells still aren't showing any borders, you might have one or more rules in your stylesheet that appear later — or have more CSS Specificity — that are overriding your styles.
Try using border-collapse:separate for IE7 like this:
#content table {
font-size:.8em;
border-collapse:collapse;
text-align:left;
width:100%;
*border-collapse:separate;
}
apply border-collapse: collapse to the table, it should fix it :)
Codes as below. I'm so puzzled of this problem.
table td{
padding:10px;
background:#415DA1;
border-top:solid 10px #F00;
border-right:solid 10px #CCC;
border-bottom:solid 10px #F00;
border-left:solid 10px #CCC;
}
<table>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
The apperance between Firefox and Chrome has some differences, I'm not sure if it's coused by the differences of different brwosers. Is there any way to fix it by CSS?
Example: http://jsfiddle.net/AndyE/B2fjn/
This is just differing border drawing implementations. You'll notice that there's a difference in IE and Opera too:
I didn't test Safari, but I'd expect it to look the same as Chrome since they use the same rendering engine.
The only way that I can think of to get a consistent border across browsers is to set border-collapse to separate on the <table> element:
table {
border-collapse: separate;
}
This, unfortunately, means you have a new problem to solve — there will now be 2x 10px borders between each cell. You can work around this by altering your markup or adding extra CSS rules. For instance, I changed the CSS to the following:
table {
border-collapse: separate;
}
table td{
padding:10px;
background:#415DA1;
border-top:solid 10px #F00;
border-right:solid 5px #CCC;
border-bottom:solid 10px #F00;
border-left:solid 5px #CCC;
}
table td:first-child {
border-left-width: 10px;
}
table td:last-child {
border-right-width: 10px;
}
Demo: http://jsfiddle.net/AndyE/B2fjn/1/
This gives as good a result as you can probably expect in modern browsers, but doesn't look so great in IE 6-8. You'll need to experiment until you can get the best result possible.
the correct syntax for border (css) is : border: 1px solid #FFF;.
Now, change your CSS like this:
table tr td{
padding:10px;
background:#415DA1;
border-top:10px solid #F00;
border-right:10px solid #CCC;
border-bottom:10px solid #F00;
border-left:10px solid #CCC;
}
Some browsers have the ability to correct the css code if there's any problem ( like yours ), but some don't. So, please check if the new CSS code works or not. If it doesn't, please post the screenshots of both the browsers displaying the document. Thank You.
In my case that border problem create offset between elements in Firefox.
Solution: add this css rules to your bordered element.
div{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
...
}