I'm trying to get some process flow arrow div's working. The idea is on the current process you would select someone to assign it to from a dropdown inside that current process and click a button to tell that person. That person will come in and on that process they'll see Accept or Reject buttons and then I'll open up the next process with a dropdown on who to assign again.
I'm having trouble just being able to get stuff to fit inside the process div. Things get all whacky. Ideally because they have "arrows" each process div would be a specific height that I set so it can handle the biggest height requirements inside (when buttons or dropdowns are inside).
I'm also not a huge fan of having to increase the left value by 30 pixels for each div arrow element. Any way to get this same look and feel without having to do that?
.arrow-container > div {
float: left;
}
.arrow-left-done {
display: inline-block;
width: 0;
height: 0;
border-top: 40px solid #d8ffcc;
border-bottom: 40px solid #d8ffcc;
border-left: 40px solid transparent;
}
.arrow-ctr-done {
display: inline-block;
width: 150px;
background: #d8ffcc;
min-height: 80px;
line-height: 80px;
position: relative;
text-align: center;
}
.arrow-right-done {
display: inline-block;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #d8ffcc;
position: relative;
}
.arrow-left-current {
display: inline-block;
width: 0;
height: 0;
border-top: 40px solid #99afff;
border-bottom: 40px solid #99afff;
border-left: 40px solid transparent;
}
.arrow-ctr-current {
display: inline-block;
width: 150px;
background: #99afff;
min-height: 80px;
line-height: 80px;
position: relative;
text-align: center;
}
.arrow-right-current {
display: inline-block;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #99afff;
position: relative;
}
.arrow-left {
display: inline-block;
width: 0;
height: 0;
border-top: 40px solid #EBEBEB;
border-bottom: 40px solid #EBEBEB;
border-left: 40px solid transparent;
}
.arrow-ctr {
display: inline-block;
width: 150px;
background: #EBEBEB;
min-height: 80px;
line-height: 80px;
position: relative;
text-align: center;
}
.arrow-right {
display: inline-block;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #EBEBEB;
position: relative;
}
<div style="display:inline-block;" class="arrow-container">
<div id="zz" class="arrow-ctr-done">
Changed/Tested
Batman
</div>
<div id="zz" class="arrow-right-done"></div>
</div>
<div style="display:inline-block;position:relative;left:-30px" class="arrow-container">
<div id="zz" class="arrow-left-current"></div>
<div id="zz" class="arrow-ctr-current">
Coding Standards
<select>
<option>John Smith</option>
<option>Jane Doe</option>
<option>Howdy Doody</option>
<option>Batman</option>
</select>
<button>Assign</button>
</div>
<div id="zz" class="arrow-right-current"></div>
</div>
<div style="display:inline-block;position:relative;left:-60px" class="arrow-container">
<div id="zz" class="arrow-left"></div>
<div id="zz" class="arrow-ctr">
Manager Approval
</div>
<div id="zz" class="arrow-right"></div>
</div>
<div style="display:inline-block;position:relative;left:-90px" class="arrow-container">
<div id="zz" class="arrow-left"></div>
<div id="zz" class="arrow-ctr">
Implementor
</div>
<div id="zz" class="arrow-right"></div>
</div>
<div style="display:inline-block;position:relative;left:-120px" class="arrow-container">
<div id="zz" class="arrow-left"></div>
<div id="zz" class="arrow-ctr">
Validator
</div>
<div id="zz" class="arrow-right"></div>
</div>
Related
Trying to have all flex boxes inside my flex containers scale equally.
If you try and reduce the viewport, the center flexbox will start to resize, but the outer ones do not. So you end up with a situation where you have a tiny image in the center with massive images on the sides.
I've only just started learning CSS, so I'm not entirely sure what I am doing so I appreciate any help.
Here are a few extra images that help illustrate the issue:
Before reducing viewport:
After:
So ideally I want the images on the outside to scale down alongside the image in the center.
.flexbox-container {
display: flex;
justify-content: center;
background-color: #808080;
}
.flexbox-inner {
width: 1280px;
height: 720px;
margin: 0px 32px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer {
width: 192px;
height: 1148px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer-inner {
width: 160px;
height: 558px;
margin: auto;
border: 3px solid #ffffff;
}
.flexbox-outer-inner-bottom {
margin-top: 26px;
}
<div class="flexbox-container">
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
<div class="flexbox-inner"></div>
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
</div>
Here is an example of how you could use relative length units, in this case percentages:
* {
box-sizing: border-box;
}
.flexbox-container {
display: flex;
justify-content: center;
background-color: #808080;
}
.flexbox-inner {
width: 60%;
height: 720px;
margin: 0px 32px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer {
width: 20%;
height: 1148px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer-inner {
width: 90%;
height: 558px;
margin: auto;
border: 3px solid #ffffff;
}
.flexbox-outer-inner-bottom {
margin-top: 26px;
}
<div class="flexbox-container">
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
<div class="flexbox-inner"></div>
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
</div>
I have two rectangles with a background effect. On their own, the hover function works well and translates the top div up and to the right, however I soon as I put this code into a flex container, the hover does not work anymore. Anybody know why? Heres the code without the flex container:
body {
padding: 100px;
margin: 0;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
z-index: -1;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
bottom: 8px;
left: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
<div class="box">
<div class="box2">
</div>
</div>
</body>
Add display: flex; to the body afterwards and the code wont work anymore.
Here is my try, I delete the z-index.
body {
padding: 100px;
margin: 0;
display: flex;
}
.box {
width: 200px;
height: 200px;
background-color: black;
border: solid 2px black;
border-radius: 15px;
display: inline-block;
}
.box2 {
position: relative;
width: 200px;
height: 200px;
left: 2px;
bottom: 5px;
background-color: white;
border: solid 2px black;
border-radius: 15px;
}
.box2:hover {
left: 8px;
bottom: 4px;
}
<body>
<div class="box">
<div class="box2">
</div>
</div>
</body>
Please check this image link :
http://postimg.org/image/4iooctxxt/
As you can see, I pointed out the 3 navigation breadcrumb.
How I am able to obtain this with CSS/CSS3 and HTML. How can this be done? If it's possible, how can it be done with a background image.
Try this HTML and CSS:
<html>
<head>
<style>
body
{
margin: auto;
}
#one, #two, #three
{
position: relative;
width: 200px;
height: 40px;
float: left;
background-color: #E6E6E6;
cursor: pointer;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
#one
{
border-left: 1px solid gray;
}
#one:after, #two:after, #three:after
{
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #E6E6E6;
left: 100%;
top: 0px;
content: "";
z-index: 1;
}
#one:hover, #two:hover, #three:hover
{
background-color: #4DB84D;
}
#one:hover:after, #two:hover:after, #three:hover:after
{
border-left: 10px solid #4DB84D;
}
#circle, #text
{
float: left;
}
#circle
{
position: relative;
background-color: white;
color: black;
border-radius: 50%;
width: 21px;
height: 21px;
left: 15px;
top: 50%;
margin-top: -12px;
text-align: center;
border: 1px solid gray;
}
#text
{
position: relative;
left: 20px;
top: 50%;
color: black;
margin-top: -11px;
}
#one:hover #circle, #two:hover #circle, #three:hover #circle
{
background-color: #009900;
color: white;
}
#one:hover #text, #two:hover #text, #three:hover #text
{
color: black;
}
#navigation
{
padding: 40px;
position: absolute;
text-align: center;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 10px black;
margin-left: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="navigation">
<div id="one">
<div id="circle">
<b>1</b>
</div>
<div id="text">
Connect with Facebook
</div>
</div>
<div id="two">
<div id="circle">
<b>2</b>
</div>
<div id="text">
Invite friends
</div>
</div>
<div id="three">
<div id="circle">
<b>3</b>
</div>
<div id="text">
Complete Profile
</div>
</div>
</div>
</body>
</html>
You can copy and paste this to see what happens in a new html document.
You can, of course, modify it to your needs.
EDIT: This is now a full template. To see, create a new html document, copy and paste the code, and open it.
include bootstrap file to your code. example:
<ol class="breadcrumb">
<li>Home</li>
<li>Library</li>
<li class="active">Data</li>
</ol>
it will create breadcrumb
Im having this:
http://jsfiddle.net/h2rsJ/2/
And i want it to be like this:
http://i53.tinypic.com/2u7rf48.png
So that all are vertical align with eachother, the "news" is in the middle and stars on the right and the 3 images on the left.
How can i do that? Help im stuck..
http://jsfiddle.net/h2rsJ/9/
I'd strongly recommend breaking all of the styling out of the html and putting it in the external style sheet.
I managed to do it this way. Change your CSS:
.iconFavorite{
background: url(http://www.penrithstar.com.au/images/icon_star.gif) no-repeat;
width: 16px;
height: 16px;
border: none;
display:inline-block;
}
#discoLEvents{
display: inline-block; width: 200px; border-left: 1px solid #666; border-right: 1px solid #666; text-align: center; height: 40px; }
p{
line-height: 40px; display: block; float: left; text-align: center; width: 200px; border-left: 1px solid #666; border-right: 1px solid #666; text-align: center;
}
img{
float: left;
}
#stars{
float: right; line-height: 40px;
}
And then your HTML too:
<div id="discoActions" style="border: 1px solid red;">
<img style="width: 40px; height: 40px;" src="http://media.dkbn.dk/Storage/Discos/7829f6d8-a9ee-4e6d-bdf8-e225d91be8f8/Banners/633861096606933426.jpg">
<img style="width: 40px; height: 40px;" src="http://media.dkbn.dk/Storage/Discos/7829f6d8-a9ee-4e6d-bdf8-e225d91be8f8/Banners/633861096606933426.jpg">
<img style="width: 40px; height: 40px;" src="http://media.dkbn.dk/Storage/Discos/7829f6d8-a9ee-4e6d-bdf8-e225d91be8f8/Banners/633861096606933426.jpg">
<p>NEWS</p>
<div id="stars">
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>
</div>
</div>
http://www.jsfiddle.net/Zn4BH/1/
HTML:
<div id="divOutput">
<h1>Output</h1>
<div id="divButtons">
<button>One</button>
<button>Two</button>
</div>
<textarea name="tarOutput" id="tarOutput">[Text]</textarea>
</div>
CSS:
#divOutput {
border: 2px solid #000;
background-color: #f90;
padding: 10px;
height: 300px
}
#divButtons {
border: 2px solid #000;
background-color: #fb0;
margin-top: 10px;
padding: 2px;
}
textarea {
margin-top: 10px;
width: 100%;
height: 100%; /* ??? Doesn't seem to work */
}
Take a look at this post: CSS 100% height with padding/margin