Im using a float: right on my website. I want to make that div 100% of the window height minus a 10px margin. I want the height to resize with the page.
I also want the image in it to sit at the bottom of the 'container' minus 10px padding.
I've tried adjusting everything, and am sure its something in the code conflicting but i just can't work it out.
Thanks for any suggestions in advance.
I suggest you use absolute positioning instead of floating for this, you can make elements expand by setting for example top and bottom at the same time.
Absolute positioning could work for the image as well if you set its bottom to 10px (its offset parent will already be the right container, because any position other than the default static makes the element an offset parent).
Quick example:
/* this makes your body take up the whole screen */
html, body { height: 100%; }
/* the positioning magic */
#right { width: 100px; position: absolute;top: 10px; bottom: 10px; right: 20px; }
jsFiddle Demo
UPDATE: and an updated jsFiddle to show an example on putting another element in the container and positioning it to the bottom.
#image { position: absolute; bottom: 10px; left: 20px; }
Related
I want to make a div scrollable when its touching the bottom div.
I tried this:
margin-bottom:30px;
position: relative;
overflow: auto;
but it didn't work.
I created a fiddle tho show you my problem:
https://jsfiddle.net/wp3wvuj2/1/
For explanation: When you type in in a input field a new field is added to the div (This function is simplified). I want that before the input fields touch the element below (the START-div) it gets scrollable (overflow: auto).
Somebody have an idea?
Edit:
I noticed that nobody understands my problem.
I'll try to explain it better:
I have list where players add their names. The list has minimum 4 players maximum ∞.
The start buttonis placed at the bottom. The problem is in a iphone 5 it looks like this:
And now if i would add another player input field it would Overlap with the START-Button. Thats the reason why I want it scrollable now. I already get that work with a fixed height, but i want it responsive!
Because on a iPad for example it looks like this:
And I want prevent an overlap with the start button like this:
So it should get scrollable before it overlaps (dependent on the display size).
Updated JS fiddle, try this, i have updated CSS part in your code
https://jsfiddle.net/wp3wvuj2/2/
.main_input {
width: 209px;
top: 70px;
margin: auto;
margin-bottom:30px;
/* position: relative */
overflow: auto;
height:216px; //Give some height always to apply overflow auto
}
.main_start {
width: 100%;
margin: auto;
/* position: absolute */ //Not required
bottom: 20px;
font-family: Pamela;
font-size: 36px;
text-align: center;
}
I've only changed the styles on class main-input
.main_input {
width: 226px;
height: 234px;
top: 70px;
margin: auto;
margin-bottom:30px;
position: relative;
overflow-y: auto;
}
EDIT:
Please note for this solution to be able to work, I needed to remove the Top and Bottom positions of some elements as they were breaking the layout. Please use Margins or Paddings to get that styling you desire.
This now works to scroll once the space runs out on the page.
https://jsfiddle.net/wp3wvuj2/5/
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
Here is the source: CSS Positioning
Now,how can I make relative position to work as viewport and adjust accordingly by setting height,width etc like fixed position.
It is possible in css or not?
If not then how can I do?
Check this Fiddle
Try it:
div{
POSITION: relative;
TOP: 450px; LEFT: 651px;
width: calc(100% - 651px);
float: left;
}
You can also use javascript or jquery to do it.
There are tons of questions on SO regarding vertical alignment, but I haven't discovered a clear answer to my problem.
I created a fiddle to show exactly what I'm trying to do.
HTML:
<div id="fade"></div>
<div id="fullscreen">
<img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>
CSS:
#fade {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Transparent Background */
background-color: #000;
opacity: 0.50;
}
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
/* Adding the display: block allowed me to center
the image horizontally with the margin: auto. */
display: block;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
/* This didn't work for me. */
vertical-align: middle;
/* This didn't do anything, either. */
line-height: 100%;
}
I am trying to make a lightbox of sorts, such that the user will click on an image on the page, causing that same image to load up in fullscreen mode. The first div, fade, will be used to cover the entire page with a semi-transparent black background, essentially giving the effect of the page fading away, while also making things modal.
I wanted to be able to nest the image inside the fade div, but I ran into a problem. Setting the opacity on the outer div (to create the fade effect) caused my nested image to inherit the opacity value. Thus, I added a separate div that was identical to the first one, except without the background, and nested the image inside of that.
For the record, I did manage to figure out a workaround to the opacity issue, but I haven't yet implemented it. Credit to Blowski, a SO user who posted this answer to a question regarding opacity:
I do not want to inherit the child opacity from the parent in CSS
The long story short, I have tried quite a few things now in trying to get this image to be centered vertically, but to no avail.
Keep in mind, this solution needs to work with any image!
I am certainly capable of adding a line of code to the $(window).resize() function to center the image manually, but I would like to avoid doing so, if possible. I'm very curious to learn a way around this, as I seem to run into these types of issues more often that I'd like.
Bonus: Why is vertical alignment so difficult for a browser to perform?
Here is one way centering an image in a fixed/absolute positioned div using CSS.
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
}
The trick is to use position: absolute for the img and set all the offsets to 0, and then margin: auto will center the image.
The max-width and max-height values will work as expected.
The reason this works is that the image has intrinsic dimensions, so the CSS engine has specific values to do the necessary math to center the images both vertically and horizontally.
See demo at: http://jsfiddle.net/audetwebdesign/KG99S/
Comments
Note that this technique works independently of the overlay.
Also, this works regardless of the aspect ratio of the image.
Reference
This technique follows from the CSS2 specification regarding how the horizontal and vertical margins are determined for absolutely positioned inline, replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
and
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height
I'm trying to make an effect similar as used on http://www.t-mobile.com/ , when the user scrolls down to the bottom of the page they reveal the "footer" more and more as the user keeps on scrolling.
I've tried to search both here and on google but haven't been able to find anything that's really useful. Most examples only shows/hide the footer once the user scrolls to the bottom.
So my question is, what's the effect called to reveal an element by scrolling? Are there any good tutorials / blog posts about this? All help I can get is much appreciated!
As I commented, you need to make your element fixed, so as explanation goes, I have two elements here, one is a normal position: relative; element, so nothing fancy about that, I assigned relative so that I can make the z-index work
Second element is positioned fixed and also, make sure you use margin-bottom which should be equal to the height of your footer, no need to assign any negative z-index whatsoever to this element.
Demo
Not much HTML ...
<div></div>
<div>Reveal Me</div>
CSS
/* These are for your main site wrapper */
div:first-child {
height: 800px; /* Even auto is fine, I
used fixed height because I don't have any content here */
background: #eee;
margin-bottom: 200px; /* Equals footer wrappers height */
z-index: 1;
position: relative;
}
/* These are for footer wrapper */
div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
For Dynamic Sizes
Note that am using a fixed height for the fixed positioned element, if you have variable height in footer element, than you need to use JS or jQuery to calculate the height using
$('#wrapperElement').css('margin-bottom', $('#footer').height());
Here, the selectors of #wrapperElement and #footer are my assumed ones, you can replace those with the your own selectors.
Something about fixed element - Horizontal Centering (I think it will be helpful to some users)
When you will make your element fixed, it will get out of the document flow, so if you are assigning fixed to the wrapper of footer element and want to center some content in there, than nest another element inside that wrapper and use width and margin: auto; for that...
Demo 2
HTML
<div></div>
<div>
<div>Reveal Me</div>
</div>
CSS
body > div:first-child {
height: 800px;
background: #eee;
margin-bottom: 200px;
z-index: 1;
position: relative;
}
body > div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
body > div:last-child div {
width: 80%;
margin: auto;
outline: 1px solid red; /* To show that element is horizontally centered */
}
Note: Selectors used in this answer are too general and are good for
quick demonstration purposes, in real projects, make sure you use
specific selectors
im loosing my mind here...
im trying to make the following:
a fixed div always stays appearing in the page, nothing dificult here, but inside this div i need to put some content that will be scrolling along with the rest of the site, note that the content has NOT his own scrollbar, its need to scroll together with the site, with the main scrollbar of the window...
I already try to make another div inside the fixed div with all the position atributes, with no sucess.
so far:
.furosimg {
position: fixed !important;
width: 181px;
height: 200px;
z-index:9;
margin: 20px 0px 0px 470px;
overflow: auto;
}
.furosimg .furosone {
position: relative !important;
width: 181px;
height:900px;
background:url(../images/topbg.png) center repeat-y;
}
any advices?
thanks!
Take a look at this example...all you gotta do is take the amount of window/document/body has scrolled and scroll the fixed element.
DEMO: http://jsfiddle.net/rgH56/4/
CODE
var f= document.getElementById('fi');
window.onscroll = function(){
f.scrollTop=document.body.scrollTop;
}