http://bootply.com/89567
I attached a pattern to the border-bottom, since there isn't a specific borde-image selector for that, I've used :after to attach it. However the image doesn't scale with the rest.
Should I maybe create the border pattern in canvas? How could I accomplish that?
Thanks in advance
.redbrd {
height: 400px;
width: auto;
background: #D20000;
}
.redbrd:after {
content: url("http://i.imgur.com/iKXPOF0.png");
position: relative;
top: 400px;
}
<section class="col-md-12">
<div class="row">
<article class="col-md-6">
</article>
<article class="col-md-6">
<div class="col-md-6 col-xs-6">
<div class="redbrd"></div>
</div>
<div class="col-md-6 col-xs-6">
<div class="redbrd"></div>
</div>
</article>
</div>
</section>
Try this:
.redbrd:after {
content: " ";
position: relative;
top: 400px;
display: block;
background: url("http://i.imgur.com/iKXPOF0.png") repeat-x;
height: 30px;
}
You can add border-image property for the div. And disable all the border except bottom border.
eg:
div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
border-top:0px;
border-left:0px;
border-right:0px;
}
Or try this
div
{
border-image-slice: 0 0 27 0; border-image-width: 20px 20px 20px 20px;
border-image- outset: 0px 0px 0px 0px; border-image-repeat: stretch stretch;
border-image-source: url("https://mdn.mozillademos.org/files/6007/border-image-1.png");
}
I think this link will be helpful for you https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator
.
Related
I have a page where there is a line of 4 cards, each with width: 25%. Below that I have a line with 3 cards that I want to line up with the first 3 cards of the line above. The cards also have a margin which means that when it divides the card's width with 25% the 3 cards are bigger. Any idea how to fix this?
.section-wrapper {display: flex}
.sessions-card, .earnings-card {flex:0 0 25%; margin: 0 10px; border: 2px solid black; height: 200px}
.session-wrapper:first-child {margin-left: -10px}
.session-wrapper:last-child {margin-right: -10px}
<h1>Sessions</h1>
<div class="section-wrapper">
<div class="sessions-card approved"></div>
<div class="sessions-card completed"></div>
<div class="sessions-card pending"></div>
<div class="sessions-card cancelled"></div>
</div>
<h1>Earnings</h1>
<div class="section-wrapper">
<div class="earnings-card"></div>
<div class="earnings-card"></div>
<div class="earnings-card"></div>
</div>
Instead of the width, you can do it with the flex property and if 20px is the desired margin between them, you'd need to use some calc(), esp. if you want for the first and last one to be touching the parents edges:
.section-wrapper {display: flex; background: lightblue}
/* can also do it with the "justify-content: space-between;" and "margin-right: auto" set on the last ".earnings-card" */
.sessions-card, .earnings-card {
/*width: 25%;*/
flex: 0 0 calc(25% - 15px); /* -15px because of the -20px left & right margin devided by 4 = 5px; 20px - 5px = 15px */
margin: 0 10px;
border: 2px solid black;
height: 200px;
box-sizing: border-box;
}
.sessions-card:first-child,
.earnings-card:first-child {
margin-left: 0;
}
.sessions-card:last-child,
.earnings-card:last-child {
margin-right: 0;
}
<h1>Sessions</h1>
<div class="section-wrapper">
<div class="sessions-card approved"></div>
<div class="sessions-card completed"></div>
<div class="sessions-card pending"></div>
<div class="sessions-card cancelled"></div>
</div>
<h1>Earnings</h1>
<div class="section-wrapper">
<div class="earnings-card"></div>
<div class="earnings-card"></div>
<div class="earnings-card"></div>
</div>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
I want to make my div2 to centre align and div3 to be at right.
I tried doing that with text align: center for main div and making float right to div3 but it is making it center align by considering main div's remaining part. I have given display: inline-flex to main div
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
Please try with this code:
<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">
<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
Hello
</div>
<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>
.main {
display: block;
position: relative;
width:100%;
text-align: center;
border: 1px solid red;
}
.main .div1 {
display: inline-block;
border: 1px solid;
}
.main .div2 {
float: right;
border: 1px solid;
display: inline-block;
}
<div class="main">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
Divs are block level elements, so you can use a margin of auto on the left and right to place it in the middle.
.center {
margin: 0 auto;
}
.right {
float: right;
}
In the HTML you will need to adjust the ordering of the divs. Put div 3 before div 2 so that when you float it, they appear on the same line:
<div class="outer">
<div class="right"></div>
<div class="center"></div>
</div>
https://jsfiddle.net/dcqpw12u/1/
You can use position:relative for the main, and position:absolute to the other div, and it also centers it vertically
.main {
text-align: center;
background-color: red;
height: 50px;
position: relative;
}
.div2 {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.div3 {
background-color: green;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
<div class="main">
<div class="div2">SOME DIV 2</div>
<div class="div3">SOME DIV 3</div>
</div>
Add style="margin: auto;" to your div2 element. And
style="margin-left: auto;" to your div3 element.
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="margin:auto; height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
.contentmain{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: left;
background:red;
}
.contentCenter{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 30%;
float: left;
background:yellow;
}
.contentRight{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: right;
background:red;
}
<div class="contentmain">
Main<br/>
Content<br/>
</div>
<div class="contentCenter">
Center<br/>
Content<br/>
</div>
<div class="contentRight">
Right<br/>
Content<br/>
</div>
This might be fulfill your requirement.
<!DOCTYPE html>
<head>
<style>
.div0 {
text-align: center;
border-style: solid;
border-width: 5px;
height: 50px;
border-color: red;
position: relative ;
}
.div1 {
border-style: solid;
border-width: 4px;
right: 0%;
height: 40px;
width:40px;
border-color: green;
position: absolute;
}
.div2 {
left: 50%;
right:50%;
width:40px;
position: absolute;
border-style: solid;
height: 40px;
border-width: 4px;
border-color: green;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"><p>div1</p></div>
<div class="div2"><p>div2</p></div>
</div>
</body>
</html>
basically you can achieve this by using the position property and the right and left properties of CSS which you can refer to more on
Position and right property left property could be found on the site.
what i've done in my answer is set the main div as position relative and the other sub divs(div2 and div3) as absoulute
To get one div to the right most corner you set the right property to 0%
and to center a div i used 50% on both right and left properties.
I currently have a set of 'product' divs inside a wrapping containers. These product divs contain an image, header and p text. For some reason, the length of the p text is changing the position of the parent product div. Here is a screenshot: https://gyazo.com/9504729541e6bee17a27e4121af3a1c9
The p and h2 elements both have 0 padding and margins.
I will try to keep my code as minimal as possible.
HTML:
<div id="content" class="wrapper">
<div id="content-container">
<div id="product-container">
<div class="product-wrapper">
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/home-bg.jpg" class="thumbnail">
</div>
<div class="product-text">
<h2>Mexican Nachos - £6.99</h2>
<p>Tortilla chips and melted cheese with the option of salsa, jalapenos, ground meat, guacamole and tomatoes.</p>
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/enchilada.jpg" class="thumbnail">
</div>
<div class="product-text">
<h2>Enchiladas - £10.99</h2>
<p>Tortilla chips and melted cheese with the option of salsa, jalapenos, ground meat, guacamole and tomatoes.</p>
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/quesadilla.jpg" class="thumbnail">
</div>
<div class="product-text">
<h2>Quesadilla - £4.99</h2>
<p>Shorter length test</p>
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/shrimp.jpg" class="thumbnail">
</div>
<div class="product-text">
<h2>Shrimp Stir Fry - £10.99</h2>
</div>
</div>
</div>
</div> <!-- Product container -->
</div> <!-- Content container -->
</div> <!-- Content-wrapper container -->
CSS:
#content {
height: 100%;
padding-top: 100px;
}
.wrapper {
width: 65%;
margin: 0 auto;
}
#content-container {
display: inline-block;
width: 100%;
height: 100%;
background-color: white;
box-shadow: -20px 0px 25px -20px #000000, 20px 0px 25px -20px #000000;
overflow: scroll;
}
#product-container {
width: 100%;
height: 100%;
padding-top: 25px;
}
.product-wrapper {
width: 80%;
height: 100%;
margin: 0px auto;
text-align: center;
}
#product {
display: inline-block;
height: 352px;
width: 200px;
margin: 10px;
border: solid 2px black;
}
.image-container {
height: 200px;
width: 200px;
}
.product-text {
font-family: 'Open Sans Condensed';
height: 150px;
width: 100%;
text-align: center;
color: black;
border-top: solid 2px black;
background: #FFFFFF; /* Old browsers */
background: -moz-linear-gradient(top, #009641 0%, #a1d54f 96%, #80c217 100%, #7cbc0a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.product-text h2 {
font-size: 23px;
padding: 0;
margin: 0;
}
.product-text p {
font-style: italic;
font-weight: 700;
padding: 0;
margin: 0;
}
.thumbnail {
position: relative;
height: 200px;
width: 200px;
cursor: pointer;
z-index: 1200;
}
Your #product elements are display: inline-block. This means they will take inline level characteristics, one of which is baseline alignment (i.e., vertical-align: baseline).
Override the default setting with vertical-align: top.
(Also, you have multiple elements with id="product". ID values should be unique on a page. Consider switching to class="product" instead.)
add vertical-align:top to #product.
#product {
display: inline-block;
height: 352px;
width: 200px;
vertical-align: top;
margin: 10px;
border: solid 2px black;
}
And one more thing, its not a best practice to have same id's for different elements. Instead make it .product class.
I want to show an arrow over an image. This arrow should be centered every time.
How can I do it?
Here is my code in jsfiddle:
CSS:
.t1_img {
background-image:url('http://www.4freephotos.com/medium/batch/Branch-of-acacia-with-flowers777.jpg');
position: relative;
background-size: cover;
background-position: center center;
overflow: hidden;
border-radius: 10px 0 0 0;
height: 200px;
}
.t1_arrow {
position: absolute;
bottom: 0;
width: 60px;
border-left: 40px solid #cfcfcf;
border-right: 40px solid #cfcfcf;
border-top: 20px solid transparent;
}
.t1_content {
background-color: #cfcfcf;
height: 150px;
padding-top: 20px;
margin-bottom: 40px;
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
</div>
</div>
You know the width of the arrow so if you put it left:50%; and margin-left:-30px; because its width is 60px it is centered everytime.
So add this
.t1_arrow {left:50%;margin-left:-30px;}
Your fiddle edited
You could use the following line:
left: calc((100% - 60px)/2);
Where 60 px refers to the width of the arrow. This method is not supported by all browsers, unfortunately. For safety, add the following three lines to the .t1_arrow class:
.t1-arrow {
left: 45%;
left: calc((100%-60px)/2);
left: -webkit-calc((100%-60px)/2);
}
Or you could use jquery to set the height after pageload:
$(function() {
$(".t1-arrow").each( function() {
var w = $(this).parent(0).width();
$(this).css('left',(w-60)/2 + 'px');
});
});
If you only want it centred horizontally, add the following to your Arrow's CSS;
left: 0; right: 0;
margin: auto;
Updated Fiddle. https://jsfiddle.net/86e0gg99/12/
Here you can see a picture of the solution, i'm looking for.
https://db.tt/1UFk3baW
I want the square like below for all screensize
But when i resize the window in smaller screen size it is looking like below:
Please help me to solve this problem.I tried in many ways but couldnot solve the problem.Related codes are given below :
Html:
<div class="price-area">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12 col-sm-6">
<div class="square">
<fieldset class="price-border">
<legend>Standard</legend>
<p class="one" >Leaflet • Poster</p>
<p>Banner • Bill Board • Support 24/7</p>
</fieldset>
</div>
</div>
<div class="col-xs-12 col-sm-6">
</div>
</div>
<div class="col-xs-12"></div>
</div>
</div>
</div>
CSS:
.square {
position: relative;
}
.price-border {
margin-bottom: 25px;
}
.price-border legend {
width: auto;
margin-bottom: 2px;
margin-left: 42%;
}
.price-border p.one {
text-align: center;
margin-top: 20px 20px 10px auto;
}
.price-border p:last-child {
text-align: center;
margin-bottom: 50px;
margin-right: 20px;
}
.price-border:after {
height: 0px;
width: 0px;
border: 39px solid #000;
position: absolute;
top: 34%;
left: 93.5%;
content: "";
display: block;
z-index: ;
transform: rotate(45deg);
}
Change .price-border:after style
/* CHANGES */
.price-border:after {
left: auto;
right: -36px;
}
Basically you only want to move your element to the right for number of pixels and how your element has static width you can just set right attribute.
More generic solution would be doing it with transform. For your case, code bellow.
.price-border:after {
left: 100%;
transform: translateX(-55%) rotate(45deg);
}