I am VERY new to working with HTML and CSS; looking to craft four colored circles with some text inside their borders which will link to a website. Currently using the following:
<div id="first" class="circle"></div>
<button onclick="href="https://taikoinitiative.com>Test One</button>
<div id="second" class="circle"></div>
<button onclick="href="https://taikoinitiative.com>Test Two</button>
<div id="third" class="circle"></div>
<button onclick="href="https://taikoinitiative.com>Test Three</button>
<div id="fourth" class="circle"></div>
<button onclick="href="https://taikoinitiative.com>Test Four</button>
With the following CSS:
.circle{
position:absolute;
width:150px;
height: 150px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity:0.3;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
}
#second{position:relative; left:120px; top:2px;
background: orange;
}
#first {
background: blue;
}
#third {
position: relative;
top: -40px;
left: 0px;
background: red;
}
#fourth {
position: relative;
top: -190px;
left: 120px;
background: green;
}
}
#problem{
font-size: 8pt;
color:white;
position: absolute;
width: 75px;
height: 75px;
border-left:2px solid red;
border-top:2px solid red;
top : 41px;
left:71px;
z-index:-4;
background:red;
}
#problem:after{
position:absolute;
content:" ";
background:white;
width:150px;
height:150px;
top:-2px;
left: -2px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index:-3;
}
I am having trouble getting the text links to conform to the interior of the circles. Any pointers would be greatly appreciated!
The best thing to do would be to convert your divs into anchor tags. So it would look something like this:
<a id="first" href="https://taikoinitiative.com" class="circle"></a>
Which would then give you a circle that, when clicked, will take you to the link provided
All the <button> elements should go inside their respective <div> elements. Try this html code.
<div id="first" class="circle">
<button onclick="href="https://taikoinitiative.com>Test One</button>
</div>
<div id="second" class="circle">
<button onclick="href="https://taikoinitiative.com>Test Two</button>
</div>
<div id="third" class="circle">
<button onclick="href="https://taikoinitiative.com>Test Three</button>
</div>
<div id="fourth" class="circle">
<button onclick="href="https://taikoinitiative.com>Test Four</button>
</div>
And set position of all the selectors #first, #second, #third and #fourth to absolute instead of relative.
#first {position: absolute;}
and same for others.
Use this syntax it works:
<html>
<body>
Button Name
Button Name
Button Name
Button Name
</body>
<html>
From what I can understand you are trying to place 4 circles that will link to some pages. For linking pages we use the anchor <a> tag with href attribute. Putting <a> tags inside <div> tags helps in styling and removes the need for absolute positioning.
You can convert your code as follows:-
<div id="first" class="circle">
Test One
</div>
<div id="second" class="circle">
Test Two
</div>
<div id="third" class="circle">
Test Three
</div>
<div id="fourth" class="circle">
Test Four
</div>
CSS :-
a, a:visited, a:link{
text-decoration: none;
color: white;
}
.circle{
padding: 1rem;
width: max-content;
border-radius: 50%;
border: solid thin #ccc;
}
#first{
background-color: blue;
}
#second{
background-color: red;
}
#third{
background-color: orange;
}
#fourth{
background-color: green;
}
Output:-
JS Fiddle output
Related
I wish to set multiple buttons to equal width in a container. I also wish to get the button to resize when it is in landscape mode or wider screen. How am I able to achieve that?
What I am trying to achieve is as follow
But what I get when I switch it back to Potrait
The code is in JSFiddle JSFiddle Code
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
.card{
border:0px solid;
position:relative;
height:200px;
background:url("https://preview.ibb.co/kJvJ5e/1847p.png") no-repeat top center;
background-size:cover;
}
.card img {
width:100%;
}
.search-box {
position : absolute;
display:inline-block;
bottom:-30px;
left:0;
right:0;
padding:15px;
text-align:center;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius:0px;
}
.container-fluid{
width:auto
}
.container-fluid.drop-shadow {
margin-top:2%;
margin-left:5%;
margin-right:5%
}
#child{
width:100%;
height: 20px;
margin: auto;
text-align: center;
margin-top: 40px;
}
.form-group {
width:100%;
margin-bottom:10px;
}
.btn-checkin{
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
.icon-addon {
position:relative;
}
.icon-addon label {
position: absolute;
left: 2px;
top: 2px;
padding: 8px;
font-size: 20px;
}
.icon-addon input {
height:40px;
padding-left:35px;
}
.currentposition{
position: -webkit-sticky;
position: sticky;
right:20px
}
.wrap {
width: 100%;
height: 50px;
padding-top: 10px;
padding-bottom:10px;
text-align: center;
}
button{
margin-left: 15px;
display: inline-block;
text-align: center;
white-space: nowrap;
color: #000000;
border-color: #B9E5fB;
text-transform: uppercase;
background-color: #B9E5fB;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 10px 10px;
font-size: 13px;
border-radius: 10px;
width:20%;
}
button:first-child{
margin-left: 0;
}
<body id="page-top" style="font-family:Arial">
<div class="card" >
<div class="search-box">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search classes" class="form-control" id="searchBar">
<label for="searchBar" class="glyphicon glyphicon-search" rel="tooltip" title="searchBar"></label>
</div>
</div>
<button class="btn-checkin" style="font-family:Arial">Check in</button>
</div>
</div>
<div id="child">
<div class="container-fluid">
<img src="img/location.png" class="pull-left" style="width:25px;height:20px;padding-left:10px" />
<p class="pull-left" style="padding-left:10px;font-family:Arial">Current Location <b>Sri Petaling</b></p>
</div>
<div class="container-fluid drop-shadow">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="img/7557.jpg" style="width:104px;height:64px;padding:10px 10px 10px 5px" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h5 class="media-left" style="padding-top:12px;color:#B9E5fB;font-family:Arial" >PERSONAL TRAINING</h5>
<p class="pull-left" style="font-size:12px;font-family:Arial;padding-top:3px">Strike Academy Fitness</p>
</div>
</div>
</div>
<div class="container-fluid drop-shadow" style="margin-top:20px">
<div class="container">
<p class="pull-left" style="font-size:12px;font-family:Arial;padding-top:3px">Plan your time</p>
</div>
<div class="wrap">
<button>All</button>
<button >Morning</button>
<button >Afternoon</button>
</div>
<div class="wrap">
<button>Evening</button>
<button>Tomorrow</button>
<button>This Week</button>
</div>
</div>
</div>
</body>
Results still not working? Please help
You can use bootstrap grid to achieve your goal. Wrap your buttons inside bootstrap columns as below. This creates columns of equal width and your buttons reside within each columns.
<div class="row">
<div class="col"> <button class="mybtn"> All </button> </div>
<div class="col"> <button class="mybtn">Morning</button> </div>
<div class="col"> <button class="mybtn">Afternoon</button> </div>
</div>
You can add spacing between your buttons by providing a margin:
.mybtn
{
margin:0 5px;
}
Read more Here
Use col-md-4 for medium size devices, col-sm-4 for small devices, col-xs-4 for extra small devices.
Try this link.
http://jsfiddle.net/my5hdu6k/7/
To settle the button the way you want, you need to limit the width of them not exceeding 33.33% of total width in any screen size.For that, you need to use parent row div and wrap each button inside col div as shown in the code below.
<div class="wrap">
<div class="row">
<div class="col">
<button>Button 1</button>
</div>
<div class="col">
<button>Button 2</button>
</div>
<div class="col">
<button>Button 3</button>
</div>
</div>
Then, you have to trick the text to be ellipsis to safe guard the exceeding text for the smaller screen ( this may not be require for your this instance but it is good practice to plan for worst ). Look closely to the changes I made for the .button class in CSS.
.wrap {
width: 250px;
height: 50px;
padding: 25px;
text-align: center;
display: inline-block;
width:100%;
}
.col{padding:0 5px;display:inline-block;width:33.33%;}
.row{margin:0 -5px;} /* Customized the .row class of bootstrap */
button{
margin:5px 0; /* to undo your older style */
width:100%;
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
}
button:first-child{
margin:5px 0; /* to undo your older style */
}
Please check the provided jsfiddle
I know it is dumb question, but i am struggling with following problem
It is one of my menu buttons. I want div the represents icon (marked red with circle) be on the left side of the button and the text on the right (name (blue) above description (purple)). By the way, i am going to have plenty of those buttons and i want them appear in column (block).
My current problem is that icon div (red) and text div (green dashed) wont place inline.
My HTML is:
<style>
.HomeMenuNavbarButton {
text-decoration: none;
color : black;
border-style:outset;
border-width:4px;
border-radius:15px;
display:block;
padding:4px;
}
.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border-color: black;
border-style: dashed;
display: inline-block;
vertical-align: top;
}
</style>
<div class="container">
<div class="row">
#foreach (var node in Model.Nodes)
{
if (!(node.IsRootNode) && node.Children.Any())
{
<div class="col-md-4">
<button type="button" style="display:inline;" class="btn btn-info" data-toggle="collapse" data-target="#("#relatedNavList" + node.Title) ">#node.Title</button>
<div id="#("relatedNavList" + node.Title)" class="collapse">
#foreach (var child in node.Children)
{
<div class="HomeMenuNavbarButton" style="display:block;">
<div style="background-color:red;display:inline">
<div class="circle">
</div>
</div>
<div style="border-color: green; border-style: dashed; display:inline-block">
<div style="background-color:blue">#(child.Title)</div>
<div style="background-color:purple">#(child.Description)</div>
</div>
</div>
}
</div>
</div>
}
}
</div>
</div>
When you want to display stuff side by side in CSS, the easiest way is to use flexbox. Try to add display : flex; to your HomeMenuNavBar class.
Here is a complete document about flexbox from the Mozilla team.
Using a wrapper defined as a flexbox
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 150px;
}
.circle {
height: 25px;
width: 25px;
border: medium dashed darkgray;
border-radius: 50%;
}
button {
background: dodgerblue;
color: white;
border-radius: 3px;
border: thin solid lightblue;
padding: 0.5em;
}
<div class="wrapper">
<button>Button</button>
<div class="circle"></div>
<span>Text</span>
</div>
You can do that just with display:inline-block on your button's elements
.elementButton
{
display:inline-block;
}
.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
border-color: black;
border-style: dashed;
display: inline-block;
vertical-align: top;
}
.HomeMenuNavbarButton
{
display:block;
margin:5px;
}
<div class="HomeMenuNavbarButton">
<div class="circle elementButton">
</div>
<div class="elementButton">
<div>Title one</div>
<div>Content</div>
</div>
</div>
<div class="HomeMenuNavbarButton">
<div class="circle elementButton">
</div>
<div class="elementButton">
<div >Title two</div>
<div>Content</div>
</div>
</div>
I want to create a custom audio player, with basically:
a button for playing
a flexible bar, i.e., that adapts itself to the player width
a group of button at the right of the player, namely for the download button etc
For the two first parts I have no problem (see the fiddle), but it's for the second button group I have troubles.
I tried to put the group with float:right, but in this case it is kicked out from the player. Then I tried to put the flexible bar with a floating property, but in this case I have to specify its width and it becomes no more flexible.
Here is a sample image of what I want to achieve:
Here is what I have so far:
HTML:
<div class="player" style="width:500px">
<div class="group">
<a class="button" href="#"></a>
</div>
<div class="flexible">
<div class="bar"></div>
</div>
<div class="clear"></div>
</div>
CSS:
.player
{
height:24px;
background-color: #222222;
}
.player .group
{
float:left;
}
.player .group .button,
.player .group2 .button
{
display: inline-block;
width:24px;
height:24px;
background-color:#444444;
}
.player .group2
{
float:right;
}
.player .flexible
{
box-sizing:border-box;
overflow:hidden;
}
.player .flexible .bar
{
margin : 8px;
height : 8px;
background-color:#225599;
}
JSFiddle:
https://jsfiddle.net/grh7sahq/3/
Do you have any advice ?
Thanks
I understood you wanted the central part to be flexible. You can use display: flex. Really basic CSS to show it:
.player{
background: black;
height: 100px;
display: flex;
}
.button{
background: blue;
height: 100px;
width: 24px;
display: block;
}
.flexible{
flex: 1;
}
<div class="player" style="width:500px">
<div class="group">
<a class="button" href="#"></a>
</div>
<div class="flexible">
<div class="bar"></div>
</div>
<div class="group2">
<a class="button" href="#"></a>
</div>
</div>
<br/>
<div class="player" style="width:150px">
<div class="group">
<a class="button" href="#"></a>
</div>
<div class="flexible">
<div class="bar"></div>
</div>
<div class="group2">
<a class="button" href="#"></a>
</div>
</div>
change this css class to use inline style...
.player .group .button,
.player .group2 .button
{
display: inline;
width:24px;
height:24px;
background-color:#444444;
}
DEMO
It is actually pretty simple with flex box
<div class="player">
<div class="button"></div>
<div class="seek">
<div></div>
</div>
<div class="button"></div>
<div class="button"></div>
</div>
CSS
.player{
height: 35px;
background-color: #555;
display: flex;
}
.player>.button{
width: 35px;
}
.player>.seek{
padding: 10px;
flex-grow: 1;
}
.player>.seek>div{
background-color: #0af;
height: 100%;
}
I am trying to create inline flow arrows similar to the attached image:
I have managed to create something using css, however what I need is for each arrow to contain text and everything falls apart when you try and add text into the center div, and I can't help thinking that there must be an easier way to achieve this.
https://jsfiddle.net/ez8632f4/
<div style="display:inline-block">
<div id="zz" class="arrow-left"></div>
<div id="zz" class="arrow-ctr"></div>
<div id="zz" class="arrow-right"></div>
</div>
<div style="display:inline-block;position:relative;left:-30px">
<div id="zz" class="arrow-left"></div>
<div id="zz" class="arrow-ctr"></div>
<div id="zz" class="arrow-right"></div>
</div>
.arrow-left {
display:inline-block;
width: 0;
height: 0;
border-top: 40px solid red;
border-bottom: 40px solid red;
border-left: 40px solid transparent;
}
.arrow-ctr {
display:inline-block;
width:150px;
background:red;
min-height:80px;
position:relative;
left: -4px;
}
.arrow-right {
display:inline-block;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid red;
position:relative;
left: -8px;
}
My intention is to eventually animate the arrows flying them in from the right.
You may add float: left to the elements:
CSS:
.arrow-container > div {
float: left;
}
HTML
<div style="display:inline-block;position:relative;left:-30px" class="arrow-container">
<div id="zz" class="arrow-left"></div>
<div id="zz" class="arrow-ctr">asdasdasdasd </div>
<div id="zz" class="arrow-right"></div>
</div>
You can change also .arrow-ctr to center the text like so:
.arrow-ctr {
display: inline-block;
width:150px;
background:red;
min-height:80px;
line-height: 80px;
position:relative;
text-align: center;
}
https://jsfiddle.net/9ay6L0bu/
I'm building the following (see image). Basically, I need 5 buttons with overlapping buttons (each with numbers) on the top. However, I'm unsure how to go about this?
One solution:
https://jsfiddle.net/ryd5e51n/
<div class="button">
<div class="button-top"><span class="text">1</span></div>
<div class="button-bottom"></div>
</div>
.button
{
display: table;
}
.button-top
{
background-color: black;
width: 36px;
height: 36px;
border-radius: 18px;
margin: auto;
position: relative;
z-index: 2;
box-shadow: 0px 0px 2px 2px #bbbbbb;
color: white;
text-align: center;
}
.text
{
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.button-bottom
{
background-color: #efefef;
width: 100px;
height: 90px;
margin-top: -15px;
position: relative;
z-index: 1;
border: 2px solid #bbbbbb;
border-radius: 20px;
}
You can do this with a single element:
HTML:
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
CSS:
div.button {
display:block;
float:left;
margin:18px 5px 0;
position:relative;
overflow:visible;
background:none #efefef;
width:100px;
height:100px;
border:2px solid #ccc;
border-radius:10px;
counter-increment: button;
}
div.button:before {
content:counter(button);
display:block;
padding:8px 14px;
background:none #000;
border:2px solid #ccc;
border-radius:100px;
color:#fff;
position:absolute;
left:50%;
top:-18px;
transform: translateX(-50%);
}
See fiddle: https://jsfiddle.net/jj2nk5f1/2/
Here it is.
.button {
float: left;
margin-left: 10px;
}
.number {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: black;
margin-left: 15px;
}
.block {
width: 50px;
height: 50px;
border: 1px solid black;
margin-top: -10px;
}
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>
<div class="button">
<div class="number"></div>
<div class="block"></div>
</div>