I want to add a vertical line between the green blocks in the following image. I am using :after to do that. However I do not want to display the line after the last block. Is there any trick to do that?
CSS:
.block{
width: 20px;
height: 20px;
margin-right: 20px;
background: green;
float: left;
}
.block:after {
content: '';
width: 0;
height: 100%;
position: absolute;
border: 1px solid black;
top: 0;
left: 10px;
}
Demo:
http://jsfiddle.net/rhwb7b2o/
Note: The height of the list items varies. HTML markup can be changed if required.
Add position:relative to the li elements so that each line does not cover the whole ul.
Then add li:last-child .block{position:relative;overflow:hidden;} to handle the last element.
Demo at http://jsfiddle.net/gaby/qj2dbdkz/
Use the :not selector with the :last-child selector. Like this:
.block:not(:last-child):after { /* ... */ }
I am having an issue with positioning text inside a div. I want the image on the right top corner (which I was able to do) and the text kind of center the bottom text in the box.
This is an example of what I want to do: http://jsfiddle.net/Lucky500/Nq769/
I created a div .bottom_box and added:
.bottom_box {
position: relative;
bottom: -50px;
left: 50px;
}
Is there an easier or more correct way to do this?
Alright -
Added text-align:center to your and elements.
Set your outer_box position to relative.
Set the img value to absolute and positioned with 0.25 em top and right instead of margin.
http://jsfiddle.net/mr_mayers/Nq769/2/
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: .5em;
Position: relative;
}
.bottom_box {
position: relative;
bottom: -50px;
}
p {
color: blue;
text-align: center;
}
img {
position: absolute;
padding: 3px;
top: 0.25em;
right: 0.25em;
}
h1 {
text-align: center;
color: red;
}
You can achieve your layout as follows:
For this HTML:
<div class="outer_box">
<img src="http://placehold.it/100x50">
<div class="bottom_box">
<h1>$25 OFF</h1>
<p>$25 off your first cleaning!</p>
</div>
</div>
Try the following CSS:
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: 0.5em;
}
.bottom_box {
clear: both;
border: 1px dotted gray; /* for demo only, optional */
}
img {
float: right;
padding: 3px;
margin: 0 0 1em 1em;
}
p {
color: blue;
margin-left: 50px;
}
h1 {
color: red;
margin-left: 50px;
}
Since your image is floated, simply clear the .bottom-box.
Use margin-left on the child elements to get any white space.
See sample: http://jsfiddle.net/audetwebdesign/3SjRG/
You can use text-align: center if you are centering the p and h1 content, but I was not sure if you wanted ragged left or ragged right alignment on the text block;
You'd be better off using text-align:center and position: absolute
See example
There are some solutions.
An other way is to make the box relative and positioning the text and image inside absolute.
I would create a container div with a border for your box, then set the inner divs (one with your image and one with your text) to position absolute. then you can use top:0; right:0; for the picture on the right corner. then bottom:xx; and left:yy; for positioning the text div.
This is just a different method than you used. If it works, doesn't break in any situation, and is simple, then it's correct. Many ways to skin a cat in programming.
I am trying to create header tags with a bit of fancy decoration.
Eventually, I want to arrive at this:
I am having trouble adding the trailing line decoration after the text though.
My original thoughts were to have a container, then in that container would be the h1 and a span tag that would contain the line. But I can't quite seem to get the line to be centered with the text sitting over it.
I tried:
.container {
width: 100%;
}
h1 {
display: inline;
position: relative;
z-index: 2;
}
span {
display: inline-block;
height: 50%;
width: 100%;
border-bottom: 1px solid red;
}
and the HTML
<div class="container">
<h1>Test</h1>
<span></span>
</div>
But had no luck. Anyone know any tricks that might help me accomplish this? The main thing is that the length and height of the text is variable, so I am trying to get the line to take up the remainder of the box and sit right in the middle.
I also tried display: table-cell with no luck...
You need something like this
html - <h2>Test</h2>
css
h2{
position:relative;
overflow:hidden;
}
h2:after {
content:"";
top:48%;
width:100%;
margin-left:10px;
height:5px;
position:absolute;
background:orange;
}
How about using css pseudo elements like :after?
HTML
<div class="foo">INSIGHT</div>
CSS
.foo {
position: relative;
color: orange;
overflow: hidden;
}
.foo:after {
content: "";
position: absolute;
width: 90%;
top: 50%;
margin-left: 10%;
border-top: 3px solid orange;
}
DEMO
I'm having trouble forcing the text to stay relative within its div and at the same height as the image. So when the browser is resized, it doesn't overflow. I'm doing this as I'm creating a responsive webpage. I hope I've explained this clearly. Please check out my http://jsfiddle.net/DMnhB/1/
The html is as follows:
<div id="postd"><img
src="http://www.tntmagazine.com/media/content/_master/42628/images/barack-obama.jpg">
<span>
Text Here
Text Here
Text Here
</span>
</div>
And the CSS:
#postd{
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img{
width:40%;
}
#postd span{
float:right;margin-left:1px;
position: absolute;
background-color: red;
}
Here is a start, try the following CSS:
#postd {
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img {
width:40%;
display: inline-block;
vertical-align: top;
}
#postd span {
display: inline-block;
margin-left:1px;
background-color: red;
}
You can see how it looks at: http://jsfiddle.net/audetwebdesign/DMnhB/2/
I used inline-blocks to fix the overflow problem and vertical-align: top to place
the top of the image inline with the top of the text block.
You need to provide some additional feedback before I make any other adjustments.
I have following code
div {
width: 200px;
border-bottom: 1px solid magenta;
height: 50px;
}
<div></div>
The div width is 200px so border-bottom is also 200px but what should I do if I want border-bottom only 100px without changing div width?
You can use pseudoelements. E.g.
div {
width : 200px;
height : 50px;
position: relative;
z-index : 1;
background: #eee;
}
div:before {
content : "";
position: absolute;
left : 0;
bottom : 0;
height : 1px;
width : 50%; /* or 100px */
border-bottom:1px solid magenta;
}
<div>Item 1</div>
<div>Item 2</div>
No need to use extra markup for presentational purpose. :after is also supported from IE8.
edit:
if you need a right-aligned border, just change left: 0 with right: 0
if you need a center-aligned border just simply set left: 50px;
Another way to do this (in modern browsers) is with a negative spread box-shadow. Check out this updated fiddle: http://jsfiddle.net/WuZat/290/
box-shadow: 0px 24px 3px -24px magenta;
I think the safest and most compatible way is the accepted answer above, though. Just thought I'd share another technique.
I added line under under h3 tag like this
<h3 class="home_title">Your title here</h3>
.home_title{
display:block;
}
.home_title::after {
display:block;
clear:both;
content : "";
position: relative;
left : 0;
bottom : 0;
max-width:250px;
height : 1px;
width : 50%; /* or 100px */
border-bottom:1px solid #e2000f;
margin:0 auto;
padding:4px 0px;
}
You can use a linear gradient:
div {
width:100px;
height:50px;
display:block;
background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px);
background-position: bottom;
background-size: 100% 25px;
background-repeat: no-repeat;
border-bottom: 1px solid #000;
border-top: 1px solid red;
}
<div></div>
You cannot have a different sized border than the div itself.
the solution would be to just add another div under neath, centered or absolute positioned, with the desired 1pixel border and only 1pixel in height.
http://jsfiddle.net/WuZat/3/
I left the original border in so you can see the width, and have two examples -- one with 100 width, and the other with 100 width centered. Delete the one you dont wish to use.
Late to the party but for anyone who wants to make 2 borders (on the bottom and right in my case) you can use the technique in the accepted answer and add an :after psuedo-element for the second line then just change the properties like so:
http://jsfiddle.net/oeaL9fsm/
div
{
width:500px;
height:500px;
position: relative;
z-index : 1;
}
div:before {
content : "";
position: absolute;
left : 25%;
bottom : 0;
height : 1px;
width : 50%;
border-bottom:1px solid magenta;
}
div:after {
content : "";
position: absolute;
right : 0;
bottom : 25%;
height : 50%;
width : 1px;
border-right:1px solid magenta;
}
I did something like this in my project. I would like to share it here. You can add another div as a child and give it a border with small width and place it left, centre or right with usual CSS
HTML code:
<div>
content
<div class ="ac-brdr"></div>
</div>
CSS as below:
.active {
color: magneta;
}
.active .ac-brdr {
width: 20px;
margin: 0 auto;
border-bottom: 1px solid magneta;
}
This will help:
http://www.w3schools.com/tags/att_hr_width.asp
<hr width="50%">
This creates a horizontal line with a width of 50%, you would need to create/modify the class if you would like to edit the style.
I have case to have some bottom border between pictures in div container and the best one line code was - border-bottom-style: inset;
div{
font-size: 25px;
line-height: 27px;
display:inline-block;
width:200px;
text-align:center;
}
div::after {
background: #f1991b none repeat scroll 0 0;
content: "";
display: block;
height: 3px;
margin-top: 15px;
width: 100px;
margin:auto;
}
The border is given the whole html element. If you want half bottom border, you can wrap it with some other identifiable block like span.
HTML code:
<div> <span>content here </span></div>
CSS as below:
div{
width:200px;
height:50px;
}
span{
width:100px;
border-bottom:1px solid magenta;
}
I just accomplished the opposite of this using :after and ::after because I needed to make my bottom border exactly 1.3rem wider:
My element got super deformed when I used :before and :after at the same time because the elements are horizontally aligned with display: flex, flex-direction: row and align-items: center.
You could use this for making something wider or narrower, or probably any mathematical dimension mods:
a.nav_link-active {
color: $e1-red;
margin-top: 3.7rem;
}
a.nav_link-active:visited {
color: $e1-red;
}
a.nav_link-active:after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
margin-left: -$nav-spacer-margin;
display: block;
}
a.nav_link-active::after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
margin-right: -$nav-spacer-margin;
display: block;
}
Sorry, this is SCSS, just multiply the numbers by 10 and change the variables with some normal values.
Border right length smaller than parent div
with pseudo-elements
#import url(https://fonts.googleapis.com/css?family=Raleway);
body{
font-family: 'Raleway', sans-serif;
}
div {
width : 200px;
height : 50px;
position: relative;
z-index : 1;
background-color: #f5f5f5;
margin: 20px auto;
padding: 20px;
color:#726E97;
}
div:before {
content : "";
position: absolute;
right : 0;
top : 25%;
height : 50px;
width : 50%;
border-right:5px solid #726E97;
}
<div>BOX 1</div>