Using CSS, how can I create a partial border as per image below
I can get the complete border with:
border: 1px solid #f5f5f5;
but only want to show maybe 30px at the top and botton of the vertical border with nothing imbetween?
can this be acheived?
Thanks as always,
There is a CSS solution, but it's complicated and also requires HTML markup:
#box {
width: 200px;
height: 200px;
margin: 30px;
position: relative;
}
#box > div.corner {
display: block;
position: absolute;
width: 50px;
height: 50px;
}
.top {
top: 0px;
border-top-style: solid;
}
.bottom {
bottom: 0px;
border-bottom-style: solid;
}
.left {
left: 0px;
border-left-style: solid;
}
.right {
right: 0px;
border-right-style: solid;
}
<div id="box">
<div class="corner top left"></div>
<div class="corner top right"></div>
<div class="content">content</div>
<div class="corner bottom left"></div>
<div class="corner bottom right"></div>
</div>
DEMO
Related
I am trying to have my chipped edge match the box size. I tried box-sizing in a number of situations but could not make it work.
.box {
background-color: #009fbd;
width: 100%;
}
.box p {
color: #fff;
}
.chipped-corner:before {
content: '';
position: absolute;
bottom: 5px;
left: 15px;
display: block;
height: 0;
width: 100%;
border-top: 7px solid #009fbd;
border-right: 7px solid transparent;
box-sizing: border-box;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-4 col-sm-3">
<div class="text-center chipped-corner">
<div class="box">
<div>
<p>Pulp Fiction</p>
<p>Best Movie Ever.</p>
</div>
</div>
</div>
</div>
something like this:
set relative style to same elem
.box {
background-color: #009fbd;
width: 100%;
}
.box p {
color: #fff;
}
.chipped-corner{
position: relative;
}
.chipped-corner:before {
content: '';
position: absolute;
left: 0;
bottom: -7px;
display: block;
height: 0;
width: 100%;
border-top: 7px solid red;
border-right: 7px solid transparent;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-4 col-sm-3">
<div class="text-center chipped-corner">
<div class="box">
<div>
<p>Pulp Fiction</p>
<p>Best Movie Ever.</p>
</div>
</div>
</div>
</div>
The issue is not with border-box. The issue is with the bootstrap column class you added.
It comes with 15px of padding on both sides you need to remove.
You need to reset the left position of the :before element to 0.
That should get you close to what you're looking for.
I've seen an article about vertical centering of text and image. I've seen an article about vertical centering text inside a floated div.
But not both conditions.
Here's my experiment:
.phase {
width: 500px;
height: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.circle {
float: left;
height: 50px;
width: 50px;
vertical-align: middle;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
float: left;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="circle">
</div>
<div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;vertical-align:middle" />
</div>
</div>
</div>
<h1>I love css</h1>
</div>
Notice the image is vertically centered, but the green circle is not vertically centered.
How can I get both the image and the green circle vertically centered?
You can achieve a totally centered element using calc and view-units:
#example {
width: 100px;
height: 100px;
border: 1px solid green;
border-radius: 50px;
position: fixed;
top: calc(50vh - 50px);
left: calc(50vw - 50px);
}
<div id="example"></div>
This example will keep it right in the centre even with scrolling, etc - but you could place it centre based on the initial view using an absolute position.
My fixed code. It works in IE and in Chrome.
top: calc(0.5vh + 50px); is what does the trick. 50px of course would be the height of the element you want to vertically center.
.phase {
width: 500px;
height: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.circle {
position: relative;
float: left;
top: calc(0.5vh + 50px);
height: 50px;
width: 50px;
vertical-align: middle;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
float: left;
border: 1px solid black;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="circle">
</div>
<div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;" />
</div>
</div>
</div>
<h1>I love css</h1>
</div>
You need to place the circle in a container and set the container's line-height property. Try this:
.phase {
width: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.container {
float: left;
height: 300px;
line-height: 300px;
}
.circle {
display: inline-block;
height: 50px;
width: 50px;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
display: inline-block;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="container"><div class="circle">
</div></div>
<div class="container"><div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;vertical-align:middle" />
</div></div>
</div>
</div>
</div>
I'm trying to create a stack of playing cards in CSS, where each card is slightly offset diagonally from the one before it. Here's what it would look like:
.card {
float: left;
width: 100px;
height: 140px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
}
.card:nth-child(2) {
margin-left: -98px;
margin-top: -2px;
}
.card:nth-child(3) {
margin-left: -98px;
margin-top: -4px;
}
.card:nth-child(4) {
margin-left: -98px;
margin-top: -6px;
}
/* and so on... */
Example: http://jsfiddle.net/coev55w6/
I know I can do it by specifying different margins for each card, but I was wondering if there was a better way.
It's easy enough to create a purely horizontal offset:
.card {
float: left;
width: 100px;
height: 140px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
}
.card:not(:first-child) {
margin-left: -98px;
}
Purely vertical is easy too. But is there a way to get a diagonal offset with only a couple CSS rules?
It's a little bit of a hack, but you end up with that effect if you use the second option you gave:
.card:not(:first-child)
And put a <br> after each card:
<div>
<div class=card></div><br>
<div class=card></div><br>
<div class=card></div><br>
<div class=card></div><br>
</div>
JSFiddle:
http://jsfiddle.net/e4o0k2o5/
You could probably fine-tune it if you used a line-height or something other than <br>s.
I'm not sure it you're willing or able to change you HTML, but here's a wonderful alternative HTML layout and CSS to achieve your desired card spread.
.card {
width: 100px;
height: 140px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
position: relative;
margin-top: 10px;
margin-left: 10px;
}
.card2 {
width: 100px;
height: 140px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
position: relative;
margin-top: -10px;
margin-left: 10px;
}
<div>
<div class="card">
<div class="card">
<div class="card">
<div class="card"></div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<div>
<div class="card2">
<div class="card2">
<div class="card2">
<div class="card2"></div>
</div>
</div>
</div>
</div>
I created the simple web page layout that includes : header, left, right and footer div blocks.
This is the html code:
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="body">
<div class="header">
<p>Header</p>
</div>
<div class="left">
<div class="article">
<p>Article 1</p>
</div>
<div class="article">
<p>Article 2</p>
</div>
<div class="article">
<p>Article 3</p>
</div>
</div>
<div class="right"></div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
This is the css style :
body {
margin: 0px;
}
.header {
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.left {
margin-top: 5px;
width: 1000px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.article {
margin: 50px;
height: 400px;
border-style: solid;
border-color: green;
border-width: 5px;
border-radius: 3px;
}
.footer {
margin-top: 5px;
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
p {
text-align: center;
}
The web page looks like this:
But when i try to add the left block like on the picture it looks uncorrect. I use this css code for that:
.right {
margin-top: 5px;
width: 200px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
float: right;
}
DEMO on jsFiddle - http://jsfiddle.net/khbTg/
How can I to put Left div block in the yellow area like on the picture? Thank you for any help.
You just want to float .right to the right. If you can change your markup to:
<div class="header">#header</div>
<div class="container">
<div class="right">
<div class="nav">#nav</div>
</div>
<div class="content">
<div class="article">#article</div>
<div class="article">#article</div>
<div class="article">#article</div>
</div>
</div>
<div class="footer">#footer</div>
You would then want to add the styles:
.container { clear: both; }
.content { width: 80%; }
.right {
width: 20%;
float: right;
}
.content, .right {
margin: 0;
padding: 0;
}
Fiddle: http://jsfiddle.net/YDNsA/1/. I added .container to help clear things, as you don't want to float around .header or .footer. Remember to avoid putting a margin, padding or border on .right or .content.
Would you not need to put:
.left {
float: right;
}
When you use a float, the floated element is removed from document flow and 'floated' - following elements then flow around the floated element. To use a right float the way you wish, the right-floated element .right needs to appear in the DOM before the left element.
Alternatively, float your .left element left, and float your .right element left also - then they will layout correctly.
Don't forget to clear the floats afterwards :)
As a side-alternative, you could set .left and .right to display: inline-block; and this would solve your problem without floats and clears. You do need to then either (a) set font-size to 0 for the parent element to avoid the whitespace issue, or (b) comment out the whitespace between .left and .right. Google it if interested.
I make a a demo file how can you make a simple page layout:
Enjoy it PAGE LAYOUT EXAMPLE
CSS:
header {
width: 400px;
border: 2px solid black;
text-align: center;
margin-bottom: 5px;
}
article {
width: 300px;
height: 400px;
border: 2px solid black;
margin-right: 5px;
float: left;
}
sidebar {
width: 90px;
height: 400px;
border: 2px solid yellow;
float: left;
}
footer {
width: 400px;
border: 2px solid black;
text-align: center;
margin-top: 5px;
clear: both;
float: left;
}
I have some very basic code and it works except everything aligns to the top...ideally the bars would align to the bottom. I suppose I could use fixed positioning as the dimensions are squared at 50px by 50px but I'd prefer something a little less "fixed".
<div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;">
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"></div>
</div>
I don't want to use a library or JS add on. Keeping this light weight is mission critical.
Also I'd prefer the bars were vertical. Any CSS guru care to shed the bit of light I seem to be missing? I've googled and most examples are far to complicated/sophisticated,
First of all, separate your CSS from your HTML. You're repeating too much code when you could just use a bar class for your inner divs.
bottom: 0 doesn't change anything for relatively positioned div.
If you wish to use relative positioning, get rid of float and bottom and use display: inline-block and vertical-align: baseline;. Also, in this case, you need to get rid of any space in the HTML between the inner divs (newline).
Like this (you can see the demo at http://dabblet.com/gist/2779082 ):
HTML
<div class="graph">
<div style="height: 22px;" class="bar"></div><!--
--><div style="height: 11px;" class="bar"></div><!--
--><div style="height: 6px;" class="bar"></div><!--
--><div style="height: 49px;" class="bar"></div><!--
--><div style="height: 28px;" class="bar"></div>
</div>
CSS
.graph {
width: 50px;
height: 50px;
border: 1px solid #aeaeae;
background-color: #eaeaea;
}
.bar {
width: 8px;
margin: 1px;
display: inline-block;
position: relative;
background-color: #aeaeae;
vertical-align: baseline;
}
I would personally avoid setting xpos explicitly on every element, makes things less maintainable. In some scenarious percentage-basedvalue dumps would be more appropriate too. With that in mind, an imo more scalable and semanticaly correct approach has been mocked up in a fiddle. HTML:
<ul class="graph">
<li><span style="height:45%"></span></li>
<li><span style="height:12%"></span></li>
<!--as many more items as you want !-->
</ul>
and CSS:
.graph {
border: 1px solid #aeaeae; background-color: #eaeaea;/*"canvas" styling*/
float:left; /*should be clearfix'd instead, but this is OK for a demo*/
}
.graph li {
width:8px; height:50px; /*set a bar width and a full height*/
float:left; /*to have bars "left-aligned"*/
position:relative; /*needed for the actual bar fill element*/
margin:2px;
}
.graph li+li {
margin-left:0; /*avoid margin double-up between bars as they don't collapse*/
}
.graph span {
position:absolute;right:0;bottom:0;left:0; /*"bottom-align" the bars,
widths will be set inline*/
background-color: #aeaeae;
}
This also gives you potential to get quite fancy - bars could have content with a negative text indent for semantic value or <span> elements could be abandoned altogether in favor of pseudo-elements.
Kolink's answer is correct. Each bar div's width is 8px, plus margin-left and margin-right, 8+1+1=10px. So I suggest, set the left value to 0px, 10px, 20px ...
<div class="wrapper">
<div style=" left:0px;height:22px;"></div>
<div style="left:10px;height:11px;"></div>
<div style="left:20px;height:6px;"></div>
<div style="left:30px;height:49px;"></div>
<div style="left:40px;height:28px;"></div>
</div>
The css should look like this(I grouped some general css rules):
.wrapper{
border: 1px solid #aeaeae;
background-color: #eaeaea;
width: 50px;
height: 50px;
position : relative;
}
.wrapper > div{
bottom: 0px;
width: 8px;
position : absolute;
background-color: #aeaeae;
margin: 1px;
display : inline-block;
}
You can check this link: http://jsfiddle.net/zhujy_8833/AFbt4/ to see the result of the above code.
If you give the parent position: relative, then you can use position: absolute for child div to place them in precise coordinates by setting left, top, right, bottom, width, height you can precisely control the placement of the bars in your bar chart.
.graph {
position: relative;
width: 54px;
height: 54px;
border: 1px solid blue;
background-color: lightgrey;
}
.bar {
position: absolute;
border: 1px solid blue;
background-color: yellow;
}
<div class="graph">
<div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
<div class="bar" style="bottom: 0; left: 0; width: 8px; height: 22px"></div>
<div class="bar" style="bottom: 0; left: 10px; width: 8px; height: 11px"></div>
<div class="bar" style="bottom: 0; left: 20px; width: 8px; height: 6px"></div>
<div class="bar" style="bottom: 0; left: 30px; width: 8px; height: 49px"></div>
<div class="bar" style="bottom: 0; left: 40px; width: 8px; height: 28px"></div>
</div>
</div>
<p></p>
<div class="graph">
<div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
<div class="bar" style="left: 0; top: 0; height: 8px; width: 22px"></div>
<div class="bar" style="left: 0; top: 10px; height: 8px; width: 11px"></div>
<div class="bar" style="left: 0; top: 20px; height: 8px; width: 6px"></div>
<div class="bar" style="left: 0; top: 30px; height: 8px; width: 49px"></div>
<div class="bar" style="left: 0; top: 40px; height: 8px; width: 28px"></div>
</div>
</div>
Use position: absolute, and instead of float:left; use left: 0px;, 8px, 16px and so on.
Also add position: relative to the container.