I've a button on the right side.
If I choose this button, a DIV opens with other elements.
It looks like:
[6x][5x][4x][3x][2x][1x][BUTTON]
What I want to achieve is that each element takes the width of the previous one and adds up to 50px.
<details>
<summary>CHA</summary>
<ul>
<li>ENG</li>
<li>FRA</li>
<li>ATA</li>
<li>AUT</li>
<li>BEL</li>
<li>BRA</li>
</ul>
</details>
summary {
position: absolute;
right: 0;
top: 0;
}
ul{
width: 100%;
right: 50px;
position: absolute;
}
ul li {
float: right;
margin-left: 1rem;
}
ul li a,
summary {
color: #fff;
display: flex;
width: 50px;
height: 100%;
justify-content: center;
align-items: center;
}
The problem here is that the element - ul li a dont get the full height.
By adding to the ul li a element a position absolute all are at the same position/place.
So I thought I can use the nth-of-type(x) css statement like:
ul li a:nth-of-type(n){
right:calc(50px+n)
}
Or somehow like that - I know that this is not the right syntax.
Is it possible, am I thinking wrong, how to?
Here is the PEN:
https://codepen.io/User-123456789/pen/MOzdLp
Related
I have a horizontal navigation menu using unordered lists. Under the menu there is a straight gray line which has to have 100% width of the parent container. When hovering the list elements, the part of the line has to be colored blue right under the list element. I can't find any suitable way of doing this. I got it working with position:relative and adding top:14px but it isn't really satisfying me since any changes to the font size or font face will destroy everything. I also thought about changing margins between elements to padding, increasing li's height and giving each one the same gray border and just changing it's color on hover, but I need the line to go all along the parent div's width.
How it has to look:
expected result
My current code:
#container {
width: 80%;
margin: auto;
background-color: white;
}
#container ul {
list-style-type: none;
display: inline-block;
margin: 0;
padding: 0;
margin-top: 5px;
margin-bottom: 10px;
}
#container ul li {
float: left;
margin-left: 20px;
}
#container ul li:first-child {
margin-left: 0;
}
#container ul li a {
text-decoration: none;
color: black;
}
#container ul li a:hover {
color: grey;
}
#container #slider {
display: inline-block;
height: 5px;
background-color: #f1f1f1;
width: 100%;
}
<div id="container">
<ul>
<li>INDEX</li>
<li>HELP</li>
<li>LONG LINK TEXT</li>
</ul>
<span id="slider"></span>
</div>
JSFiddle: https://jsfiddle.net/9fhvyk76/3/
You'll want to use a pseudo element so you have more control over the size/position without really needing to change much. Just add position: relative to the link itself so the pseudo's scale and positioning are associated with it. Let me know if this is what you were looking for!
https://jsfiddle.net/g00jrsqf/
#container ul li a{
position: relative;
}
#container ul li a:after{
content: '';
position: absolute;
display: block;
width: 100%;
height: 4px;
background: #01a2e8;
opacity: 0;
left: 0;
bottom: -29px;
}
#container ul li:hover a:after{
opacity: 1;
}
I am trying to align the items on a timeline bar using flexbox. I want to be able to have the first circle start at the beginning of the line and the last circle to be at the end of the line with the center item being centered. Is this possible using flexbox? Right now I am using
ul {
display: flex;
}
li {
align-items: center;
}
align-items applies to the parent element and controls the alignment on the cross-axis of your flexbox. In you case, you need justify-content: space-between;, again, applied to the parent element like so:
ul {
display: flex;
justify-content: space-between;
}
You can check out a very detailed Flexbox breakdown on CSS Tricks to learn more about it.
Sure you can do that with Flexbox (Flexbox is life :P).
Just the ul needs css:
ul {
display: flex;
justify-content: space-between
}
You need to check this amazing post - A Complete Guide to Flexbox
Using flexbox and absolutely positioned elements you can achieve this:
*,
*:before,
*:after {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
position: relative;
}
ul:before {
content: "";
position: absolute;
left: 0;
width: 100%;
top: 20px;
border-top: 1px solid #aaa;
}
li {
margin: 0;
padding: 0;
text-transform: uppercase;
text-align: center;
flex: 1 0 0;
margin-top: 40px;
position: relative;
}
li:before {
content: "";
position: absolute;
top: 0px;
left: 50%;
transform: translate(-50%, -150%);
width: 20px;
height: 20px;
border: 2px solid yellow;
border-radius: 100%;
background-color: #fff;
}
li.selected:before {
background-color: yellow;
}
<ul>
<li class="selected">Create account</li>
<li>Understand your role</li>
<li>Share stories</li>
</ul>
You can use the property align-self on each item to do so, the problem with using it on the parent element, is that the child items will be aligned to what the parent says. So align-self:flex-start for the first item, align-self:center on the second item and align-self:flex-end on the last one (list items that is).
Useful guide about flex: http://jonibologna.com/flexbox-cheatsheet/
I'm trying to center and unordered list perfectly with the title of my website the title on top with the UL elements centered underneath.
The problem is that it does center, but not perfectly aligned with the overhead title. It is slightly to the right.
Here is my code:
.title{
text-align: center;
}
nav{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
background: blue;
}
li {
text-align: center;
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
background: red;
}
ul {
padding: 0;
}
The slight right-side bias is because of the default padding the entire list gets, not the individual list items. Setting it to zero eliminates the unnecessary offset.
I have to guess the HTML, but most likely you have a <ul> inside your <nav> element. Use this CSS:
nav > ul { margin-left: 0; padding-left: 0; }
just a quick CSS question. Does anyone know how to display a horizontal list at the center of the div tag. The number of elements in the list can change from page to page and I was hoping for them to start in the middle of the page. For example if there was only on list item then it would be in the center but if there was two then the first one would move slightly to the left and the second would be slightly to the right. I know the changes have to be made to the ul and li CSS code. This is what I have so far
.ui-yt-tabs {
position: relative;
width: 740px;
height: 600px;
float: left;
}
.ui-tabs .ui-tabs-nav {
position: absolute;
top: 470px;
height: 117px;
width: 735px;
padding: 0px;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
}
You can do something like this:
ul {
text-align:center;
}
ul li {
display: inline-block;
}
Just remember to remove float: left; from your LI items
i am working on this grid gallery where List items are set to width 20% so that they can be like 5 in one row using float left.
Now i am using a div with class overlay so that hen someone hovers over Li the overlayis shown.
the problem is
when i give overlay 100% width and height 100% it covers the whole screen and not just that Li.
here is my HTML code
<ul id="thumbsList">
<li>
<div class="overlay">Hello</div>
</li>
<li><div class="overlay">Hello2</div></li>
</ul>
And here is my Css
#thumbsList {
margin: 0px;
padding: 0px;
}
#thumbsList li {
list-style: none;
float: left;
height: 100px;
width: 20%;
background-color: gainsboro;
}
.overlay {
text-align: center;
z-index: 2;
height: 100%;
width: 100%;
position: absolute;
background-color: red;
}
Please help me fix the problem.
thanks.
You need to add position: relative to the li item, the absolute positioning in the overlay wil take this as reference.
#thumbsList li {
position: relative;
list-style: none;
float: left;
height: 100px;
width: 20%;
background-color: gainsboro;
}
Also you need to add a display: none to the overlay and a hover on li that change the display: none to display: block on the overlay, like this:
#thumbsList li:hover .overlay {
display: block;
}
Demo: http://jsfiddle.net/HPJ8v/