This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 4 months ago.
I am creating a grid of images which has a "floating" border when one item is active. This "floating" border needs to occupy the space that would otherwise be padding.
I have this set up pretty well, however I notice that the active item is missing it's right hand border. I suspect the item to the right is covering this border.
I added a different z-index to the active item but this hasn't made the border visible.
Why is this happening?
.container {
display: inline-block;
font-size: 0;
}
li {
list-style-type: none;
display: inline-block;
border: 2px solid white;
padding: 2px;
margin-left: -2px;
z-index: 9;
}
li.active {
border-color: black;
z-index: 10;
}
<div class=container>
<li>
<img src="https://via.placeholder.com/90" />
</li>
<li>
<img src="https://via.placeholder.com/90" />
</li>
<li class=active>
<img src="https://via.placeholder.com/90" />
</li>
<li>
<img src="https://via.placeholder.com/90" />
</li>
</div>
z-index has no effect on this element since it’s not a positioned element.
add position relative rule for the li tag
li{
position: relative;
....
}
Look into flex-containers, they are built to deal with this sort of thing.
Related
This question already has answers here:
Does height and width not apply to span?
(11 answers)
Closed 7 years ago.
I am displaying a vertical bar with differernt color on different width basis but it shows me a fixed width even though i change width
<span style="position:relative;border-left:solid;left:0px;top:0px;width:550px;height:18px;clip:rect(0,550px,18px,0);background-color:#f0f0f0;overflow:hidden; border:1px solid #000000;"></span>
<span style="position:relative;border-left:solid;left:0px;top:0px;width:350px;height:18px;clip:rect(auto,auto,auto,auto);background-color:#FFFFFF;overflow:hidden; border:1px solid #000000;"> </span>
You may refer following example
<ul>
<li><span> </span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
</ul>
ul
{
list-style-type: none;
padding-left: 0px;
}
ul li span {
float: left;
width: 40px;
}
http://jsfiddle.net/laurensrietveld/JZ2Lg/
Or use display: block; and then give width
I have a list of items, 4 per row, each item is a gray rectangle with text in it. Problem: these items touch each other and I want space between them. Apparently some SASS variable can be changed but it sounds complex and there's no way I do anything complex to achieve something so elemental. Is there some simple solution to my problem?
Markup:
<div class='row'>
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li id='home_li_computing'>text1</li>
<li id='home_li_field'>text2</li>
<li id='home_li_thinking'>text3</li>
<li id='home_li_guide'>text4</li>
</ul>
</div>
CSS:
li {
border: 1px solid #ddd;
background-color: #eee;
}
You will need to reduce the width of the block-grid li items and then add a margin to take up the extra width.
Here is a simple css solution:
.large-block-grid-4 > li {
width: 20%;
margin: 2.5%;
}
.medium-block-grid-3 > li {
width: 28.33333%;
margin: 2.5%;
}
li {
border: 1px solid #ddd;
background-color: #eee;
}
You would need to add all the various widths and margins for all the block-grids that you intend to use.
The li is what spaces out the items and should be left alone. The easy solution is to put a container inside each li like this:
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li id="home_li_computing"><div class="list-container">text1</div></li>
<li id="home_li_field"><div class="list-container">text2</div></li>
<li id="home_li_thinking"><div class="list-container">text3</div></li>
<li id="home_li_guide"><div class="list-container">text4</div></li>
</ul>
And your css would look the same, just targets the container:
.list-container {
border: 1px solid #ddd;
background-color: #eee;
}
I would not recommend adjusting margin percentages on responsive frameworks as that's just asking for issues. If you want to adjust spacing, always use padding since that will eat the inside instead of add to the total width.
Ex. 5px of margin all-around on 33% width is 33% + 10px. 5px of padding to 33% width is still 33%. This works as long as border-box isn't turned off.
I don't have control over the HTML that I'm styling, so each img is nested in an li. The li has padding, which cannot be changed to a margin because of a complex responsive grid system. And, yes, since it's responsive, the size of the image might change.
Here's the demo: Play with this gist on SassMeister.
Sass:
.active {
border: grey solid 4px;
opacity: .2;
}
ul {
list-style:none;
}
li {
width: 20%;
padding: 5%;
display: inline-block;
}
img {
width: 100%;
}
#thumbs {
width: 100%;
}
HTML:
<div id="thumbs">
<ul>
<li>
<img class="active" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
</li>
<li>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
</li>
<li>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
</li>
</ul>
</div>
How can I make a color overlay effect on the .active image?
Background color applied to the li parent is messy because of the padding, and I am having trouble figuring out how to create a pseudo element that's the same size as the image.
Edit: I thought maybe I could achieve this with an offset border, see this gist on SassMeister. But I would need to do some math to make the border width and offset exactly half the width (or height) of the image. Can I do that with Sass?
Sass:
.active {
border: grey solid 4px;
opacity: .2;
outline: 160px solid rgba(255,0,0,0.7);
outline-offset: -160px;
}
ul {
list-style:none;
}
li {
width: 20%;
padding: 5%;
display: inline-block;
}
img {
width: 100%;
}
#thumbs {
width: 100%;
}
HTML:
<div id="thumbs">
<ul>
<li>
<img class="active" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
</li>
<li>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
</li>
<li>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvXOVCJkz-VEZjmFxh0dgKUZ5z6Ojg7doS64g8FUmDsdEE-6_R">
</li>
</ul>
</div>
I got something working, try this on for size. It only works if you can add a class to the <li>.
Unfortunately, CSS doesn't allow any form of parent selection, so you can't say 'give me any <li> containing an <img> with the class <active> :( That's javascript turf
Unless you want to stuff around adding overlays with javascript, why not apply the tint color you want to the parent element <li>, then replace the padding with margins so the colour doesn't stick out, as it's obscured by the image within. Then apply the opacity to the img.active like you have. I think you were on the right track with the first idea.
The only control you really get over opacity is either the element itself or it's background color, as in rgba(red, blue, green, opacity). This means if you apply the BG colour to the image, it will be obscured by this image, and as any changes to transparency effect the whole thing.
I'm trying to make a CSS/javascript dropdown menu (based on this example. This works. But I want to have a background color for my whole menu. I tried to place the <ul> inside a div and give this div a background color. However, the actual menu items do not appear inside the div when I view the page, they are under it. After some experimenting, I found out that this was caused by setting float: left; on the li elements that comprises the main menu items. (of cause, taking float: left; away means that the menu items are stacked on top of eachother in stead of side by side).
Does anyone know how to fix this?
If you are just trying to get a background color for your main menu items, you can add overflow:auto; or float:left; to the containing div tag.
If you want to set the background color of the sub-items, add it to the li ul rule.
Brief example here: http://www.danfsmith.com/so/css/suckerfish/menu.html
try adding the CSS property overflow: auto; to your <div/> or <ul/> which has the background.
I think what you are asking is how to set a background color for each link in your dropdown menu. If you create the menu with:
<ul class="navigation">
<li id="youarehere">Home</li>
<li>Blog</li>
<li>Papers</li>
<li>Programs</li>
<li>Activities</li>
<li>Contact</li>
<li>About</li>
</ul>
Then the CSS to set the background color is:
ul.navigation li a {
width: 111px;
padding: .5em 1em;
background-color: #993333;
color: #fff;
text-decoration: none;
text-align: left;
float: left;
border-bottom: solid 0px #fff;
border-top: solid 0px #fff;
border-left: solid 1px #000;
}
If you want the background colour for the div to show you'll need to clear the floats.
<div style="background-color: red">
<ul>
<li>asda</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
<span style="clear: both"></span>
</div>
Notice the span with the "clear: both" style in. That should do it.
Heres a link to a nice quirks mode post about it
http://www.quirksmode.org/css/clearing.html
I have some html that looks like this
<div id='nav'><a href ='./?page=1'>1</a> 2 <a href ='./?page=3'>3</a> <a href ='./?page=4'>4</a> <a href ='./?page=5'>5</a></div>
Basically, this is a navigation menu where the current page is 2. Now, the problem is, I want the current page (2 in this case) to always be centered. I'm just using text-align:center but this just means that 3 is always in the center. How do I make it so that the current page number is always in the center, regardless of whether it is the middle element in the list of links?
EDIT:
Ok, to be a little more clear, in the above case I want to look like this
1 2 3 4 5
^
|
This should be centered in the page and the spacing between the others
should remain the same. So the links will actually be slightly offcenter to
the right, but the current page will be in the center of the page.
I think I see what you're trying to do. Seems it should be pretty straightforward, but isn't. I think you might need to resort to absolute positioning and calculating the precise values on the server (or in javascript on the client). I also think that you'll need a container for the non-linked element. Something like this:
<style type="text/css>
#nav {position: relative}
#nav ol {list-style: none; margin: 0; padding: 0}
#nav ol li {display: block; margin: 0; padding: 0; position: absolute; width: 10%; text-align: center}
#nav ol li a {}
</style>
<div id="nav">
<ol>
<li style="left: 35%" >1</li>
<li style="left: 45%" >2</li>
<li style="left: 55%" >3</li>
<li style="left: 65%" >4</li>
<li style="left: 75%" >5</li>
</ol>
</div>
EDIT: To answer your revised question:
I would use markup like this
<div id="#nav">
<div>
<span class="spacer"></span>
<a href ='./?page=1'>1</a>
2
<a href ='./?page=3'>3</a>
<a href ='./?page=4'>4</a>
<a href ='./?page=5'>5</a>
</div>
</div>
And then css (with widths calculated appropriately):
#nav div
{
margin:0 auto;
/* width: 9 * link width */
}
#nav div .spacer
{
display:inline-block;
/* width: 3 * link width */
}
Perhaps something like this. If the width is not fixed then I think you'll need to use Javascript to do the ol margin-left calculation.
ol
{
display: block;
height: 20px;
margin-left: 0;
}
ol li
{
float: left;
width: 20px;
height: 20px;
}
body#page2 ol
{
margin-left: 300px; /*calculate this by hand or use jQuery to do the math*/
}