I hope what I try is not impossible.
Let me explain first: I have a responsive design which requires a background to be fixed under some situations (media query blocks). The design in question is this one:
http://think-open.at/fileadmin/templates/responsive/content.html
Basically there are two media queries: one for the maximal height and one for the minimal width. If there is enough viewport height there is a scrollbar in the content area and the design height is fixed. But if the viewport is not large enough for showing the predefined height the height-mediaquery removes the scrollbar from the inner div so there won't be two nested scrolling containers (body + div) and sets the content area to height: auto.
There is also a responsive media query if the viewport is too narrow but this works flawless.
Now the problem: When the design switches to the mode where the whole page scrolls (below 830px height) I would like to position the image in the right container "fixed" so it does not scroll out of the viewport. But then the problem arises, that I can't really position the background in regards to the container div as "fixed" positions an background image in regard to the viewport. I have created a CSS fiddle here:
http://dabblet.com/gist/ae5c3598e1465ce0c90e
If you change the width you notice the problem. I would like to have the right border of the image aligned with the right border of the green box.
Is this somehow possible? I have no problem using calc() as there will be a condition in my CMS to use the plain old-school design if an older browser gets detected.
I solved it myself now. Sorry for posting.
The trick was: As my design is centered, I started to try using calc(50% + somepixelvalue). This did the job.
I adjusted the CSS playground:
http://dabblet.com/gist/5b63553f47a81f3bb701
Now the image is always up in line with the right border of the green area. When scaling there is sometimes a 1pixel difference but this doesn't matter as the background will get assigned to some container element which acts as mask.
Related
I have a project that involves having a sidebar that floats over an image. The sidebar is set to position: absolute to keep it over the image and to help it scale along with it when the screen size changes.
Here is a codepen that basically recreates what I'm working on: https://codepen.io/gojiHime/pen/JmYqaz
The issue I'm having is with controlling the size of the contents within the wrapper container. I want the preview div to scale along with the wrapper container. Currently, it does not work as expected in that the preview div does not start scaling as the width and height change for wrapper and for thumbs-inner. The thumbs-inner div scales correctly for the most part, but the bottom of div is cut off so you can't see the bottom of the scroll bar in smaller screens.
I know I set overflow: hidden on wrapper but without it the content in preview would extend outside of it as the height of wrapper changed.
So, I'm looking for ideas on how to fix the aforementioned issues. wrapper must stay absolutely positioned and the thumbs-inner div needs to have a vertical scrolling feature, so I can't do anything with those. I don't think setting a height makes sense for wrapper since it needs to scale responsively in height and width.
EDIT: Not sure how much this will help but this is a screenshot of what the layout of everything should look like: enter image description here
The Kraftmaid logo, full-size thumbnail and the text below it (which are in the .preview div in the codepen) have to be visible at all times when changing the screensize.
I'm not sure if this is exactly what you're looking for, but generally for responsive layouts you would want to avoid fixed dimensions, such as specific widths set in x number of pixels.
This shows your code with responsive layouts for .wrapper and .thumbs-inner (note that I haven't addressed any content issues within those two divs since I have no idea what your intended layout is):
https://codepen.io/anon/pen/ZqrZaj
Note that:
I've switched the two layout divs to use box-sizing: border-box; which will allow you to use pixels for margin and padding but still use percentages for width.
I've removed width from .wrapper and switched to percentage based absolute left and right declarations - if you modify these values, the layout should still work.
I've added borders to make the layout more obvious.
I have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn't need to be seen all the time. The problem is I cannot work out how to stop this div triggering the scrollbar. I have tried different combinations of overflow and position and cannot work it out.
If you inspect the element with firebug, just place it over the shadow behind the slider and you will see the div in question. You notice the scrollbar kicks in as soon as the browser bounds touches it.
View link
Can anyone let me know how to stop the scrollbar appearing for the shadow div?
Cheers
Nik
It is the size of the DIV. When I inspect it using Chrome, the CSS shows that the container DIV was set to 520px width and the problematic DIV was set to 733px, so it actually exceeds the 980px width center area. Unless you want the shadow to disappear, I suggest moving it a bit to the left and make the div left to it smaller.
You can use the CSS overflow-x:hidden on the body element.
Other more complicated way that comes to mind is using jQuery to detect the size of the window and resize the problematic div according to the window's size.
Firstly, thanks to those that commented.
I have come up with a solution that allows me to keep the layout the same while still adhering to the document width. What I did was create a #wrap2 inside the main wrapper which has a width of 100% (full width of browser window).
#wrap2 {background: url(../css_img/slider-bg.png) no-repeat center 317px; }
The trick to this was making sure the image position was set to center. This means the image would also remain relative to the content when resizing the browser. The way I made the shadow line up behind the slider was to add blank pixels to the left, so the image ended up being about 1200px wide, this pushed shadow part right. Because it's all blank pixels it only added about 1kb. If someone thinks there is a better solution let me know.
I've just spent the last few weeks learning how to properly design a layout. I basically thought I had everything perfect with my website layout and was ready to go about transferring the coding to Wordpress... and then I accidentally resized my web browser and discovered that all of my div layers were overlapping each other.
Here's what it looks like:
Basically it looks as though it's mainly my center content div that is being squeezed out, as well as my header image and navigation witch are in the same top div. My footer is also squeezed down as well. I've searched the internet for a solution to this problem and can't seem to find a thing.
How do I fix it so that my divs stay in place when the browser is resized?
as Walter said your CSS would be helpful. But, the main problem is that the content in the div is overflowing to other divs because the the content's div cannot contain all the content.
In your css, try setting the div's overflow property to either auto (shows scrolls bars) or hidden (to just hide the content if it goes outside's the div)
e.g.
overflow:auto;
or
overflow:hidden;
Express your widths and font-sizes in ems.
Here's a good calculator:
http://riddle.pl/emcalc/
Percentages will work, too.
Check the css in stackoverflow, and try resizing the zoom level in your browser here - you'll see everything resizes nicely at any zoom level.
I figured it out. Turns out that the width of my center content margin was dictated by margins instead of just a direct width (ie. 500px). So whenever the page was resized, the margins on the sides of the browser tried to stay as they were, thus making the entire column smaller. I just had to get rid of the margins and specify where I wanted the column to sit on the page and just justify a width for it.
you can also try the min-width. i am assuming the center div is fluid and sidebars are fixed-width.
Can you post some of your CSS?
The simplest way is to give all of your columns relatively sane width settings so that the size of the browser window doesn't affect the size of your layout. Getting fluid-width column(s) to behave is more complex and depends more on the specifics of your layout.
Check out the min-width property. Another option is applying another stylesheet when the viewport width is below x pixels with CSS3 Media Queries like so:
#media all and (max-width: 30em) {
/* Alternative narrow styles */
}
or so:
<link media="all and (max-width: 30em)"
rel="stylesheet" href="narrow.css" />
CSS3 Media Queries are still not widely supported, so you might want to look into a solution that applies the "narrow" style sheet with JavaScript through the window.onresize event. I'd recommend jQuery for such a solution.
I Had the same problem if you have a width and height in your DIV Container it wont change except the width unless you put a min-width. The problem I had was when I would make the browser window the divs would like go to the next line
so what I did was in the container I set a height and width. Before I didn't set a height I let the divs determine the heights.
I've coded myself into a corner or I am overseeing something obvious here. I have a semi-fluid CSS layout that is designed like this:
header - 100% width at all times, contains a x-repeated background image
container - fluid (960px to 1200px, centered, contains two columns)
footer - 100% width at all times, contains a x-repeated background image
In almost all cases this works fine.
In summary, the design as a whole scales to any width, yet the content part only to 1200px at a maximum. However, since this concerns a photo site, sometimes images are wider than the container width of 1200px and the image breaks out of it. This is perfectly fine, I want the full image to be shown. However, I want the header and footer to scale to the widest element, in this case the image. This is not happening and is particularly troublesome when I resize the window to a width less than the image and then scroll to the right using the horizontal scrollbar: it leaves a clear gap on both the header and footer whilst I want them to stretch to at least the image/content width.
Simply setting the width to 100% is not enough as that concerns the viewport, not the content width. I can forcefully use min-width with a large value for the header and footer, but that leaves a horizontal scrollbar in normal resolutions. I could hide that scrollbar using overflow:hidden but that would chop of content and not display a scrollbar when the window is small.
To make a long story short, I guess what I want is that this layout would work as a table would work: if one column's content is wider than its size, it pushes all other rows to that same width. The largest width determines the total width. I prefer a solution without javascript, but am thinking it is either not possible or I am overseeing something very obvious?
100% width sets the element's width to 100% of the width of the element it is contained in. In your case, it seems this is the window itself (or the body element). To make the header and footer divs (I'm assuming you're using divs here) scale with the image, they will probably need to either be included in the same div that the image is in, or inside a div that the image div is also in, assuming that div is scaling to the correct width (don't assume it is scaling to fit the image).
However, in many cases using a table for your layout can be much cleaner, and will handle the type of horizontal scaling you're looking for without needing to resort to css hacks.
To make a long story short, I guess
what I want is that this layout would
work as a table would work
display: table on the common container of these elements, and display: table-row or table-cell on its children. This will not work in IE6, but clever things can be done with its CSS expression() hack to simulate this.
I would rather suggest, however, that you not set a maximum width at all, and allow the design to flow better according to the user's desired window size.
I have this website.
The div container contains a background with a grungy look, and the body contains another background that is repeated on the x coordinate.
If you view the site you'll see whitespace on the left and right side. I am wondering how I can set the background images to expand based on the screen resolution. Would it work to set a width based on percentage for each div?
To my knowledge, CSS does not support scaling background images, which is disappointing to say the least. Long story short, you'll probably have to fake it with a fixed-position, z-indexed img tag. That, or what you did: a large image with a background-repeat.
I dont see any issues with what you've got in FF3/IE6/IE7 and chrome. only issue i see is the transparent png in ie6 with the ugly gray behind it.
ie6 I gotta fix but what the customer wants is for the with of the page to size up based on the users computer resolution
Unfortunately, you can't scale the image itself.
What you could do would be remake the div structure so that the inner div contains the center of the grungy background and the sides were tiled through two separate divs. You could then recut the center piece to tile both vertically and horizontally and give it a width that is a percentage of the window size. You could keep it from getting too small via javascript.
This is not an optimal solution, but if the client is set on having it scale with the browser window, this might accomplish it for them.
thanks for all your answers, when i said white space i didnt mean actual white space what i was refering to was that the entire container div wasnt sizing (width wise) towards what the users computer resolution was. and since allot of the divs are set with a background image there is no css code for setting the width on the image but i guess it would work on the divs. but thankfully after talking with the customer he changed his mind and doesnt want it anymore :)