I hope this helps explain the issue I am having
I have recently designed a horizontal scrolling portfolio for a client, the rights and wrongs of horizontal web design, is a sligtly seperate topic but alas the client wanted something different.
Im having a real issue with the bottom div though As the monitor size is reduced its creating the browser scroll bar down the side as the div image is overlapping the monitor size.
Wouldnt be such a huge issue but because of the nature of the horizontal site its producing a diagional scrolling effect.
Is there away to prevent the screen expanding from the actual monitor size using css or anyother solution? I'm probably staring at the answer as I type but brain doesnt seem to be working unfortunately.
Assuming the content area is flexible in height and the background div is a fixed height, then this should solve it (prevents content area from ever being bigger than browser height). For purposes here I'll assume you have some way of targeting those div's:
html {height: 100%;}
body {height: 100%; position: relative;}
#content {position: absolute; top: 0; bottom: (whatever the height is of your bottomBkg);}
#bottomBkg {position: absolute; bottom: 0; left: 0;}
The combined top/bottom on the #content won't work in older browsers if that is a concern for you.
You can use css3:
html{overflow-y:hidden;}
That will prevent the vertical scrolling
Related
I've gone through the answers for similar questions and none of the answers helped with this issue. My background image is being cut off on the bottom at the viewport. If I remove the background image and put a solid color as the background the same thing happens. The text on the mobile page can be seen, the background just cuts off.
View the site using Chrome's device mode as iPhone 6 to replicate. Any help on this matter will be greatly appreciated!
Dev site
Your content element is set to height:100% which makes it 100% of its parent's height. It ends up not being tall enough to fit the 1000px tall element within it. Normally the element would just expand to contain its contents, but your height attribute overrides that behavior.
content also doesn't seem like it needs to be position:absolute; either. That isn't helping the sizing issue.
I would get rid of:
div.content {
position: absolute;
top: 0;
top: 0;
width: 100%;
height: 100%;
}
Then also remove the inline-style height: 1000px on the .page element.
I'm creating a new website for myself, and as a photographer/videographer, image content is the first thing I want people to see on my page.
Here is my code so far.
HTML:
<div id="slideshow_background">
<img src="IMAGEADDRESS.JPG" class="slideshow" align="middle"/>
</div>
CSS:
#slideshow_background {
width: 100%;
left: 50%;
margin-left: -50%;
overflow: hidden;
text-align: centre;
z-index: -1;
position: absolute;
margin-top: -100px;
margin-left: -50%;
max-height: 700px;
}
img.slideshow {
width: 100%;
min-width: 700px;
display: block;
text-align: center;
vertical-align: bottom;
}
What I am trying to achieve with this, is what is done here: http://www.atcofficial.com.
As you can see, the image stays centred whatever the window width is. It also scales up/down depending on how zoomed in or out you are. This site is made with Squarespace, so I'm imagining it's some form of fancy javascript/jquery or something along those lines.
With CSS, I am able to get the image to either stay centred, OR to scale up and down, but not both at the same time. That's what I'm trying to achieve here. Is there away to combine the two so that this is possible?
Try using CSS background-size:cover;. Cover shrinks and expands to fit various window sizes, without distorting the image. If the screen size ratio is different than the image, than it will crop the edges depending on how you have it positioned (top, bottom, center, right, left, center). Keeping the image in proportion is the key feature of background-size:cover;. Because its a background and not an image, you can easily place elements on top of it.
Here is a JSFiddle Example you can play with. Expand and contract the window to see the background image adjust in size. The only code your are interested in is listed below. (The rest of the CSS in the example is for styling only, and to make the div display at 100% width and height).
background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Follow Up
Yes, there are CSS3 slideshow galleries. Here is one that looks attractive, and is responsive: https://github.com/css-slider/image-slider. Here is a tutorial on creating a CSS3 slideshow from Smashing Magazine: http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/.
You probably already know the information below, but what you have to check into before investing much time in the technology (CSS3 or JavaScript), is how the gallery will display on older browsers and handheld devices, and is there an easy work-around for these devices.
One technique would be to place the gallery in a separate div that can be hidden for older browsers/devices. Then use the background-size:cover, or another technique, as a fallback. Also remember that IE10 and IE11 on a touch screen can be glitchy, and need testing as well. Without going to far beyond the scope of your original question, there are several good ways to detect devices/browsers including Modernizr, Matt Stow's Layout Engine, Categorizr.js and Internet Exlporer's Conditional Comments.
Side Note: The example website listed in the question displayed a large single image as background, and if there was a slideshow, it was not working on this end using the latest version of Firefox.
Hello fellow stackies,
I'm developing a site and I have a small "problem". It's not that important, the site works but it's just one of those annoying things that u keep scratching ur head about over and over.
What I'm trying to do is mix static height with dynamic height.
Example:
HTML:
< HTML >
< BODY >
< DIV class="header_with_menu" >
< /DIV >
< DIV class="main_content" >
< /BODY >
< /HTML >
CSS:
body{ margin: 0; padding 0;
width: 100%; height: 100%; }
.header_with_menu {display: block; margin-left: 100%; margin-right: 100%; height: 160px; }
.main_content {display: block; margin-left: 100%; margin-right: 100%; height: 80% }
As u can see, nothing fancy. I use a custom scrollbar javascript on main_content.
It works fine until I start screwing with the window height of firefox (or any other browser).
What I expect: When I make the window of firefox smaller and smaller, main_container will get smaller and smaller, but, remain inside of the firefox window (since it's height is dynamic, it will simply adjust because it's cool.)
What happens: The height of main_container will eventually get stuck at a certain height, which I don't specify, and content will start disappearing out of view at the bottom of the browser window.
I want main_content to stay inside of the viewscreen and auto adapt to the height of the browserwindow.
How do I do this??
It's annoying when you have a smaller monitor with just 768 px of height and about 10px fall outside of the scrollable area... And the worst thing is, I can't seem to get it behave on my own. I've tried making things absolute, they just overlap each other and now way stopping that since they're both absolute and outside of normal flow. I've tried experimenting with maximum and minimum heights in percentages for both header and only container... didn't work. Searched for javascript to auto-fiddle with my css' height or max-height percentage, didn't work out too well...
basically i've been sparing with this for two days now and I'm just not creative enough to come up with some solution.
Is there a pure css solution for this?
(P.S. I'm using 77% height now for main_content since that seems to be the perfect border: not too small for 1920x1080, and not too large so content will start to disappear # 1440x900. 78% will make content start disappearing and below 75% just makes it seem ugly at 1920x1080.)
I'm sorry for answering my own question, but the answer is: use a flow layout with a script that calculates the space to the bottom of the screen using percentages calculated by the current width and height of the window, to calculate the height of the content and/or footer div.
If I have time I'll post the script here as an edit.
First, I wonder if anyone can even say that question title ten times fast.
This should be pretty easy. I've been googling around, and while there are a lot of tutorials on it, I'm having trouble grasping the idea overall. I've even looked at some other SO questions that seem related but I've not been able to make them work.
I have 3 layers. header, menu, body. The real application is much more complicated, of course. But for the sake of this question this is sufficient enough data.
The entire page itself fills 100% width, but the content within each section will be fixed to 1024px wide. This was easily done with the reknown margin: 0 auto; style. So that wasn't an issue.
Here is the trick. The middle layer, the menu. I want the menu to overlap the border between the header and the content. Now then, doing this was also not too hard. I just absolutely position the menu and kick it down by 100px to get it to the right vertical alignment.
What I cannot seem to achieve is the horizontal alignment of the 1024px block. I've included a light fiddle and an image of the expected output (beware, jsfiddle's default preview pane is not 1024px wide, so it looks like it is working at first glance)
Update
Following the instructions at this post I was able to make it work. But it is only functioning in Chrome.
http://jsfiddle.net/dE8xE/
Desired Output (colors exaggerated for emphasis and distinction)
#site-menu {
background-color: #fff;
height: 64px;
position: absolute;
top: 100px;
display: block;
width: 1024px;
/* everything is easy when you have fixed width */
left: 50%;
margin-left: -512px;
}
Can you use percentage margins and width to achieve the effect you're going for? Setting the z-index to something greater than those of the other sections will get it to float over them. Example: http://jsfiddle.net/6xCfU/
margin: 10% 0 0 10%;
width: 80%;
z-index; 100;
When setting my header and footer to 100% I get some strange behaviour in FF4, Safari 5 and Chrome 12 on Mac OS X. If I have my browser window at a high resolution and scale it down horizontal scrollbars will appear, even though the content should scale with the browser window.
I saw this thread which seemed to have a similar problem, though the user never seemed to find a solution:
CSS 100% width on browser resize
Overflow-x doesn't work for me as the error labels, which are absolutely positioned, will behave as fixed positioned.
DEMO here (errors on blur):
http://kassekladde.tixz.dk/kontakt-os/
Thanks in advance
The problem is caused by #overlay. You have set visibility:hidden. This hides the content but allows it to still take up space on the page. If you change it to display:none instead it will hide the content and the space it takes up, stopping the scrollbars in the process.
#overlayis dynamically given a width/height as the page shrinks. As you can see below it reached width:1711px at one point and so scrollbars appeared:
<div id="overlay" class="overlay" style="width: 1711px; height: 1489px; visibility: hidden; opacity: 0; position: absolute; background: none repeat scroll 0% 0% rgb(0, 0, 0); left: 0px; top: 0px; z-index: 5000;"></div>
After looking over the CSS & html, the header and footer are both within a div with class 'container', which is defined to be a width of 980px, so both will only scale down until they reach a width of 980px, which is the behavior I am seeing in the browsers I tested with in Windows 7 (sorry don't have access to MacOSX). Are you seeing something different or are you trying to scale them down less than 980px? If the latter is true, then you need to pull them out of your container class.