I have a number of buttons in a div that refused to stay in a fixed position when the div scrolls, and I cannot see why. I have done this elsewhere so I should be able to do it, but I'm going around in circles today.
I have isolated enough of the application to reproduce it easily. It places a div in the centre of the screen and puts a small quit button in the top-right. I want the button (and all my others) to remain fixed relative to the div. What am I missing?
<!DOCTYPE html>
<html>
<head>
<title>Scroll</title>
<meta charset='utf-8'/>
<style>
div.dt-baseContainer {
width: 50vw;
height: 50vh;
min-width: 400px;
min-height: 300px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
position: absolute;
border-radius: 20px;
overflow: auto;
}
div.dt-container {
background-color: lightblue;
border: 3px solid royalblue;
text-align: center;
}
button.dt-quit {
border-style: solid;
border-radius: 4px;
border-color: inherit;
width: 20px;
height: 20px;
background-color: white;
color: red;
font-weight: bold;
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
z-index: 20;
top: 5px;
right: 5px;
position: absolute;
cursor: pointer;
}
</style>
</head>
<div class='dt-baseContainer dt-container' id='dt_container'>
sdfsdf1<br>sdfsdf2<br>sdfsdf3<br>sdfsdf4<br>sdfsdf5<br>sdfsdf6<br>sdfsdf7<br>sdfsdf8<br>sdfsdf9<br>sdfsdf10<br>
sdfsdf11<br>sdfsdf12<br>sdfsdf13<br>sdfsdf14<br>sdfsdf15<br>sdfsdf16<br>sdfsdf17<br>sdfsdf18<br>sdfsdf19<br>sdfsdf20<br>
sdfsdf20<br>sdfsdf21<br>sdfsdf22<br>sdfsdf23<br>sdfsdf24<br>sdfsdf25<br>sdfsdf26<br>sdfsdf27<br>sdfsdf28<br>sdfsdf30<br>
<button id='dt_quit' class='dt-quit' title='Stop'>X</button>
</div>
</html>
[Edited] Of course, position:fixed; is not relevant unless it's fixed relative to the screen so I removed the mention. But I c=still cannot get this simple thing to work.
I hate having to answer my own question, but this was me being silly ... of course.
The suggestion above that my transform was the problem is a red herring. It is basically not possible to fix an element relative to its container in a scrolling flow.
The solution was to put both my scrolling div and my buttons inside an extra containing non-scrolling div. Not only does this make sense -- the container encapsulates both scrolling and non-scrolling content without having to put the latter inside the former -- but my initial code was very nearly there.
Taking my existing dt-baseContainer class and putting it on an outer div fixes the problem.
Related
I'm writing here because I've got a problem with CSS. I have a .container div that contains another div set to position:absolute, top:0, left:0 and width:100%; height:100%. However I keep seeing these kind of white spaces, that when I zoom in the page disappear. Any solution?
.loop {
display: block;
position: absolute;
height: 36px;
background: white;
border: 2px solid black;
box-sizing: border-box;
width: 250px;
top: 7px;
left: 50%;
transform: translateX(-50%);
border-radius: 5px;
overflow: hidden;
transition: background 0.2s;
}
.goPrev,
.goNext {
position: absolute;
width: 36px;
height: 100%;
box-sizing: border-box;
top: 0;
display: flex;
justify-content: center;
}
.goMid {
position: absolute;
top: 0;
left: 36px;
width: calc(100% - 72px);
height: 100%;
font-family: "Poppins";
padding-top: 9px;
text-align: center;
box-sizing: border-box;
}
.goMid:hover,
.goPrev:hover,
.goNext:hover {
background: rgba(0, 0, 0, 0.3);
}
<body>
<div class="loop">
<div class="goPrev">
</div>
<div class="goMid">
Help me.
</div>
<div class="goNext">
</div>
</div>
</body>
That is just a draw.
Here you have the screenshot
Well, I'm not totally sure what to do, but the following changes seem to fix the problem for me. I changed:
Set .loop overflow from hidden to visible
Set .goMid top from 0 to -1px
The .goMid height from 100% to calc(100% + 2px)
When I moved the inner div underneath the border using top: -5px I still saw the whitespace until I changed the outer div overflow property to visible. Then if you stretch the inner div a little it seems to solve the problem. It helps that your outer div has a thick border.
.loop {
display: block;
position: absolute;
height: 36px;
background: white;
border: 2px solid black;
box-sizing: border-box;
width: 250px;
top: 7px;
left: 50%;
transform: translateX(-50%);
border-radius: 5px;
/* HERE */
overflow: visible;
transition: background 0.2s;
}
.goPrev,
.goNext {
position: absolute;
width: 36px;
height: 100%;
box-sizing: border-box;
top: 0;
display: flex;
justify-content: center;
}
.goMid {
position: absolute;
/* HERE */
top: -1px;
left: 36px;
width: calc(100% - 72px);
/* HERE */
height: calc(100% + 2px);
font-family: "Poppins";
padding-top: 9px;
text-align: center;
box-sizing: border-box;
}
.goMid:hover,
.goPrev:hover,
.goNext:hover {
background: rgba(0, 0, 0, 0.3);
}
<body>
<div class="loop">
<div class="goPrev">
</div>
<div class="goMid">
Help me.
</div>
<div class="goNext">
</div>
</div>
</body>
For what it's worth, I think #MarkP may have a good point. Combining absolute positioning and flexbox does feel like maybe a code smell. But, I don't know what the context is in your code and my flexbox-fu is a little shaky.
ACTUAL GENERATED VIEW:
I added text to all 3 nested divs and got the following centered display.
You can see all your text is bunched together. I am going to review your code and the offer a way forward. You may find you need to re-word your problem to allow us to help you better. My assumption is you are trying to set-up a tool to navigate through some type of media, such as images or pages.
CODE REVIEW
In review of your Code i can see you are trying to use a 3 part display using flexbox. Except you have also included absolute positions which prevents relative display of the divs alongside each other. Now i know you are concerned about white space but i am going to suggest a way to better use flex-box as well as debugging the whitespace, although it would be better to start again with a appropriate flexbox structure.
WHITE SPACE DEGUGGING
My suggestion first would be to remove CSS that could be causing this and then re-introduce the CSS progressively. If you are using Google Chrome you can use the insight tool to adjust the live CSS. Simply right-click on the area you wish to inspect and the CSS being used there will be displayed. You can edit directly in the CSS display and it will change the page behaviour, this is great for debugging and seeing what CSS improves your layout. Once you find the CSS you need you can replicate that in your code.
I would start with removing the following and see how you go:
Remove overflow:hidden;
When you look closer you can see the style code allows for 36px for each div on the left and the right. There may be an image missing from the .goPrev and .goNext divs, where your white space is now. Not sure if you copied your code from somewhere or wrote this from scratch?
TRY STARTING WITH A NEW FLEX-BOX STRUCTURE
I recommend creating your divs from scratch using one of the approaches found here: Common CSS Flexbox Layout Patterns with Example Code . Flexbox is super simple and a great way to build mobile responsive layouts.
I have a button that is housed with a few levels of divs. Whenever I attempt to position the button, it is no longer usable. It becomes disabled. I have attempted to set the z-index to 9999, and that did not work. I also wrapped the button in a div and positioned the div itself, but it still disables the button. I tried with with changing the margins, and floating.
#left_menu {
position: fixed;
width: 12%;
height: 100%;
background-color: #262626;
border-right: 3px solid #1a1a1a;
}
#left_menu_top_options {
width: 100%;
height: 30px;
background-color: #1a1a1a;
}
.left_menu_button {
position: relative;
float: right;
width: 25px;
height: 25px;
z-index: 9999;
}
<div id='left_menu' class='lmenu'>
<div id='left_menu_top_options'>
<button class="left_menu_button" onclick="changeMenu()">C</button>
</div>
</div>
Not sure what was causing the issue. As a resolution, I removed the class from the left menu and created an entirely seperate fixed div to use the button in. That worked.
I created a custom tag called <bubble></bubble> and its styles can be applied using the custom type attribute.
Code:
bubble[type=normal] {
border-radius: 10px;
background-color: #5e9bff;
text-align: center;
color: white;
padding: 6px;
width: 50px;
}
<bubble type="normal">Hello!</bubble>
The problem comes in positioning the element when placed with the div tags. First of all, the width: 50px; gets ignored unless I use Position: Absolute; which has another problem I'll describe below. Second, It partially overlays the text when <div></div> tags are used even after applying the margins on Top and Bottom.
Code with Absolute Positioning:
bubble[type=absoluteposition] {
position: absolute;
border-radius: 10px;
background-color: #5e9bff;
text-align: center;
color: white;
padding: 6px;
width: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
<bubble type="absoluteposition">Hello!</bubble>
The problem here is position: absolute; acts like float: left; which I don't want to use even after using margins on top and bottom. This problem also occurs with div tags.
Demo in JSFiddle.net
If you have a solution OR You think there is a problem in my code OR You think there is an Alternative way to fix this problem OR You need more details on my Question, please Reply.
if you want to specify , height , width on above when using absolute than you may try wrap bubble tag in another div with relative position like :
<div class="some" style="
position: relative;
display: inline-block;
width: 100px;
height: 50px;
">
<bubble type="absoluteposition">Hello!</bubble>
</div>
Cheers !
I have an dynamic div displaying some information that I want to position in an exact position relative to the background of the page. For example, I want to put a number 9 let's say, over the eye of a cat. In "full" resolution, this works fine, but tying the margin-left to a pixel size, or even a percent, will cause this to break. The code for the "eye" is something like this:
.catEye {
position: absolute;
color: #DCDCDC;
font-size: 10px;
font-weight: bold;
font-family: "helvetica-neue-bold", helvetica, sans-serif;
width: 25px;
height: 25px;
margin-top: 100px;
margin-left: 68px;
border: 3px solid #000000;
border-radius: 100%;
background-color: #000000;
}
Here is a plunkr that displays the problem. The problem is most evident at smaller resolutions. When in "full" resolution, the "9" should be directly over the cat eye.
http://plnkr.co/edit/2uqIhBseRLo5A47JVI2F?p=preview
I am using Foundation for the block-grid setup, 5 items per row. As the image I have is a certain size, this should generally remain the same if possible.
Question: Is there a way to get the "9" to always position directly over the eye, no matter the browser resolution? In my actual work, it needs to be positioned directly over a corner piece, so movement is very noticeable.
Clarification: After thinking about it, what I'm basically asking is positioning relative to the image element, because no matter the size/placement of it, as long as the "9" is placed relative to it, it would work.
I guess you meant to have sort of background-size:cover for the cat, I don't think that is possible in that case.
Currently, the relative position is set on the element that can be larger than 200px (which is the image size), and you have center value set on the background, so that it moves. The cat eye is always staying in the same place but not the cat image.
To fix it, you can set the relative element to max-width: 200px;. Simplified demo follows.
JSFiddle Demo
.imgCat {
background: url("http://i.imgur.com/qpbY8VC.png");
max-width: 200px;
height: 200px;
position: relative;
}
.catEye {
position: absolute;
left: 75px;
top: 95px;
width: 30px;
height: 30px;
display: block;
border: 2px solid orange;
border-radius: 50%;
}
<div class="imgCat">
<span class="catEye"></span>
</div>
First thing you can use left: and top: property to position an absolute/relative img (instead of margin-left & margin-top).
Second depending on how the containing img is resizing I'd set the left: and top: property with a percentage value.
Third use relative positioning (relative to static parent - like in your scenario).
put this in your CSS and let me know if it's the desired rendering
.imgCat {
background: url('http://i.imgur.com/qpbY8VC.png') center no-repeat;
height: 200px;
}
li {
padding: 10px;
border: 1px solid #000;
}
.catEye {
position: relative;
color: #DCDCDC;
font-size: 10px;
font-weight: bold;
font-family: "helvetica-neue-bold", helvetica, sans-serif;
width: 25px;
height: 25px;
top: 50%;
left: 35%;
border: 3px solid #000000;
border-radius: 100%;
background-color: #000000;
}
BTW: actually the cat img doesn't look very responsive...
In my html page, I have two links located on the top of the page:
<div id='my-link'>
<a class="school" href="../school.html" target="_blank">School</a>
<a class="police" href="../police.html" target="_blank">Police</a>
</div>
(When mouse click on the link, the linked page is supposed to be opened in a new browser window.)
the CSS:
#my-link{
margin-top: 5px;
position: fixed;
margin-left: 22%;
width: 20%;
}
a.school{
color: #6ffe11;
font-size: small;
text-decoration: none;
position: relative;
left: 30.5%;
margin-top:10px;
}
a.police{
color: #6ffe11;
font-size: small;
text-decoration: none;
position: relative;
left: 30.5%;
margin-top:10px;
}
a.school:hover, a.police:hover
{
color: #2f8;
text-decoration: underline;
}
I tested on firefox 3.6.16, when I open the firefox browswer window with full screen, the links are working successfully ("school", "police" pages opened successfully,
CSS hover feature is also working).
BUT, if I open the browser window size not in full screen, the links are not working at all, the "school" and "police" pages are not open,
the CSS hover feature is not working either.
The link texts are like plain texts on the page. *WHY???*
My guess is that something else on the page that's positioned is above it. Can't be certain without seeing your whole page code though.
Try adding a z-index to your #my-link div
-- edit --
Sorry, with the nice range of CSS properties you'd already used I assumed you would have heard of z-index.
Replace
#my-link{
margin-top: 5px;
position: fixed;
margin-left: 22%;
width: 20%;
}
with
#my-link{
margin-top: 5px;
position: fixed;
z-index: 100;
margin-left: 22%;
width: 20%;
}
Lots of info on z-index at https://developer.mozilla.org/en/Understanding_CSS_z-index
-- edit --
Why it works
If x is horizontal and y is vertical, as on a graph, z is towards or away from you. Using a z-index will bring something towards you. You can overlap these properties as well.
Take this as an example. Copy it into Notepad (or similar), save it and take a look at the code to understand. Alter the z-index properties of each div in the style section to see how it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Z-Index Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
div { width: 100px; height: 50px; border: 1px solid #000; }
#one { position: absolute; z-index: 10; top: 10px; left: 10px; background: #666; }
#two { position: absolute; z-index: 30; top: 30px; left: 30px; background: #999; }
#three { position: absolute; z-index: 20; top: 50px; left: 50px; background: #CCC; }
</style>
</head>
<body>
<div id="one">Furthest away</div>
<div id="two">Nearest</div>
<div id="three">In the middle</div>
</body>
</html>
Naturally in HTML, the elements later on in the code would overlay the things that appear earlier. Using positioning to move things will affect where they sit in the natural flow of the page and may be overlapped. That's how I guesses your problem when I saw your fixed property in your CSS as you'd taken the div out of the natural flow.