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/
Related
I've been trying to add two div containers into another one. One floating on the left and the other one on to the right side of the main container. The problem is, if I add float:left on the first div, it's no longer contained in the main container.
Before adding float: https://imgur.com/a/OACA7Su
After adding it: https://imgur.com/a/ukeZoae
HTML:
<div class="container">
<div class="column1">
<div class="rowTop">
<p>Community</p>
</div>
<div class="row">
<div id="leftSide">
<h3><a>Disscusion</a></h3>
<p>→ Disscusions about various games like Warframe or HuntShowdown</p>
</div>
<div id="rightSide">
0:Threds
</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="column2">
</div>
</div>
CSS:
.container{
margin:30px;
}
.column1{
width:70%;
float:left;
}
.column2{
width:15%;
float:right;
padding:2px;
}
.rowTop{
background-color: rgb(0, 51, 0);
border:1px solid white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
width:10%;
text-align: center;
text-shadow: black 1px 1px;
color:white;
}
.row{
background-color: black;
border:1px solid white;
color:white;
display: block;
padding:0;
}
.row #leftSide{
color:white;
float: left;
margin-right: 0;
width: 55%;
}
Thanks in advance for the help.
Please don't give me any hate, I'm new to coding :3
You can use Flexbox for this. Check out the guide for your CSS. Just change the display to flex:
.row{
background-color: black;
border:1px solid white;
color:white;
display: flex;
flex-direction: row
padding:0;
}
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
I have 3 boxes that i am trying to line up..
.box {
width: 50px;
height: 50px;
background: #8C8C8C;
margin:0 auto;
border: solid 4px grey;
text-align: center;
display:block;
}
Display inlineblock is not working also it kills centering
HTML
<div class="box"(click)="boxnumber('1')" >
<p class="count1">{{item1count}}<p>
</div>
<br>
<div class="box" (click)="boxnumber('2')" >
<p class="count2">{{item2count}}<p>
</div>
<br>
<div class="box" (click)="boxnumber('3')" >
<p class="count3">{{item3count}}<p>
</div>
Also i am trying to display item1count,item2count,item3count numbers on right down corner of each box.count1 count2 css classes are empty now because i am not sure what to write in them.
boxes
Try adding css margin: 0px auto; to your .box to center them.
try this:
.box{
width:50px;
height: 50px;
border: 2px solid red;
margin: 15px auto;
display: table;
}
To display the number in the right corner you need to add vertical alignment, like so:
.box p{
vertical-align:bottom;
display: table-cell;
}
You can take a look at my plunkr here
Just remove br tag and replace display:block to inline-block
.box {
width: 50px;
height: 50px;
background: #8C8C8C;
margin:0 auto;
border: solid 4px grey;
text-align: center;
display:inline-block;
}
.boxes {
text-align: center;
}
<div class="boxes">
<div class="box"(click)="boxnumber('1')" >
<p class="count1">{{item1count}}<p>
</div>
<div class="box" (click)="boxnumber('2')" >
<p class="count2">{{item2count}}<p>
</div>
<div class="box" (click)="boxnumber('3')" >
<p class="count3">{{item3count}}<p>
</div>
</div>
Try this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box {
width: 50px;
height: 50px;
background: #8C8C8C;
float: left;
margin-right:10px;
border: solid 4px grey;
text-align: center;
}
.box-container{
width:204px; /* 50*3+(4*2)*3+10*3 */
margin:0 auto;
}
</style>
</head>
<body>
<div class="box-container">
<div class="box"(click)="boxnumber('1')" >
<p class="count1">{{item1count}}<p>
</div>
<div class="box" (click)="boxnumber('2')" >
<p class="count2">{{item2count}}<p>
</div>
<div class="box" (click)="boxnumber('3')" >
<p class="count3">{{item3count}}<p>
</div>
</div>
</body>
</html>
I want column 1 (comment 1) and column 2 (comment 2) to be next to each other and to be floated to the left side. Column 3 (comment 3) should be floated to the right side.
jsfiddle
I've tried a lot but can't make it work with %.
HTML:
<div class="comment_one">
<div class="reitings">
<div class="rate pluss"><img class="plus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC"> 83</div>
</div>
</div>
<div class="comment_two">
<div class="reitings">
<div class="rate minuss"><img class="minus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC"> 9</div>
</div>
</div>
<div class="comment_three">
<div class="reitings">
<div class="rate minuss"><img class="minus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC">Report</div>
</div>
</div>
CSS:
.comment_one {
width:25%;
float:left;
}
.comment_two {
width:25%;
float:left;
}
.comment_three {
float:right;
width:40%;
}
.reitings {
display:table;
width:50%;
border:1px solid #e9e9e9;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.rate {
display:table-cell;
text-align:center;
vertical-align:middle;
line-height:1.5em;
padding:10%;
}
.rate img {
vertical-align:middle
}
.pluss {
background:#f5f5f5;
color:#4d761a
}
.minuss {
background:#f5f5f5;
color:#a8404b;
border-left:1px solid #e9e9e9;
text-align:center
}
Structure the HTML:
<div id="comments">
<div class="c1 rate-plus"></div>
<div class="c2 rate-plus"></div>
<div class="c3 rate-minus"></div>
</div>
Access all divs in #comments with #comments div. Think about what the divs have in common. Write it in the CSS. For Example:
#comments div {
background: #f5f5f5;
border-left: 1px solid #e9e9e9;
padding: 12px;
margin: 5px;
text-align: center;
}
Float c1 and c2 with left and c3 with right.
Complete CSS
#comments div {
background: #f5f5f5;
border-left: 1px solid #e9e9e9;
padding: 12px;
margin: 5px;
text-align: center;
}
.rate-plus {
color: #4d761a
}
.rate-minus {
color: #a8404b;
}
.c1, .c2 {
width: 25%;
float: left;
}
.c3 {
width: 37%;
float: right;
}
Complete HTML
<div id="comments">
<div class="c1 rate-plus">
<img class="plus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC">83
</div>
<div class="c2 rate-minus">
<img class="minus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC">9
</div>
<div class="c3 rate-minus">
<img class="minus" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAIAQMAAAD3KoyyAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAtJREFUeNpjYMAOAAAYAAFG27MLAAAAAElFTkSuQmCC">Report
</div>
</div>
I've modified it a little bit.
Demo
HTML
<div class="right-details">
<div class="right-details-row">
<b>Left title</b>
</div>
<div class="right-details-row">
<div class="right-details-row-l">K</div>
<div class="right-details-row-r">Laass</div>
</div>
</div>
<div class="details-divider"></div>
<div class="left-details">
<div class="left-details-row">
<b>Right Title</b>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 1</div>
<div class="left-details-row-r">Chosen 1</div>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 2</div>
<div class="left-details-row-r">Chosen 2</div>
</div>
<div class="left-details-row">
<div class="left-details-row-l">Option 2</div>
<div class="left-details-row-r">Chosen 2</div>
</div>
</div>
CSS
.left-details{
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:237px;
}
.details-divider{
width:20px;
display:table-cell;
}
.right-details{
margin-left: 20px;
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:350px;
}
.left-details-row{
width: 232px;
float:left;
margin: 0 0 5px 4px;
}
.left-details-row-l{
width:110px;
float:left;
overflow:hidden;
}
.left-details-row-r{
width:122px;
float:left;
overflow:hidden;
}
.right-details-row{
width: 345px;
float:left;
margin: 0 0 5px 4px;
}
.right-details-row-l{
width: 35px;
float:left;
margin: 0 0 2px 4px;
}
.right-details-row-r{
width: 296px;
float:left;
overflow:hidden;
}
As you see in jsfiddle , in the left Div text is in the bottom, How to shift it to the top?
Add vertical-align:top to your .right-details rule:
.right-details {
margin-left: 20px;
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:350px;
vertical-align:top;
}
jFiddle example
add
vertical-align: top;
to .right-details
.left-details{
display:table-cell;
border: 1px solid #000000;
border-radius: 4px;
width:237px;
vertical-align: top;
}
note the last property
http://jsfiddle.net/V5JtR/1/