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/
Related
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
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;
}
My code - Plunker
I try to create a fluid layout, my sidebar is made of a list of links. I want each <li> element to be a perfect square, the problem starts when I add the text inside. It seems to be adding height to my square and what I get is a rectangle. If you examine my code the dimensions of my list objects are
32px X 43px. How can I prevent from an inside text to extend the <li> elements?
And how can I make the text appear on the bottom left side of the <li> element?
My CSS:
body{
width: 100%;
margin: 0 auto;
}
.content {
width: 95%;
display: inline;
float: left;
}
.sidebar{
width: 5%;
display: inline;
float: left;
}
.sidebar ul{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.sidebar li{
padding: 50%;
background-color: oldlace;
}
.sidebar a{
display: block;
font-size: 0.5em;
}
My HTML:
<body >
<h1>Hello Plunker!</h1>
<div class="sidebar">
<ul>
<li>ANALYTICS</li>
<li>STYLES</li>
<li>VOTERS</li>
<li>GET STARTED</li>
<li>UPDATE</li>
</ul>
</div>
<div class="content">
<p>Blahahhhahhhahahahahahahhahahah blahahahh bluah</p>
</div>
You could use position: relative on the li and position: absolute on the a. Using absolute will cause the a element to not affect the li's dimensions. In this way you can also position it in the corner.
http://plnkr.co/edit/kcjCl1?p=preview
.sidebar li{
padding: 50%;
position: relative;
}
.sidebar a{
display: block;
position: absolute;
bottom: 0;
left: 0;
}
I have this html code:
<ul id="top-bar">
<li class="top-icon-block"><img src="images/home.png"></li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><img src="images/home.png"></li>
</ul>
and the relevant css looks like this:
#top-bar {
width: inherit;
height: 40px;
padding: 0px;
margin: 0px;
vertical-align: middle;
display: table-row;
}
.top-icon-block {
width: 50px;
margin: 0px;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
li.top-icon-block img {
padding-top: 8px;
vertical-align: middle;
}
.top-icon-sep-block {
width: 4px;
margin: 0px;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
li.top-icon-sep-block img {
padding-top: 18px;
vertical-align: middle;
}
for some reason, All of the images are aligned based on the highest padding-top, whereas I really need them to be differ.
Here is a jsfiddle: http://jsfiddle.net/XWdMP/
If I understand your issue correctly, it is because the padding is different on your elements, but it is being rendered inline with the larger padding. Effectively pushing down your other two images.
Adding a overflow hidden to your li elements should resolve the problem and hide the gap being shown from the difference in padding from the images.
#top-bar li {
overflow: hidden;
}
Let me know if that resolves the issue.
http://jsfiddle.net/rakkeh/XWdMP/1/
I'm building a site for mobile devices and therefore has a fluid layout.
My navigation list looks like this:
<ul>
<li>home</li>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
Problem is, the first list item needs to be 100px only (left aligned always), and the other 3 split evenly, therefore is it possible to have even width for all list items except for the first one (without using javascript).
This is the simplest way I could think of:
ul { overflow: hidden; padding-left: 100px; position: relative; }
li { width: 33.33%; float: left; }
li:first-child { position: absolute; top: 0; left: 0; width: 100px; }
The main idea is taking the first li out of the flow (position: absolute) and adding a padding-left to the ul (space for the first li). Now if we set the percentage width for the other lis, they will take up the remaining space.
And here is a jsFiddle Demo. I added a red border on the ul which shows that because of the percentages lis will not accurately fill it.
I am unsure what mobile browsers you want to support, but except :first-child (which can be worked around by adding a class on the first list item) I assume they must support everything I used.
hmm a bit cludgy - but this seems to work, it does require nesting the list (second 3 links in separate list) and a span for the "home" link, theory is that you need the first link to float, width: 100px, then you need the second group not to float and have their overflow hidden so the group take up the remaining space.. then you float the 3 links # 33% inside the non-floated container
Example : HERE
CSS:
div {
width: 90%;
margin: 0 auto;
}
ul {
margin: 0; padding: 0; list-style: none; /* reset */
float: left;
width: 100%;
}
li {
float: left;
width: 100%;
text-align: center;
}
li span {
float: left;
width: 99px;
background: #eee;
border-right: 1px solid #000;
}
ul ul {
float: none;
overflow: hidden;
width: auto;
}
li li {
width: 33%;
background: #ffe;
border-right: 1px solid #000;
}
HTML:
<div>
<ul>
<li><span>home</span>
<ul>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
</li>
</ul>
</div>
For what it's worth, this was what I was thinking of when I made my comment on your question:
http://jsfiddle.net/4t9fV/
ul {
display: table;
width: 100%;
background: #ccc;
table-layout: fixed
}
li {
display: table-cell;
text-align: center;
outline: 1px dashed red
}
li:first-child {
width: 100px
}