I have this dot, filled or not (depending on putting inner-circle id), that i want to use on Slick Slider.
#outer-circle {
height: 100px;
width: 100px;
position: relative;
border-radius: 50%;
padding: 100px;
background: #fff;
border: 15px solid red;
color: red;
text-align: center;
font: 32px Arial, sans-serif;
}
#inner-circle {
position: absolute;
background: red;
border-radius: 50%;
height: 250px;
width: 250px;
top: 50%;
left: 50%;
margin: -125px 0px 0px -125px;
}
Here is JSFiddle:
https://jsfiddle.net/thirtydot/dQR9T/2637/
I want to put it in the slick slider classes + make it inside slider (not above/below it)
https://github.com/kenwheeler/slick/blob/master/slick/slick-theme.css
Anyone have idea how to do that to look like on the picture?
In slider that should be text (f.e. "Profesjonalizm") and that red svg thing on the left. Of course navbar isn't part of that slider.
Any help would be much appreciated!
set the navbar over the slider with position absolute, and float:left on the circles.
Related
In my project, I have a button in the body of my div. When I resize the window, the button mysteriously disappears. I have searched for other solutions, however none have worked for me.
Here is my code:
.section-1 {
width: 100%;
height: 100vh;
position: relative;
background: url("https://udodjfjfjfoeoeo.com.dekffrfr") no-repeat center center/cover;
}
.main-signup-btn {
background-color: transparent;
position: relative;
border: 1px solid white;
height: 60px;
width: 245px;
padding-bottom: 1px;
font-weight: bolder;
border-radius: 3px;
color: white;
font-weight: bolder;
top: 253px;
left: -680px;
}
<div class="section-1">
<div class="overlay-1"></div>
<button class="main-signup-btn">Sign up now, uue</button>
</div>
Anybody know the issue? Thank you.
In your css .main-signup-btn you absolutely positioned the button to -680px which sends the button offscreen. remove the - and use only 680px and your button will appear somewhere near the center or a little to the right depending on your screen width. you can completely remove the left: -680px; completely and see i positioned normal at the beginning of the div / screen. You can try this
.main-signup-btn {
background-color: transparent;
position: relative;
border: 1px solid white;
height: 60px;
width: 245px;
padding-bottom: 1px;
font-weight: bolder;
border-radius: 3px;
color: white;
font-weight: bolder;
top: 253px;
/* left: -680px; */ /* This line is sending the button offscreen to the left, change the value or remove completely */
}
Here's my issue:
I have a mockup from a design company that wants a text block with a 'broken' square border behind some big text that looks like this (description: there is a small white frame behind large text that is broken up by the text, and then a smaller text link below):
Image of an element on client's website,
In the design, the text is displayed accross the white square frame. The way I have implemented it right now is to make the big text's background color gray. Because the current image's background is gray the desired effect is achieved.
What is needed is to achieve that effect (of breaking the white frame) REGARDLESS of the appearance of the image. Because right now, this happens:
the gray background of the text appears like a box in front of the image -- it ought to be transparent
To further illustrate, if I set the background-color of the big text to transparent, the whole frame is shown (the desired effect is a broken frame):
background: transparent #1
More info if it helps:
The white frame element is just a div with a white border.
I am not sure exactly what to search for in this case, if there is an appropriate CSS solution (preferrable) or if I need to use SVG or maybe a PNG? Thank you for any help.
As #Temani Afif pointed out in the comments, it's not one box, but two separate shapes in CSS.
I made an example to illustrate this using flexbox.
.page {
background-color: black;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.box-top {
width: 100px;
height: 10px;
border-color: white;
border-width: 2px;
border-style: solid;
border-bottom: none;
}
.box-bottom {
width: 100px;
height: 30px;
border-color: white;
border-width: 2px;
border-style: solid;
border-top: none;
}
.separator {
color: white;
width: 100%;
margin: 5px 0;
padding: 0;
font-size: 40px;
text-align: center;
}
<div class="page">
<div class="box-top"></div>
<p class="separator">
Headline
</p>
<div class="box-bottom"></div>
</div>
You can make a square element with a border and use a mask on it:
body {
margin: 0;
min-height: 100vh;
background: black;
box-sizing: border-box;
padding-top: 1px;
}
h2.fancy {
position: relative;
text-align: center;
color: white;
padding-top: 12px;
}
h2.fancy:before {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100px;
height: 100px;
border: 5px solid white;
clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 40px, 100% 40px, 100% 100%, 0 100%);
}
<h2 class=fancy>I'm a fancy title...</h2>
The advantage of this solution is that you can make it scale easily with what might change on various screen sizes. For example, with the title's font-size:
document.querySelector('input.font-size').addEventListener('input', function(e) {
document.querySelector('h2').style.fontSize = e.target.value + 'px';
})
body {
margin: 0;
min-height: 100vh;
background: url(https://picsum.photos/800) center /cover;
box-sizing: border-box;
padding-top: 1px;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
h2.fancy {
z-index: 1;
position: relative;
text-align: center;
color: white;
padding-top: 12px;
}
h2.fancy:before {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100px;
height: 100px;
display: block;
border: 5px solid white;
clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 calc(10px + 1.3em), 100% calc(10px + 1.3em), 100% 100%, 0 100%);
}
input[type=range] {
position: absolute;
bottom: 1rem;
left: 1rem;
z-index: 1;
}
<h2 class=fancy>I'm a fancy title...</h2>
<div class=overlay></div>
<input type=range min=12 max=36 class=font-size>
The disadvantage is that it doesn't work in IE or Edge lower than 18 or in Opera mini. This particular example works in IE 18, though, as it only uses polygon().
Ok. I have an Angular2 application. Im using an angular component called flex-layout (that let me work with flexbox through directives, thats all). Then, i have a div with class="row" and a dynamic amount of divs inside it. Each dynamic div have an image inside of it.
I need to mark one of those divs as selected, and then add an specific class to it. That class has to put a border-bottom and a background color (already do that), but i need to add a little triangle at the middle of the border-botom on selected div.
Work already done
Fail when selecting another div
As you see on the above images, i managed to put that triangle on the middle of all row (no matter what div i selected)
But, when i change the selected div, triangle doesnt move at all. It always stays at center of the row, and i need the triangle be at the center of selected div instead.
changeSelectedBrand(brandId: number) {
this.selectedBrand = brandId;
}
div.image-row {
height: 90px;
max-height: 90px;
width: 100%;
max-width: 100%;
margin: 0px;
padding: 20px;
background-color: #EEEEEE;
}
.div-image-row-selected {
background-color: #DDDDDD !important;
border-bottom: 3px solid mat-color($primary,400);
}
.div-image-row-selected:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 0;
height: 0;
border-top: solid 10px mat-color($primary,400);
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
div.image-row > img {
height: 65px;
}
<div fxLayout="row">
<div fxFlex="100%" fxLayoutAlign="center center" class="image-row" *ngFor="let brand of brands" [ngClass]="{'div-image-row-selected': brand.id === selectedBrand}" (click)="changeSelectedBrand(brand.id)">
<img src="{{brand.url}}" />
</div>
</div>
The snippet is not functional, i know... is just to show you how things are done right now.
So, repeat the question: How can i make that triangle to move to the center of the bottom border of a selected div?
Thank you
put a position relative wrapper for div.image-row and then update the triangle style(.div-image-row-selected:after) with required left.
div.image-row {
height: 90px;
max-height: 90px;
width: 100px;
max-width: 100%;
margin: 0px;
padding: 20px;
background-color: #EEEEEE;
position: relative;
}
.div-image-row-selected:after {
content: '';
position: absolute;
top: 100%;
left: calc(50% - 10px);
right: 0;
width: 0;
height: 0;
border-top: solid 10px #ff0000;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
I have been experiencing trouble centering a number within a circular shaped div. The coding I have used has worked for all other elements but for some reason, one number just won't center like the rest.
I have tried to narrow the problem down and the only thing I have found is that the font size seems to be the problem. In smaller font sizes, the number centers fine, larger sizes, the number sits to the left.
Is this a bug or something someone else has experienced?
HTML:
<div class="circle">
<div>4.</div>
</div>
CSS:
#how-can-we-help-section-two .info-box-four .circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
margin: 0 auto;
margin-bottom:-50px;
position:relative;
border: 7px solid #ebeced;
}
#how-can-we-help-section-two .info-box-four .circle div{
font-size: 35px;
font-weight:bold;
color: #fff;
line-height: 90px;
}
Problem is padding: 80px 40px 40px 40px; of .text-box.
You can solve your problem by position:absolute;.
#how-can-we-help-section-two .info-box-four .circle div {
font-size: 35px;
font-weight: bold;
color: #fff;
line-height: 90px;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
Its because of your surrounding wrappers behaviour.
You could use an absolute positioned div or you could replace line-height: 90px with width: 100%; height: 100%; display: inline-block; on your text div inside .circle
I have a content area in the middle of the page, which I am centering with margin: 0 auto;
Now I want to have a background effect on the page with several small cubes, that, when hovered change with some effects.
The hover effects work fine under or over the content area, but the problem is that the margin, which centers the content seems to disturb the recognition of the hovering, because when hovered over the cubes behind the margin of the content area, the hover selector doesn't work.
Thanks for any help!
EDIT: Here a code example: http://cssdeck.com/labs/dl3ojm0g
Some small changes in the CSS and it works well.
#content {
margin: 0 auto;
position:relative;
margin-top: 50px;
width: 700px;
height: 300px;
padding: 20px;
background-color: white;
border: 2px solid darkgray;
color: darkgray;
z-index:2;
}
#cubeHolder {
position: absolute;
top: 0;
left: 0;
z-index:1;
}
Just needed to position #content to relative and gave it a higher z-index comparing to #cubeHolder
Example : http://jsfiddle.net/nwrFa/6/
Position your content-container absolute. Then left: 50% and margin-left: -700px/2
#content {
position: absolute;
top: 50px;
left: 50%;
margin-left: -350px;
width: 700px;
height: 300px;
padding: 20px;
background-color: white;
border: 2px solid darkgray;
color: darkgray; }