I am trying to create a button which is slot shaped.
It has a circle either on the left or right hand side.
However I am really struggling with the width and alignment of both the text and circle.
This is what I have right now:
.Buttons{
border-style: dotted ;
border-radius: 150px;
width: 300x;
height: 150px;
margin: 20px;
background-color:transparent;
text-align: left;
position: relative;
}
.circle {
width: 140px;
height: 140px;
-webkit-border-radius: 140px;
-moz-border-radius: 140px;
border-radius: 140px;
background: green;
}
.purple{
background:purple;
position: absolute;
border-radius: 100%;
left:400px;
top:3px;
}
.titelKleur{
color:rgb(51,180,231);
vertical-align: top;
top: 1px;
/*position:absolute;*/
}
.textKleur{
color:rgb(139,139,139);
font-size:16;
}
<button id=button1 value="0" class="Buttons">
<div id="circle" class="circle"></div>
<h1 class="titelKleur">Secure</h1><br>
<h4 class="textKleur">Security is importantSecurity is importantSecurity is important</h4>
</button><br>
<button id=button6 value="5" class="Buttons">
<h1 class="titelKleur">Fast</h1><br>
<h4 class="textKleur">Speed is importantSpeed is importantSpeed is important</h4>
<div id="circle" class="circle purple"></div>
</button>
This is basically what I like to achieve:
Rough paint drawing
The slots should have an equal width and the text should be centered vertically.
I later want to change the text by hover using jQuery, but that will be later on :p
Thanks in advance!
Koen
I have used display: flex on the button to properly align the items.
It wasn't clear from your question what should be done with titles. I have set them on the upper center.
.Buttons {
border-style: dotted;
border-radius: 150px;
width: 300x;
height: 150px;
margin: 20px;
background-color: transparent;
text-align: left;
position: relative;
display: flex;
}
.circle {
width: 140px;
height: 140px;
border-radius: 140px;
background: green;
align-self: center;
flex-shrink: 0;
}
.purple {
background: purple;
}
.titelKleur {
color: rgb(51, 180, 231);
top: 0px;
left: 50%;
transform: translateX(-50%);
position: absolute;
}
.textKleur {
color: rgb(139, 139, 139);
font-size: 16;
align-self: center;
padding: 5px;
}
<button id=button1 value="0" class="Buttons">
<div class="circle"></div>
<h1 class="titelKleur">Secure</h1><br>
<h4 class="textKleur">Security is importantSecurity is importantSecurity is important</h4>
</button><br>
<button id=button6 value="5" class="Buttons">
<h1 class="titelKleur">Fast</h1><br>
<h4 class="textKleur">Speed is importantSpeed is importantSpeed is important</h4>
<div class="circle purple"></div>
</button>
Related
I have 4 Html inputs, in each line two. My problem is now: I can´t change the position of all of these inputs. The Css part looks so:
.calculator-menu-container {
background-color: #1b1b23;
width: 725px;
height: 150px;
border: #fff solid 2px;
border-radius: 10px;
position: absolute;
top: 25%;
margin: 10px;
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 75px 75px;
gap: 0px 225px;
justify-content: flex-start;
align-items: flex-start;
}
.mint-price-input > input {
border: #fff solid 2px;
background-color: #1b1b23;
width: 250px;
height: 30px;
position: absolute;
top: 10;
margin: 10px;
border-radius: 5px;
color: #fff;
}
.quantity-input > input {
border: #fff solid 2px;
background-color: #1b1b23;
width: 250px;
height: 30px;
margin: 10px;
border-radius: 5px;
color: #fff;
}
.gas-limit-input > input {
border: #fff solid 2px;
background-color: #1b1b23;
width: 250px;
height: 30px;
margin: 10px;
border-radius: 5px;
color: #fff;
}
.custom-interval-input > input {
border: #fff solid 2px;
background-color: #1b1b23;
width: 250px;
height: 30px;
margin: 10px;
border-radius: 5px;
color: #fff;
}
This is the Html part for the inputs:
<div class="calculator-menu">
<div class="calculator-menu-container">
<div class="mint-price-input">
<h2>Mint Price</h2>
<input type="text" placeholder="Eth">
</div>
<div class="quantity-input">
<h2>Quantity</h2>
<input type="text" placeholder="Units of Tokens">
</div>
<div class="gas-limit-input">
<h2>Gas Limit</h2>
<input type="text" placeholder="Units of Gas">
</div>
<div class="custom-interval-input">
<h2>Custom Interval</h2>
<input type="text">
</div>
</div>
</div>
And my output looks so:
I don´t know now how can I move these 4 inputs more at the top from the container with the white border. What can I do? Have anyone an idea?
I searched already in the internet and tryed much things like "position" and much more. But anything wouldn´t worked.
You need to remove the postion:absolute; , top: , bottom: CSS properties.
As you have mentioned you need to display 4 input boxes in 2 rows containing 2 each, so you need to club them in separate <div> tags along with their respective headings.
You need to change the height of the <div> tag that contains all the other tags within it. (I would suggest using relative CSS units like 'em' or 'rem' which will help in scalability.)
I have attached my version of code with some changes. You can refer to it.
body {
background-color: #1b1b23;
}
.calculator-menu-container {
background-color: #1b1b23;
width: 40rem;
height: 20rem;
border: #fff solid 2px;
border-radius: 10px;
margin: 10px;
display: grid;
grid-template-columns: repeat(2,1fr) ;
gap: 5rem;
color: #fff;
}
.calculator-menu-container h2 {
display: flex;
padding: 10px;
}
.calculator-menu-container input {
border: #fff solid 2px;
background-color: #1b1b23;
width: 250px;
height: 30px;
margin: 10px;
border-radius: 5px;
color: #fff;
}
<body>
<div class="calculator-menu">
<div class="calculator-menu-container">
<div>
<div class="mint-price-input">
<h2>Mint Price</h2>
<input type="text" placeholder="Eth">
</div>
<div class="quantity-input">
<h2>Quantity</h2>
<input type="text" placeholder="Units of Tokens">
</div>
</div>
<div>
<div class="gas-limit-input">
<h2>Gas Limit</h2>
<input type="text" placeholder="Units of Gas">
</div>
<div class="custom-interval-input">
<h2>Custom Interval</h2>
<input type="text">
</div>
</div>
</div>
</div>
</body>
remove position: absolute and top bottom ... properties then use margin-top and margin-bottom to move vertically
I am really new in web development. So I really need some guides, tips and tricks on how to do coding. So here's the details...
After I fill up my Yes and No checkboxes forms on each steps of a multi form steps, I want to have a grade on each steps. for example Leadership Development has a 12 Yes and 8 No and the system will calculate it's percentage from
(This is the pie chart) & (This is the accordion)
0 to 49% Your leadership skills will need to be improved for your business to at least
survive.
50% to 70% You have middling leadership skills that could probably be sufficient for your
business to survive.
70% to 100% You have very good leadership skills to help your organization grow.
How to show it's pie chart with percentage inside of it and beside the pie is an accordion which will also give details from the ratings.
Please I really need help on this one.
Here's the progress bar I made for an example
<style>
#output .accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
font-size: 35px;
margin-top: 152px;
}
#output .active, .accordion:hover {
background-color: #ccc;
}
#output .panel {
padding: 0 18px;
background-color: #abaaaa;
max-height: 0;
color: black;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#output .accordion:after {
content: '\002B';
color: #d02a3e;
font-weight: bold;
float: right;
margin-left: 5px;
}
#output .active:after {
content: "\2212";
}
.progress-pie-chart {
width: 128px;
height: 128px;
border-radius: 50%;
background-color: #ececec;
position: relative;
}
.progress-pie-chart.gt-50 {
background-color: orange;
}
.progress-pie-chart.red .ppc-progress-fill {
background: red;
}
.progress-pie-chart.red span {
color: red;
}
.progress-pie-chart.orange .ppc-progress-fill {
background: orange;
}
.progress-pie-chart.orange span {
color: orange;
}
.progress-pie-chart.green.gt-50,
.progress-pie-chart.green .ppc-progress-fill {
background: green;
}
.progress-pie-chart.green span {
color: green;
}
.ppc-progress {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 128px, 128px, 64px);
}
.ppc-progress .ppc-progress-fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 64px, 128px, 0);
transform: rotate(60deg);
}
.gt-50 .ppc-progress {
clip: rect(0, 64px, 128px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
clip: rect(0, 128px, 128px, 64px);
background: #E5E5E5;
}
.ppc-percents {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 111.30435px/2);
top: calc(50% - 111.30435px/2);
width: 111.30435px;
height: 111.30435px;
background: #fff;
text-align: center;
display: table;
}
.ppc-percents span {
display: block;
font-size: 18px;
}
.ppc-percents span cite {
font-size: 35px;
}
.pcc-percents-wrapper {
display: table-cell;
vertical-align: middle;
}
.progress-pie-chart {
margin: 0 auto 0;
margin-top: 115px;
}
</style>
<div class="row">
<div class="col-lg-6">
<div class="progress-pie-chart" data-percent="24">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
<div class="progress-pie-chart" data-percent="60">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
<div class="progress-pie-chart" data-percent="95">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
</div>
<div class="col-lg-6 pt-4 pt-lg-0 align-items-stretch">
<button class="accordion">Leadership Development System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Marketing System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Financial System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
I'm having trouble with positioning of my design. The idea was to create a circle flow with a text-box on hover in the middle. I've made it works on my website but whenever I decrease the screen resolution, it's messed up. I'm new with css, and wondering if there's any simple way to create this design?
.circle {
width: 170px;
height: 170px;
border-radius: 85px;
background: rgba(76, 175, 80, 0.1);
border-style: solid;
border-color: #00fcff;
}
.hoverWrapper1:hover #hoverShow1 {
display: block;
}
.hoverWrapper1 #hoverShow1 {
display: none;
}
.hoverWrapper2:hover #hoverShow2 {
display: block;
}
.hoverWrapper2 #hoverShow2 {
display: none;
}
.hoverWrapper3:hover #hoverShow3 {
display: block;
}
.hoverWrapper3 #hoverShow3 {
display: none;
}
.hoverWrapper4:hover #hoverShow4 {
display: block;
}
.hoverWrapper4 #hoverShow4 {
display: none;
}
.hoverWrapper5:hover #hoverShow5 {
display: block;
}
.hoverWrapper5 #hoverShow5 {
display: none;
}
.hoverWrapper6:hover #hoverShow6 {
display: block;
}
.hoverWrapper6 #hoverShow6 {
display: none;
}
.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #00fcff;
}
.absolute {
position: absolute;
top: 29%;
width: 400px;
height: 300px;
right: 50%;
border: 1px solid #00fcff;
padding: 7px;
font-size: 80%;
background: rgba(76, 175, 80, 0.1);
}
<div class="hoverWrapper1">
<button class="circle" style="position:absolute; top: 3%; right: 63%; color:#00fcff; font-size: 120%;">Strategy</button>
<div id="hoverShow1" class="absolute" style="color: white;">Even strategy is no longer what it used to be. We all live in a VUCA World. (volatile, uncertain, complex and ambiguous) and the 20th Century style business plans will be obsolete before implementation begins. We will help you prepare, act and respond to this new order – we can even fast track your team’s learning just when they need it.<</div></div>
<div class="hoverWrapper2">
<button class="circle" style="position:absolute; top: 27%;right: 30%; color:#00fcff;font-size: 120%;">Employees</button>
<div id="hoverShow2" class="absolute">block B</div></div>
<div class="hoverWrapper3">
<button class="circle" style="position:absolute; top:27%;right: 95%; color:#00fcff;font-size: 120%;">Customers</button>
<div id="hoverShow3" class="absolute">block C</div></div>
<div class="hoverWrapper4">
<button class="circle" style="position:absolute; top: 55%;right: 30%; color:#00fcff;font-size: 120%;">Business Model</button>
<div id="hoverShow4" class="absolute">block D</div></div>
<div class="hoverWrapper5">
<button class="circle" style="position:absolute; top: 55%;right: 95%; color:#00fcff;font-size: 120%;">Markets</button>
<div id="hoverShow5" class="absolute">block E</div></div>
<div class="hoverWrapper6">
<button class="circle" style="position:absolute; top: 75%;right: 63%; color:#00fcff;font-size: 120%;">Change</button>
<div id="hoverShow6" class="absolute">block F</div></div>
https://jsfiddle.net/luxs_/axshfe1z/3/
How can I make a div in to an irregular shape? I am trying to create a navigation bar that contains the logo in the center of the circular shape of this div. Here is what I am trying to make:
I really don't know where to start since I have never had to make any divs that aren't rectangular. The left of the div will contain 2 menu items, the right will contain 3 menu items and the center will contain my circular logo.
You will need to play with exact height and size, but this is a possible take on your problem
.menu {
background: darkgray;
padding: 1rem 0;
margin: 5rem;
text-align: center
}
.menu::after {
content: '';
background: darkgray;
border-radius: 50%;
padding: 5rem;
}
<nav class="menu"></nav>
You can try it with flexbox... I don't know, perhaps you have to build a little bit on it...but it's possible
.nav {
width: 100%;
height: 35px;
display: flex;
justify-content: center;
background-color: grey;
margin-top: 100px;
}
.logoContent {
height: 130px;
width: 130px;
border-radius: 130px;
background-color: grey;
margin-top: -50px;
}
<div class="nav">
<div class="logoContent"></div>
</div>
try this
html
<div id="rect">
<div id="cir">
</div>
</div>
css
#rect {
width: 500px;
height: 50px;
background: green;
margin: 100px;
}
#cir {
width:150px;
height: 150px;
background: green;
border-radius: 100%;
margin: 0 auto;
position: relative;
top: -50px;
}
see this https://jsfiddle.net/9rtoqpjc/
If you just trying for shape, then you can use gradients.
div{
width: 400px;
height: 100px;
color: #333;
background-image: radial-gradient(circle, currentColor 50px, transparent 0),
linear-gradient(transparent 30%, currentColor 30%, currentColor 70%, transparent 60%);
}
<div></div>
Working Fiddle
You should first of all get in confidence width css properties of div.
I suggest you to look here: w3schools.com
Anyway this is an example of code on what you can start working:
div{
background-color: gray;
}
#rectangle{
margin-top: 100px;
width: 500px;
height: 40px;
}
#circle{
position: relative;
width: 200px; /* radiant*2 */
height: 200px; /* radiant*2 */
border-radius: 50%;
left: 150px; /* rectangle_width/2 - radiant */
top: -80px; /* rectangle_height/2 - radiant */
}
#logo{
position: relative;
top: 36px; /* radiant - img_heigth/2 */
left: 36px; /* radiant - img_width/2 */
}
<div id="rectangle">
<div id="circle">
<img id="logo" src="http://findicons.com/files/icons/1070/software/128/mozilla_firefox.png" /> <!-- 128*128 -->
</div>
</div>
try this
html
<div class="header-area">
<div class="header-main">
<div class="menu-left">
<ul>
<li class="menu-1">Menu 1</li>
<li class="menu-2">Menu 2</li>
</ul>
</div>
<div class="logo">
<img src="#" />
</div>
<div class="menu-right">
<ul>
<li class="menu-1">Menu 1</li>
<li class="menu-2">Menu 2</li>
<li class="menu-3">Menu 3</li>
</ul>
</div>
</div>
</div>
css
.header-area {
width: 100%;
margin: 34px 0px;
}
.header-main {
width: 100%;
height: 60px;
position: relative;
background-color: #272727;
}
.menu-left {
width: 40%;
float: left;
}
.logo img {
width: 100%;
position: relative;
top: 38px;
vertical-align: middle;
}
.header-main ul li {
display: inline-block;
padding: 5px;
text-align: center;
}
.header-main ul li a {
color: #fff;
}
.logo {
position: relative;
width: 110px;
height: 110px;
border-radius: 50%;
background-color: #272727;
color: #fff;
margin-left: auto;
margin-right: auto;
top: -27px;
float: left;
}
.menu-right {
width: 40%;
float: left;
}
see this https://jsfiddle.net/onn3b9z7/
You can try and use border-radius: 70% in your css file on a rectangular div and see if that works.
I have two DIVs (previous-image and next-image) that are absolutely positioned. Here is my structure:
<div id="sheet" onclick="close()">
<div id="popover">
<div id="previous-image" onclick="previous()">«</div>
<img src="http://cynthiawoodyardlandscapedesign.com/watermark.php?src=images/main1.jpg&x=0&y=470&opacity=50" id="popover-image" />
<div id="next-image" onclick="next()">»</div>
</div>
</div>
Link: http://cynthiawoodyardlandscapedesign.com/
Here is my CSS:
#next-image {
position: absolute;
right: -100px;
top: 250px;
text-align: center;
line-height: 50px;
font-size: 50px;
-webkit-text-stroke: 1px black;
-moz-text-stroke: 1px black;
height: 50px;
width: 50px;
z-index: 200;
background: transparent;
color: white;
}
#previous-image {
position: absolute;
left: -100px;
top: 250px;
text-align: center;
line-height: 50px;
z-index: 200;
font-size: 50px;
-webkit-text-stroke: 1px black;
-moz-text-stroke: 1px black;
height: 50px;
width: 50px;
background: transparent;
color: white;
}
My JavaScript:
$("#sheet").click(function() {
$("#sheet").animate({
opacity: 0
}, 200, function() {
$("#sheet").hide();
});
});
Edit
Seems you had omitted the actual HTML of your #sheet element, which has a display: none set on the element, and therefore all is invisible inside the sheet element, including the arrows.
Your actual HTML on your site is:
<div id="sheet" onclick="close()" style="display: none;">
<div id="popover" onclick="close()">
<div id="previous-image" onclick="previous()">«</div>
<img src="watermark.php?src=images/main1.jpg&x=0&y=420&opactity=50"
id="popover-image" onclick="close()">
<div id="next-image" onclick="next()">»</div>
</div>
</div>
Removing that style="display: none;" will show the arrows again.