I am creating a vertical divider, that works fine. But the CSS is cumbersome.
The CSS is:
.headerDivider1 {
border-left:1px solid #38546d;height:80px;position:absolute;right:250px;top:10px;
}
.headerDivider2 {
border-left:1px solid #16222c;height:80px;position:absolute;right:249px;top:10px;
}
The HTML is:
<div class="headerDivider1"></div><div class="headerDivider2"></div>
The result is:
How could I tidy the HTML and CSS up?
.headerDivider {
border-left:1px solid #38546d;
border-right:1px solid #16222c;
height:80px;
position:absolute;
right:249px;
top:10px;
}
<div class="headerDivider"></div>
<div class="headerdivider"></div>
and
.headerdivider {
border-left: 1px solid #38546d;
background: #16222c;
width: 1px;
height: 80px;
position: absolute;
right: 250px;
top: 10px;
}
for vertical divider only
.divider {
border-left: 1px solid #000;
height: 100%;
}
I prefer using the after property for vertical divider using CSS because it's neither content nor a border.
.block {
position: relative; /* ADDED */
}
.block:after {
content: '';
position: absolute;
border-left: 1px solid black;
right: -10px;
height: 80%;
}
.block:last-child:after {
display: none; /* Hide the divider for the last block */
}
Related
I am trying the simulate the same effect on the picture for an html page. Is it possible to accomplish this without using an image or JS? I know it can be done horizontally by adding border color top and bottom but I couldn't find a way to do it horizantally.
You can add a grey border-bottom to your element and overlap it partially with a red ::after pseudo-element:
h1 {
border-bottom: 2px solid #E5E5E5;
}
h1:after {
content: '';
display: block;
border-bottom: 2px solid #EC1C24;
margin-bottom: -2px;
max-width: 200px;
}
<h1>Haberler</h1>
.line {
background:gray;
position:relative;
height:2px;
}
.line:before {
content:'';
background:red;
width:30%;
height:2px;
position:absolute;
}
<div class="line">
hr {
margin: 0;
width: 100%;
height: 5px;
background-color: red;
border: 0;
}
hr:after {
content: '';
display: block;
border-bottom: 5px solid green;
max-width: 50%;
}
<hr/>
You can combine a few inline block elements with borders, but I'm not sure if it's worth it (instead of using an image):
div {
width: 120px;
height: 80px;
border-bottom: red 2px solid;
border-top: blue 2px solid;
display: inline-block;
}
#a {
width: 240px;
border-top: green 2px solid;
border-bottom: gray 2px solid
}
<div></div><div id="a"></div>
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr style="height:2px;">
<td style="width:10%;background-color:#003b67;"></td>
<td style="width:90%;background-color: #4cff00;"></td>
</tr>
</table>
An extension to #Thilina Dharmasena original post.
I used his implementation to create a progress bar with styled-components
<ProgressBar scroll='90%' />
const ProgressBar = styled.div`
background: #191923;
height: 4px;
position: relative;
&:before {
content: '';
background: #ffc107;
width: ${({ scroll }) => scroll};
height: 4px;
position: absolute;
}
`;
I'm trying to set a simple page grid. Each row consists of an optional left column, plus a main content right column. I want the right column to remain the same size at the same position even if the left column isn't present.
I figured that floating the left column and using position: relative with left: on the right column would give me the behaviour I want.
My HTML looks like this:
<div class="row">
<div class="sidebar">I'm a sidebar!</div>
<div class="main">
<p>I'm main!</p>
</div>
</div>
and my CSS looks like this:
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Here's a fiddle: http://jsfiddle.net/ttr5k/1/
To my surprise, the content of .main is shifted right (as if .main had padding-left) seemingly due to the sidebar. Why is this, and how could I solve it?
I also suspect this isn't the best way to build a grid, is there a better approach?
Add position absolute instead of relative
http://jsfiddle.net/ttr5k/2/
As you can see the text aligns left again
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: absolute;
left: 220px;
width: 500px;
border: 1px solid green;
}
I recommend doing something like this:
.row {
background:#eee;
width:90%;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:left
width: 500px;
border: 1px solid green;
overflow:auto;
clear:right;
}
Now you will be able to remove the sidebar whenever you want without adding new CSS
DEMO: http://jsfiddle.net/ttr5k/5/
OR------
if you want that space even if no sidebar and still want to content to overflow:
http://jsfiddle.net/ttr5k/7/
.row {
background:#eee;
width:600px;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:right;
width: 396px; /* This is due to box-model adding border as width */
border: 1px solid green;
overflow:auto;
clear:right;
}
Here is the FIDDLE on how I would do it: http://jsfiddle.net/mikea80/zJa5P/
<div class="row">
<div class="main">
<p>I'm main!</p>
</div>
<div class="sidebar"><p>I'm a sidebar!</p></div>
</div>
.row {
margin: 0 auto;
width:704px;
clear:both;
}
.main {
display:inline-block;
float:right;
width: 500px;
border: 1px solid green;
}
.sidebar {
display:inline-block;
float: right;
width: 200px;
border: 1px solid red;
}
With the row being 700px this code will center it
You have to add position absolute to sidebar class.
CSS:
.sidebar {
position: absolute;
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Trust me, this way, you can add other row class without any problem. Here is the FIDDLE:
http://jsfiddle.net/asubanovsky/bVr6r/
I think that two images will clarify everything
Now I have (jsfiddle):
And I am wondering is it possible to do that:
You could use :after to hide it, crude I know, but works in the latest browsers:
#column1:after{
display:block;
content:'';
background-color:#f6f6f6;
height:100%;
width:5px;
position:absolute;
top:0;
right:-5px;
}
JSFiddle
Change/add the css:
#column1a {
margin-right: 200px;
border-bottom: 5px solid #E3E3E3;
background-color:#E3E3E3;
padding: 5px;
}
#column1a span { background-color: white; display:block;}
Alter the html to:
<div id="column1a"><span>Ut enim
This is only a rough guide so I'll leave it up to you to tidy up.
Give Like this
#Coloumn1{position:absolute}
Demo > http://jsfiddle.net/TPNpy/285/
Try following code:
#wrapper {
position: relative;
}
#left-section {
position: absolute;
left: 0;
width: 200px;
height: 100px;
border: 3px solid black;
border-right: none;
float: left;
background-color: white;
z-index: 5;
}
#right-section {
position: absolute;
left: 200px;
width: 100px;
height: 300px;
border: 3px solid black;
float: left;
}
<div id="wrapper">
<div id="left-section"></div>
<div id="right-section"></div>
</div>
Basically, I want a row of triangles on the top of the page. They should be down facing. I've made the triangle in CSS but for some reason they want to go up and down on top of each other and not in a row like I need them too.
Can someone with more experience in CSS please take a look? Thanks.
HTML:
<div class="triangle-container">
<div class="arrow-down">
</div>
<div class="arrow-down">
</div>
</div>
CSS:
/* BODY */
body
{
background-color: #eee;
height: 100%;
width: 100%;
z-index: 1;
padding: none;
border: none;
margin: none;
}
/* Triangles! */
.triangle-container
{
display: inline;
height: auto;
width: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
}
.arrow-down
{
margin-left:auto;
margin-right:auto;
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:50px solid #FF6A00;
}
jsFiddle demo
You must apply display:inline to those elements which you want to be displayed inline, not their container.
In your case, it should be inline-block, because it should be inline element which behaves as block element. Read more here.
Put display:inline-block for the .arrow-down and remove it from .triangle-container:
.triangle-container
{
display: inline; /* Remove this line */
height: auto;
width: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
}
.arrow-down
{
display: inline-block; /* Add this line */
margin-left:auto;
margin-right:auto;
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:50px solid #FF6A00;
}
Live demo: jsFiddle
I added a float:left to your .arrow-down class. (and updated a couple of classes)
Fiddle here : http://jsfiddle.net/KwKe8/
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.