you can help me with UIkit or css manually!
i am using UIkit framework and the problem is that i really don't understand how to place two inline columns at middle of background(vertically)!
here is screenshot what i have, i think then you will understand my problem]1
this is code of this section with columns:
<section id="header" class="gradient bg bg-gradient ">
<div uk-grid style="margin: 0 auto;" class="uk-flex uk-flex-middle uk-flex-space-between uk-grid-item-match">
<div class="uk-width-3-5#m">
<div class="uk-flex-inline">
<hr class="uk-divider-small">
<p>DISTRIBUTED LEDGER TECHNOLOGY</p>
</div>
<p>
<h1><span style="color: #6d6d6d">BRINGING</span> <span style="color: white">A GOLD STANDART TO THE</span>
<span style="color: rgba(4,149,247,1);">BLOCKCHAIN</span></h1></p>
</div>
<div class="uk-width-expand#m uk-flex">
<video loop muted playsinline uk-video="autoplay: inview">
<source src="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
<source src="https://quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
</div>
</div>
</section>
here is my main.css
.gradient {
height: 900px;
width: 100%;
background: linear-gradient(180deg, #092436 0%, rgba(13, 17, 22, 0) 100%);
box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.12);
}
.bg {
height: 900px;
width: 100%;
background-color: #0D1116;
box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.12);
}
.bg-gradient{
position:absolute;
top:0px;
z-index: -1;
}
.thin-text{
font-weight: 200;
}
html,body{
letter-spacing: 2px;
}
.uk-button-text {
letter-spacing: 2px;
padding:5px;
}
.uk-navbar{
border-bottom: 1px solid rgba(4,149,247,0.1);
}
.hover{
transition: 0.3s;
}
.hover:hover{
background-color: rgba(4,149,247,0.1);
}
.padding-header {
padding: 200px 100px 100px 100px;
}
my 2 columns are inside .bg and .gradient!
<section id="header" class="gradient bg bg-gradient uk-flex">
<div class="uk-margin-auto uk-margin-auto-vertical">
<div uk-grid>
</div>
</div>
</section>
You can use the following solution to place two inline columns vertically in the middle of the background:
.uk-width-expand#m {
margin: 0 auto;
}
Related
I've been trying to make a gradient top border for a box with a radius. The gradient border should only be at the top of the box, and it needs to have the same radius (5px) as the rest of the box. The end result should look like this:
My current code:
.card {
text-align: center;
margin: 0 1%;
background-color: #252a41;
border-radius: 5px;
border: none;
width: 25%;
padding: 3% 0;
}
.instagram {
border-top: 3px solid rgb(243, 242, 241);
border-radius: 5px;
border-image: linear-gradient(to right, #fdc468, #ffa263, #ff806c, #f9607f, #df4996) 1 / 3px 0px 0px 0px / 0px 0px 0px 0px round;
position: relative;
}
<div class="card instagram">
<div class="row">
<img src="images/icon-instagram.svg" alt="instagram icon" />
<span class="small-text username">#realnathanf</span>
</div>
<h1 class="followers-count">11k</h1>
<p class="small-text followers">FOLLOWERS</p>
<div class="row">
<img src="images/icon-up.svg" alt="icon up" />
<span class="change change-up">1099 Today</span>
</div>
</div>
Apparently the border-image property isn't compatible with border radius, so I have to make a before/after pseudo-element. However I couldn't figure out how to make one for the desired result.
You can do it with only background:
.box {
width:200px;
height:200px;
border-radius:5px;
background:
linear-gradient(to right, #fdc468, #ffa263, #ff806c, #f9607f, #df4996) top/100% 5px no-repeat,
#000;
}
<div class="box">
</div>
I am trying to put a image inside a header in a boostrap card, I do know there are other questions like this but I seriously tried everything.
Here is the code:
<div class="container">
<div style="padding: 20px 0px;" *ngFor="let blog of blogs">
<div class="card">
<div class="card-header" (click)="navigate('Blog')">
<a (click)="navigate(blog.title)">{{ blog.title }}</a>
</div>
<div class="card-body">
<p class="card-text">
{{ blog.summary }}
</p>
</div>
</div>
</div>
</div>
css:
.card-header {
background: rgba(0, 255, 0, 0.61);
color: rgb(0, 0, 0);
font-weight: bold;
cursor: pointer;
}
.card-body {
background: #43484d;
}
.card-text {
color: #6cffce;
font-weight: bold;
}
I have tried
background-image: url(imagepath)
it does not work
I also tried
<image src ...>
as top-overlay but that neither
I just want to put an image in the header which will be transparent with on the top a color (kind of like looking into a glass type of thing)
not exactly sure what you want. check this snippet if it gives you any ideas.
.card-header {
background: linear-gradient(rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.25)), url(http://www.tedgoas.com/assets/images/work/stack-overflow/cover.jpg) no-repeat center center;
height: 200px;
position: relative;
}
.card-header a {
color: white;
font-weight: bold;
font-size: 50px;
position: absolute;
top: 40%;
left: 40%;
}
.card-body {
background: #43484d;
}
.card-text {
color: #6cffce;
font-weight: bold;
}
<div class="container">
<div>
<div class="card">
<div class="card-header">
<a>Header</a>
</div>
<div class="card-body">
<p class="card-text">
Body
</p>
</div>
</div>
</div>
</div>
Here is your code as per your requirement see the code card-header same thing you can apply in anywhere it will work fine. here is link codepen link here
<div class="container">
<div style="padding: 20px 0px;" *ngFor="let blog of blogs">
<div class="card">
<div class="card-header" (click)="navigate('Blog')">
<a (click)="navigate(blog.title)">link</a>
</div>
<div class="card-body">
<p class="card-text">
Para1
</p>
</div>
</div>
</div>
</div>
Css goes here...
html, body {
height: 100%;
width: 100%;
margin: 0;
color: #f9f0f3;
background: #D21237;
}
.card-header {
background: rgba(0, 255, 0, 0.61);
color: rgb(0, 0, 0);
font-weight: bold;
cursor: pointer;
position:relative;
height:10vh;
}
.card-header::before{
content:"";
background-image: url("http://www.hdnicewallpapers.com/Walls/Big/Abstract/Red_and_Blue_Smoke_Creative_Design_Wallpaper.jpg");
height:10vh;
position: absolute;
top:0px;
width:100%;
z-index:99999;
}
.card-body {
background: #43484d;
}
.card-text {
color: #6cffce;
font-weight: bold;
}
I have a dropzone where user can drop an image, it has some associated CSS that makes the dropzone background go grey as they drag the image, giving a visual cue.
Html
<div>
<figure>
<div id="dropzone">
</div>
</figure>
</div>
CSS
#dropzone {
border: 3px solid black;
min-width:300px;
min-height:100px;
max-width:300px;
max-height:100px;
}
#dropzone.dragover {
background: rgba(0, 0, 0, .5);
}
But I don't want the dropzone to be empty I would like it to have a starting image (which says something like 'Drop Files Here')
<div>
<figure>
<div id="dropzone">
<img src="dropzone.jpg"/>
</div>
</figure>
</div>
and if I add this, then the dropzone doesnt grey out when drag an image over, how do I fix this?
Try setting the background image with CSS property background-image
#dropzone{
background-image: url(path/to/your/image);
/* rest of the css goes here*/
}
#dropzone {
border: 3px solid black;
min-width:300px;
min-height:100px;
max-width:300px;
max-height:100px;
background-image:url(https://images.pexels.com/photos/577775/pexels-photo-577775.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
#dropzone.dragover {
background: rgba(0, 0, 0, .5);
}
<div>
<figure>
<div id="dropzone">
</div>
</figure>
</div>
I got two solutions for you:
First I display the image as a background-image and then I filter it in the fist solution to be grayscale (More about filter here) and in the second solution I just overwrite the background to just be gray.
#dropzone1,
#dropzone2 {
border: 3px solid black;
min-width: 300px;
min-height: 100px;
max-width: 300px;
max-height: 100px;
background-image: url(https://picsum.photos/300/300);
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
#dropzone1:hover {
filter: grayscale(100%);
}
#dropzone2:hover {
background: rgba(0, 0, 0, .5);
}
<div>
<figure>
<div id="dropzone1">
</div>
</figure>
</div>
<div>
<figure>
<div id="dropzone2">
</div>
</figure>
</div>
You can use opacity on the dropzone.
#dropzone.dragover {opacity:0.5}
Because background is only the background-color of the element.
This question already has answers here:
CSS center display inline block?
(9 answers)
Closed 5 years ago.
body {
background: #212121;
}
.wrapper {
height: 100%;
width: 100%;
overflow: hidden;
}
.holder{
height: 50%;
width: 100%;
position: absolute;
top: 25%;
left: 0%;
}
.content {
height: 100%;
width: 400px;
margin: 10px;
display: inline-block;
background: #424242;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}
.detailBox {
height: 100%;
display: inline-block;
font-size: 0;
margin: 0 auto;
}
<div class="wrapper">
<div class="holder">
<div class="detailBox">
<div class="content" id="row1">
<div class="wordInputContainer">
<div class="inputBox">
</div>
</div>
</div>
<div class="content" id="row2">
<div class="wordOutputContainer">
<div class="listBox">
<!-- List Elements Go Here -->
<!-- Words Output In Alphabetical Order [A - Z] -->
</div>
</div>
</div>
<div class="content" id="row3">
<div class="wordStatisticContainer">
<div class="wordCount"></div>
<div class="commonLetter"></div>
<div class="commonWord"></div>
<div class="longestWord"></div>
<div class="shortestWord"></div>
</div>
</div>
</div>
</div>
</div>
Even though I have margin: 0 auto; on the .detailedBox it still isn't centering. Is it because it doesn't have a fix width? It doesn't have a fixed width because I want the .detailedBox to be the width of all the .content's combined, but also centered.
If you change .detailBox to have display: flex (instead of inline-block) and then do justify-content: center then it'll center that div horizontally.
Since .detailBox is set to inline-block, it cannot be centered by using margin:0 auto. One way to understand this is that the "margin centering" technique relies on "filling up" available horizontal space. But there is no available space when using an inline element. (Reference: margin:auto; with inline-block.)
Also note that:
10.3.9 'Inline-block', non-replaced elements in normal flow
If 'width' is 'auto', the used value is the shrink-to-fit width as for floating elements.
A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
— w3.org
One alternative is to let .detailBox default to display:block and set text-align:center to horizontally center it's child .content elements, which are inline-block.
body {
background: #212121;
}
.wrapper {
height: 100%;
width: 100%;
overflow: hidden;
}
.holder {
height: 50%;
width: 100%;
position: absolute;
top: 25%;
left: 0%;
}
.content {
height: 100%;
width: 100px;
margin: 10px;
display: inline-block;
background: #424242;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}
.detailBox {
height: 100%;
font-size: 0;
text-align:center;
}
<div class="wrapper">
<div class="holder">
<div class="detailBox">
<div class="content" id="row1">
<div class="wordInputContainer">
<div class="inputBox">
</div>
</div>
</div>
<div class="content" id="row2">
<div class="wordOutputContainer">
<div class="listBox">
<!-- List Elements Go Here -->
<!-- Words Output In Alphabetical Order [A - Z] -->
</div>
</div>
</div>
<div class="content" id="row3">
<div class="wordStatisticContainer">
<div class="wordCount"></div>
<div class="commonLetter"></div>
<div class="commonWord"></div>
<div class="longestWord"></div>
<div class="shortestWord"></div>
</div>
</div>
</div>
</div>
</div>
You mentioned that you want .detailBox to be the width of all the content combined. So, if for some reason you need .detailBox to remain inline-block, you could set text-align:center on it's parent, .holder. Like this:
body {
background: #212121;
}
.wrapper {
height: 100%;
width: 100%;
overflow: hidden;
}
.holder {
height: 50%;
width: 100%;
position: absolute;
top: 25%;
left: 0%;
text-align:center;
}
.content {
height: 100%;
width: 100px;
margin: 10px;
display: inline-block;
background: #424242;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}
.detailBox {
height: 100%;
display:inline-block;
font-size: 0;
}
<div class="wrapper">
<div class="holder">
<div class="detailBox">
<div class="content" id="row1">
<div class="wordInputContainer">
<div class="inputBox">
</div>
</div>
</div>
<div class="content" id="row2">
<div class="wordOutputContainer">
<div class="listBox">
<!-- List Elements Go Here -->
<!-- Words Output In Alphabetical Order [A - Z] -->
</div>
</div>
</div>
<div class="content" id="row3">
<div class="wordStatisticContainer">
<div class="wordCount"></div>
<div class="commonLetter"></div>
<div class="commonWord"></div>
<div class="longestWord"></div>
<div class="shortestWord"></div>
</div>
</div>
</div>
</div>
</div>
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.