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.
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%;
Have a look at, http://thomaspalumbo.com
I have this CSS for my website's container:
.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}
Then I have a container on top of that to center that info.
The .graybox container spreads the width of the page like I want but now my footer div is hidden, according to firebug is it actually behind? And up on the page?
Is there a fix for this?
While I'm here can anyone explain the white space on the right side of the page. It comes into effect once the page is resized smaller.
You can use the CSS z-index property to make sure your footer is in front of the content. Z-index only works when the element is positioned though. So make sure you add position:relative to your footer
#footer{
position:relative;
z-index:999;
}
Read more: http://www.w3schools.com/cssref/pr_pos_z-index.asp
EDIT
Just checked out the code of your website, and I don't understand why your graybox is positioned absolutely, this will only make things more complex. The same goes for your menu, why position it absolute, why not just add it in the right order in the HTML in the first place?
EDIT
If you want to center your content but with a background that has a 100% width then you can simply add a container div like so:
HTML
<div class="container">
<div>lorem ipsum....</div>
</div>
CSS
.container{
background:red;
}
.container div{
width:400px;
margin:0 auto;
background:yellow;
}
See JSFiddle here: http://jsfiddle.net/HxBnF/
Currently you cannot do this because you have a container which you set at 980px, don't ever do that unless you are sure you don't want anything to wrap over it, like in this case the background of a div in that container.
in the div style, just assign a z-index value greater than any other z-index such as
.divClass{
position: absolute;
z-index: 1 //if other elements are still visible chose a higher value such as 20 or even higher.
}
I'm quite new to css, divs and everything in between.
So, i created a basic layout for my band, didn't want a bunch of useless links like bio, merch store and all that. So i just decided to arrange separate spaces for our video, a player and a facebook window.
I managed to create a div for the youtube iframe, but i can't get it to stay in its place when i resize the window. I've tried changing the positioning a bunch of times to absolute, fixed, relative...etc. No luck.
Keep in my mind that the layout is nothing fancy, just something quick to look at, and get some basic info of the band.
Here's the link: http://silentcellmusic.com/test.html
Thx in advance!
First you should remove the image from the markup, and set it as background of the body, or html, for example. Set it to position top center.
Then, set the div #wrapper to { width: 960px; margin 0 auto; }. This way it will always be in the center of screen, so as your background.
Third, create four divs:
social
listen
video
Float them to the left, set their widths and margins, accordingly.
Finally add a div for your footer (social links and mailto).
Best of luck.
What you need to do is use positions. What fixed does is determine the position in relation to the window (or browser) top left corner, so it will always stay in the same place no matter how you resize it. The right way to go is to use absolute and relative.
First you need a relative container. Your image is already centered, so you could do something like:
<div id="container">...</div>
#container {width:960px; margin:0 auto; position:relative;}
Then you want your video to be in an absolutely positioned div, but INSIDE the relative one. SO your html would be:
<div id="container">
<div id="videoDiv">
your video here
</div>
</div>
And your css for the videoDiv:
#videoDIv {position:absolute; top:200px; left:200px; }
Look por css position online to understand how it works, it's actually quite simple but you need the right structure. In your case, your center tag should be the one with position relative, but make sure you change it to a div, otherwise some browsers will give a validation error.
Having said that, there are a lot of things you can do to improve your site. Once you know how to handle positions, you could re-do the layout using different images (so it's faster to load), and you can use actual text. This is quite important for search engines to recognise your site, so try at least to have keywords spread around.
Here is your CSS for the video div:
#apDiv1 {
position:absolute;
left:747px;
top:535px;
width:400px;
height:223px;
z-index:1;
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Did you mean to declare width twice? Is the width:960px throwing off your positioning?
Get rid of the <center> tag altogether and change the css for #apDiv1 to:
#apDiv1 {
position: absolute;
left: 597px;
top: 489px;
width: 400px;
height: 223px;
z-index: 1;
}
I am currently working on a website which was all going well until the css now thinks that the bottom of the page, even though i have positioned the image with
position:absolute;
bottom:0px;
is actually about 100 pixels above the bottom! I can't figure it out and my only answer could be because of how I am repeating things across the layout.The site can be found at SemaphoreDesign The paste bin for the style sheet is here And for the HTML go here I really cannot figure out why the header and the endside are not at the bottom of the page and why there is a scroll bar.Thanks
you can do a fixed position for these 2
#endside {
width:100%;
float:left;
height:112px;
position:fixed;
bottom:0px;
overflow:hidden;
background-image:url(images/main_09.png);
z-index-2;
}
#footer {
width:915px;
margin: 0 auto;
background-image:url(images/main_10.png);
height:112px;
position:fixed;
bottom:0px;
z-index:11;
}
Mostly likely you're scrolling down when you see the problem?
You should be using position:fixed if you want it to not move when the user scrolls.
The reason you're getting a scrollbar in the first place is because you set your "content" <div> to height:100%, which means 100% of the window height. Since there's other elements the height exceeds the window height.
Something like this might help:
HTML: http://pastebin.com/H0EauYeu
CSS: http://pastebin.com/mbV44Jef
I don't think you want to use position:fixed. This site has good CSS for footers you can copy:
http://www.cssstickyfooter.com/
So, maybe I just suck at searching, but I'm having real trouble finding a method to do this, so here goes...
I have a webpage with a fixed image background (tiled, non scrolling).
I now want to have a colored div on top of that (700px wide, 100% height, centered) that I can then put more content within (doesn't necessarily have to be a div, I just want a colored area in the center.)
Here's an image of what I'm working towards: http://bit.ly/g5qgj0
The lightly colored area (on top of which lies everything else) is what I'm trying to achieve.
Thanks in advance, I'm still getting to know HTML/CSS and this has been driving me crazy XP
html, body{
margin:0;
padding:0;
height:100%;
}
body{
background:transparent url(...) repeat 0 0;
}
div{
margin:0 auto;
width:700px;
height:100%;
background:white;
}
Check working example at http://jsfiddle.net/TGt4A/
I think your most foolproof way to do this is going to involve Javascript/jQuery, which I did in JSFiddle. You might want to add a CSS min-height on that #container as a fallback if Javascript is disabled or whatever.