I want to lock an overlayed image on a Tumblr blog in a position relevant to my sidebar and body content. However, everything I've tried results on the image locking to the side of the window, thus, when the browser window is resized and the distance between the posts and the window changes, the position of the image relevant to the sidebar where I want it changes as well.
I don't know the language very well so please try to explain in as basic terms as you would for a beginner.
full screen (where I want the image to stay)
minimized browser
#sidebar {
box-shadow:rgba(0,0,0,0.1)5px 5px;
text-align:left;
position:fixed;
{block:ifnotrightsidebar}
margin-left:-225px;
{block:ifnotrightsidebar}
{block:ifrightsidebar}
margin-left:485px;
{block:ifrightsidebar}
border:1px solid #d1d1d1;
background:#fff;
bottom:20px;
width:150px;
padding:5px;
{block:ifroundededges}
border-radius:5px;
{block:ifroundededges}}
#outsideimg {
position:fixed;
float:right;
right:-40px;
top:100px;
}
#outsideimg img {
width:400px;
}
Put the image inside the sidebar div and then position it absolutely. It will then stay with the sidebar (and when you position it, it will be relative to the sidebar and not the window).
Related
I have a sliding toggle div that is hidden on page load and when a button is clicked gets revealed. The div is 250px in height and is positioned top 0px. I have also tried bottom 100% which sort of does the same thing. I am using several layers of z-index and have had to position some divs using absolute in order to get the layout I wanted. But I was hoping there is a way to push all of these divs down by 250px when the sliding toggle is revealed. I was thinking that instead of using toggle div, maybe there is a way to scroll the page to -250px so that all the content appears the same but is pushed down?
This is the css for the div I am using in case there is something that can be done here:
#slidingTopBar
{
background:#199651;
display:inline-block;
position: fixed;
height:250px;
width:100%;
left:0px;
top:0px;
z-index:56;
}
The script for the toggle is being used as follows:
$(document).ready(function(){
$("#slidingTopBar").hide();
$(".show_hide").css('position','absolute').show();
$('.show_hide').click(function(){
$("#slidingTopBar").css('position','absolute').slideToggle();
}); });
And the toggle is being called using this html:
<div id="TopBar">SHOW</div>
Which is all working, except it is overlaying the content that is already there whereas I want it to push it all down.
Any help appreciated.
Using the clearfix method directly below the toggle div or it's wrapper should fix this:
HTML: <div class="clearfix"></div>
CSS: .clearfix { clear: both; }
I've made a footer for my client's tattoo portfolio site: http://jessetattoo.com/testing - it's contents (copyright and social media links) remain at the bottom where they are supposed to, but the background image sticks to the top of the page (the red bar).
This is my css:
#footer{
width: 100%;
height:40px;
background:url(../images/footer-bg.jpg) repeat-x;
bottom:0;
position:relative;
margin-left:-10px;
margin-right:-15px;
}
I've also tried:
#footer{
min-width: 100%;
max-width: 100%;
height:40px;
background:url(../images/footer-bg.jpg) repeat-x;
bottom:0;
position:fixed;
margin-left:-10px;
margin-right:-15px;
}
Setting the position to fixed worked but I want the footer to scroll, not be sticky. Having a sticky footer would be fine, but when viewed on a mobile device the footer does not stay fixed, instead it just gets cut off when the user pinch-zooms in to read content (it's not a responsive site unfortunately).
Any help is appreciated! Thanks in advance!
I've got a div with a background image that includes both the normal and hover state, so when you mouse over, the bottom half of the background image is shown. I'm making a mobile version of the same site, and I'd like for only the first half of the image to be shown as the same div grows in height. However, as it is currently, when the div grows, I obviously see the second half of the background image. Any thoughts on how to hide the bottom half of the background image while still showing the top?
.community a{background: url(images/migtea.jpg) 0 0 no-repeat #FFF; display:block; float:left; margin:0 10px 10px 0; padding: 10px 10px 10px 151px;}
.community a:hover{background-position: 0 -131px;}
Well only problem is that "clip-path", "mask" and "filter" (no not the
IE "filter" but SVG "filter") only works for Firefox and Safari (yes
no Chrome). And they do it differently. Firefox needs an svg clippath
specified via an id eg:
.box { clip-path: url("roundedrect.svg#cp1"); }
while Safari just uses
the shape itself to create clippath from:
.box { clip-path: url("roundedrect.svg"); }
I have yet to discover a
way to do it in Opera and Chrome.
But for FF and Safari "cross browser" example i have created this:
http://tokimon.dk/testing/css-svg-test.html.
Otherwise maybe you can get something out of the background
manipulation in CSS 3: http://www.css3.info/preview/
Tokimon
(source: Showing only part of background image using CSS3)
Else, all you can do is either separate the background images, or put a container (div) with a solid background over it and "hide" the part you want to hide (but it's not a very elegant solution)!
Hope this helps!
Just finished installing G+, Facebook Like and Tweet buttons onto my site (www.biginjapan.co) on each individual post. My issue though is that when you press the FB Like button the popup box opens up so you can share the article if desired, but part of it appears behind the sidebar. It looks like this:
Picture showing my problem
Am not sure if you'll need any code to advise me here, but if you do please let me know. All I want to do is make the Facebook popup appear above the sidebar so you can view it properly.
In your content div
#content {
overflow: hidden;
float: left;
width: 619px;
padding: 0pt 15px;
}
Remove overflow hidden.
Remove the line overflow: hidden for #content. it's on line 247.
It is layer issue. It can be handle by z-index. For the slider layer (content), use lower z-index means
.slider{ z-index: -1; }
For the popup layer (content ) use higher z-index than slider
.popup{ z-index: 123; }
hey guys,
I have a div.mapFullscreenContainer
#mapFullscreenContainer {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
This div is shown when I scroll to the bottom and click on a button. In normal browsers this works just fine. The overlay is 100% wide and 100% high and lies on top of the page.
However on touch devices there is the problem that the overlay is always out of the viewport. Imagine the button that makes the overlay visible is in the footer of a rather long webpage. The overlay is always at the very beginning of the page so it's not immediately visible to the user. The user has to scroll back to the top to see the overlay.
Any idea how I could fix that so it behaves like on a normal browser. bottom:0; instead of top:0 doesn't make a difference.
you can use JS to count and apply total height of your page to this div http://jsfiddle.net/seler/FjeyK/