I recently found an article that gave me code to create a lightbox effect. Here's the article: http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
I realize this article was written in 2007, so maybe his explanation is no longer relevant.
Here's the problem, I have used his codes to create the lightbox effect, and tweaked them according to my needs. The only problem is, the "black overlay" section does not reach to the bottom of the browser.
In the article mentioned above, he explained that his code was supposed to create it so that the black overlay extended the entire width and height of the browser window and referenced the z-index to demonstrate this, but this is not the case for the height.
I have tried adjusting the z-index to be more than what it originally was, but nothing has worked so far. I've also tried searching for solutions, but again nothing I've tried has worked. Does anyone have any suggestions on how to get the black overlay to reach the bottom of the browser window? I tried this on a smaller screen (15") as well as mine (17") but the issue still remains. Thanks in advance for any help with this.
Here is a rough jsfiddle example and corresponding code:
<div id="container">
<div class="random-element">
<div class="fade"></div>
</div>
<div class="random-element"></div>
<div class="random-element"></div>
<div class="random-element"></div>
<div class="random-element"></div>
<div class="random-element"></div>
<div class="random-element"></div>
</div>
And CSS:
#container {
height: 1000px;
width: 100%;
background-color: #ffe;
padding-top: 50px;
}
.random-element {
margin: 50px 0 0 100px;
height: 100px;
width: 100px;
background-color: #aff;
}
.fade {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background-color: #000;
opacity: 0.5;
z-index: 1001;
}
Change the CSS from absolute positioning to fixed positioning.
.fade {
position: fixed;
}
Related
I have a HTML5 audio player in a div. I have set its width to 100%. I wanted to fix the player at the top when scrolled so I fixed it's position. The problem is when I do that, the player width overflows the container.
Below is my code.
HTML
<div id="container">
<audio arc="#" controls></audio>
</div>
CSS
#container {
width : 350px;
height: 300px;
background: #BADA55;
}
audio {
width: 100%;
/*position: fixed;*/
}
I created a fiddle to demonstrate the issue. Its currently in the state which I want it to look like. Un-comment the position: fixed; to see the problem.
Can anyone please tell me what I should do to make it stay fixed with the correct width?
Thanks
You can try with
width:inherit;
http://jsfiddle.net/vfQ5K/2/
Need to wrap the audio element and apply the css to the wrapper. I updated your jsfiddle.
<div id="container">
<div class="audioWrap">
<audio arc="#" controls></audio>
</div>
</div>
Then CSS:
#container {
width : 350px;
height: 300px;
background: #BADA55;
position: relative;
}
.audioWrap {
width: 100%;
position: fixed;
}
Note, if you are fixing it's position inside the container, you may want to add 'position: relative' to the container. I went ahead and added that to the jsfiddle.
Fiddle of the issue: http://jsfiddle.net/Vy365/3/
I'm trying to create sections on a page that have a parallax scrolling effect.
The main CSS I'm using to achieve this is background-attachment: fixed for the background image, and position: fixed for the text on top of the image.
I have multiple div's with this effect on the page, and I want each section to cover up those that come before it.
HTML:
<section>
<div id="parallax-1" class="parallax">
<div class="title">
<h1>Fixed Text 1</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
<section>
<div id="parallax-2" class="parallax">
<div class="title">
<h1>Second Fixed Text</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
CSS:
.parallax {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
max-width: 1920px;
height: 200px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 0;
z-index: 1;
}
.parallax .title {
position: fixed;
top: 80px;
}
#parallax-1 {
background-image: url(http://placekitten.com/500/200);
}
#parallax-2 {
background-image: url(http://placekitten.com/500/202);
}
.scrolling-content {
position: relative;
width: 100%;
height: 200px;
background: #ffffff;
z-index: 2;
}
The background images cover up one another appropriately, however the fixed text remains fixed on the page (once again, see the fiddle).
Is there any way to fix this with CSS? Or do I have to do some yucky jquery window scroll monitoring?
Think you want to use position:absolute instead of position:fixed on your '.parallax .title' class
Since you are using jQuery anyway, why don't you try a plug in like http://stephband.info/jparallax/ ?
EDIT: For mobile apps, you may want to check out Skrollr. It is pure Javascript, and there are some really good examples in the "In the wild" section.
It can help you from re-inventing the wheel.
Here are two tutorials (both using Skrollr.js) which might help others trying to create a similar parallax scrolling effect.
How to create a parallax scrolling website
Simple parallax scrolling tutorial
Consider a web page consisting in a background part that holds an image on top of which I would like to create an animation (for example image=sky and animation=moving-clouds). This thing is 100% width.
On this "canvas", a 100% content part should be placed.
The reason why I am asking this question is because I can simply achieve something like this working with divs and absolute positioning. But I do not know how to make something like this when divs have a 100% width!
I would be able to write something like this:
<div id='canvas' style='width:100%;background-image:...'>
<div id='cloud1' style='...'></div>
<div id='cloud2' style='...'></div>
<div id='cloud3' style='...'></div>
</div>
<div id='cont' style='width:100%'>
my content here
</div>
Styling canvas and cont so that cont appears on canvas and elements like clousx are moved by javascript but they live behind cont.
How to achieve this?
I don't know if I got you right, but you can do it exactly the way you want it. So this is a combination of width: 100%; and position: absolute;.
Demo
Try before buy
The demo uses for demonstration purposes the background-property with a CSS3 rgba-value.
CSS
div.outer {
position: absolute;
width: 100%;
height: 100%;
border:1px solid red;
}
div.text {
background: rgba(255,255,255,0.5);
}
div.cloud {
position: absolute;
top: 20px;
left: 20px;
height: 50px;
width: 50px;
border: 1px solid red;
}
HTML
<div class="outer">
<div class="cloud"></div>
</div>
<div class="outer text">
Content goes here
</div>
I created a website for a friend with a css sticky footer.
It is supposed to look like here: http://abchealth.info/doc-mike-special/test2/
It worked fine until I added the very last segment of the long sales page at http://abchealth.info/doc-mike-special/, then suddenly the footer layout got messed up and there's suddenly a whole lot of empty space under the footer :(
I can't figure out why, being an amateur myself...can anyone help??
To save time I extracted the html and css that seems most likely relevant, hop this helps:
HTML:
<body>
<div id="mastercontainer">
</div>
<div id="footerclear">
</div>
<div id="footer">
</div>
</body>
CSS
div#wrap {
margin: 0 auto;
width: 100%;
padding-bottom: 605px;
}
div#mastercontainer {
width: 100%;
height: 100%;
min-height: 100%;
}
div#footerclear {
}
div#footer {
position: relative;
margin-top: -570px;
height: 570px;
clear: both;
background-image: url(http://abchealth.info/images/footer-bg.jpg);
background-repeat: repeat-x;
}
I would greatly appreciate any (beginner-friendly) help, thank you!!
remove the width 100% in <div id="main"> in main.css line no 35 so the vertical scroll will remove
in your demo
after make it correct result
I am trying to get my right sidebar to fill to extend the full length of the content within my #wrapper on this site: http://www.starmedianetwork.com/
I put a red border around it to try to see where my #right is on my page. I have tried working with:
height:100% on that #right and others. Also searched on google about clear fixes but I couldn't get that too work, also came across some solutions on experts-exchange, but those didnt work.
Any ideas how I can get my sidebar to extend with the background-color to fit the length?
You could try this approach: http://www.alistapart.com/articles/multicolumnlayouts/
You can achieve this with a faux sidebar:
<div class="sidebar_back"><.div>
<div class="sidebar">
<p>The sidebar content</p>
</div>
With this css:
.sidebar_back {
top: 0;
left: 0;
bottom: 0;
z-index: -1;
width: 200px;
background: #444; // the color you want the sidebar to be
position: absolute;
}
.sidebar {
float: left;
width: 180px;
padding: 10px;
}
The .sidebar_back will extend all the way to the bottom of the page, so just give that the color that you'd like the sidebar to be, and the actual sidebar div will appear to be full-height. You can use a percentage-based width instead of pixels too. Here's a codepen showing an example:
http://codepen.io/poopsplat/full/jquBv
You cannot get a div to fill the height of it's parent. It may work in one browser, but I've had this problem and it is not simply solved by a height:100%.
You can simulate the background by creating a background that tiles all the way down the side. This isn't the most elegant solution.
The only other solution I have found is to use javascript. After the page loads, you can set the height of the div to precisely what it needs to be based upon the height of the div that you want it to expand within.
There may be some javascript libraries out there to assist you with positioning of this troublesome div, but I can't conjure up one at the moment.
I haven't tried this, but...it feels like it should work (which of course is likely the kiss of death to the attempt):
#wrapper
{position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
width: 100%;
background-color: #ffa;
}
#right {position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 15%; /* this has to be fixed-size so you can account
for it in the next bit; but can still be kinda
fluid-ish... */
display: block;
background-color: #ccc;
overflow: auto;
}
#left {width: 83%; /* 100 - (15% + 2% (for a gutter)) */
margin-left: 1%;
margin-right: 16%; /* less than 100 - 83, to allow for rounding of % or px */
display: block;
background-color: #0ff;
overflow: auto;
}
p {display: block;
margin: 0.5em;
padding: 0.2em 0.5em;
}
...
<body>
<div id="wrapper">
<div id="left">
<p>The left-hand content</p>
</div>
<div id="right">
<p>The right-hand content</p>
</div>
</div>
</body>
It's not terribly pretty, but it does work. Though I'm not a fan of using position: absolute (or fixed) so if anyone's got a better suggestion I'd go for it =)
Incidentally, there's working demo of the implementation (with added 'lorem ipsum' goodness) over at: http://www.davidrhysthomas.co.uk/so/cols.html.
(Okay, I lied: I clearly have tried it now...)
Here is the way I have found to solve this issue:
You have to use four div tags - one main container which contains the sidebar, the main content, and a footer.
First, add and style the elements in your stylesheet:
#container {
width: 100%;
background: #FFFAF0;
}
.content {
width: 950px;
float: right;
padding: 10px;
background: #FFFAF0;
}
.sidebar {
width: 220px;
float: left;
padding: 5px;
background: #FFFAF0;
}
#footer {
clear:both;
background:#FFFAF0;
}
You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.
Then, simply set up your web page like this:
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
I wrote a more in-depth blog post about this at [http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container][1]. Please let me know if you have any questions. Hope this helps!
I solved my sidebar problem for my admin page using jQuery with just a couple of lines of code
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); // Extend sidebar to bottom of viewport
$(window).resize(function(){
$('aside').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of bar when viewport height changes
$('#main').height($(window).height()-($('#header').height()+$('#secondary_bar').height())-2); //change size of main content when size of viewport changes
});
It seems to work in all browsers, however, when the content on the right is larger then the viewport and issue will occur when you scroll down. It can be fixed with some content height checks but for me it doesn't matter. Hope that helps someone out there =)