I'm making a page and I have some problems moving my scrollbar-div across the page, when in the right top corner everything works perfectly but when I try to move it to the center of the page with margin-left; and margin-top; the scrollfunction dose not work anymore! Could this have anything to do with the other elements on my page? Any tips or similar experiences?
Appreciate any help!
This code works, if I ad margin-top: 100px; it stops working!
Html:
<div class="scrollbox" id="style">
<div class="overflow"></div>
</div>
Css:
.scrollbox {
height: 300px;
width: 300px;
margin-left: 700px;
background: #ccc;
overflow-y: scroll;
}
.overflow {
min-height: 700px;
}
#style::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style::-webkit-scrollbar-thumb {
border: 1px solid #000;
}
Well, after posting the question I figured out the answer, or at least one answer, if
position: absolute; is added in the scrollbox{} element in the css code, it is possible to move the scrollbox without losing the scroll-function.
Related
I just can't get it to work right:
I have some sections. Within one section is a div.
And I want this div to be fixed as soon as it's visible and to stop being fixed when the user scrolls to next section.
The div should then be stucked to the bottom of the section it's in.
I hope I can explain it in a right way.
Here is a little sketch to show what I mean
I want to work with position:fixed not with position:sticky because the second one doesn't work most of the time.
Thanks for your help!
Why wouldn't you wanna use sticky? here is an example that seems to do what you want
section {
width: 100%;
height: 100vh;
background: red;
}
section:nth-of-type(odd) {
background: blue;
}
section div {
position: sticky;
top: 0;
height: 100px;
width: 100px;
background: white;
border: 1px solid black;
}
<div class="container">
<section><div>Im sticky</div></section>
<section><div>Im sticky</div></section>
<section><div>Im sticky</div></section>
</div>
This might have been answered but I am really struggling to describe this issue.
On my website I have map div, a transparent slider div on top and non transparent info div below the transparent slider.
<div id="map"></div>
<div id="spacer"></div>
<div class="info"></div>
The css allows the info div to be slid over the map.
html {
overflow: hidden;
height: 100%;
}
body {
overflow: auto;
position: absolute;
height: 100%;
width: 100%;
margin: 0;
}
#map {
position: fixed;
width: 100%;
height: 90%;
}
#spacer {
width: 100%;
height: 90%;
}
.info {
z-index: 999;
position: absolute;
background-color: white;
width: 100%;
min-height: 100px;
box-shadow: 0px 0px 10px slategrey;
}
Here is a picture of the undesired effect.
It shouldn't be possible to pull the sliding div away from the bottom of the browser.
Is there a html & css solution?
I think what you are looking at here is a browser drawback, which can be overriden in safari under ios by using a non-standard webkit rule called -webkit-overflow-scrolling , you can find information about it here on MDN. I have ran into this issue numerous times in the past, but I can't remember finding a fix for it.
You can try this simple "hack" to bypass it, but I don't think this is a good idea though:
body.lock-position {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
You can find more information about this issue here.
It's best to see it yourself, so check out this fiddle:
https://jsfiddle.net/6rc4zzcv/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
#container
{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAADICAMAAACHxIozAAAABlBMVEUAAAD///+l2Z/dAAACq0lEQVR42u3VQQ0AMAzEsHX8OXcoWuk0G0I+uQUAxLsHAIhn6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChAwCGDgCGDgAYOgBg6PCtXqAyGDowrcZpDIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6AGDokKfHaQyGDkyrBSqDoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChSwAAhg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDALEeYdfPYfw5pLEAAAAASUVORK5CYII=');
background-position: center top;
background-repeat: no-repeat;
min-width: 302px;
background-color: yellow;
border: 1px solid blue;
}
#centerbox
{
width: 300px;
height: 300px;
border: 1px solid lime;
margin: auto;
position: relative
}
#floater
{
position: absolute;
top: 50px;
left: 101px;
width: 98px;
height: 98px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="centerbox">
<div id="floater"></div>
</div>
</div>
</body>
</html>
When you resize the browser window (or just the fiddle output window), sometimes the red square stays exactly within the black frame, and sometimes there's a 1px gap. I checked this in Chrome and IE11. IE11 seems to try and render "half-pixel", so it's less noticeable, but still there. Curiously, if the background image is smaller than the viewport, this does not happen.
I can imagine the cause for this effect (the centering code is duplicated in two places, for background and for margins, and uses different rounding methods) - but how to work around it?
In real life, the black box is actually an artistically drawn box which merges with the background, so I'd really rather avoid splitting it out.
jsFiddle
Yes exactly as you've noticed, the issue is that Chrome (and possibly other browsers too) bugs on centering large images, cause the centering calculation offset.
One solution would be, instead of setting that 2000×200px background to the parent hitting that issue, use another inner element set at
#bg{ /* I'm inside the parent */
position: relative;
background: url("2000x200image.jpg");
width: 2000px;
height: 200px;
left: 50%; /* center left edge */
margin-left: -1000px; /* -half width */
}
as you can see above, the element is centered! and will move same as all other centered elements on the page.
HTML:
<div id="container">
<div id="centerbox">
<div id="bg"></div>
<div id="floater"></div>
</div>
</div>
CSS:
#container{
min-width: 302px;
background-color: yellow;
border: 1px solid blue;
overflow:hidden;
}
#bg{
position:relative;
width:2000px; /* same as your image size */
height:200px;
/* center element instead of image! */
left: 50%;
margin-left:-1000px; /* -half width */
background: url('data:image/png;base64,iVBORw0KG...=');
}
#centerbox{
width: 300px;
height: 300px;
border: 1px solid lime;
margin: auto;
position: relative;
}
#floater{
position: absolute;
top: 51px;
left: 101px;
width: 98px;
height: 98px;
background-color: red;
}
The answer you already know. Pixel perfection on the web is a myth. You can Google for that and find a multitude of articles about the subject. Rounding errors are the chief culprit. Bugs may be another but, perhaps, less likely. Attempting to line things up to the pixel and then hope the browser, any browser, resizes fractional calculations in your favor is never going to happen except with just luck.
I'm looking for a way to have a fixed div inside another, from which a part of it exceed without horizontal scrolling.
Maybe it will be easier to understand with this: http://jsfiddle.net/pF4Qx/
html:
<div id="global">
<div id="inner"></div>
</div>
css:
#global{
margin: 0px auto;
width: 300px;
height: 300px;
position:relative;
top: 0px;
background-color: #ff0000;
}
#inner{
width:100px;
height: 100px;
position: absolute;
background-color: black;
right: -50px;
top: -50px;
}
The black div is inside the red div, but in my project, the red div is in fact the outside container of my website and is 1024px large, so I don't want this ugly horizontal scroll when my browser window is 1024px large, but just want this "outside" part of the black div to be hidden.
I've tried to solve this by putting an overflow parameter, and even tried to put this black div outside with a fixed or absolute position, But I can't find a better result...
#global{overflow: hidden;} works fine for me in this case
As SW4 mentioned in the comments, add overflow: hidden; to the parent div global properties in your CSS.
Putting an overflow:hidden; on your container (#global) gets the job done.
Not sure if i understood your question correctly, but try putting this in your stylesheet:
html{overflow-x:hidden;}
That should do the trick. Keep in mind that this is not really friendly for people with smaller screens or zoomed in browser windows.
I finally found a great solution (I think) to solve my problem:
html:
<div id="inner"></div>
<div id="global">
</div>
css:
#global{
margin: 0px auto;
width: 300px;
height: 300px;
position:relative;
top: 0px;
background-color: #ff0000;
z-index: -1;
}
#inner{
width:100px;
height: 100px;
position: relative;
background-color: black;
margin: auto;
z-index: 2;
left: 150px;
top: 50px;
}
Here is the updated fiddle: http://jsfiddle.net/pF4Qx/4/
Hope this will help someone ;)
I have images that are also links, coded like this:
<img src="pages/squirrely.png" />
They work fine, but I want it to be a link, only if you click the general middle of the photo. If you click on the outer regions of the image, I don't want any linking to happen.
I tried changing the width and height of the lin, but it didn't work. My css is:
#magazine a {
width: 100px;
height: 100px;
border: 5px solid #fff;
}
I would not work with an imagemap in this case, but do something like this:
The HTML:
<div class='container'>
<img .../>
<a ... ></a>
</div>
The CSS:
.container {
position: relative;
}
.container img {
width: 100px;
height: 100px;
border: 5px solid #fff;
}
.container a {
display: block;
width: 60px;
height: 60px;
position: absolute;
top: 25px;
left: 25px;
}
Basicly this puts your link on top of your image. I find it much easier to play with the positioning and the dimensions of the link this way. (I did not test the code, but i think it should work)
There are several web applications that'll allow you to choose the coordinates for the mapping. I've tried this one with great success:
http://www.maschek.hu/imagemap/imgmap
I hope this helps you with your project!