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;
}
Related
I'm trying to create a slanted sidebar menu to my website like in the wider shape picture attached. The idea is to start the diagonal lines in both the top and bottom of the div from about the middle of the width, maybe even from a bit closer to the edges. Eventually when the menu is collapsed, it suppose to look like in the picture with the narrow shape. How can I do it? Thanks!
P.S: I already got the functionality to work. I only need help with the CSS Design of the div.
.triangle-left {
width: 0;
height: 0;
border-top: 750px solid transparent;
border-right: 50px solid #555;
border-bottom: 750px solid transparent;
}
<div class="triangle-left">
</div>
This can probably be adjusted as well for your needs but this is how I went about attempting this.
Is there a way to wrap text in a div with a border and margin around an image with float: right?
So far, the best I was able to do was get the text wrapping correctly around the image but the border ended up behind the image.
EDIT
Here is a screenshot of what I was able to get it too look like:
http://www.tiikoni.com/tis/view/?id=6753a19
As you can see, the border ends up behind the image when I'm trying to get it to stop when it reaches the image border.
The code for this is:
<img src='images/mangos.jpeg' width='500px' style='float: right; border: 2px solid $theme; padding: 5px; margin: 0 5px 5px 5px;'>
<div style='font-size: 19px; white-space: pre-wrap; border: 2px solid #F6B616; padding: 5px; margin: 5px;'>
Text Here
</div>
EDIT 2
Sorry the question wasn't very clear. What I was after was effectively a small gap between the text and image border. The text and its border needs to wrap around the image and its border. Is there any way of achieving this?
What you are seeing is in fact perfectly normal. Imagine your text would become higher then the image, a true wrap would make the text proceed underneath the image, and not just in a single column to the left of the image. That is the entire purpose of a float after all (though it is often abused in all kinds of ways). Something like this:
+------+---+ +------+---+
|text |img| |text |img|
THIS: |text +---+ NOT THIS: |text +---+
|text text | |text |
+----------+ +------+
Your use case can be solved quite easily though, supposing your background is a solid color. You can just mask the text border that you see behind the image. Something like this:
<img src='path/to/image'>
<p>Lorem ipsum...</p>
img {
float: right;
box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 7px #F6B616;
margin: 7px 5px 5px 13px;
width: 250px;
}
p {
font-size: 19px;
white-space: pre-wrap;
border: 2px solid #F6B616;
padding: 5px;
margin: 5px;
}
As you can see I added a double box shadow to to the image, that mimics the effect of a border with 5px margin. The big difference is the white form this shadow will mask the underlying border of the text, which produces the effect you are after.
There are other techniques, like working with pseudo elements (which could be useful in case you have a more complex background) but personally I find this method the easiest for your use case.
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'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.
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