I have a box which displays the contents of a chosen file using jquery.
The code for the box is
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
I want the close-lightbox div to be always at the bottom of the box.So the css for it is
#close-lightbox{color:red;position:absolute;bottom:0;padding-left:30%;}
Div lightbox has overflow:auto.
Now, what happens is that if the lightbox-content is not big and it fits the fixed size of lightbox then there is no scrolling and the close-ligthbox does appear at the bottom as I wanted.
But if the lightbox-content is big and doesn't fit the fixed size of lightbox then there is scrolling but the close-lightbox appears at the bottom of the lightbox BEFORE that scrolls down which means it appears on the middle of the lightbox-content.
Any suggestions how I can fix that?
.lightbox{
height:auto;
overflow:hidden;
}
.lightbox-content{
height:270px;
overflow:auto;
}
Change the height of this based on your needs of your lightbox.
You could wrap lightbox in its own wrapper, and position the close-lightbox relative to it.
HTML
<div class="lightbox-wrapper">
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
</div>
CSS
.lightbox-wrapper {
position: relative;
}
#close-lightbox {
position: absolute;
bottom: 5px;
left: 30%;
}
Take a look at this fiddle - http://jsfiddle.net/joplomacedo/4chu6/
EDIT Ohgodwhy's solution is actually cleaner if you're able to move lightbox's overflow:auto to lightbox-content -> While I was at it, I made fiddle with his solution - http://jsfiddle.net/joplomacedo/4chu6/2/
Related
Can anyone assist me with the following div layout? I have tried a couple of solutions, however, the only way i have been able to accomplish this is using tables.
I had a look at Holy Grail 3 Column Layout, however, this layoyt is not 100% height, and header is not fixed, i also need only the content to scroll, the sidebars needs to be fixed 100% height
It seems the answers here ignored most of your requirements. I stumbled upon this because I am having a rendering issue with the same layout you are after. I forked the fiddle above to show you:
http://jsfiddle.net/RsRf9/2/
The major difference is that the entire body is scrollable, not just the tiny area in the center (I think this is what you are after).
Aside from cleaning up styles that weren't doing anything (like floats while position fixed), the major change is to the center col - all you should need is this:
.center{margin:100px 200px;}
The other change is how you get that "height 100%" effect on your sidebars - my trick is to do this:
.left,.right{width:200px;top: 100px; bottom: 0px;position: fixed;}
Instead of height 100%, I simply tell it to stretch from top 100 (the bottom of the nav) to bottom 0 (the bottom of the page)
That will push the content bellow the top nav and in between your two fixed side bars.
I have created a working fiddle as per your requirements:
Here is working fiddle - UPDATED to include fixed header ONLY TOP BAR IS FIXED
The important thing to note is the structural layout of the divs... notice that the .center is AFTER the .right
<div class='wrap'>
<div class='head'>Header</div>
<div class='bodywrap'>
<div class='left'>left</div>
<div class='right'>right</div>
<div class='center'>center center center center center center center center center center center center ... blah</div>
</div>
</div>
and the css is:
JUST HEADER FIXED:
html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%} << UPDATED for fixed header
.bodywrap{margin-top:100px;width:102%;margin-left:-1%} << UPDATED - Terrible hack and you may find something more elegant
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;}
.right{float:right;}
.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}
HEADER AND SIDEBARS FIXED (Also was able to fix dirty hack for .left and .right undersizing
html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:100px;position:fixed;top:0;left:0;width:100%}
.bodywrap{margin-top:100px;margin-left:-8px}
.left,.right{width:200px;height:100%}
.left,.center,.right,.bodywrap{height:100%}
.left{float:left;position:fixed}
.center{margin-left:200px; overflow:scroll; overflow-x:hidden;margin-right:191px}
.right{position:fixed;right:0}
.left{background-color:#aaa}
.right{background-color:#ccc}
.center{background-color:#444}
.head{background-color:#777}
Here is with top and sides fixed center scroll liquid center column (and no gaps on .left and .right)
It's basic use of floats but the structural markup layout is key ;)
I use the YUI grids style sheet for this kind of layout. It is tried and tested and works in multiple browsers.
This is actually quite easy to do in a rudimentary sense, you don't need tables (or table-cell) but mixing px and % sizes can be problematic. If you stick to % your page will resize better anyway. Handling the cross browser issues takes a bit more CSS tweaking, but there are plenty of grid solutions out there that implement tried and tested solutions even for IE6 and frameworks like twitter's bootstrap will offer a lot more on top.
In other words, this is a solved problem, but here's a quick example of how you can get there by hand;
<div class="container">
<div class="header">
header
</div>
<div class="left">
left
</div>
<div class="main">
content
</div>
<div class="right">
right
</div>
</div>
And the CSS;
html, body, .container
{
height:100%;
}
.container
{
background-color: pink;
}
.header
{
background-color: yellow;
height:50px;
}
.left
{
background-color: red;
float:left;
width:10%;
height:100%;
overflow: hidden;
}
.right
{
background-color: blue;
float:left;
width:10%;
height:100%;
overflow: hidden;
}
.main
{
background-color:#fefefe;
float:left;
height:100%;
width: 80%;
overflow-y:scroll;
}
And of course the Fiddle
Using % sizing will also allow you to approach a more responsive design that works for tablet and mobile. Again, many of the grid frameworks out there are 'responsive' in design.
You can use scrollToFixed plugin for left-sidebar and right-sidebar fixed and center column content only scroll up side and downside.
For demo scroll use below link
http://bigspotteddog.github.io/ScrollToFixed/
And one more thing use Bootstrap for design UI.
Include Bootstrap CSS and JavaScript in your page header part
<div class="container">
<div class="col-md-12">
<div class="col-md-3" id="left-sidebar">
left-content
<div>
<div class="col-md-6" id="center">
center content
</div>
<div class="col-md-3" id="right-sidebar">
right-content
</div>
</div>
</div>
You can modify as per your requirement. I just give you general hint.
Just write below script for scrolling
$(document).ready(function(){
$('#right-sidebar').scrollToFixed({
marginTop: function() {
return 5;
},
limit: function() {
return (
$('#footer-widgets-bg').offset().top - $('#right-sidebar').outerHeight(true)
);
},
zIndex: 1,
removeOffsets: true
});
});
I have a dropdown with content. I'm trying to make the content align at 0px at the left of the screen. No matter what I try, it still remains aligned within its parent container.
Since the dropdowns are centred in the browser, I'm having difficulty getting it work go where I want.
http://jsfiddle.net/XkuHy/2/
<div id="sticky">
<div id="nav">
<div class="logo">logo</div>
<span class="n list">browse</span>
<span class="n list">search</span>
<div class="n drop">
<span>My Account</span>
<div>
hello, world!
</div>
</div>
</div>
NOTE: CSS is not my strong suit.
NOTE 2: StackOverflow kept banging on about needed code and not just a link to jsFiddle - not sure why so ignore the code dumped as you can see it in the fiddle.
The .content box is being positioned relative to its parent, the .n.drop div because it has a relative positioning. If you remove the relative positioning from the .n.drop element you will find the .content element to position itself about where you want it. You may need to also add a margin-top: 16px; to the .content element to make it clear the menu.
You can see the updated demo here: http://jsfiddle.net/XkuHy/14/
When you make its margin to 0px. It is going to 0px but with respect to its parent. So you can try margin of negative values to its css:
margin-left:-205%;
like this: http://jsfiddle.net/XkuHy/13/
or
left: -345px;
like this: http://jsfiddle.net/XkuHy/13/
But both of them has cross browser comparability issue.
I have solved this issue by adding this to css, where "hello world" has a class name of "dropmenu":
.drop:hover .dropmenu{
position: fixed;
top: 100px;
left: 0;
width: 100%;
height:100px;
padding:0;
margin:0;
z-index:998;
background-color:white;
}
Surprise! surprise! I think it works! Check out:
http://jsfiddle.net/XkuHy/10/
I am trying to place divs next to each other of which the divs act like a sticky-footer using position:absolute and bottom:0
HTML: (note that I could have many of these with different id but the same class)
<div id="s6234" class="sticky">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="sticky">
<div id="s_content">
Hello
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
jsFiddle: http://jsfiddle.net/ZqaDe/
Preview: http://jsfiddle.net/ZqaDe/show
EDIT:
I don't know how many divs there are every time. The divs there are appended dynamically. In the actual app, those div's can be deleted, moved or added so it they will keep changing every time. So basically I want a way so that the are placed every time next to each other.
EDIT 2:
I don't think I am able to wrap all div's inside a main sticky footer and set a float:left so that they are placed next to each other. In the real example, the position:absolute and bottoom:0 is set dynamically. Updated fiddle: http://jsfiddle.net/u2nda/
You could have an empty footer div in which you append the divs you are minimizing. You then just need to set the position to relative, float the div left and reset top and left to 0.
So your JQuery string would become:
$(this).parent().parent().appendTo("#footer")
.css('position','relative')
.css('float','left')
.css('height','45')
.css('top','0')
.css('left','0')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/2/
Edit
Or better still, change the position to static, that way you do not need to reset the top and left values:
$(this).parent().parent().appendTo("#footer")
.css('position','static')
.css('float','left')
.css('height','45')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/3/
Edit 2
Or even better, just append classes that do not overwrite your inline CSS:
.tabMe {
float: left;
height: 45px;
position: static;
}
.tabMe #s_head{
border: 0;
}
.tabMe #s_content{
display: none;
}
And your JQuery to show / hide could become:
$('#s_head button').on('click', function(){
var check = $(this).parent().parent();
if( !check.hasClass("tabMe"))
check.appendTo("#footer").addClass("tabMe")
else
check.appendTo("body").removeClass("tabMe")
});
JSFiddle: http://jsfiddle.net/u2nda/4/
You just need to move the second div to the right: #s7243 { left: 200px; }. If you had a third div, you'd need to move it over even more: #third-one { left: 400px; }.
I would place the divs in a main container that had my position absolute and then float your blocks.
Example http://jsfiddle.net/ZqaDe/3/
I think that best option would be to wrap your "sticky" divs. See my demo on jsfiddle
<div class="sticky">
<div id="s6234" class="left">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="left">
<div id="s_content">
Hello
</div>
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
.left{float: left;margin-left: 10px;background: yellow;}
I'm writing a website/iPad app (using PhoneGap), where I have 1024x768 images on a slide show. I'd like to position another image, e.g. the home icon, on top of the 1024x768 images, at exactly the same position, no matter the screen size (e.g. high/low resolution PC screen, or 1024x768 tablet display). I tried absolute, but the position changes in different displays, and it's not the same position as I originally set up in CS 5.
Similar to the other answers, but if you prefer not to define the width and height, you can use float:
http://jsfiddle.net/RprTY/
<div>
<img src="http://placekitten.com/300/300">
<img src="http://placekitten.com/30/30" id="smallone">
</div>
CSS:
div{
float: left;
position: relative;
}
img{
vertical-align: bottom;
}
#smallone{
top: 0;
left:0;
position:absolute;
}
As long as the parent container is set to either position: relative or position: absolute, then the absolutely positioned image should be positioned relative to the top left corner of the parent. This should be completely independent of screen resolution.
Put your 1024x768 image in a div of the same size. Include your home icon in that div as well. Give the div position relative, and the home icon position absolute and it will be absolutely positioned inside it's parent div.
I tried the solution proposed here but it didn't work. I have basically the same problem: two images inside a slider, one of them is absolute positioned with percentage values (so when I change the width of the viewport it scrolls sideways). The other image should move along with the first one statically positioned in relation to the latter.
The thing is in my case the images are not children of the same parent div. I have set up a Fiddle example of the code I am currently working with.
http://jsfiddle.net/36QPG/1/
<div class="image">
<img id="back" src="http://placekitten.com/300/300" />
</div>
<div class="slide">
<div class="image">
<img id="front" src="http://www.lionsclublagardiecastelnau.com/data/images/images-sites/images/icone-android.png"></img>
</div>
</div>
It's worth mentioning that I can't change the HTML code set up.
I've been struggling with this problem for a while now, but I haven't been able to figure it out. I hope I've made myself clear enough.
Thank you in advance.
html:
<div id="bottom">
<div id="top"></div>
</div>
css:
#bottom{
background: url(*bottom-image-url*);
position: relative;
width: *??*;
height: *??*;}
#top{
background: url(*top-image-url*);
position: absolute;
width: *??*;
height: *??*;
left: *??*;
right: *??*;}
So i have a couple of tag, and i have some text and images i'd like to center or align to the bottom inside of them. Vertical-align doesn't seem to be in the mood to work.
I'd also like to make a horizontal menu, which will have a start image (say, menutop.png), a filler (menubg.png) and a closing block (menubottom.png), and i'd like for the bottom closing block to automatically place itself at the end of the menu, no matter how long it happens to be.
Thanks!
This calls for absolute positioning in CSS. First you need to give the parent DIV a position value (relative or static at least).
Then, the images and text you want to align to the bottom you need to make position: absolute, and bottom: 0px.
The horizontal menu should be 100% width (display: block also works), and the closing block placed inside. Absolutely position the closing block, and give it "right: 0" so it is always to the right.
I solved it like this:
<div id="menu">
<img src="img/menutop.png" />
<div id="menucontent">
stuff goes here
</div>
<img src="img/menubottom.png" />
</div>
CSS:
#menu
{
width: 335px;
height: 100%;
float: right;
border:solid black 1px;
}
#menucontent
{
background:url(img/menubg.png) repeat-y;
width: 100%;
}
Thanks for the pointers though :)
Try this with the element you want to center something else within:
div {
display: table-cell;
vertical-align: center;
}
(Not sure if this works in every browser, but I'm fairly sure it does in Firefox and IE8 at least)