I've been struggling with this issue. I have a web where I want to put certain fixed positioned element (kind of alert box for users). Therefore I decided to position it as fixed and put in the bottom left corner of the web. I assumed that it does not matter where I put the piece of HTML code as it will be positioned anyway, so i put it right under opening body tag. Everything went well, box ended up where I wanted it to be, BUT it leaves a strip of blank space at the top of the web (where the HTML code is). Isn't positioned element supposed to take up no space? My logic seems to be wrong.
Image of the problem.
Box HTML:
<div class="users-alert-box">
Some Text
</div>
CSS:
.users-alert-box {
background: #fffcd2 none repeat scroll 0 0;
border-radius: 5px;
bottom: 35px;
box-shadow: 1px 1px 5px #888;
display: block;
font-size: 12px;
left: 30px;
padding: 10px 15px;
position: fixed;
z-index: 1000;
width:170px;
}
What am I missing?
Thanks!
The code you have provided do not create a top space. Check the fiddle.
https://jsfiddle.net/tpoj91u4/
The spacing will be due to the margin of any other element.
Turned out to be PHP related error. Thanks to everyone for your time!
Related
I want to place a div fixed on the left and near I want to place other div.
Imagine a twitter webpage, I want to fixed the left panel (where you write yout tweets) and near I want to place the panel where you read tweets.
Now I have the following code:
<div id="container">
<div id=fixed-menu>
</div>
<div id="content">
</div>
</div>
#fixed-menu {
position:fixed;
background: #fff;
padding: 10px;
top:60px;
left: 10px;
width:300px;
max-width: 300px;
}
#content {
background: #fff;
padding-top: 10px;
}
In this way, the div with id="content" appear on left so, the fixed-menu doesn't appear, because it is under content div.
If I use margin-left in #content the error is solved, but I don't want use that, any other solution?
Thanks.
One of the first things to note is that by putting a position Fixed on div#fixed-menu breaks it out of the normal document flow. What this means is that the other block/inline level elements do not know about it. Also by making it fixed, you make it fixed relative to the window. If you want it "fixed" within the container and not to a certain point on the screen I would go with position:absolute and then a position:relative on it's parent container.
Either way, the problem you're experiencing where div#content doesn't respect the position of the fixed element, is due to the fact that the fixed element is no longer part of the normal document flow. Adding a z-index to div#fixed-menu should bring it above the content. However, you will see overlapping and will have to account of the offset of div#content with either margin on div#content or padding on the parent container.
If you look at this fiddle: http://jsfiddle.net/f38aj/
css:
#container {
position: relative;
height: 700px;
padding: 0 0 0 320px;
}
#fixed-menu {
position: fixed;
background: red;
padding: 10px;
top:8px;
left: 8px;
width: 300px;
max-width: 300px;
}
#content {
background: blue;
padding-top: 10px;
}
If you notice we create padding in the container, where we end up overlaying the div#container object.
we have a fixed container on the left while the right side content will scroll with the page. If you can come up with a non fixed solution it might be better, as there are phone browsers like older versions of iOS that will take anything that is position fixed and replace it with position absolute.
A side note, working with fixed/absolute positioning is useful especially in some crazy cases, but it does require a little more due diligence on your/your teams parts to maintain. If you start getting into z-indexes you might want to look at a library like less or sass just to create global css variables, which will make it easier to manage what can turn into an almost unmanageable experience.
hope that helps.
I have a fixed navigation bar on my website that stays at the top with links that take me to different sections further down the page. However, because my fixed nav bar has a height of 40px, the beginning 40px of every section is covered up. How would I offset where my links take me by 40px using either HTML or CSS?
Thanks.
You might try absolutely positioning "dummy" anchors 40 pixels above the top of each section. You can give them zero width/height and hidden visibility to ensure that these anchors don't affect how your page is displayed. When the user clicks one of the links in your fixed navigation bar, the window will scroll to the top of the dummy anchor, 40 pixels above the beginning of its actual section.
Example HTML:
<div class="navbar">
Anchor 1
Anchor 2
Anchor 3
</div>
<div class="section">
<span id="anchor1" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor2" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor3" class="anchor"></span>
Section Content
</div>
Example CSS:
body {
padding-top: 40px;
}
.navbar {
position: fixed;
width: 100%;
height: 40px;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid #ccc;
background: #eee;
}
.section {
position: relative;
}
.anchor {
display: block;
position: absolute;
width: 0;
height: 0;
z-index: -1;
top: -40px;
left: 0;
visibility: hidden;
}
For a working example, see http://jsfiddle.net/HV7QL/
Edit: CSS3 also includes the :target pseudo-class, which applies to an element whose id has been referenced by the href of a link in the document, or the hash value of the URL. You can apply a 40-pixel padding to the top of the :target that will be applied only to the section the user selects from the fixed navbar.
Example CSS:
.section:target {
padding-top: 40px;
}
This is semantically cleaner than the method described above, but won't work on older browsers.
Working example: http://jsfiddle.net/5Ngft/
I just happened to stumble across this problem myself today so I had been thinking about it for a bit already, but I think I just found a solution:
Add a padding-top: 40px; margin-top: -40px to the element that you want to jump to. The negative margin cancels the padding, but the browser still thinks that the top of the element is 40px higher than it actually is (because in fact it is, only the content of it starts lower).
Unfortunately, this might collide with already set margins and paddings, and if you're using a background on the targeted element it's going to mess it all up.
I'll see if I can work around that and post a jsfiddle, but in the meantime here's a basic answer at least :)
edited: I thought I had a solution for the background, but it didn't work. Removed again.
final edit:
It does kind of work if you know the background color of the wrapping element. In my example I know the text is on a white background, but the titles have a silver background. To prevent the title from having a background on the extra padding we set, instead I put it on a pseudo-element before it:
#three:before {
content: " ";
background: white;
display: block;
margin-top: -40px;
padding-top: 40px;
}
This way the extra padding has a white background again, but this only works if you already know what background it needs. Setting it to transparent for example will show the underlying background of the title itself, not of the article.
jsFiddle: http://jsfiddle.net/Lzve6/
Heading one is the default one you're having problems with.
Heading two is my first solution, guaranteed to work on almost all browsers
Heading three is using the :before pseudo-element, might not work on older browsers.
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 have a sidebar that I am trying to get sticky on my page http://r1creative.net/station22/ I have a script in the footer that changes it from static to fixed when the page gets to a certain point. Thats working fine but the problem Im having is that when it switches, it changes how the div holds the nav ribbons and they dont "hang" over the side anymore. Ive tried messing with different combinations, but nothing could keep the scroll effect, and leave the ribbons looking the same. Any help would be greatly appreciated.
Thanks
Here is an example of the sidebar I was trying to replicate http://www.apple.com/finalcutpro/all-features/#incredible-performance
Looks like the problem is with your "float right"
#navwrap {
width: 295px;
float: right; // remove
height: 679px;
background: #F3F3F3;
position: relative;
left: 27px; // Add this left positioning
z-index: 1;
padding: 20px 0 0;
box-shadow: -4px 4px 8px #444;
}
Let me know of that helps.
Your sidebar gets fixed to the left side of the page. Just add left: 28px to the element when you set its position to fixed. Better yet, set a class and just add the class with JavaScript, rather than adding each CSS element.
I have a movingboxes jquery plugin on my web site, and the left side of the panels in the box are shifted over approx 40px.
I suspect this has something to do with my stylesheet padding something but I can't seem to find it. Can anyone explain what is shifting this over?
My site is www.generationd.com and the movingboxes is found at Products | High Availability Asterisk, then click Screen Shots tab.
Thanks!
If you are referring to the weird space on the left of the screenshots slider thingy, the offending css seems to be:
.mb-scrollContainer, .mb-scroll {
width: 830px;
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 0;
position: relative;
left: -35px;
top: 0;
font-size: 18px;
}
It's a bit half assed as i changed the width to acomodate pretty much the width of your slider thingy, and had to move it 35px to the left.
It may take a bit more work, but at least you have an idea of where the problem is.