I have this layout on my HTML-page :
page layout
It's a form with checkboxes (which are hidden) and the labels are styled to look like buttons (white border and transparent background to show the gradient below). The gradient part is the container.
Now what I would like to achieve is to show the gradient background only below the buttons so that the parts between the buttons remains white.
See the example here : example (and worship my Photoshop skills)
I tried to figure out a solution but I ended up with nothing. If some of you guys could help me out, I would really appreciate it :)
Thank you in advance !
Create multiple small round boxes with no background and large box-shadow values.
Excess shadow on these boxes will be clipped by overflow: hidden on their respective parents.
Apply gradient background on the outermost parent.
Here is a working demo:
*,
*:before,
*:after {box-sizing: border-box;}
body {
background: linear-gradient(orange, yellow) no-repeat;
margin: 0;
}
.list {
justify-content: center;
list-style: none;
flex-wrap: wrap;
display: flex;
padding: 0;
margin: 0;
}
.list li {
justify-content: center;
padding: 30px;
overflow: hidden;
display: flex;
flex-grow: 1;
flex-basis: 50%;
}
.list .box {
box-shadow: 0 0 0 1000px #fff;
justify-content: center;
align-items: center;
border-radius: 100%;
display: flex;
height: 120px;
width: 120px;
}
<ul class="list">
<li>
<div class="box">Immobilier</div>
</li>
<li>
<div class="box">Travaux</div>
</li>
<li>
<div class="box">Finance</div>
</li>
<li>
<div class="box">Evenementiel</div>
</li>
<li>
<div class="box">Juridique</div>
</li>
<li>
<div class="box">Communication</div>
</li>
<li>
<div class="box">Recrutement</div>
</li>
</ul>
Related
I have a figure tag for my shopping cart icon, which sits beside the header navigation. The png img inside is the perfect size, and fills the height of the figure tag. But for some reason, the figure tag is too long. I've tried resizing the figure tag width and the image width, but nothing will make it smaller or erase that empty space which is covering my final menu option. I didn't have or notice this problem earlier, but I made some necessary changes to the CSS and since then, I've noticed this issue. No matter what I change, nothing seems to alter the figure size. [It spans across so I cannot hover over the 'help' option].
<div class="header-wrapper">
<div class="header-split">
<a class="home" href="#">Lu Steven</a>
<div class="menu-cart">
<nav>
<ul class="overall-nav">
<li>gallery</li>
<li><span>|</span></li>
<li>about</li>
<li><span>|</span></li>
<li>shop</li>
<li><span>|</span></li>
<li>exhibitions</li>
<li><span>|</span></li>
<li>contact</li>
<li><span>|</span></li>
<li>help</li>
</ul>
</nav>
<figure>
<img src="/images/cart.png"></img>
</figure>
</div>
</div>
</div>
CSS:
/* Header */
header ul{
display: flex;
flex-direction: row;
list-style: none;
justify-content: space-between;
width: 150%;
letter-spacing: 3px;
margin-left: -35%;
}
header a{
text-decoration: none;
color: aliceblue;
}
header a:hover{
color: #9ec8f0;
}
.header-wrapper{
position: absolute;
height: 7vh;
width: 100vw;
background-color: rgb(43, 43, 43);
color: aliceblue;
display: flex;
flex-direction: row;
}
.header-split{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 80%;
margin: auto;
}
.home{
display: flex;
align-items: center;
}
.menu-cart{
display: flex;
flex-direction: row;
align-items: center;
}
/* Cart */
figure{
display: flex;
flex-direction: row;
justify-content: right;
}
header img{
height: auto;
width: 35%;
}
header img:hover{
cursor: pointer;
opacity: 50%;
}
Hi there there is a small error in your code the img is a self closing tag you don't need to close it like this </img> it should be something like this
<img src="" alt=""/>
correct this error and your problem might get solved
broken height
How it looks when overflow: auto is not active
So, I had the height working perfectly as it filled the remaining space of a 100vh app container (blue border line), but when I added overflow: auto to the .action-list and added enough items that it required the overflow to activate suddenly the height is breaking past the app container and pushing past the bottom of the viewport. I have tried every height manipulation of .action-list possible to no avail. I was able to make the whole thing fit perfectly if I changed the .action-container or .action-plate to a smaller percentage of height but that breaks the height to something too small if the overflow: auto is not active. I'm at my wits end.
(.app is in a separate css file. All colored borders are included for reference only.)
.app {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
border: 1px blue solid;
}
.app-container {
margin: 0 0 30px 0;
padding: 0;
box-sizing: border-box;
height: 100%;
width: 100%;
border: 1px solid green;
}
.action-plate {
height: 100%;
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.action-container {
width: 85%;
height: 89%;
background: black; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #9A070E, #9e4676, #f98a2f93); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #4e080b63, #77335a48, #b6662457); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-radius: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 2px 1px 18px rgb(202, 202, 202);
border: 1px thistle solid;
}
.action-list {
width: 100%;
overflow: auto;
box-sizing: border-box;
}
.add-item {
margin: 10px;
box-sizing: border-box;
}
Make your list container flexible with flex-grow so it fills the available space, and change the default min-height: auto to allow the list container to shrink.
Seeing your HTML markup would help in understanding what’s going on here. But it seems like .action-plate is unable to resolve its height: 100%, so it behaves as thought height was auto, which in this case means it will try to size itself based on the height of its content. And that’s why it’s growing so big instead of staying within its 100vh container.
To get the effect you want, you could take advantage of Flexbox properties instead of using percentages.
The header and the tabs should be the size of their content, so we don’t need to do anything extra there.
The container for the list should take up all the remaining space in the app container — not more, and not less. To make sure it grows to fill the available space, we set flex-grow: 1 (by default flex items have flex-grow: 0).
Next, flex items will try to preserve their min-content size by default. This basically means your flex item will try to at least have the size to contain all of its items. This is why it grows beyond the app container.
So instead of its default min-height: auto, we will give it min-height: 0. That means that if you have lots of content, your flex item will no longer try to “protect” its size, and will shrink to fill the size of the container.
Here’s a working example:
body {
margin: 0;
color: white;
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
width: 320px; /* just to illustrate the working example */
height: 480px; /* just to illustrate the working example */
box-sizing: border-box;
background-color: black;
}
header {
text-align: center;
}
.nav-list {
display: flex;
list-style-type: none;
padding: 0;
justify-content: space-evenly;
}
.todo-list-container {
flex-grow: 1;
padding: 16px;
min-height: 0;
overflow: auto;
}
.todo-list-content {
background-color: burlywood;
}
.todo-item {
font-size: 32px;
}
<main class="app">
<header><h1>Exist Better</h1></header>
<nav>
<ul class="nav-list">
<li>Routines</li>
<li>Behaviors</li>
<li>To Dos</li>
</ul>
</nav>
<div class="todo-list-container">
<div class="todo-list-content">
<ul class="todo-list">
<li class="todo-item">Routine 1</li>
<li class="todo-item">Routine 2</li>
<li class="todo-item">Routine 3</li>
<li class="todo-item">Routine 4</li>
<li class="todo-item">Routine 5</li>
<li class="todo-item">Routine 6</li>
<li class="todo-item">Routine 7</li>
<li class="todo-item">Routine 8</li>
<li class="todo-item">Routine 9</li>
<li class="todo-item">Routine 10</li>
</ul>
<button>Add a new routine</button>
</div>
</div>
</main>
I am trying to build this nav bar and make it responsive as well, the thing is that when I apply display: flex; the logo just dissapears. For some reason, when I use a fixed width the image stays, but when I use percentages the image just goes away. I would like to use percentages to mantain the responsiveness of the nav bar.
Here is what I have so far.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
border: 10px solid orange;
justify-content: space-around;
width: 100%;
}
header div#company-logo img#header-img {
width: 50%;
}
<header id="header">
<div id="company-logo">
<img src="https://via.placeholder.com/100x50.jpg" alt="hamburguer logo" id="header-img">
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link">Home</li>
<li class="nav-link">Info</li>
<li class="nav-link">Contact Us</li>
</ul>
</nav>
</header>
Like I said before, I have tried with fixed percentages, such as px or vw. I just want to understand why the image dissapears when I use percentages.
#company-logo {
flex: 0 0 auto;
}
...should do it. It means:
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
The important bits are flex-shrink: 0; flex-basis: auto;.
i want the background of a div to change on hover. However on hover, the doesn't change the entire div background color (reason the div width doesnt cover the entire width of the div it is contained in). Could you please let me know how to fix it. Below is the code snippet,
.list_container {
height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
ul {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
li {
.list {
margin: 0;
display: flex;
align-items: center;
&:hover {
background-color: green;
}
}
}
}
}
}
<div className="list_container">
<header>
<h4>Listitems</h4>
</header>
<ul>
<li>
<div className="list"><span>hello</span></div>
<ul>
<li>
<div className="list"><span>hello</span></div>
</li>
</ul>
</div>
</li>
</div>
</ul>
</div>
The div with classname list doesnt spread the width of entire div it is contained in (that is lists). The list items are added dynamically. So as the list items grow...the div with class list doesnt cover the entire div list_container. How can i fix this. Thanks.
I have a horizontal flex box (i.e. flex-direction: row, i.e. side-by-side) with a few items. Each item can be a single line of text, or can have multiple lines. I want to vertically-align the contents of each flex item.
If each item had a transparent background, I could easily use align-items: center. However, I want each item to be stretched vertically, because I want to set a background (or maybe borders, or maybe it is a clickable region) to the entire available height.
So far, I know:
Stretching: align-items: stretch
Aligning: align-items: center
Stretching and aligning: ???
Demo available at http://codepen.io/denilsonsa/pen/bVBQNa
ul {
display: flex;
flex-direction: row;
}
ul.first {
align-items: stretch;
}
ul.second {
align-items: center;
}
ul > li {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 5em;
text-align: center;
}
ul > li:nth-child(2) {
background: #CFC;
}
/* Visual styles, just ignore. */
html, body { font-family: sans-serif; font-size: 25px; }
ul, li { list-style: none; margin: 0; padding: 0; }
ul { background: #CCF; width: 25em; }
<ul class="first">
<li>Sample</li>
<li><span>span</span></li>
<li><span>multiple</span> <span>span</span></li>
<li>text <span>span</span></li>
<li>multi<br>line</li>
</ul>
<hr>
<ul class="second">
<li>Sample</li>
<li><span>span</span></li>
<li><span>multiple</span> <span>span</span></li>
<li>text <span>span</span></li>
<li>multi<br>line</li>
</ul>
Similar questions:
Question 14012030 and question 23442692 and question 27729619 and question 25311541 ask essentially the same thing, but they either have a single element or plain text as child of each flex item. As soon as we have mixed content, possibly with multiple elements, those solutions do not work.
Question 19026884 is unrelated, the issue there was the wrong markup.
Unfortunately, it is impossible to achieve the desired effect while using the exact markup posted in the question.
The solution involves:
Setting display: flex; on <li>.
Wrapping the <li> contents into another element.
This is required because <li> is now a flex container, so we need another element to prevent the actual contents from becoming flex items.
In this solution, I introduced a <div> element, but it could have been other element.
Now that <li> is a flex container and it contains only a single child, we can use align-items and/or justify-content to align this new and only child.
The DOM tree looks like this:
<ul> flex-parent, direction=row
├ <li> flex-item && flex-parent && background && JavaScript clickable area
│ └ <div> flex-item as a single transparent element
│ ├ Actual contents
│ └ Actual contents
├ …
Note: The solution in this answer uses 2 nested flex boxes. The solution by Michael_B uses 3 nested flex boxes, because it has the added challenge of expanding the <a> element to fill the entire <li>. Which one is preferred depends on each case. If I could, I would accept both answers.
/* New code: this is the solution. */
ul > li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Old code below. */
ul {
display: flex;
flex-direction: row;
align-items: stretch;
}
ul > li {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 5em;
text-align: center;
}
ul > li:nth-child(2) {
background: #CFC;
}
/* Visual styles, just ignore. */
html, body { font-family: sans-serif; font-size: 25px; }
ul, li { list-style: none; margin: 0; padding: 0; }
ul { background: #CCF; width: 25em; }
button:focus + ul {
font-size: 14px;
width: auto;
}
<button>Click here to set <code>width: auto</code> and reduce the font size.</button>
<!-- New code: there is a single <div> between each <li> and their contents. -->
<ul>
<li><div>Sample</div></li>
<li><div><span>span</span></div></li>
<li><div><span>multiple</span> <span>span</span></div></li>
<li><div>text <span>span</span></div></li>
<li><div>multi<br>line</div></li>
</ul>
I want each item to be stretched vertically, because I want to set a
background (or maybe borders, or maybe it is a clickable region) to
the entire available height.
You can achieve this layout without any changes to your HTML structure. There's no need for additional containers.
You already have a primary flex container and a group of flex items. Simply make those flex items into nested flex containers. That will enable you to align the content with flex properties.
(Since you mentioned that you may need clickable regions, I switched from li to a elements.)
nav {
display: flex;
background: #CCF;
width: 25em;
}
nav > a {
flex: auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
nav > a:nth-child(2) {
background: #CFC;
}
html, body {
font-family: sans-serif;
font-size: 25px;
}
<nav>
Sample
<span>span</span>
<span>multiple</span> <span>span</span>
text <span>span</span>
multi<br>line
</nav>
revised codepen
Note that content placed directly inside a flex container is wrapped in an anonymous flex item:
From the spec:
4. Flex Items
Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex
container is wrapped in an anonymous flex item.
So, because the text is automatically wrapped in flex items, you can keep the full height of each item (align-items: stretch from the primary container) and vertically center the content (align-items: center from the nested containers).
Make the li flex-containers with flex-direction:column. I think that's what you are after.
html,
body {
font-family: sans-serif;
font-size: 25px;
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
ul {
background: #CCF;
width: 25em;
display: flex;
flex-direction: row;
}
ul.first {
align-items: stretch;
}
ul > li {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 5em;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*outline: 1px dotted #444;*/
}
ul > li:nth-child(2) {
background: #CFC;
}
<ul class="first">
<li>Sample</li>
<li><span>span</span>
</li>
<li><span>multiple</span> <span>span</span>
</li>
<li>text <span>span</span>
</li>
<li>multi
<br>line</li>
</ul>
Flex-child items can also be flex-parent items.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-family: sans-serif;
font-size: 25px;
}
body {
display: flex;
flex-flow: column nowrap;
background-color: #333;
overflow: hidden;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.List {
padding: 0;
margin: 0;
background: #CCF;
width: 25em;
list-style: none;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
.ListItem {
flex-basis: 5em;
display: flex;
flex-flow: row wrap;
text-align: center;
align-items: center;
}
.ListItem:nth-child(2) {
background: #CFC;
}
.ListItem__content {
width: 100%;
}
<ul class="List">
<li class="ListItem">
<span class="ListItem__content">Sample</span>
</li>
<li class="ListItem">
<span class="ListItem__content">span</span>
</li>
<li class="ListItem">
<span class="ListItem__content">multiple <br> span</span>
</li>
<li class="ListItem">
<span class="ListItem__content">span</span>
</li>
<li class="ListItem">
<span class="ListItem__content">multi<br>line</span></li>
</ul>