I have couple of list items with specified height and width with a background which has borders with middle portions being transparent.
each li contains an image.
<ul id="reel">
<li><img src="movie-image"></li>
<li><img src="movie-image"></li>
<li><img src="movie-image"></li>
</ul>
CSS:
#reel { width:960px; height:270px;}
#reel li { width:320px; height:327px; z-index:100; }
#reel li img { z-index:98; }
I want the background of the li to appear over the image. z-index, didn't do the trick for me.
any suggestion?
I suggest making the li image with a position absolute and a value of x and y in minus 100 or more as you need it to keep the li image away so that the background image shows up. Something like below:
#reel li { width:320px; height:327px; z-index:100; }
#reel li img { position:absolute; left: -100px; top: -100px; }
Try a pseudo element. This presumes the image is 100px by 100px
li {
display:block;
position:relative;
height:100px;
width:100px;
}
li:after {
content:"";
width:100px;
height:100px;
background-color:#000;
display:inline-block;
position:absolute;
left:0;
top:0;
background: rgba(0, 0, 0, 0.6);
}
Nicolas,
I think what your trying to do is wrong in code.
Try something like this
http://pastebin.com/7AnSxcEh
Give the same height and width to the li and the div. Also add a positioning. so that you can stack up the order.
Well I seem to found the solution for this problem,
#reel { width:960px; height:270px;}
#reel li { width:320px; height:327px; z-index:100; position:relative; }
#reel li img { position:absolute; z-index:98; }
Thank you #adrian
Related
I got a problem with giving back the child height to its parent.
The code comes from the Magento OnePageCheckOut site and I guess it is an css issue.
Normally the checkout goes from up to down. With using of a modified css code, the progressbar is seperated on top of the page and the content for the current step is shown below. Sadly, the child-element, where the content is shown, is handled as an overflow element. This makes it necessary to set a defined height for its parent element, which means, all steps have the same height and it looks so bad.
Maybe you guys have an idea what I could change in the css files to give the needed height back to the parent-element. I tried to change the display values or played with position, but to be honest, I m not that deep in css to know exactly what am I doing. It was more trail and error.
An image of that problem below:
The code is:
<ol class="opc" id="checkoutSteps">
<li id="opc-billing" class="section allow active">
<div class="step-title"></div>
<div id="checkout-step-billing" class="step a-item"></div>
</li>
<li id="opc-shipping" class="section">
<div class="step-title"></div>
<div id="checkout-step-billing" class="step a-item" style="display:none;"></div>
</li>
</ol>
.opc { position:relative; overflow:hidden; height:970px; padding-top:20px; text-align:center; border:1px solid #BBAFA0;}
.opc li.section { display: inline; }
.opc .step-title,.opc .allow .step-title,.opc .active .step-title { position:relative; text-align:center; border:none; background:none; padding:0; overflow:hidden!important; height:80px; display:inline-block; vertical-align:top; }
.opc .step { padding:30px 20px; position:absolute; border:0; top:100px; left:0; z-index:1; background:#fff; width:605px; height:900px; border-bottom:1px dotted #ccc; border:none; width:643px; text-align:left;}
.opc:first-of-type .active .step{left:0; width: 100%;}
For starters, this is not going to be pretty (It's because of things like this that make me less and less of a fan of Magento). Basically what the current CSS is doing is positioning .step-title relatively and .step absolutely. Absolute positioned elements are out of flow for the document, so what ends up happening is the document renders the .step-title elements as if they were right next to each other, but the .step is out of flow, so it's just kind of hanging out 100px from the top of .opc. In order for the .steps to have their normal dimension, we need to figure out how to get them to not be position: absolute. I took the CSS and made this fiddle:
http://jsfiddle.net/31db2uma/
The first step is to remove the position:absolute and related rules and the height attributes:
http://jsfiddle.net/31db2uma/1/
.opc {
position:relative;
overflow:hidden;
padding-top:20px;
text-align:center;
border:1px solid #BBAFA0;
}
.opc li.section {
display: inline;
}
.opc .step-title,
.opc .allow .step-title,
.opc .active .step-title {
position:relative;
text-align:center;
border:none;
background:none;
padding:0;
overflow:hidden!important;
height:80px;
display:inline-block;
vertical-align:top;
}
.opc .step {
padding:30px 20px;
border:0;
background:#fff;
width:605px;
border-bottom:1px dotted #ccc;
border:none;
width:643px;
text-align:left;
}
.opc:first-of-type .active .step{
left:0;
width: 100%;
margin-top: 80px; /* same as old title height. This is for later when we make the steps `position:absolute` */
}
The trick is then to make sure all the steps stay at the top of the .opc container. For that, we need to take it out of flow and for that we use position:absolute (same bad code, different application). This will cause another major issue to arise. We have no idea where to put the elements. Our best bet would be to give them each 20% width assuming there will always be no more and no less then five steps.
http://jsfiddle.net/31db2uma/2/
#checkoutSteps li .step-title {
width: 20%;
position: absolute;
top: 20px; /* same as padding */
}
#checkoutSteps li:first-child .step-title {
left: 0;
}
#checkoutSteps li:first-child + li .step-title {
left: 20%;
}
#checkoutSteps li:first-child + li + li .step-title {
left: 40%;
}
#checkoutSteps li:first-child + li + li + li .step-title {
left: 60%;
}
#checkoutSteps li:first-child + li + li + li + li .step-title {
left: 80%;
}
This is a pretty thoroughly hacked solution, but I know from experience that Magento sometimes doesn't really give you many options.
What you can do is when user clicks next button, get the height of the next new child container to be shown in jquery and set that height to the parent container. You can use CSS but giving static height can be problematic if content goes down in different screen resolutions. Jquery will help in this
my goal is to create a Statistic Bar.
To create this, i use a list which has position:absolute to have a vertical List.
My problem is that - because of the absolut position- i have to give each li tag +50 Pixel, so that they are not overlapped.
Maybe someone has an idea or a better code snipped for this ;)
HTML
<div class="statisticWrapper">
<div class="barWrapper">
<ul>
<li class="element1" style="height:0%"></li>
<li class="element2" style="height:0%"></li>
<li class="element3" style="height:100%;"><span>1056</span></li>
<li class="element4" style="height:30%"></li>
<li class="element5" style="height:0%"></li>
</ul>
</div>
</div>
and here is the CSS Code
.statisticWrapper{float:left; width:494px; height:250px; margin-left:8px;}
.statisticWrapper .barWrapper{float:left; width:494px; height:210px; position:relative;}
.statisticWrapper .barWrapper ul > li {position: absolute; width: 40px; bottom:0px; background-color:#ccc;}
statisticWrapper .barWrapper li.element2{margin-left:50px;}
statisticWrapper .barWrapper li.element3{margin-left:100px;}
statisticWrapper .barWrapper li.element4{margin-left:150px;}
statisticWrapper .barWrapper li.element5{margin-left:200px;}
The code actually works, but when i want to have a responsive site, i have to change the margins in each media query and so.. There have to be a better method to solve my problem :(
This is what i actually have: http://skruffes.bplaced.net/test.html
This is what i want:
Another way would be to use vertical-align and display:inline-block or even inline-table to go a bit further.
gradient and box-shadow can help too to improve styling . example : DEMO
style attribute can be set from class and removed from HTML.
.statisticWrapper {
float:left;
border:solid;
margin-bottom:25px;
}
.barWrapper {
width:494px;
height:250px;
line-height:275px;
text-align:justify;/* spread evenly */
background:lightgray repeating-linear-gradient(to bottom, transparent 0 , transparent 24px, gray 24px, gray 25px);
}
ul {
margin:0;
padding:0 50px 0 0;/* add padding on right, left has got an empty pseudo element using that much space */
list-style-type:none;
height:100%;
line-height:1em;
box-shadow:0 15px 15px gray
}
ul:before {/* handy once you have nothing up to 100% :) */
content:'';
padding-top:275px;
display:inline-block;
vertical-align:bottom;
}
ul:after {/* triggers justify like in flex model by adding a virtual line */
content:'';
display:inline-block;
width:100%;
height:0px;
padding-right:50px;
}
li {
width:40px;
display:inline-table;
vertical-align:bottom;
background:lightgreen;
padding-bottom:25px;
position:relative;
box-shadow:0 0 1px 1px;
}
li span {
display:table-cell;
vertical-align:middle;
text-align:center;
background:green;
}
.h10 {height:10%;}
.h20 {height:20%;}
.h30 {height:30%;}
.h35 {height:35%;}
.h40 {height:40%;}
.h50 {height:50%;}
.h60 {height:60%;}
.h70 {height:70%;}
.h80 {height:80%;}
.h90 {height:90%;}
.h100 {height:100%;}
/* extra , demo purpose to center X,Y body*/
html {
display:flex;
min-height:100%;
}
body {
margin:auto;
}
free interpretation of your chart possible through CSS and static position:
The easiest way would be to float li elements to left and move position: relative; from .barWrapper to li element. Then position span with bar label absolutely from bottom. Then you can forget about any additional classes or anything for individual bar.
Demo on JSFiddle
Note: I've removed unnecessary code and added <em>s to position bar label on the bottom to make it look better.
EDIT: If you want label to be over the bar as in your picture simply change bottom: 0; to bottom: 100% in em styling - JSFiddle
UPDATE:
Or you can do that even better by setting display: inline-block; to li so then you can set height directly on li not on inner span as in my first solution so you don't need additional element. em is used only to get labels over the bar.
Demo on JSFiddle
I have a CSS design problem for a day and a halve now and it is driving me nuts. I have an horizontal navigation bar with a single unordered list inside. Each list item contains an anchor (or hyperlink) to a page within the website, the CSS is as follows:
nav#main{
background:#000;
width:100%;
overflow:auto;
}
nav#main ul{
list-style:none;
}
nav#main li{
float:left;
display: block;
overflow:auto;
}
nav#main a{
display:block;
padding:1em;
color:#FFF;
text-transform:uppercase;
font-size:1.6em;
}
nav#main a:hover{
background:#EF7E05;
background-clip:padding-box;
border-width:0 0 15px 0;
border-image:
url('../images/nav.png')
0
0
25
stretch;
}
And the HTML:
<nav id="main">
<ul>
<li>Link text</li>
<li>Link text</li>
<li>Link text</li>
</ul>
</nav>
<div id="contentArea">
<!-- DIFFERENT DIVS, COLUMS ARTICLES ETC. -->
</div>
This works all like it should work.
However what i am trying to accomplish is that the border image is displayed outside the nav bar and that it doesn't push the contentArea downwards a 25px. Any ideas?
I also tried to absolute position a block with a.hover::after. This works beautifully, however the width of the block cannot be set equal to a. Perhaps any ideas on this one too?
You need to clear your floated elements using a clear rather than overflow:visible
If you do this you can use your absolute positioning to create the border:
nav#main{
background:#000;
width:100%;
}
nav#main:after {
content:'';
display:block;
clear:both;
}
nav#main ul{
list-style:none;
}
nav#main li{
float:left;
display: block;
overflow:visible;
}
nav#main a{
display:block;
padding:1em;
color:#FFF;
text-transform:uppercase;
font-size:1.6em;
position:relative;
overflow:visible;
}
nav#main a:hover{
background:#EF7E05;
}
nav#main a:hover:after{
background-clip:padding-box;
content:'';
position:absolute;
top:100%;
left:0;
right:0;
border-width:0 0 15px 0;
border-image:
url('../images/nav.png')
0
0
25
stretch;
}
Example
I have noticed that the border image thing doesn't work in firefox or ie so this will give you the same effect and is more browser friendly:
nav#main a:hover:after{
background-clip:padding-box;
content:'';
position:absolute;
top:100%;
left:0;
right:0;
height:15px;
background: url('../images/nav.png') left top no-repeat;
background-size: 100% 15px;
}
Example
I have an unordered list used for navigation tabs. I want them to have space between them but I also want the beginning of the list to line up with the rest of the text to the left.
I know this is simple but I can't figure it out.
http://jsfiddle.net/29g9S/3/
<body>
<div class="page-box">
<p>I am trying to get the ul's li's to line up with the "My Blog" text and still flow with the document</p>
<h1>My Blog</h1>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</body>
CSS
.page-box{
position:relative;
left:50px;
}
ul{
position:relative;
left:0px;
}
ul>li{
float:left;
position:relative;
margin-left:100px;
list-style-type:none;
}
The key is killing the margin / padding on the ul:
.page-box{
position:relative;
left:50px;
}
ul{
position:relative;
margin:0;
padding:0;
}
ul>li{
display:inline-block;
position:relative;
margin:0 100px 0 0;
list-style-type:none;
}
Here is an updated jsFiddle. Notice the use of display:inline-block; instead of float:left;. Floats are a one way ticket to old webville! Embrace the wonder that is display:inline-block! :D
If i understood correctly css can be modified as follows,
http://jsfiddle.net/fTdHH/
ul{
position:relative;
left:0px;
padding:0px;
}
ul>li{
float:left;
position:relative;
/* margin-left:100px; */
margin-right:100px;
list-style-type:none;
}
Set
ul {
margin: 0;
padding: 0;
}
ul>li {
// no margin-left
margin-right: 100px;
}
http://jsfiddle.net/beautifulcoder/29g9S/8/
PlantTheldea is right about the margin/padding on the ul. If you want to keep the list items floated with margin-left, just remove the margin-left from the first list-item by using li:first-child:
.page-box {
position:relative;
left:50px;
}
ul {
margin:0;
padding:0;
position:relative;
left:0px;
}
ul>li {
float:left;
position:relative;
margin-left:100px;
list-style-type:none;
}
ul>li:first-child {
margin-left:0;
}
Also, is there are reason you're using position:relative on everything rather than just adding margin or padding to .page-box?
what im trying to do is have a vertical list with a solid border on the left side, but with 1 or 2 px space between each li. I can't use margin-bottom because then the border would break. I'm ultimately trying to have a list with a solid color on it's left side(no spaces), and when i hover the individual li for it to actually go left, over the existing border.I'm not set about using borders, but i've tried to do it with a wrapper div and i just can't seem to get it right, so any suggestions are welcome :)Oh and the vertical list is gonna be changing in height, so just putting a div as a background without having the height to auto to the list element is a no go.Heres the working link http://jsfiddle.net/hDHDF/ and i have the following code
<div id="menu">
<ul class="menu">
<li class="openmaincategory"><span>###</span></li>
<ul class="categories">
<li class="subcategory"><span>###</span></li>
<li class="subcategory"><span>###</span></li>
<li class="subcategory"><span>###</span></li>
</ul>
<li class="maincategory"><span>###</span></li>
</ul>
</div>
and the corresponding css:
#menu{
position:absolute;
right:0px;
left:0px;
top:120px;
height:auto;
width:190px;
margin-top: 35px;
margin-left:67px;
}
.menu {
list-style-type:none;
padding-right:10px;
color:#6c6762;
}
.maincategory{
background-color:#ada397;
height:40px;
}
.openmaincategory{
height:40px;
background-color:#ada397;
}
.menu li a{
display:inline-block;
height:100%;
width:100%;
}
.menu li{
border-left:solid #6c6762 40px;
}
.menu li:hover{
border-left:solid #6c6762 20px;
padding-left:10px;
}
.menu span a{
color:#5b5856;
font-size:20px;
padding-left:4px;
padding-top:6px;
}
.menu a{
text-transform:none;
text-decoration:none;
color:#6c6762;
}
.subcategory {
background-color:#d7d1c9;
height:40px;
}
It sounds like you want to use padding rather than margin. I set up an example here based on your code.
Key parts are moving the subcategory class to the span from the li and adding the .last so you can play around with final spacing.
.categories li span{
background-color:#d7d1c9;
height:40px;
padding-top:2px;
}
.subcategory .last{
padding-bottom:2px;
}
Update with the padding for the anchor on the last li.
Have the border on the list itself, not on the list items.
I fixed it by adding the border to the list itself and making the hover effect margin-left:-20px.