I am designing a responsive layout and have positioned a grungy png overlay on top of background using the following CSS:
#bg{
background:url(images/top1.png) no-repeat;
position:absolute;
width:1423px;
height:350px;
top:0;
left:50%;
margin-left: -711px;
}
This way, the image is always centered regardless of the page width. My problem occurs when the browser window is reduced to a width smaller than the background image for the #bg overlay. A horizontal scrollbar appears and the background extends far to the right (especially when the browser is very small).
You can see a DEMO of this here: http://pixelcakecreative.com/cimlife/responsive2/
As you can see a horizontal scrollbar appears, I would like browser window to shrink and not retain the full width of the image! Any ideas?
try this css code:
#bg{
background:url(images/top1.png) no-repeat center;
position:absolute;
width:100%;
height:350px;
top:0px;
left:0px;
}
Just had a quick look at your code. Check out your nav, this one produces the scrollbar.
Have a look on how to enable developer tools in your browser to inspect your page. It's a good way to check on your elements attributes.
Here's an good introduction for Chrome: Link
And for Safari: Link
Related
Here is the code
<style>
.test{
position:absolute;
width:100px;
height:100%;
top:50%;
transform:translateY(-50%);
background:blue;
}
</style>
<div class="test"></div>
Here is a picture of what it looks like. I tested this in Chrome and IE and the gap doesn't appear.
The gap remains if I set the height to 100% 100vh or the absolute height in pixels. I am using Firefox 40 so the browser is up to date.
Also, for anyone wondering why you would center a div that has a height of 100% it is so that it will center no matter the orientation of the screen.
EDIT
For all those suggesting setting margin:0 it unfortunately doesn't fix the problem
Clarification of the problem.
Apparently this is rounding error in the rendering engine. Because if you change the height of the window the gap appears and disappears. Chrome seems to show a slight gap but it is almost indistinguishable. To see the problem try changing the frame height in this fiddle http://jsfiddle.net/m4yqoq4w/. I assume this also means there is no easy way to fix the problem.
Add margin:0; to the body
Before: http://jsfiddle.net/m4yqoq4w/
After: http://jsfiddle.net/2umLokj4/
This will fix it:
body{
margin: 0;
}
If you reduce the "top" property value as below, you will never get the gap
top:49%;
I have an iFrame that loads flash content. I want this content to take up whatever portion of the screen is left. So the frame has a height of 100%, but I noticed the bottom gets cut off a little bit, causing the some of the flash content to be cut off. How can I write some CSS to sort of calculate what 100% of the rest of the page is (I have some bootstrap buttons at the top of this interface that take up some space).
If you are using CSS3, you can use the calc function like this:
height: calc(100% - 30px);
Or whatever the height of you button bar.
Try positioning your flash box as absolute, don't set its width and height explicitly in CSS and just set the offset left, top, right, bottom like this:
div {
background:green;
position:absolute;
bottom:10px;
top:30px;
left:100px;
right:100px;
}
Fiddle
I am trying to place a image on the bottom right corner of my page and have it always be there. I have managed to do this but I have a problem when making the browser window smaller (which also is a problem while looking at it in different advices with smaller screens). When I make the browser smaller the image stays in the same size, and eventually overlaps over the other items (like my menu for example). Is there anyway to make that the image automatically becomes smaller together with the browser?
The css code I have used to place the image on the bottom right corner looks like this:
display:block;
float:right;
bottom:0;
right:0;
width:340px;
The image is a png image placed inside a div in my html.
I hope someone can understand what I mean and help me with this!
You can give the image a percentage for a width instead of a pixel width. It will then resize when you resize the window. Try setting width: 20% as a starting point and see what happens.
You can try this
<html>
<style>
img{
position:absolute;
bottom:0;
right:0;
max-width: 100%;
height: auto;
width: auto;
}
</style>
<body>
<img src="slide2.jpg"/>
</body>
</html>
resizing browser also resizes image, and is always at bottom.
Using % values for the width and height of the image should work.
Don't use floating for this case, your positioning should be absolute and don't set pixel-based sizes. If you want to set its size, you can do it by percentage, however, maybe the best solution would be to have separate themes for separate screen sizes.
I have a modal window popping up, which I want to center relative to the reader's position on the page. The best way to achieve this seems to be with the position fixed/top 50% fix:
.fixed {
position:fixed;
width:100px;
height:100px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
So far so good, the modal pops up in precise center. See jsfiddle here:
http://jsfiddle.net/cbqN2/
But I want my users to be able to scroll the modal if the content is too long for their screens:
http://jsfiddle.net/xwhMa/1
Any way to achieve this, by nesting divs with different positions, or JQuery as a last resort?
I'm not quite sure if this is what you're asking, but try this:
ul li {font-size:23px}
.fixed {
width:200px;
height:200px;
background:red;
position:fixed;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
**overflow-y:scroll**
}
Would this not work?
http://jsfiddle.net/demchak_alex/cbqN2/3/
having your modal have a container that holds the content and clips it at a fixed height? then the user can scroll in the modal, instead of worrying about a jQuery solution to scroll the outside the modal until it hits the bottom, then stick to the bottom, etc. etc.
It's just a peculiarity of position: fixed :) which is .. well, to always stay fixed on the screen. If you want it to appear in the center but move when a user scrolls the page simply use position: absolute; not fixed. Like so: http://jsfiddle.net/skip405/cbqN2/2/
I have a slideshow built using the jbgallery script that I am trying to incorporate into a page on my site. The images in the slideshow have a width and height of 100%. I have a navigation bar at the bottom of the page with a height of 90 pixels.
My code is:
<style type="text/css">
body{ height:100%;
background-color:#444;
margin: 0;}
div.fullscreenslideshow{
display:block;
position:absolute;
top:0;
left:0;
padding-bottom:90px;
width:100%;
height:100%;
background-color:#000;
}
</style>
</head>
<body>
<div class="fullscreenslideshow">
<iframe src="slideshow.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
</div>
</body>
While this looked to have the desired effect it is producing a scroll bar on the page (as the 90 pixel padding is stretching the page beyond the 100% height it has been set to).
Basically, how to I adjust the css to ensure I get the slideshow in the page with a 90 pixel space beneath it, and without cropping the image (by setting the height to 90% for example on the fullscreenslideshow div css) or producing an overflow?
Been playing around with this for hours now and think I have hit the wall hence the request for help! Out of interest, when I adjusted the padding-bottom to margin-bottom there was no effect on the page.
Thanks for any help in advance,
JD
Since your div is already position:absolute; you can simply set bottom:90px to cause the div to simulate a margin-bottom:
div.fullscreenslideshow{
bottom:90px;
}
Why don't you just add a negative margin to the bottom of the container that needs to shrink, so there's no need for javascript?
margin-top: -90px;
edit: I got something
First, add this to your div.fullscreenslideshow
margin-top: -90px
Now, go the page slideshow.html and add this:
margin-top: 90px
To:
div.jbg-loading
.jbgallery .jbg-wrap
.jbgs-wrapper (you will have to add this one to the css yourself, it doesn't exist yet
I got it to work on my computer (compared it to the other link, and it shows exactly the same).
If you can use JQuery you can use this code:
$("div.fullscreenslideshow").css(height: (parseInt($(window).height()) - 90));
run this after load your page complete. And have good time.