I have a problem regarding relative positioning. I want the body to have a background color of say, blue. Initially the page should be just of height 100% (that may vary from computer to laptop, of course, hence I can't specify a fixed height in pixels), thus the entire page should appear blue. In the middle of the page is an element, that has been set to that position by relative positioning (it can't be absolute, can it, in order to expand with its content). The element can expand vertically. If the height exceeds the boundary of the page, the page also should expand, the background of the expanded portion being still blue.
Now how do I achieve this? The only solution I can think of is to use relative positioning for the background element (which is blue and should remain blue on expansion). But for that, I must set it to the available height (relatively positioned elements cannot be assigned height through percentage value, so that rules out height: 100%). But the height itself will vary depending on the browser, viewport size, etc (and I can't use Javascript!). So how do I do this?
Is the height of the element in the middle known?
You might want to take a look at this http://css-tricks.com/centering-in-the-unknown/
A live demo that might help http://jsfiddle.net/thebabydino/7N4Xx/
The JavaScript is just for changing the height of the div in the middle.
Related
My html page has some text, a search bar, a results pane, a navigation bar, and several other elements which i want to stay in the same position relative to each other.
My thoughts were to make absolutely positioned divs inside a relatively positioned container div, and then give them all min/max pixel values.
If i gave them min/max pixel values they wouldnt change size/positioning when the window was resized, correct?
But if i did this then wouldnt they not fit on monitors with smaller screens?
Forgive any inaccuracies in my statements, im still in the learning process.
If you set the height and width to a percent, then set a min-height and min-width, the divs will flex to the size of the parent div (which is dependent on the size of the parent window). The problem with that solution is that with smaller screen size windows, the absolute positioning for the elements won't allow you them to nudge down if the content of an individual div needs to wrap. You might be able to position your internal divs using the default browser settings and adjusting the margin values, and use float: left or float: right to position elements that need to be adjacent.
I'm trying to stretch an image vertically in a parent container of my site (not the full body), it is the div with the id "imagen-fondo"
I have tried either backstretch plugin and also just css background-image with background-size to do it.
But the problem in both cases is that the calculated height of the parent container is smaller that the immediate child height, so, the background image looks smaller than the content itself.
How can I make it to be the same height as his immediate child or at least bigger?
You can see the live demo here:
http://50.21.181.12:3001/plantillas/mba
UPDATE:
I think the problem is that div#imagen-fondo is getting the height of the window and not of his content, that is the reason that when the screen is big, the problem doesn't happen, but when the height of the window is smaller than the content it happens, you can check it with this two screenshots, just as you start scrolling vertical the background image ends:
Something with overflows?
UPDATE 2:
For now I introduced some javascript to make it work,
Getting the footer offset position and stretching the height of the ".backstretch" div to that height.
But, if you resize the window to make the vertical scroll bar appear and inspect the page, you can still see that the parent container "#imagen-fondo" (from where backstretch should automatically get his height) is still getting the height of the visible viewport and not from the content itself.
If anyone finds a better way to do it CSS only will use that approach instead of this dirty one.
Clear floats in parent div using clear: both;
Or use clearfix on parent div.
For now I introduced some javascript to make it work,
Reading the footer position and stretching the height of the ".backstretch" div to that height.
But, if you resize the window to make the vertical scroll bar appear and inspect the page, you can still see that the parent container "#imagen-fondo" (from where backstretch should automatically get his height) is still getting the height of the visible viewport and not from the content itself.
If anyone finds a better way to do it CSS only will use that approach instead of this dirty one.
Is there a way to make an element not contribute to parent overflow, but keep it visible? Let me clarify
There is a watermark-like logo to be applied to a page in the manner below. It is supposed to be positioned partly outside the main content (dashed blue line)
I'm not aware of the option to set an element background in such a manner that it would persist as the browser window is resized horizontally, so I've just added a <div> with the logo as its background and position:absolute with the necessary offset relative to main content container.
Previously, the page would not get a horizontal scrollbar as long as the browser was wider than W1. Now, with an additional "watermark" element added outside of the main content box, the scrollbar would appear whenever the browser is narrower than W2
Is there something obvious I'm missing? A background setting, or possibly a neat margin workaround/
Update:
I've added a rough jsfiddle to illustrate the issue
Unfortunately, just because you nested the "watermark" div and positioned it absolutely doesn't make it outside of the document. If you put it outside of the document, the page will scroll (as you see).
To me, the first solution I think of is to move the watermark outside of the "content" div and apply the watermark to its parent container. I'm guessing you haven't done that because you need it to be relative to the "content" div, but it's something to try.
Also, the reason it scrolls is because the document has been overflow. The quick fix, yet not recommended, is to use "overflow-x: hidden;" on the parent container of the "content" div.
It's harder to give you a solution since you've stripped the rest of your HTML, and some "fixes" may not be as applicable if your structure is complicated in certain ways.
Remember that the width of your elements is greater than the actual "width" it includes padding & margins, if you have padding on your div reduce the "width" by the equivalent amount.
does that make sense? if you post the actual css & html it might be easier to give you a more detailed answer
additionally could you not assign the image as the background of the actual body element and set it to centered?
I've had a play with the code and come up with a possible solution for you.
set
body{overflow-x:hidden;}
then add
#media all and (max-width: 400px)
{
body{overflow-x:auto; }
}
as soon as your screen is smaller than 400px (the width of the div) your overflow:hidden will be overridden and you'll be given you scroll bars.
at this point you may also want to reduce the width of your watermark.
I have a div that shows some text and is absolutely positioned on a page. While it is absolutely positioned the div is just large enough to show the text it contains. When I add an inline style to that div to change it to be relatively positioned, the width of the div suddenly expands to take up 100% of the page...
I used the Chrome dev tools to toggle the relative position on/off. Turning it off causes the width to be correct, turning it back on causes the div to expand. It is an inline style so there isn't any CSS class or selector that is changing the width on me.
I experience the same issue in Firefox. Removing position: relative in Firebug causes the width to shrink back down to be just wide enough to fit the text.
If you want relative position DIV take his content width then you can give float, display:inline or display:inline-block to your DIV
could you please post the HTML and CSS, and I could have a look at it..
Meanwhile you might wanna have a look at
Position an HTML element relative to its container using CSS
and see if that could possibly help you?
to change size as content grows/shrinks use something like:
<div style="min-height:30px;max-height:300px;">
Which will mean it'll vary between 30 and 300 px depending on content
or
<div style="min-height:30px;height:auto;">
which will vary between 30px and as big as its container will allow (so forever, essentially)
Take this trivial example and open it:
<html>
<body style="background-image:url(http://upload.wikimedia.org/wikipedia/commons/2/21/Mandel_zoom_00_mandelbrot_set.jpg);background-repeat: no-repeat; background-position: top center;">
<div style="width: 8000px; border: 3px solid red;">Demo</div>
</body>
</html>
The page is made so that the body has a top-centered background picture and a containing element which overflows window boundaries so there is horizontal scrolling (if you have a monitor wider than 8000px then you're really cool, please make the window smaller and refresh).
The problem is that for some reason the <body> doesn't stretch to contain the <div>. It just stays the same width as the viewport and the <div> overflows it. This in turn causes the background to be centered at the wrong place and crops it to the size of the viewport. Quite ugly when you scroll to the right.
I've already found a solution to this problem, but I'm wondering WHY this is so? It seems to be consistent across browsers too. But in my opinion this is quite counter-intuitive and basically plain wrong. The container element should be big enough to contain it's children - unless they are absolutely positioned of course in which case they don't participate in the layout calculations.
Blocks simply do not stretch horizontally to accomodate their child content, at all; never have.(1) That's something that only happens in the vertical axis.(2) Logically, both dimensions can't be stretchy; one has to be fixed (wrt parent). In CSS, the width of a block element in normal flow is derived solely from the parent (minus paddings, margins, borders), and then the height follows on from that, seeing how much content you can fit in the block's width and flowing it.
The background image can appear in a confusing place that misleads you to what is actually happening because of this quirk of CSS:
For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.
This is a nasty hack put in place because people were used to putting backgrounds on ‘body’ and having it fill the viewport, even though the <body> element itself does not represent the viewport.
(1) except in a few special cases, like float and position: absolute elements without a declared width.
(2) unless you deliberately stop that by setting height/overflow.
The exception to expanding is the viewport. Nothing expands the viewport unless its direct or attached contents require it -- this includes that div and table elements (eg, display: table-cell on body) -- but not a block container.