I'm trying to create some CSS to have a icon or image in the center with a line on both sides, but it seems like i'm doing something wrong and need some help.
For simplicity I just use a star character in the code.
<div class='line-container'><div class='line-icon'>*</div></div>
.line-icon {
text-align: center;
}
.line-icon::before {
width: 25%;
height: 1px;
border: 1px solid #ccc;
}
.line-icon::after {
width: 25%;
height: 1px;
border: 1px solid #ccc;
}
Try adding a content to your ::after and ::before, and setting its display:
.line-icon {
text-align: center;
}
/* Joined both selectors, since were pretty much the same */
.line-icon::before,
.line-icon::after {
/* Styles kept */
width: 25%;
height: 1px;
/* Changed to border-top (instead of border) to simulate a line better */
border-top: 1px solid #ccc;
/* Styles added */
display: inline-block;
content: '';
/* Use padding to vertical align the line */
/* Use padding in em for a responsive icon height */
padding-top: 0.5em;
/* Use margins to give the lines some spacement around the icon */
/* Use margins in % for a responsive spacement */
margin-left: 5%;
margin-right: 5%;
}
<div class='line-container'><div class='line-icon'>*</div></div>
A different style but may be usefull for u
.seperator {
padding: 0;
border: 0px;
border-top: 1px solid #ccc;
color: #000;
text-align: center;
}
.seperator:after {
content: "vs";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.50em;
background: #fff;
}
<hr class="seperator"></hr>
Related
How could I make the effect of below picture with HTML, CSS using the the bootstrap framework?
I need two adjacent divs with trapezoid shape (or separated by a diagonal line). Both need to have a border.
You can do this by drawing a shape in CSS.
You can draw such a triangle in CSS by playing with different borders (top, right, bottom left) of an element that has zero width.
Example: https://css-tricks.com/snippets/css/css-triangle/
In the example below I use the pseudo element :after for this effect:
/* Apply styles to both DIVs */
.container > div {
width: 50%;
float:left;
font-weight: bold;
padding-left: 10px;
/* include padding in the height/width */
box-sizing: border-box;
margin: 0;
}
.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
clear: both;
}
.container div:first-child {
background: #66ff66;
/* The triangle will be position:absolute, so it requires a `position:relative` parent */
position: relative;
/* We are drawing a full rectangle later, so we hide the rest of it */
overflow: hidden;
}
.container div:last-child {
background: #ff6666;
}
.container div:first-child:after {
position: absolute;
display: block;
content: ' ';
padding: inherit;
box-sizing: border-box;
/* Change below units (you can use px not just em)
to make the line become at different angles */
border-top: 1.3em solid transparent;
border-bottom: 1.3em solid transparent;
border-right: 1.3em solid #ff6666;
right: 0;
top: 0;
}
<div class="container">
<div>div١</div>
<div>div٢</div>
</div>
Update
But as you indicated in the comment, you wanted a different answer that uses div2 for the triangle, so here you are:
/* Apply styles to both DIVs */
.container > div {
width: 50%;
float:left;
font-weight: bold;
/* include padding in the height/width */
box-sizing: border-box;
margin: 0;
}
.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
clear: both;
}
.container div:first-child {
background: #66ff66;
padding-left: 10px;
}
.container div:last-child {
background: #ff6666;
position: relative;
padding-left: 1.3em;
}
.container div:last-child:before {
position: absolute;
content: '';.
width: 0;
height: 0;
box-sizing: border-box;
/* Change below units (you can use px not just em)
to make the line become at different angles */
border-top: 1.3em solid #66ff66;
border-bottom: 1.3em solid transparent;
border-right: 1.3em solid transparent;
top: 0;
left: 0;
}
<div class="container">
<div>div١</div>
<div>div٢</div>
</div>
Update 2
The picture you showed in comments also included real borders. This requires changing the approach. The new approach still uses :before, but adds border to it, and rotates it 45 degrees.
The idea is based on an example from: https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/
To imagine it:
Here's the code:
/* Apply styles to both DIVs */
.container > div {
width: 50%;
float:left;
font-weight: bold;
/* include padding in the height/width */
box-sizing: border-box;
margin: 0;
}
.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
clear: both;
}
.container div:first-child {
background: #66ff66;
padding-left: 10px;
border: 1px solid;
border-right: none;
}
/*
The following assumes diemnsions 1.3em * 1.3em
Your real case can change the number
*/
.container div:last-child {
background: #ff6666;
position: relative;
border: 1px solid;
border-left: none;
padding-left: calc(1.5 * 1.3em);
overflow: hidden;
}
.container div:last-child:before {
position: absolute;
content: '';
width: calc(2 * 1.3em);
height: calc(2 * 1.3em);
box-sizing: border-box;
background: #66ff66;
border: 1px solid ;
transform:rotate(45deg);
margin-top: -1.3em;
margin-left: -1.3em;
left: 0;
top: 0;
}
<div class="container">
<div>div١</div>
<div>div٢</div>
</div>
just use border-right like following code snippet and see result :
.parent{
width: 100%;
display: flex;
background-color: #01579b;
}
.div1 {
width: 30%;
border-bottom: 100px solid #000;
border-right: 50px solid transparent;
}
.div2 {
width: 70%;
height: 100px;
}
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
</div>
How can i make a parent div (red) stretchable so that min number of chidren inside it can be one and maximum number can be 3 after which the fourth div sets vertically down automatically.
My css for inner div is
.inner_div {
min-height: 238px;
border-bottom: 1px dashed #e7e7e7;
border-right: 1px dashed #e7e7e7;
border-top: 1px dashed #e7e7e7;
border-left: 1px dashed #e7e7e7;
padding-top: 10px;
padding-bottom: 10px;
float: left;
padding: 9px;
width: 200px;
background-color: white;
}
and css for parent (outer div) is
.outer_div {
padding: 0 20px;
margin-top: 55px!important;
margin-bottom: 33px!important;
background: white;
border-left: 1px dashed #e7e7e7;
overflow: hidden;
max-width: 611px;
min-width: 223px;
width: auto;
}
Let's Get Fluid!
There are a lot of answers here!
The following example works across all screen sizes / widths for up to 3 boxes across.
That #media is used to give and take borders away at each viewport width, one column up to three columns. It also re-sizes the outer div for each step, and changes the background colour, etc if wanted. Refer to the comments in the snippet for a basic explanation of what's going on.
This example can consume as many or as few boxes as you want. Open it full screen and resize to see the results.
Update - I have given the inners a dark green background and the outer is display: inline-block to resize with its contents.
* {
box-sizing: border-box;
/* incorporate padding into width (.outer_div padding is excluded) */
}
.outer_div {
margin: 50px;
display: inline-block;
max-width: 640px;
min-width: 240px;
/* 200 * 3 across + 40 .outer_div padding = 640 */
padding: 20px;
/* transition? yes! on re-size! */
transition: background 1s;
transition: max-width 0.05s;
}
.inner_div {
min-height: 238px;
/* BORDER ALL THE THINGS!!!*/
border: 1px dashed #000;
float: left;
padding: 9px;
/* padding is accounted for in the width thanks to border-box */
width: 200px;
background: #0a8f08;
}
/* Clear the floats at the very end */
.outer_div:after {
content: ' ';
display: block;
clear: left;
}
/* 3 boxes across */
/*#media sizes increase and decrease dependant on inner box width and outer_div padding */
#media screen and (min-width: 756px) {
.outer_div {
background: #a3e9a4;
}
/* Remove all bottom borders */
.inner_div {
border-bottom: none
}
/* Remove every middle border */
.inner_div:nth-child(3n+2) {
border-right: none;
border-left: none;
}
/* Last child gets a right border */
.inner_div:last-child {
border-right: 1px dashed #000;
}
/* last three get a bottom border */
.inner_div:nth-last-child(-n+3) {
border-bottom: 1px dashed #000;
}
}
/* 2 boxes across */
#media screen and (min-width: 573px) and (max-width: 755px) {
.outer_div {
max-width: 440px;
background: #dcedc8;
}
/* Remove all bottom borders */
.inner_div {
border-bottom: none;
}
/* Remove every second border */
.inner_div:nth-child(2n) {
border-left: none;
}
/* last two get a bottom border */
.inner_div:nth-last-child(-n+2) {
border-bottom: 1px dashed #000;
}
}
/* 1 box across */
#media screen and (max-width: 572px) {
.outer_div {
max-width: 240px;
background: #f0f4c3;
}
/* Remove all bottom borders */
.inner_div {
border-bottom: none;
}
/* last one gets a border */
.inner_div:last-child {
border-bottom: 1px dashed #000;
}
}
<div class="outer_div">
<div class="inner_div"></div>
<div class="inner_div"></div>
<div class="inner_div"></div>
<div class="inner_div"></div>
<div class="inner_div"></div>
<div class="inner_div"></div>
</div>
You should probably add some pixels to you outer_div's max-width, otherwise 3 inner_divs just don't fit:
max-width: 660px;
And then clear every third inner_div:
.inner_div:nth-of-type(3n+1) {
clear: left;
}
Here's a jsfiddle.
Just change your outer div css with this
.outer_div {
padding: 0 20px;
margin-top: 55px!important;
margin-bottom: 33px!important;
background: white;
border-left: 1px dashed #e7e7e7;
overflow: hidden;
max-width: 100%;
min-width: 223px;
}
You can try following code change parameter as your needs proportionally.
display:inline-block; can do the tricks
.outer_div{
display:inline-block;
max-width:300px;
height:300px;
background-color:red;
overflow:auto;
}
.inner_div{
width:100px;
height:100px;
background-color:black;
float:left;
}
In inner-div class add this line
display:inline-block;
and outer-div must be like this
.outer_div {
padding: 0 20px;
margin-top: 55px!important;
margin-bottom: 33px!important;
background: white;
border-left: 1px dashed #e7e7e7;
overflow: hidden;
max-width: 669px;
min-width: 223px;
}
You can always change max-width to get more free space for fourth block or remove third block!
Use the :nth-child pseudo class.
To make the parent div stretchable, add a float: left or display: inline-block.
.outer_div {
padding: 0 20px;
margin-top: 55px!important;
margin-bottom: 33px!important;
background: white;
border-left: 1px dashed #e7e7e7;
overflow: hidden;
width: auto;
float: left;
clear: both;
margin: auto;
}
.inner_div {
min-height: 238px;
border: 1px dashed #e7e7e7;
float: left;
padding: 9px;
width: 200px;
background-color: white;
}
.inner_div:nth-child(3n+1) {
clear: left;
}
You can see the result in jsfiddle.
I would use something like flexbox for this kind of thing.
There would be a lot of possibilities/combinations, and would also be very easy to edit if required.
The likes of:
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
Here's an example of just one possibility.
Browser support:
See here
I can't figure it out without using float:right or using relative positioning. If I use either, it will move around when people zoom in and out. I'm trying to figure out how to make it stay exactly where I place it even when people zoom in and out.
http://htmlcss.netii.net/
HTML Structure:
<div class="staff-block">
<img class="staff-pics" />
<div class="staff-text">
<h3>
<p>
</div>
</div>
CSS:
.staff-block { /* Red */
border: 1px dashed red;
display: block;
}
.staff-pics { /* Orange */
border: 1px dashed orange;
display: ;
width:150px;
display: inline-block;
margin-bottom: 50px;
}
.staff-text { /* Yellow */
border: 1px dashed yellow;
width: 70%;
font-size: 15px;
color: #FFCC00;
display: inline-block;
}
.staff-text h3 { /* Green */
border: 1px dashed lime;
margin-bottom: 10px;
color: white;
}
.staff-text p { /* Blue */
border: 1px dashed aqua;
}
Since they are already inline-block elements, simply add vertical-align:top.
.staff-text {
vertical-align: top;
}
It works - I tested it via the dev tool in Chrome..
Updated CSS:
.staff-text {
border: 1px dashed lime;
width: 70%;
font-size: 15px;
color: #FFCC00;
display: inline-block;
vertical-align: top;
}
I'm trying to divide a border with a background image. I don't know if this is even possible this way. Hopefully somebody can help me figure out a good clean way to achieve this.
I'm trying to get the bottom one and that top one is what I have right now.
.tinybanner h1 {
padding-bottom: 0.5em;
margin-bottom: 50px;
border-bottom: 1px solid $green;
display: inline-block;
#include adjust-font-size-to(24px);
background: url('images/tinybanner.png') center bottom no-repeat;
}
By using the pseudo-selector :after, you can add an element after every h1:
h1 {
padding-bottom: 0.5em;
margin-bottom: 50px;
border-bottom: 1px solid green;
display: inline-block;
position: relative;
}
h1:after {
position: absolute;
left: 50%; /* center the element */
margin-left: -15px; /* shift left by (width+border)/2 */
display: block;
content: '';
width: 20px;
height: 20px;
background: green; /* this can of course be a background image, too */
border: 10px solid white; /* adds a gap to the left and right */
}
The reason why I like this approach is because it degrades nicely. If your browser doesn't support the :after pseudo-selector, you are still left with the border underneath the header (because it is set on the h1, not the pseudo element) and don't see a dangling background image (because it is set on the h1:after).
http://jsfiddle.net/stevemchey/YFXGa/
How about using an :after sudo-element with left and right borders:
.tinybanner h1 {
padding-bottom: 0.5em;
margin-bottom: 50px;
display: inline-block;
#include adjust-font-size-to(24px);
background: url('http://placekitten.com/10/20') center bottom no-repeat;
}
.tinybanner h1:after {
height:1px;
content:'';
display:block;
border-left: 40px solid #00ff00;
border-right:40px solid #00ff00;
}
http://jsfiddle.net/bhlaird/XSdbs/
Imagine (or if you can't imagine, watch) this piece of code:
<div class="block"></div>
<style>
.block {
width: 10px;
height: 10px;
display: block;
background-color: red;
border: 1px solid #000000;
border-bottom: 0;
}
</style>
Now look at the bottom line. This is my problem; I want the left and right border to be 1px longer (so the bottom border is the part between the left border and right border).
Is it possible to accomplish this??
This is a way to do it, since the box model does not support what you need, using only one div:
<div class="block"><div></div></div>
and the css:
.block {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-bottom: 0;
padding-bottom: 1px;
}
.block div {
width: 10px;
height: 10px;
background-color: red;
}
This will extend the black border on the left and right side with 1px.
Try this :)
http://jsfiddle.net/z6ASC/
This is possible if you have two containers, one for the outside left/right borders, and one for the inside bottom-border. I've put together a demo showing this.
DEMO:
http://wecodesign.com/demos/stackoverflow-7074782.htm
<style type="text/css">
#borderOutside {
height: 200px;
width: 300px;
border:1px solid #900;
border-bottom: none;
padding-bottom: 5px; /*this is the gap at the bottom*/
}
#borderInside {
height: 100%;
border-bottom: 1px solid #900;
}
</style>
<div id="borderOutside">
<div id="borderInside"><!--Your Content--></div>
</div>
It can be done without adding any extraneous elements in your HTML via this strategy:
.block {
position: relative;
width: 10px;
height: 10px;
display: block;
background-color: red;
}
.block:before {
position: absolute;
content: '';
width: 10px;
height: 11px;
top: -1px;
left: -1px;
border: 1px solid #000;
border-bottom: none;
}
The pseudo element :before is only supported from IE8, but works in all other major browsers.