I have a series of containers, all set to height 100% starting from 'body'.
I set 'article':
article {
width: 100%;
height: 50%;
margin: 0;
margin-top: 25%;
padding: 0;
}
The height works fine taking half of its parent's (or screen, doesn't matter) height, but the margin-top is definitely not 25%, more like three times it.
Live link: http://no-plans.com/temp/wp-tobias/wordpress/?p=51
Disclaimer: still dirty stylesheet, there might be inherited conflicts but I can't find any. I also tried to resize and put the margin to other parent divs, same issue.
As stated in the comment, margin percentages are relative to container's width: http://w3.org/TR/CSS21/box.html#margin-properties.
You can solve by absolute positioning and top (here the percentages are relative to container's height).
Related
I'm trying to achieve the last piece of my general template for articles in a wordpress blog.
I've got an header/menu which is position: fixed.
Then I have a div .postThumbnail with a child img which is position: fixed so the following content can overlap the img when scrolling.
I also have a div that copy the img'height as the image is fixed.
Fact is, this could be a lot easier if .postThumbnail had an height, but it's value is equal to 0.
I do not know why.
What I intend to do is to set .postThumbnail's max-height equal to the height of the viewport minus the height of the header/menu, so if an image is taller than the viewport, it won't overflow and the following content which can be scrolled will appears right after the image (and not after the total height of the image).
Basically, I need to define .postThumbnail's height so I can apply an overflow:hidden.
Any idea?
I created a JSFiddle so you can actually see what I'm talking about.
Some of the current code :
#single\.php .postThumbnail img {
position: fixed;
z-index: 1;
width: 100%;
min-width: 640px;
height: auto;
}
#single\.php .postThumbnailGhost { /*keep as security even if no content is integrated*/
visibility: hidden;
}
What I need to achieve :
#single\.php .postThumbnail{
max-height: calc(100vh - 48px);
overflow: hidden;
}
With this fixed, I could fix the rest of the page as the content's min-height must be equal to the image's height in order to cover it properly.
Well,
I really simplified everything since I don't need a .postThumbnailGhost in this new version.
I also made it in Jquery as I couldn't do it fully in CSS ( :'( ).
Here is the script that is doing the job :
function refreshDynamicContent(){
$('.postThumbnail').height($('.wp-post-image').height());
$('.postThumbnail').css('max-height', $(window).height() - ($('header').height()));
$('#post').css('min-height', $('.postThumbnail').height());
}
refreshDynamicContent();
$(window).on("resize", refreshDynamicContent);
New JSFiddle
And I don't need an overflow anymore because I can set the height to the window's height!
YAY!
Basically, I have 3 absolutely positioned elements within a relative container, one of them with left: 100% (the one coming next) and one with left: -100% (the previous picture). They transition between the available places automatically with the transition property. The final result of this can be seen here.
<div id="slideshow">
<article>
<img>
</article><article>
<img>
</article><article>
<img>
</article>
</div>
<style>
div#slideshow { position: relative; overflow: hidden }
img { width: 100%; height: auto }
article { width: 100%; position: absolute; transition: left 1s }
article.current { left: 0 }
article.prev { left: -100% }
article.next { left: 100% }
</style>
(This is the result without overflow: hidden applied, to see how the slideshow works.)
As you can see, the <img>s are responsive to their parent, <article>. I know that block elements always take the available width, so I didn't think I had to state it, but as you can see, I had to specify width: 100% on the <article>, too. What happens if I don't? Something interesting, I'd say.
The .prev <img> turns twice as big as the others, and the .next <img> renders at size 0x0. What? You clearly see that all the image should have the same dimensions: 100% width, and auto height.
What I wanted to understand is; why does the CSS work like it does? I find this result quite unexpected, so I really wanted some kind of a discussion on why the result returns what it does, so that I could better understand how the underlying components of the CSS values actually work.
Your problem is not in the images themselves, but on the article.
It's the article elements that are ruling the dimensions, and image gets the dimensions from them.
The width of the article is not set. Lacking that, and in the presence of a left statement, a value of right 0px is assumed. So, when left is 0, the width is 100% of the container, when the left is -100% the width is 200%, and when the left is 100%, the width is 0.
How to solve this ?
Add a width: 100% to article. - the direct solution.
Instead of moving the articles with the left property, do it with a transform: translateX(-100%); You won't have the problem derived from changing left, and it is more performant
Please visit my website at http://amrapps.ir/personal/indexbug.html
to visually see my problem.
Let me explain my problem:
In my website i have a fixed postion div which contains links and i takes and it takes 25 % of browser height.
Then it is the red div which takes 75 % of browser width.
When user clicks on -CLICK THERE TO READ MORE- in red div,it will be redirected to the next(yellow colored) div which takes 100 % of browser height.
Then you can click on go to top on the fixed div above to get back to red div.
Navigations are working well but there's a problem.
When you are at the 2nd(yellow) div,if you change browser width,the red div will be also visible! How can i fix that?
thank you for your effort.
Change your #aboutmore class to the below css:
#aboutmore {
background-color: #FFCE85;
margin-top: 5px;
top: 25%;
position: absolute;
/* height: 74%; */
width: 100%;
min-width: 1130px;
bottom: 0px;
z-index: 3;
}
Theres a couple of things going on here, and I'm not 100% of the result you want to accomplish, but we are working with CSS heights here so you need to keep some things in mind.
First of: when working with css heights, you need to make sure that all wrapping elements get the height of 100%. Including your body AND html tags. Without this, your body will just have the height of the elements inside it, and your 100% divs will do it to.
Second, you should turn of the body 'overflow: hidden' attribute, as it just obstructs correct testing.
Now, like I said, I'm not sure what you're trying to accomplish, but your header should be taken out of the wrapper as it is fixed. This will allow your wrapper to become the scrollable area. You also mentioned you wanted the second div to be 100% heigh and the first one 75%. Now, with position fixed this would mean your yellow div is only 75% visible, with 25% hidden (either by being off screen or under the header). If you want the first div and header together to take up 100%, and any subsequent div to take up 100% on their own, you should position all elements relative and not fixed.
I'm going to add some code here to help with a fixed header:
div#page-wrap {
height: 75%;
position: absolute;
top: 25%;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
about,
#aboutmore {
height: 100%;
position: relative;
top: 0%;
}
Now this will break your javascript (as you can't actually scroll the body), although I couldn't get it working in the first place anyhow. You'll find more about scrolling inside a div (as now you need to scroll in your wrapper element) in this thread: How do I scroll to an element within an overflowed Div?
Maybe the title is not easy to understand, sorry.
My problem in detail: i created a wordpress theme with an header. This header is surrounded by the "header-div". The header div has a width: 100% and a coloured background. But if the content in another div below overflows the viewport and you scroll horizontal, the background is white.
I know that the "width:100%" just is 100% of the parent element, but there is just the body. And the body has "width:100% and height:100%".
Where is the mistake?
Here is the site:
http://ericgerhardy.de/selltron/
Just try to reduce the browser width to 500px and scroll to the right. This should show my problem.
PS. I´m sorry if the question is already answered, but i searched for a while, with no results.
The white background appears because you have set a min-width: 1000px at some of the elements below the header.
If your only concern is to prevent the white background from appearing at the right side of the header on smaller screens and you don't care about having a responsive page (which is the case, if I understood your question), then you need to add min-width: 1000px; to your #header as well like this:
#header {
background-color: #D3D0CE;
height: 245px;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
z-index: 99999;
min-width: 1000px; /* This is the extra line */
}
The problem is that absolute positioned elements doesn't resize their parents but overflows them.
In this case your body is overflowed and a scrollbar appears but his size is still 100% of the viewport, because he is not expanded.
The abuse of absolute positiong often leads to such problems. Try tu use static positioning as much as possible. In this case it's really easy to use static positioning.
I have a "ribbon" type header on the top of my website:
#top-wrapper {
border-bottom: 5px solid #A1C1BE;
width: 100%;
background-color: #59554E;
position: absolute;
top: 0;
left: 0;
margin-bottom: 100px;
padding: 10px 0 0 0;
color: #C0C0A8;
}
The absolute positioning is needed to make sure it occupies the complete width of the user's browser (as far as I know). However, the rest of my webpage (the main body which contains all my other divs) is hidden behind this ribbon:
#pagebody {
width: 60%;
margin-left: auto;
margin-right: auto;
}
The only solution I have been able to find is adding a bunch of <br> between the end of top-wrapper and the start of pagebody.
Is there a better way of doing this?
As per my comment in another answer:
You can just use width: 100%, but make sure you remove the default gap it leaves with:
html, body {
margin: 0;
padding: 0;
}
You should also check out necolas' normalize.css. It includes all of this basic CSS rules you're going to need in pretty much every site :)
Absolutely positioned elements (top-wrapper) are always on top of relative elements (pagebody), unless you do some hacky stuff with z-index (and even that is limited). What you probably want to do is move the pagebody element down just past the top-wrapper. I don't know how tall your top-wrapper is because it has no specified height. And you might not know it due to font-size differences. But overall, you simply need to add a top margin or padding to the pagebody tag, something like this:
margin-top:50px;
Absolute positioning takes an element out of the normal flow. You do not need absolute positioning to maximize width. You do that with width:100%.
There are many ways to do this. First, you can place your top wrapper outside the pagebody element and then just define its width as 100%.
If you have a graphic that is a ribbon and it is supposed to overlap the top of the pagebody element - as I think you are saying above - then you would use position absolute and z-index to place it above the pagebody element. Then add the proper padding-top to pagebody.
You didn't provide html so we don't really know what you're up to totally.