Drawing a vertical line with border-left and border-right seems easy.
But in my case I am having a single div and I need to draw a vertical line at the given pixel
say (240px).
How can I achieve this?
You may use the :after or :before pseudo element for this, and position it absolute at 240px.
Example: http://jsfiddle.net/abhitalks/YMS4F/1/
CSS:
div.split {
position: relative;
height: 20px;
width: 400px;
border: 1px solid black;
}
div.split:after {
content: "";
display: block;
width: 1px;
height: 20px;
border-left: 1px solid gray;
position: absolute;
top: 0px;
left: 240px;
}
Taken, width and height in pixels for demo purpose. Hope you get the idea.
Easiest way is to create another div within the main div and give that border-left/border-right and then you can scale the inner div to what you want and also higher or lower it.
Just edit the code to suit your needs
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
height:300px;
width:300px;
background:silver;
}
.child {
position:relative;
height:200px;
width:1px;
background:red;
top:100px;
}
http://jsfiddle.net/7Qj2d/
Related
Quick and easy question. I'd like to have a floating box that stays in the bottom right of a div (in HTML). How would I do this with css?
Thanks! (attached is what I want it to look like)
Hope this will be what you are looking for.
.navBar {
height: 100px;
background-color: blue;
}
.div1 {
position: relative;
height: 200px;
}
.div1 .box {
position: absolute;
bottom: 40px;;
right: 40px;;
width: 200px;
height: 40px;
background-color: red;
}
.div2 {
height: 100px;
background: green;
}
<div class="main-container">
<div class="navBar"></div>
<div class="div1"><div class="box"></div></div>
<div class="div2"></div>
</div>
what you're looking for is:
position:absolute;
bottom:0;
right:0; which will position things relative to the positioned parent.Note that the parent element (div) needs to have its position set as well. Most people do position:relative;
The values bottom:0 and right:0 means to move it 0px away from the bottom of the parent and 0 px away from the right side of the parent.
See the following w3schools for further information:
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
I need help about this image. How can I set it up in css and in html thank you in advance if anyone will give time to help me.
What I would recommend is to consider the image to be a background of one element. Then create a child of that element that only occupies the left-hand half of the image. In order to achieve this, the child needs the following styles:
#child {
position: relative; /* To position the border in relation to the image parent */
width: calc(50% - 2px); /* 2px correlates to the width of the border */
height: 100%; /* To occupy the full height of the image */
}
Now the the element is invisibly sitting on the left-hand half of the image, you can apply a border to the right-hand side of this element with border-right: 2px solid cyan.
This results in a line halfway through the image, as can be seen in the following:
#container {
width: 300px;
height: 200px;
background: url(http://placehold.it/100);
}
#child {
position: relative;
width: calc(50% - 2px);
height: 100%;
border-right: 2px solid cyan;
}
<div id="container">
<div id="child"></div>
</div>
Hope this helps! :)
Obisidians answer is good....I'm going to tweak it slightly be removing an HTML element and using :before, keeping the background image, but treating the line a little differently
#container {
width: 300px;
height: 200px;
background: url(http:/fillmurray.com/300/200);
position:relative;
}
#container::before {
position: absolute;
left: calc(50% - 1px);
width:2px;
height: 100%;
background-color:cyan;
content: '';
}
#container > div
{
background-color: rgba(255,255,255,0.5);
padding: 5px;
}
<div id="container">
<div>Some Content</div>
</div>
This way you have more freedom of the child contents
I'm currently working on a solution, where I have to display an error message above (z-index) a section.
The section has it css overflow attribute set to scroll or hidden. This is causing the error message to be truncate on the left side.
I would very like to keep the DOM as it is. Is there a way to display the div for the error message "above" the blue div.
Js fiddle
HTML :
<div>
<div id="div1">
div 1
</div>
<div id="div2">
div 2
<div id="msgErreur">
Error
</div>
</div>
</div>
**CSS : **
#div1 {
width : 48%;
border: 1px solid red;
height: 150px;
float:left;
}
#div2 {
width : 48%;
border: 1px solid blue;
height: 150px;
float:right;
overflow-y:scroll;
}
#msgErreur {
background:#942911;
color:white;
top:30px;
left: -10px;
width : 150px;
height : 30px;
position:relative;
z-index:5;
}
edit: 2 ways of achieving this. Relatively positioned (extra) element in an absolutely positioned one or (new) an absolutely positioned element and transform.
You can achieve this by using position: absolute on the container of the error message and an extra div relatively positioned between container and message.
The DOM is slightly modified but without moving whole blocks of code, maybe it's OK with your requirements?
Relevant HTML:
<div id="msgErreur">
<div>Error</div>
</div>
Relevant CSS:
#msgErreur {
position: absolute;
z-index: 5;
color: white;
}
#msgErreur > div {
position: relative;
top: 30px; left: -10px;
width: 150px; height: 30px;
background: #942911;
}
Fiddle
EDIT: it's 2016 and transform: translate(X, Y) is compatible with a large set of browsers (IE9+ according to caniuse.com).
Here's another way of achieving what OP needed, with no extra element needed:
#div1 {
width : 48%;
border: 1px solid red;
height: 150px;
float:left;
}
#div2 {
width : 48%;
border: 1px solid blue;
height: 150px;
float:right;
overflow-y:scroll;
}
#msgErreur {
background:#942911;
color:white;
/* top:30px; */
/* left: -10px; */
width : 150px;
height : 30px;
position: absolute; /* not relative anymore */
/* z-index:5; It's already stacked above if positioned. Needed if other positioned elements are there (a value of 1 would be enough) */
transform: translate(-10px, 30px); /* replaces relative positioning (left and top => X and Y) */
}
<div>
<div id="div1">
div 1
</div>
<div id="div2">
div 2
<div id="msgErreur">
Error
</div>
</div>
</div>
Codepen
I want to achieve something like this:
The width of the element is 100%. I will use only the centered corner and combine with border-top:
.element {
border-top: solid 1px #ccc ;
background: url('../images/arrow.png') no-repeat center top;
}
But the border stays inside the arrow. I tried up image background -1px to hide the border but it didn't work. How do I do this?
I solved it with an extra container:
HTML:
<div class="first"><div class="second"></div></div>
CSS:
.first {
border-bottom: 5px solid #000;
width:100px;
height:100px;
background-size: 20%;
background-position:50% 105%;
box-sizing: border-box;
}
.second {
width:100%;
height:104px;
background: url(https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcROusF7rh7H4mWpr8wQIllxWPAHHIShRyG62xp3qy2O4Av_NmNV) no-repeat;
background-size: 20%;
background-position:50% 100%;
}
jsfiddle: http://jsfiddle.net/AKpLT/
Interesting issue. Here's one contrived solution using the :before selector to absolute position the image over the border. See this jsfiddle for a working example. The relevant code is as follows:
div {
border: 1px solid red; /* For demo purposes it's red */
position: relative;
}
div:before {
content: url('http://i.stack.imgur.com/P3zMs.png');
position: absolute;
top: -1px;
width: 100%;
text-align: center;
line-height: 1px;
}
Here's a screenshot of the result:
Edit: the browser compatability for the :before selector tells us it's only supported in IE8 and higher. It's even worse though, because as far as I can tell the content: url(...) construct nor the background-image of a :before pseudo-element doesn't seem to work even in IE9. Fortunately, this should fall under graceful degredation...
If you're already creating the image just make the entire thing your background image in the shape you want it. Make it long enough so it can adjust to whatever reasonable length element you might want to put it in.
Like Mash I'd use another element for the background, but unlike Mask I'd use the CSS :before or :after pseudo elements:
<h2>Heading</h2>
h2 {
border-top: 1px solid #ccc;
position: relative;
}
h2:after {
background: url(IMAGE);
content: " ";
display: block;
width: WIDTH-OF-IMAGE;
height: HEIGHT-OF-IMAGE;
position: absolute;
left: 50%;
top: -1px;
margin-left: -WIDTH-OF-IMAGE/2;
}
i want to limit the border length applied to a div element(or any HTML elements) . For example consider a div of width 100px, is there anyway to apply the border to only 40px width itself?
You will need to use a child div of the appropriate width to do that. For example:
<div id="outer">
<div id="border"></div>
<p>...</p>
</div>
with:
#outer { width: 100px; padding-top: 0; }
#border { width: 40px; border-top: 1px solid black; margin-top: 0; }
You need to use a nested div or a narrow image as background.
Try not to add a div only to display the border, always try to be semantic. Probably your design need a supplementary section.
Instead of adding another <div> you can simply use a the pseudo selector :before and :after:
div {
position: relative;
}
div:before {
position: absolute;
content:'';
height: 1px;
width: 40%;
background-color: black;
}
here is the fiddle.