So, I have a number of buttons that will expand a div with some content below it.
I want to place them in an order so that the expanded content is right after the button that will expand it. This is because I want the tab order to be:
tab to a button and click it
tab through the expanded content
tab to the next button or tab to content below
To achieve this I've made the expanding content to be position absolute. So far so good. The problem now is that the content after the expanded container does not get pushed down.
See page and code here: http://niklasholmberg.se/temp/tab1.html
My first solution to this was to measure the height of the expanded div and add that as padding to a container that is before the content that should be pushed down.
See page and code here: http://niklasholmberg.se/temp/tab2.html
I don't quite like the solution and want something that does not require scripting to get the layout right.
Can I somehow make the div with class group also "wrap" the container that is positioned absolute?
Can I somehow position the expanded div in another way that doesn't use position absolute but achieves the same result?
Or maybe someone has a complete other solution to this case.
Thanks
Okay,
you can use position relative to expanded div, ie article in this case.
<article id="content1" class="expandarticle">
<h1>Content 1</h1>
aa
<button>bb</button>
<input type="text">
</article>
your css should be
.expandarticle {
background: none repeat scroll 0 0 #ccc;
display: table;
left: 0;
padding: 10px;
position: relative;
right: 0;
}
Related
So I'm trying to have my footer in the bottom of the page at all time without using "position: absolute" as it overlaps the content of the page when the screen gets smaller. I also do not want to use "position: fixed" as I do not want the footer to be visable at all times. When I use "position: relative" it creates a white space below the footer and I cannot remove it. I would be very grateful if you could help me. I'm currently using Bootstrap 4 for my project. Here's my code:
<div class="container">
(some content)
</div>
<footer>
(some content)
</footer>
css
footer {
position: relative;
bottom: 0;
width: 100%;
background-color: grey;
text-align: center;
}
Thanks in advance.
Use position fixed instead of absolute with fixed the footer always at bottom of the page. And bottom 0 then it will always be at bottom. If anything overlap the footer then you can do z-index to 100 or higher so nothing will overlap the footer.
compare document.scrollingElement.scrollHeight and window.innerHeight in js.
if they are equal then that means your content is less than the view port in terms of height and you can use position absolute at bottom for footer as it wont override with your actual content.
if document.scrollingElement.scrollHeightis great than window.innerHeight then that means your content is bigger than the view port so without worrying you can place the footer at the bottom without using position property.
If window resizing is your problem (resizing may change height of your document) then you can use resize event listener on window. There you can call a function to do above mentioned steps.
On this one particular page, I have added a secondary menu (gray bar) under the primary menu (red bar) to have a few links that, when clicked, will scroll down the page to the correct area.
The secondary menu was, by default, much taller than I wanted it - so by adding a height: 40px; value, I was able to get it to the height I want. The page links, however, stubbornly did not adjust along with the height of the menu and thus, when viewed, they are obviously not in the correct place.
Is there a particular CSS value I can add to try and help this issue? I've tried adjust margin-top, padding-top, vertical-align, etc... and some of that adjusts the gray bar, but absolutely nothing has yet to adjust the text for me.
It doesn't help that I'm using a paid theme I bought rather than one I developed myself (in an attempt to make site management easier for someone else who takes over the site, this is more of a "drag-and-drop" template).
http://www.miltonpreserve.com/about/
It looks like you added the 40px height to the div with the #aboutmen id. However, some of the content nested in that div has padding that makes it taller than that. If you remove the padding from #menu-about-menu you should see the text become visible. Then (if needed) you can add 'vertical-align: middle' to the elements that you have nested in #menu-about-menu.
Here's a simplified version of what you have going on:
HTML
<div class="outer">
<div class="inner">
<div class="text">item one</div>
<div class="text">item two</div>
</div>
</div>
CSS
outer {
height: 40px;
background-color: yellow;
}
.inner {
padding: 30px;
}
This simplified example has the same problem you're experiencing. If you remove the padding from .inner, you'll see that the problem goes away. Here's a
jsfiddle with the same code.
Hope that helps!
I have a iPad frame and want to have a larger image behind it (the page content) that scrolls down as you scroll. My css is more complicated then the example in the fiddle here https://jsfiddle.net/vk0jk37v/ but I cant seem to get even this to work.
in my real webpage I want to scroll down normally until I get to this image, then I want the scroll to effect the "page content" in this image. After I want to allow the user to continue scrolling normally after the "page content" of the image ends.
Edit: I have updated the fiddle and it rough but essentially what I am looking for except when I set the iPad frame to be on top of the image I am unable to get the content to scroll. the reason I need it under is to keep the image together when resizing the window with out covering the "fixed nav" or black side lines. Any thoughts on this? and thank you Felk for the hint in the right direction
Edit2: the image attached is the context in which I am applying this.
example html
<div class="container">
<img class="frame" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
<div class="inner">
<img src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png" />
</div>
</div>
example css
.container {
width: 70%;
position: relative;
}
.frame {
/* position: absolute; */
width: 100%;
z-index: 100;
}
.inner {
height: 558px;
overflow: scroll;
position: absolute;
top: 14%;
left: 38px;
}
.inner img {
width: 92%;
z-index: -100;
}
Ok. I was trying to fix your fiddle but at the end I have changed too much.
I will explain thought what I would do if I wanted to do your project. (hopefully if I have understood your question well enough).
First at all I would position the image of the ipad at the background with position:fixed and negative z-index. Now we have the image NOT moving at all as the position is placed relative to the window and not to any element. And also we have the first part of your content over the image and scrolling nicely.
Then we focus on the right flow of the html elements when scrolling so basically there will be more content under the first (and later under the image). I have added another div with red background to illustrate better the problem.
The html would look something like this:
<div class="container">
<div class="outer">
<img class="" src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png"/>
</div>
<div class="frame">
<img class="ipad" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
</div>
<div class="moreContent"></div>
</div>
Now we focus just on separate the top content from the bottom content. To do this we just add a big margin-bottom to the first content. Now when scrolling once you reach the end of the first content the image at the background will show then after the margin is over the last content will start flowing over the image (which is what you don't want)
basically we have this: FIDDLE1
Now it's just time to do a very simple jquery (it's always simple if I can use it). We just need to give some orders to the browser so I have used this:
$(window).scroll(function () {
if ($(window).scrollTop() > 1127) {
$(".frame").addClass('relative');
$(".outer").addClass('no-margin');
}
else {
$(".frame").removeClass('relative');
$(".outer").removeClass('no-margin');
}
});
basically I'm telling the browser that when the scroll is higher than 1227px (height) to add a class to frame and another to outer and if you scroll back to remove the classes.
Then The class I add to outer will just remove the big margin between first and last divs while the class add to frame will just make the container of the image relative so the flow of the html is normal and the image will keep scrolling down with the rest of elements.
Of course the 1227px I choose is based on the jsfiddle images you provided but in your future projects it won't be too hard to find the real height of your first content justinpecting it with chrome or simillar. same with the big margin I added.
The rest of changes was to make the sizes correct and center all elements in the window with at 600px width.
Here you have the final FIDDLE
I have been trying to find a solution to this without much success. I am basically trying to place an image using a background property at the top and bottom of the page. Now I know I can make the positioning relative and it would place the image at the bottom move according to how much content is on the page.
I can also make the header/footer an absolute position and effectively just have the user scroll between them. But I want to make it where if there is not a whole lot of content, I want to place the image at the bottom of the page, and if there happens to be a lot of content (i.e. that the user has to scroll through), the image gets placed at the bottom.
This is just a little thing I am trying to figure out for myself so any ideas/suggestion or tutorials on this would be greatly appreciated. I would rather not use tables to layout my page and wondering how to go about this.
Thanks!
Could you apply padding-bottom to your <body> and then use background-image to apply your image to it? If not, see my answer to this question for how to make a footer DIV stick to the bottom of the page: Sticky footer, or rather: content doesn't stretch down to footer
If you are looking for something like this:
| IMG |
| CONTENT |
| FOOTER |
then why do you need to use absolute positioning? If you have 3 divs, one on top of the other, with a certain width and the property clear:both, then the arrangement would be automatic. Then, in case you have a page with very little content, you can put a min-height to the content div.
For the first image that is the header, set the position to 'fixed' and top to 0px:
.first-image {
position: fixed;
top: 0px;
left: 0px;
}
For the second image that is the footer, set the position to 'fixed' and bottom to 0px;
.second-image {
position: fixed;
bottom: 0px;
left: 0px;
}
I have a DIV which I want to insert into my HTML content. Whenever I do, the content moves down from where the DIV WOULD have appeared in the content. It moves down the height of the div. I sat 'WOULD have appeared' because its position is set to relative.
Here is some code: (THE DIV I MEAN IS THE ONE WITH ID="pop"
<table border="0" align="center">
<tr>
<td><div id="pop" style="position:relative; z-index:20; top:100px; left:480px; width:208px; height:52px;"><img src="../Graphics/valj_oxo_komm.png"></div>
<div class="nav_container" id="nav_container">
<div id="nav_container2" style="position: relative; left: 0%; top: 13%;">
HERE IS ALL THE CONTENT
and some css:
nav_container{
width:720px;
height:180px;
background-image:blablabla;
}
If you need more input tell me and I will update this Q.
The content moves down although I can actually position the div ('pop') where I want, But I dont want the content moved down.
I mean, everything looks good, except content is ALL moved down 52px.
Thanks
If I understand correctly you want DIV to appear on top of the rest of the content, being completely independent of the rest of your site. To do that you need to set position: absolute rather than position: relative. relative basically allows moving element from its original position, but the space that element was occupying is still there and that's why all the content moved down in your case.
If you apply position: absolute element will be taken out of the flow of the page and the following elements shouldn't move down. But then you might need to make sure that DIV#pop moves in correct context but that's something to worry about later ;)
Hope my explanation makes sense, but you also might find this this link useful
What you describe is the intended behaviour of position: relative.
I'm not sure about what you want to achieve but try putting a wrapper outside pop with position: relative and give pop position: absolute. That should make you able to move pop without moving the rest of the content.
If you use only position: absolute the positioning will be relative to the viewport's top left corner and not the table's which probably is not what you want.
You will have to set the position to 'absolute' to get the ability to place the div wherever you want (and also the ability to use z-indexes).
Try to add below css or try to decrease top size you have specified for the div eg top:100px
<style type="text/css">
#pop
{
display:inline;
}
</style>