Currently I have a 1px border that wraps around each job title that I post. The issue that I have is that on the bottoms where i placed the red logo the 1 px's overlap making a thicker line (2px) than the rest. How can I fix this but still have a full border when each page is opened. Thanks for taking a look.
http://jobspark.ca/job-listings/
UPDATED CSS
article .post {
border: 1px solid #e3e3e3;
border-top: none;
}
article.article-index-null .post,
article.article-index-1 .post {
border-top: 1px solid #e3e3e3;
}
UPDATE:
Only thing is now when you click and open a page "parts person" for example the top border is missing. http://jobspark.ca/job-listings/2013/6/3/wellsite-trailer-energy-services-technician
Just remove the top border from each post except the first one:
article .post {
border: 1px solid #e3e3e3;
border-top: none;
}
article .post:first-child {
border-top: 1px solid #e3e3e3;
}
Edit: Because your html structure has a series of article elements with one .post in each (instead of a series of .post elements inside an article, as I'd assumed), the above code won't work, but the principle is the same. You can't use article:first-child because there is another sibling element that is the first child, but since you have given the first article a specific class name, you can use that, as follows:
article .post {
border: 1px solid #e3e3e3;
border-top: none;
}
article.article-index-1 .post {
border-top: 1px solid #e3e3e3;
}
Second Edit: Since you are reusing the same html on for both item view and list view but don't want the top border removed in item view, do the following:
article .post {
border: 1px solid #e3e3e3;
}
.view-list article post {
border-top: none;
}
.view-list article.article-index-1 .post {
border-top: 1px solid #e3e3e3;
}
Alternatively, since in your unit view you have given the article the class "article-index-null" you could also do the following:
article .post {
border: 1px solid #e3e3e3;
border-top: none;
}
article.article-index-null .post,
article.article-index-1 .post {
border-top: 1px solid #e3e3e3;
}
Either one should work.
Change to this:
article .post {
padding: 12px 16px;
border: 1px solid #e3e3e3;
border-bottom: none;
background: white;
}
And add this:
article .post:last-child {
border-bottom: 1px solid #e3e3e3;
}
There are a few ways to do this. i would wrap the entire articles section with a <div> that has only a 1px top border, no padding. then every article would only need left, right and bottom borders to achieve the look you are going for.
article .post {
padding: 12px 16px;
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
background: white;
}
Instead of using border what about using border-left border-right and border top ?
Seems like this is solving your issue.
Related
This is my failed attempt:
https://jsfiddle.net/j75hxxa2/1/
I want the block on the right side and the extra gray part gone.
Adding
float: right;
To the parent makes its children very small and tiny. If I try to widen the children by adding
width: 50%;
They break the line.
Is there a simple fix?
(Also I think
margin-top: 1px;
Isn't working?)
Thanks in advance
A better way is to use a table:
HTML:
<table>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>I</td><td>II</td><td>III</td><td>IIII</td></tr>
</table>
CSS:
table {
border-collapse: collapse;
background: #000;
border-top: 1px solid #777;
border-left: 1px solid #777;
}
table tr td {
border-right: 1px solid #777;
border-bottom: 1px solid #777;
color: #fff;
}
Add float left to .cell as below, I have changed background color, change it back to your previously assigned or as you wish.
.cell {
width: 24.8%;
float:left;
}
#table {
margin-right: 1px;
margin-top: 1px;
background-color: #f22;
width:100%;
height:37px;
}
I'm working on a dynamically generated table atm. The CSS-File looks like this:
...
td {
border: 1px solid white;
}
tr {
border: 1px solid black;
font-family: Arial;
}
table {
width: 850px;
border-spacing: 8px 8px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
text-align: center;
}
...
I don't want to see the border of the cells, BUT the cells need to be there, because they are a placeholder, so I change their color to white.
My problem is that I don't know why the border of the rows won't get displayed. Or let's say, is it possible to display the row's border, but not the cells'?
Since different browsers behave differently, where table borders are concerned, I found it always more consistent, to put the borders to the top/bottom of the cells instead of the rows:
td {
border-bottom: 1px solid #000;
}
Since this will draw the top border of each cell, it will look like the row has a border(-bottom).
To add another border to the very top:
tr:first-child td {
border-top: 1px solid #000;
}
Finally, if you need the left and right borders too, add them to the first/last cell of each row:
td:first-child {
border-left: 1px solid #000;
}
td:last-child {
border-right: 1px solid #000;
}
Sorry, if this looks clumsy, but in my experience this will work better than trying to force the rows to display a correct border.
Please try this:
tr {
outline: thin solid black
font-family: Arial;
}
tr{
outline : 1px solid black;
}
I have a box where I've created an "etched" vertical line by placing a #bbb line and an #fff line next to each other with the CSS:
div#product_details_separator {
height:100px;
width:0px;
border-left:1px solid #bbb;
border-right:1px solid #fff;
Etched Vertical Line:
Does anyone know how I can give the entire border around the box this same etched effect?
You can apply box-shadow to achieve that etched effect. See the DEMO
CSS
.box {
border: 1px solid #fff;
box-shadow: 0 0 0 1px #bbb;
}
What you're trying to do sounds kind of like the inset border-style, that may be worth looking into. To add a second layer of border, however, you can use the outline property. This allows you to specify an outline that goes directly around the border.
border: 1px solid #bbb;
outline: 1px solid #fff;
You have several interesting (and seldom used) styles to set on a border w3c doc
Combining them, you can achieve several interesting variations on your request
Notice that the grayed color is calculated automatically. See also the 4th example, to achieve special effects different from the standard ones
div {
width: 100px;
height: 80px;
display: inline-block;
}
.one {
border: groove 20px lightblue;
}
.two {
border: ridge 20px lightgreen;
}
.three {
border: inset 20px tomato;
}
.four {
border-top: groove 20px tomato;
border-left: groove 20px tomato;
border-right: ridge 20px tomato;
border-bottom: ridge 20px tomato;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
Is it possible to somehow create a double border in CSS, with these 2 added customizations:
One line is slightly thicker than the other
There is a small gap between the two lines
This is the kind of border I need:
EDIT:
Guys, I cannot make any changes to my existing HTML code. I can only apply CSS for the existing HTML code. As far as you're concerned, consider I have a div named sampleDiv, and I want to apply the border on the top side of this div (see below).
Secondly, if you're using any technique other than border, please note that I only want to apply the this specialized border on the top side of my sampleDiv div.
pure CSS & Cross browser - the thickness and spacing can be customized
After your latest Edit: this is a Working Fiddle
without changing the markup, top border only.
your HTML:
<div class="sampleDiv">
some content
</div>
new CSS
.sampleDiv
{
border-top: 2px solid black;
padding-top: 1px;
}
.sampleDiv:before
{
content: '';
border-top: 1px solid black;
display: block;
width: 100%;
}
If you are allowed to change the DOM:
one line anywhere in the markup: Working Fiddle
HTML:
<div class="SpecialLine"></div>
CSS:
.SpecialLine
{
border-top: 2px solid black;
height: 2px;
border-bottom: 1px solid black;
}
full container border: Working Fiddle
HTML:
<div class="SpecialContainer">
<div class="Content">
here goes the content
<div>
</div>
CSS
.SpecialContainer
{
border: 2px solid black;
padding: 1px;
}
.Content
{
border: 1px solid black;
}
There are various ways you can have multiple borders. One way is to use box-shadow, you can specify multiple box shadows to create the effect you want.
Example
box-shadow: 0 0 0 5px black, 0 0 0 7px red;
Update
I have created a jsFiddle to show you how you can create your borders using box-shadow
Fiddle
There's not a specific property or something for this,but you can easily create one.Something like this:
html:
<div id="wrapper">
<div id="middle">put whatever you want here</div>
</div>
css:
#wrapper{
border: 3px solid black;
padding: 1px;
}
#middle{
border: 1px solid black;
}
here's a js fiddle link:
http://jsfiddle.net/roostaamir/GEqLJ/
UPDATE:
so I saw your edit,and here's the first thing that came to my mind(if you have the width of your sampleDiv this will work):
#sampleDiv
{
border-top: 3px solid black;
width: 500px; //this is an example
position: relative;
}
#sampleDiv:before
{
content: "";
display: block;
position: absolute;
top: 1px;
width: 500px;
height: 1px;
background-color: black;
}
Your div: <div class="framed" />
Simple CSS:
.framed {
border: solid 2px #ccc;
box-shadow: 0 0 0 14px #ccc;
outline: solid 8px #fff;
}
Demo Fiddle: http://jsfiddle.net/uRFsD/
The easiest way to do this would be wrapping the main div in a container div for the second line like so:
.inner {
border: 2px solid #000;
}
.outer {
border: 1px solid #000;
padding: 1px;
}
It's not particularly semantic but it's an easy way to get the job done. You could also use border-image if being semantic is important, but it's more complicated. I guess you could also use both border (inner) and outline (outer) on the same div, but that is not ideal since outline isn't technically part of the box model at all as far as I understand it.
HTML
<div></div>
<div></div>
CSS :
div{
display: block;
background-color: #000;
}
div:nth-child(1){
padding: 2px 0;
}
div:nth-child(2){
margin-top: 1px;
padding: 1px 0;
}
Check this fiddle
May be something like below:
div {
border-top: 3px solid #00f;
position: relative;
z-index: 10;
margin: 10px;
width: 200px;
}
div:before {
content: "";
border-top: 1px solid #f00;
position: absolute;
top: 0;
left: 0;
right:0;
z-index: -1;
}
http://jsbin.com/iWiGEzU/1/edit?html,css,output
Like
demo
css
.outline {
border-top: 2px solid #000;
border-bottom:1px solid #000;
height:3px;
}
CSS
.doubleBorder
{
border: 4px solid black;
padding: 2px;
}
.doubleBorder>div {
border: 2px solid black;
}
HTML
<div class="doubleBorder">
<div>
<p>Hello</p>
<p>World</p>
</div>
</div>
Working demo
Not in pure CSS as far as I know. Instead you could add in a div element to your HTML, set its width to the one below it and set it's border-top, thickness, margin properties to be meet your thicker border requirement.
Le Code (without background): http://jsfiddle.net/SP6ny/ (colors changed for extra contrast)
Basically I have LI elements, and I need to add this border to them:
there is a pattern in the background so the list must not have a background.
thanks.
(I have no idea what I"m doing.)
body{
background: black;
}
.rl_section{
color: white;
display: block;
font-size: 12px;
margin-bottom: 20px;
}
.rl_section:first-child;{
border-top: none;
}
.rl_section:last-child;{
border-bottom: none;
}
.rl_content{
width: 100%;
display: block;
border-top: 1px solid #aaf;
border-bottom: 1px solid #a55;
padding: 3px 0;
}
You could use a technique like this: http://jsfiddle.net/sl1dr/Hub86/
Basically I am using top and bottom borders with differing colors.
Make the background of the container of the LI elements black. Make a margin-top:1px; on the LI elements themselves. then a border-top:1px solid {#YOUR COLOR CODE}; on the elements.
you can use the outline propperty for 1 color and border for the other
li {
outline: 1px gray solid;
border: 1px black solid;
}