I'm using bootstrap to drawing a well. In this well, I create two span6 and would like to draw a vertical divider between these two column. How can I achieve my goal?
Draw the left border on all, but first column:
.well [class^="span"] + [class^="span"] {
margin-left: -1px; /* compensate border width */
border-left: 1px solid #e3e3e3;
}
Alternatively, CSS columns can be used (prefixes required):
.well.col {
columns: 2;
column-gap: 20px;
column-rule: 1px solid #e3e3e3;
}
If you have never use it before, you should check my tutorial on CSS columns.
The selected answer breaks if your elements take up the entire width because the border adds 1px too many! To combat this you can adjust the margin to account for the border.
.line-right {
margin-right: -1px;
border-right: 1px solid black;
}
If you'd like a bigger border, just be sure to account for it in the margin!
You can always use an HTML <hr> tag.
Related
How can I create vertical border line on both (left, right) side like facebook using CSS??
I've read several posts on Stackoverflow, but I could not find exactly what I wanted...Anybody know how to make vertical lines(layout)?
Thank you :)
facebook
| contents |
| |
| | <-these two vertical lines on facebook
| |
| |
There are two options:
use css borders and play with box-shadow too
use image lines there
both work fine. I would choose the css solution but there are others who create an image background and place it behind the main content area and then center all content on top of it.
Just apply borders and shadow to these borders (you can change the box-shadow value to fit your needs). Here's a fiddle
.middle {
width:400px;
height:800px;
border-left:1px solid #eeeeee;
border-right:1px solid #eeeeee;
margin:0 auto;
box-shadow: 5px 5px 5px #888888;
}
Specify your content width first. then use
margin : 0 auto;
it will keep your content in the middle of the page with both side equal space blank. then put dashed border on the content. try it. give your feedback.
You can use border-right and border-left here is an example below
#middle-region{
width: 900px;
min-height: 600px;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
margin: auto;
}
I'm looking at making a trapezium with a box shadow that's 10px wider at the top than the bottom. In the past I've made a trapezium as outlined in the following jsfiddle, but you'll notice that if I put a box-shadow onto the element it boxes the outerWidth in a rectangle, rather than putting a shadow on the slanted border:
#trapezium {
margin:20px auto;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
box-shadow:0 0 10px #333;
}
http://jsfiddle.net/YhePf/8/
My initial thoughts would be to use something along the lines of:
-webkit-transform:perspective(100) rotateX(1deg);
Something like that. While this certainly begins to resolve the issue, I'm not sure what the number 100 refers to in 'perspective', and how I could calculate a formula that would make sure the top width was precisely 10px wider than the bottom, regardless of how high or wide this element is.
Any tips? Or a third option to pull this off?
What you've built isn't a trapezoid (aka trapezium) -shaped element; it's a rectangle-shaped element where the border styling creates the appearance of a trapezoid. This is why the box-shadow is rectangular.
Using the proprietary -webkit-transform property wouldn't change the shape of the actual element.
To create a truly non-rectangular element, you'll need to use SVG. See Multi-Shaped CSS Layers \ Non-rectangular CSS Layer or non-rectangular hoverable area.
I am trying to make a HTML page using two column layout.
I have a version in jsfiddle
http://jsfiddle.net/bobbyfrancisjoseph/eFMpJ/35/
I am unable to set a top margin for the the inner container.Though I have given a top-margin for the innerContainer its not been reflected in the page.
The reason I am using an inner container for containing the left-sidebar and innerContainer is that in the actual page I have two more divs side by side in the inner-container.I do not prefer to use three column layout for that reason.
Your issue is with margin collapsing. You can prevent the margins from collapsing by using a border or padding. There's a good explanation here: http://reference.sitepoint.com/css/collapsingmargins
http://jsfiddle.net/eFMpJ/46/
#outerContainer
{
background-color:#FFF000;
margin:10px 10px 10px 10px;
border-top: 1px solid black;
// or padding-top: 1px;
}
First of all the closing div is missing for the opening .
Then I added padding-top of 10px in outerContainer.
#outerContainer
{
background-color:#FFF000;
margin:10px 10px 10px 10px;
padding-top: 10px;
}
I think this will solve your problem.
Please let me know what is the result.
I'm seeing a rendering issue for a 2px dotted border similar to CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome but on desktop Safari and Chrome. I tried several widths and it happens in all of them
This is a sample:
the vertical line ending has the same issue but it's out of the picture.
Sample:
http://jsfiddle.net/bcdQQ/
This issue happens if the width is not divisible by the border-width.
This works:
http://jsfiddle.net/bcdQQ/5/ (i made it a little bit bigger, for better sight)
#prodpre {
border-bottom: #555 5px dotted;
height: 20px;
margin: 0px 0px 2px 0px;
padding-bottom: 10px;
width: 505px;
}
So, the only possibility to catch this issue, would be a javascript solution, which corrects the width of the div, so it is divisible by the border-width (cause it is dynamically in your example).
could you put it in a smaller container div with overflow hidden?
Two inline-block elements next to each other.
.e{border:1px #ccc solid}
.e:hover{border-color:#555}
What I'd like is to reduce the 1px+1px border between them to a shared 1px border.
To illustrate.
---------
| | |
---------
Select first element.
+++++-----
+ + |
+++++-----
Select second element.
-----+++++
| + +
-----+++++
It's simple to reduce the 2px border to 1px by setting either border-right or border-left to 0, but how to keep the 1px shared border when either element is selected?
Without JavaScript.
You could give them a -1px left margin to get their borders overlapping and then undo that margin on the first one. Then adjust the z-index on hover (and don't forget position: relative to make the z-index work). Something like this:
.e {
border: 1px #ccc solid;
position: relative;
margin-left: -1px;
}
.e:first-child {
margin-left: 0;
}
.e:hover {
border-color: #555;
z-index: 5;
}
Demo: http://jsfiddle.net/ambiguous/XTzqx/
You might need to play with the :first-child a bit depending on how your HTML is structured; a couple other options if :first-child or another pseudo-class won't work:
Wrap it all in a <div> with padding-left: 1px to kludge around the margin-left: -1px .
Add an extra class to the first one that has margin-left: 0.
Make the :hover state have a 2px border and give it -1px margin on both sides. Make exceptions for :first-child and last-child assuming you don't have to care about every browser out there… I'm looking at you IE6/7