I got a sticky label inside another div. So when I scroll horizontally through the divs, the labels stick to the left side of the screen as long as the next div comes, which is exactly what I want. Code:
.foo-bar-label {
display: inline-block;
max-width: 100%;
left: 0px;
position: sticky;
height: 16px;
overflow: hidden;
}
.scale-unit {
border-left: 1px solid black;
box-sizing: border-box;
padding: 0px 6px;
height: 16px;
}
Now when I scroll to the right, the leftmost label finally gets overlapped by the left corner, which is the expected behavior.
(The object to the left, which overlaps the label has the same background, don't mind that.)
Question: How can I, hopefully with pure html / css, prevent the case, that a label is partially hidden, instead it should be completely invisible.
P.S.: A solution would be sufficient, which helps me to hide a div completely, IF some of its content overflows!
Thanks in advance!
Related
On my site, I have a tutorial that appears in a modal. The wrapper is a translucent gray that covers the entire site (including the parts that you must scroll down to see).
I am trying to center the modal vertically, but since the div covers below the fold (it goes where you must scroll down), the modal appears half cut off on the bottom of the page because it is placed in the center of the modal wrapper div. I'd appreciate it if someone could look at my code below and tell me how can I change the CSS so that the modal box will always appear in the center of the screen (vertically), even if the parent div moves below visibility.
Here's my code:
.modal-wrapper {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: none;
background-color: #000000;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
position: absolute;
background-color: #fefefe;
border: 1px solid #888;
border-radius: 12px;
margin: 15% auto;
padding: 20px;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
You may be wondering what happens when the screen's width is smaller. As the browser size shrinks, the div slowly moves further up the page, but it is never fully revealed. I would like this modal to be centered similarly to the Wordle Help Modal. If you play around with it, you'll see that it always stays in the same spot no matter how small or large the browser's width is. Thanks in advance for any answers!
As can be seen here (please make it wider): http://jsfiddle.net/CZayc/1368/, I wanted to make my navbar width 100% of browser width, and place some links (First Second Third Fourth) in the centered, 1200px wide space.
I do not know why, but the middle container just overlaps the navbar.
Changing position: absolute; on navbar caused it to shrink to 1200px size (not desired).
What can I do about it? There is also a problem with link container, because I couldnt center First Second Third Fourth in the desired 1200px space (probably due to overlap).
Thanks!
Using absolute position on an element takes it out of the content flow: meaning that other elements in the flow act like its not there. The elements overlap because there is nothing to push the middle content down below the header.
There are 2 things you could do:
stop using position absolute. as #NendoTaka suggests, relative should be fine. If there is some reason for absolute positioning you haven't explained, then
add a margin to the middle content area.
Example CSS
.middle {
background-color: #7f7f7f;
height: 1050px;
margin: 74px auto 0; /* height of nav plus its borders*/
}
You can move .middle out of the way by adding margin-top: https://jsfiddle.net/CZayc/1371/
Be sure to set margin-top to the height of .nav. This includes borders, too.
Change your nav class to
.nav {
background-color: #34384A;
height: 70px;
width: 100%;
border-top: solid;
border-bottom: solid;
}
Note: You don't need the width: 100% but just in case.
You need to apply position:relative to both the .nav and the .middle
Your problem before was that .nav had an absolute position which caused the overlap. the relative positioning keeps that from happening because it formats each div relative to the previous div as written in your HTML.
.nav {
position: relative;
background-color: #34384A;
height: 70px;
/* position: absolute; */
left: 0;
right: 0;
border-top: solid;
border-bottom: solid;
}
.middle {
position: relative;
background-color: #7f7f7f;
height: 1050px;
margin: 0 auto;
}
You’re trying to solve the wrong problem with your question. The example below is a cleaned up version of your code.
* { margin:0; padding:0 }
nav {
background-color: #34384A;
height: 70px;
border-top: solid;
border-bottom: solid;
text-align: center;
}
<header>Test test</header>
<nav>
<a>First</a>
<a>Second</a>
<a>Third</a>
<a>Foruth</a>
</nav>
<div class="middle">
11111<br>22222<br>33333<br>44444<br>55555<br>66666
</div>
<footer>Test</footer>
Be mindful of the HTML you use. The HTML tags you choose should provide meaning to the content they wrap. Also you should avoid using position: absolute for general layout concerns such as this one.
Hope that helps.
I have a div that has a variable width, depending on its content. I want to use it for a menu bar that slides in from the side of the page when the user clicks it, so it has to stick out. I want it to stick out exactly 16px (because the arrow image has that size), no matter how wide it actually is.
How can I realize that without using JavaScript?
EDIT:
Thanks for your answers! But it came to my mind that I could do it just like I did with the navbar on that site – modify the width instead of sliding it in.
See here: http://dev.mezgrman.de/tagwall/
The easiest way to do that is to add another class to your menu item when it is collapsed and set another width there and a text indent like so (instead of write again all your css in a new class)
.collapsed {
width: 16px;
text-indent: -9999px;
background: url("/images/arrow_left.png") no-repeat scroll right center rgba(0, 0, 0, 0.85);
}
Now the only thing you have to do in javascript is to add and remove that class depending on the user's click. (You won't get rid of javascript. because css doesn't know when you click an element)
http://jsfiddle.net/LruWn/
No matter how long the .box is, it will always overlap the .container only by exactly 16px:
html:
<div class="container"><div class="box">text</div></div>
css:
.container {
position: relative;
outline: 1px solid red;
width: 100px;
height: 100px;
}
.box {
width: 70px;
position: absolute;
left: 100%;
margin-left: -16px;
outline: 1px solid black;
}
Add overflow: hidden; to .container to see how it might look like in action.
I solved my problem by modifying the width of my element now. Silly me.
I'm trying to place a button. I have its position set to absolute, so I can't figure out how to place it properly.
Its the button that says "Is this your product?"
See an example here: (removed)
I want it to be placed right on top of the widget in the right sidebar with 5px spacing all around. How do I do that?
I originally took the button from here: http://cssdeck.com/t/uHhhprW6
Appreciate the help.
if your Button will be always in same place so you can do it with:
.but {
position: absolute;
width: 80px;
height: 25px;
background-color: #DEDEDE;
right: 0;
margin: 5px;
}
And just edit your right or top whatever you want. little example
The quickest way I could get it to work was remove the top, left, float, and margin-left declarations from your .email rule, and change its position to relative.
.email {
position: relative; /* not absolute */
width: 220px;
height: 30px;
font: .75em "lucida grande", arial, sans-serif;
margin: 0 0 5px 0;
}
I would imagine there are much cleaner/simpler ways to make this particular button - there seems to be a lot of absolute positioning going on with the containing element and its children. But the changes I have suggested seem to work as a quick fix.
When an element has position: absolute, you have to position it using left, right, top and bottom. The values you use on this properties should be relative to the closest positioned ancestor (a "positioned" element being one with a position value other than blank or static).
Consider, for example, the following HTML:
<div id="container">
<div id="position_me"></div>
</div>
And the following CSS:
#container {
width: 500px;
height: 500px;
position: relative;
border: 1px solid green;
}
#position_me {
width: 20px;
height: 20px;
position: absolute;
left: 100px;
top: 100px;
border: 1px solid red;
}
The red box will be 100 px from the top border of the container, and 100px from the left border of the container.
See working example.
If you use position: absolute on the button, you can specify it's location using the top, right, bottom and left properties. For example, to position an element with the id button to the top right of a page, with 5px spacing both on top and at the right, you could use this CSS code:
#button {
position: absolute;
top: 5px;
bottom: 5px;
}
If you just want the element to go to the right side of the parent element, you should use float: right. Then you can use margin-top, margin-right, margin-bottom and margin-left to make sure the element gets some margin around it.
See my example Fiddle for the difference. Note that both 'buttons' are within the same div in the HTML code, but the absolute positioned one appears to be outside of that block.
Have a look at this article for more information on CSS positioning.
I've got a simple page, and I'm trying to set a border on the bottom of my page's body in CSS like so:
body {
height: 100%;
border-bottom-color: #ad3127;
border-bottom-style: solid;
border-bottom-width: 5px;
}
This works great if I've got enough content to fill the whole window, especially when it needs to scroll: the bar appears at the bottom of the page (not the window. I don't want it to be floating over content or anything like that).
The problem is when there's not enough content to fill up the whole window, the bar just appears at the bottom of whereever the content ends. This sort of makes sense, but it's obviously not what I want.
I've tried something like
html {
height: 100%;
}
Which seems to work in both cases, except when I resize my window it gets mangled (at least in Firefox 4) and in Mobile Safari it renders at the bottom of my viewport (ie kind of just in the middle of my content). So this does not appear to be doing it for me.
There must be a way to solve this (with as little sorcery as possible, please :)).
Instead of height: 100%, use min-height: 100vh:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
Because of box-sizing: border-box, border of the body will be accounted in the body height. The only hack here is for content margins pushing the border below viewport, which is fixed with an arbitrary padding-top value.
Chris Coyier did an interesting article on body borders a while back. Here is the link for reference: http://css-tricks.com/558-body-border/
To do what you want, the most cross browser way would be to create a div that acts like a border, and then give it a fixed position of bottom 0. Something to this effect:
HTML:
<div id="bottom"></div>
CSS:
#bottom {
background: #ad3127;
height: 5px;
position: fixed;
left: 0;
bottom: 0;
}
A little bit less hacky way, albiet less compatible with older browsers is to use pseudo elements:
body:after {
content: "";
position: fixed;
background: #ad3127;
height: 5px;
position: fixed;
left: 0;
bottom: 0;
}