I am new to CSS.
I want to create a Process Step Like in the image.
Below is the code I have tried.
.inline-div{
padding: 1rem;
border: 0.04rem gray solid;
display: inline-block;
width: 25%;
border-top-left-radius: 25px;
}
.active{
background: #8b7b38;
color: #FFFFFF;
}
<div>
<div class="inline-div">Text A</div>
<div class="inline-div active">Text B</div>
<div class="inline-div">Text C</div>
</div>
Any help would be great.
Thank You.
try this instead,
Remove the gap between each process by using flex
.main{
flex-wrap:nowrap;
display: flex;
}
And to remove all border-left of inline-div except first item.
.inline-div:not(:first-child){
margin-left:-0.04rem; // to remove the left border
}
.inline-div{
padding: 1rem;
border: 0.04rem gray solid;
width: 25%;
border-top-left-radius: 25px;
}
.inline-div:not(:first-child){
margin-left:-0.04rem; // to remove the left border
}
.main{
flex-wrap:nowrap;
display: flex;
}
.active{
background: #8b7b38;
color: #FFFFFF;
}
.inline-div {}
<div class="main">
<div class="inline-div">Text A</div>
<div class="inline-div active">Text B</div>
<div class="inline-div">Text C</div>
<div class="inline-div">Text D</div>
</div>
set outer div's font-size to zero to remove the gap between each 2 steps, set right step's margin-left to negative border width to overlap left step's border, then it'll work fine:
.outer-div{
font-size: 0;
}
.inline-div{
padding: 1rem;
border: 0.04rem gray solid;
display: inline-block;
width: 25%;
border-top-left-radius: 25px;
text-align: center;
font-size: 20px; /* set inner div's font-size as you need */
}
.active{
background: #8b7b38;
color: #FFFFFF;
}
.no-left-border{
margin-left: -0.04rem;
}
<div class="outer-div">
<div class="inline-div">Text A</div>
<div class="inline-div active no-left-border">Text B</div>
<div class="inline-div no-left-border">Text C</div>
</div>
.inline-div{
padding: 1rem;
border: 0.04rem gray solid;
display: inline-block;
width: 25%;
border-top-left-radius: 25px;
background-color: transparent;
}
.active{
background: #8b7b38;
color: #FFFFFF;
}
.flex-div {
display: flex;
background: blue; // change to your color
}
<div class="flex-div">
<div class="inline-div">Text A</div>
<div class="inline-div active">Text B</div>
<div class="inline-div">Text C</div>
</div>
Related
I’m making a table-like layout using flexbox.
It has a body, rows and cells.
Cells have the fixed widths in pixels.
Body should be horizontally scrollable.
I would like to achieve that rows have the same width as cumulative widths of cells.
Here’s the codepen.
<div class="grand-parent">
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
<div>
Is there any way to do this using CSS only?
P.S. I know I can calculate the widths using JS and set that to parent, or I can set the background color to grand-parent to make it look nicer, but that's not what I need here.
one way is to not fix size on child component but use flex-grow: 1; to let them take all available size
.child {
flex-grow: 1;
color: white;
background: blue;
border: 1px solid black;
}
OR
if you want to force container to take child width you have to :
.child have display: inline-flex;
.parent have width: max-content;
.parent {
background: red;
padding: 2em 0;
width: max-content;
}
.child {
display: inline-flex;
width: 300px;
color: white;
background: blue;
border: 1px solid black;
}
following the running snippet of this reply
.grand-parent {
width: 800px;
overflow: auto;
}
.parent {
display: flex;
background: red;
padding: 2em 0;
}
.child {
flex-grow:1;
color: white;
background: blue;
border: 1px solid black;
}
.parent2 {
background: red;
padding: 2em 0;
width: max-content;
}
.child2 {
display: inline-flex;
width: 300px;
color: white;
background: blue;
border: 1px solid black;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
<h1> child take width of parent</h1>
<div class="grand-parent">
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
<div>
<h1> parent take width of child</h1>
<div class="grand-parent">
<div class="parent2">
<div class="child2">Child 1</div>
<div class="child2">Child 2</div>
<div class="child2">Child 3</div>
</div>
<div class="parent2">
<div class="child2">Child 1</div>
<div class="child2">Child 2</div>
<div class="child2">Child 3</div>
</div>
<div>
Well, just like Jeremy's answer, you can set them to take available space
OR
Instead of making the grand-parent fixed-width, you can set the parent to be of fixed width;
.parent {
display: flex;
background: red;
padding: 2em 0;
width: 800px;
overflow: auto;
}
I took all the styles of grand-parent and added the to the style of parent
The following snippet works perfectly fine:
.parent {
display: flex;
background: red;
padding: 2em 0;
width: 800px;
overflow: auto;
}
.child {
flex: 0 0 300px;
color: white;
background: blue;
border: 1px solid black;
}
<div class="grand-parent">
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
</div>
I am doing a program with a list of elements (float or flex) that might have a display of "none", that can change dynamically. I manage to do it in CSS when it is defined with a selector :
div:nth-child(odd)
However if I hide one div, it doesn't work anymore. I tried something like
div[style*="display: block;"]:nth-child(odd)
but breaks.
* {box-sizing: border-box;}
.flex-container {
width: 90%;
margin: 5px auto;
display: flex;
background-color: #ddd;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
}
.flex-container>div {
background-color: #f1f1f1;
display: block;
padding: 5px;
font-size: 12px;
cursor: pointer;
text-align: center;
width: 50%;
border-bottom: solid 1px #ccc;
}
.flex-container>div[style*="display: block;"]:nth-child(odd) {
border-right: solid 1px red;
}
<div class="flex-container">
<div id="flex1" style="display: block;">TEST 1</div>
<div id="flex2" style="display: block;">TEST 2</div>
<div id="flex3" style="display: block;">TEST 3</div>
<div id="flex4" style="display: block;">TEST 4</div>
<div id="flex5" style="display: block;">TEST 5</div>
</div>
<input type="button" onclick="document.getElementById('flex1').style.display = document.getElementById('flex1').style.display === 'none' ? 'block' : 'none'" value="Flex1" />
When using the button, it shows / hides the first div. What I would like is to have this red border always in the middle.
I would like to avoid using javascript as much as possible.
Maybe I got it completely wrong, or it isn't feasible without javascript.
No need to complicate with nth-child. You can simply draw a line in the middle using pseudo element. Also read the following to understand why your code doesn't work: Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
* {box-sizing: border-box;}
.flex-container {
width: 90%;
margin: 5px auto;
display: flex;
background-color: #ddd;
flex-wrap: wrap;
position:relative;
}
.flex-container:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:50%;
width:1px;
background:red;
}
.flex-container>div {
background-color: #f1f1f1;
padding: 5px;
font-size: 12px;
cursor: pointer;
text-align: center;
width: 50%;
border-bottom: solid 1px #ccc;
}
<div class="flex-container">
<div id="flex1" style="display: block;">TEST 1</div>
<div id="flex2" style="display: block;">TEST 2</div>
<div id="flex3" style="display: block;">TEST 3</div>
<div id="flex4" style="display: block;">TEST 4</div>
<div id="flex5" style="display: block;">TEST 5</div>
</div>
<input type="button" onclick="document.getElementById('flex1').style.display = document.getElementById('flex1').style.display === 'none' ? 'block' : 'none'" value="Flex1" />
Here is another idea using CSS grid:
* {box-sizing: border-box;}
.flex-container {
width: 90%;
margin: 5px auto;
display: grid;
grid-template-columns:1fr 1fr;
grid-column-gap:1px;
background:
linear-gradient(red,red) center/1px 100% no-repeat,
#ddd;
}
.flex-container>div {
background-color: #f1f1f1;
padding: 5px;
font-size: 12px;
cursor: pointer;
text-align: center;
border-bottom: solid 1px #ccc;
}
<div class="flex-container">
<div id="flex1" style="display: block;">TEST 1</div>
<div id="flex2" style="display: block;">TEST 2</div>
<div id="flex3" style="display: block;">TEST 3</div>
<div id="flex4" style="display: block;">TEST 4</div>
<div id="flex5" style="display: block;">TEST 5</div>
</div>
<input type="button" onclick="document.getElementById('flex1').style.display = document.getElementById('flex1').style.display === 'none' ? 'block' : 'none'" value="Flex1" />
I have four divs (tabs) and I am trying to add an outline to the tab, but the outline doesn't wrap the whole div. I think the border here on the tabs are causing it. What is the right approach to add an outline to the div?
Code is as follows:
HTML:
<div class="main-style">Random</div>
<div class="styling active1">Btn 1</div>
<div class="styling active2">Btn 2</div>
<div class="styling active3">Btn 3</div>
CSS:
.main-style,.styling {
background-color: blue;
color: white;
line-height: 36px;
float: left;
padding: 0 20px;
display: inline-block;
&:hover{
cursor: pointer;
}
}
.styling {
border-width: 0px 0px 0px 1px;
border-style: solid;
}
.over {
outline: 3px solid orange;
}
JS:
$('.active1').addClass('over'); // the outline doesn't wrap the whole button.
//$('.active3').addClass('over'); the outline wraps the whole button
Here is the JS fiddle
It's hidden by the next tab. Add position: relative, and z-index: 1 to the .over tab to make it appear above the next tab:
$('.active1').addClass('over'); // the outline doesn't wrap the whole button.
.main-style,
.styling {
background-color: blue;
color: white;
line-height: 36px;
float: left;
padding: 0 20px;
display: inline-block;
&:hover {
cursor: pointer;
}
}
.styling {
border-width: 0px 0px 0px 1px;
}
.styling:not(:first-child) {
margin-left: 3px;
}
.over {
position: relative;
z-index: 1;
outline: 3px solid orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-style">Random</div>
<div class="styling active1">Btn 1</div>
<div class="styling active2">Btn 2</div>
<div class="styling active3">Btn 3</div>
I have three titles acting as buttons. Button 1, 2 and 3. On page load, I am wanting the button 1 section to show, but then if someone would click on button 2 or 3 for the previous button description to hide and for the new one to appear in its place.
So far I cannot get this to work. I added display: none; to the general class, but I as I said, I want the first one to display on page load.
What am I doing wrong?
$('#big-three-names').click(function() {
var thisDescription = $('.big-three-info', $(this));
$('.big-three-info').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
display: none;
}
#big-three-info-title {
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description {
width: 100%;
margin-left: 50px;
font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
<div class="big-three-info">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>
You can do following way using JQuery. Get html text of selected button and display div using .eq() of JQuery.
Display first using $('.big-three-info').eq(0).css("display", "block"); on page load.
$('.big-three-names').click(function() {
var i = $( this ).html();
$('.big-three-info').css("display", "none")
$('.big-three-info').eq(i-1).css("display", "block");
});
$('.big-three-info').eq(0).css("display", "block");
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
display: none;
}
#big-three-info-title {
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description {
width: 100%;
margin-left: 50px;
font-size: 1em;
}
.show{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
<div class="big-three-info">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>
here is another solution
$('.big-three-info').eq(0).show();//show the first
$('.big-three-names').click(function() {
var index = $(this).index();//getting the index for button
$('.big-three-info').hide().eq(index).show();//first hide all then show the div with equal index
});
JS Fiddle
1.WORKING DEMO
2.Updated DEMO
HTML
<div class="big-three-out">
<div class="big-three">
<div id="big-three-title">The "Big Three"</div>
<div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
<div id="big-three-names-out">
<div class="big-three-names one">1</div><div class="big-three-names two">2</div><div class="big-three-names three">3</div>
<div class="big-three-info one-sub">
<div id="big-three-info-title">
1
</div>
<div id="big-three-info-description">
Description for 1.
</div>
</div>
<div class="big-three-info two-sub">
<div id="big-three-info-title">
2
</div>
<div id="big-three-info-description">
Description for 2.
</div>
</div>
<div class="big-three-info three-sub">
<div id="big-three-info-title">
3
</div>
<div id="big-three-info-description">
Description for 3.
</div>
</div>
</div>
</div>
</div>
JS
$('.big-three-names').click(function() {
$(".big-three-info").hide();
$("."+$(this).attr("class").split(" ")[1]+"-sub").show();
});
By the way big-three-names is your class name and not ID
I am attempting to combine a border for a title and description. The title shows upon page load, but once the title is clicked its description appears below it in its own border. I want those borders to combine when the description is showing.
I created a snipet to show what I have so far.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.toggle(500);
});
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
I am trying to make it do something like this:
http://royalwoodfloor.com/services/
Does anyone know what I should do?
Image
Just change your css like this
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0 0 0;/* update the margin */
}
here is the example link the example link
Updated the code snipet
Try something like this. Slightly changed your HTML structure and css.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title"><span>Floors</span>
<div class="service_description"><span>The best floors!</span></div>
</div>
</div>
</div>
CSS
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
width: 30%;
}
.service_title span{
padding:8px 8px 8px 8px;
display:inline-block;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border-top: 1px solid black;
}
.service_description span{
padding:10px
}
Separate from the animation transition not being the same as the example, this fixes the margin issue:
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
margin-top: -16px;
}
See it working here