I am developing a cross-browser extension (add-on) that sits on the right side of each page. Right now, I overlay the sidebar on top of each page. But I'd prefer to have it sit on the side of each page on its own, not hiding any part of the parent page. I've been searching around for an answer to this with no luck. There seems to be built-in methods for creating sidebars in some browsers. But I am looking for a technique that involves only html and css (and jquery if need be).
As an example of what I'm looking for, the google Related extension sits at the bottom of each page but actually pushes up the page's content when it loads.
The Widgya add-on is part of the parent page's content, and you can see how Google Related pushes it up to avoid intruding on the page. This is the relevant html from the Related extension:
<div style="clear: both; height: 46px; width: 100%; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: relative; "></div>
<iframe class="grelated-iframe" frameborder="0" id="grelated_iframe_189" src="http://www.gstatic.com/webgps/grelated_0_6_9/html/grelated_bar_iframe.html" style="z-index: 2147483647; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; vertical-align: baseline; position: fixed; bottom: 0px; left: 0px; right: 0px; top: auto; width: 100%; height: 49px; " scrolling="no"></iframe>
Using a div that invokes 'clear: both' and an iframe that is absolutely position, the effect is achieved. But I cannot seem to reproduce this effect on the right or left side of the screen. I've tried various methods with no success. I'd appreciate any insight into an approach to take.
Thanks
Update:
Here's the effect I'm trying to achieve:
Chrome has/had an experimental sidebar api, but I need the capability to do this in css & html without relying on a browser-specific api.
Do you mean "position: fixed"? I dont think "clear: both" could make the bar fixed on a certain position when scrolling.
A simple example is the notification bar on
http://chat.stackoverflow.com/
Related
I have an old project JSP page with the following CSS block which formats the main form div
.container {
background-color: #f2f2f2;
padding: 20px;
position:absolute;
width: 400px;
min-height: 300px;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -250px);
}
requirement is such that I need to get a border around this form and in between some text so I used Pseudo-element after with following css block
.container:after {
position: fixed;
content : '\00a0 \00a0 \00a0 Login to external function';
font-size: 1.3em;
font-weight: bold;
border-radius: 25px;
padding-top:15px;
top: -40px;
left: -25px;
right: -25px;
bottom: -25px;
border: black 2px solid;
border-spacing: 10px
}
I got the required output, but the form is freezing now, and I cannot click anything. Can you please help me know what I did wrong?
Pseudo-elements are treated as descendants of their associated element. That means by default they sit above their parent in the stacking order. Even though in this case the pseudo-element is transparent, it is still blocking the .container below, preventing you from clicking it.
To fix it, you can place the pseudo-element behind its parent (.container) by giving it a negative z-index value.
I am trying to make a replica of taco bell's website just for fun and as a challenge, and the replica website is private so no one will see it, anyways I am trying to make a side bar, it went good so far until this extra space (https://imgur.com/8soZSIg) appeared in the side bar, here is my css code (also I am a beginner):
.nav {
height: 84%;
width: 150px;
max-height: 84%;
position: fixed;
z-index: 1;
top: 137px;
left: 0;
background-color: #111;
max-width: 100%;
overflow-x: hidden;
padding-top: 0px;
padding: 0px;
padding-bottom: 0px;
min-width: 150px;
margin-bottom: 0px;
}
Try using display: inline-block it will work better since it will turm into an inline element with block element properties but also make sure to fix the max height and max width stuff because they are probably what is causing that space.
So i have a website with a header and a navbar. The effect i'm trying to achieve is that the navbar lays behind the header and then slides out when scrolling past the header. Example
But the links wasn't clickable in the example above (they got covered by the header), so i redesigned a bit and got a successful result. But now the navbar stays on top of the header. I tried changing it by z-index, but with no success, and i have no idea what is wrong.. Example 2
(the links are server archives, won't be changed.)
Sincerely,
a confused dev.
Changed your code in your first exmple, now it's working fine:
#Nav {
position: fixed;
background-color: #F0F4C3;
width: 100%;
background-size: 100% auto;
background-position: right center;
background-repeat: no-repeat;
top: 0px;
z-index: 10000;
box-shadow: 0px 4px 0px #AFB42B;
height: 50px;
margin-left: -8px;}
#Pic {
height: 300px;
/*changed*/
z-index: 100001;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
/*added*/
position: relative;
}
You have to add position:relative to the elements using z-index make the z-index work
Found the problem:
Add position: to #headimage in the css.
My bad guys :).
I checked my Tumblr theme on IE and the footer is in the middle of the page and here is the code I have.
#mastfooter {
background-color: #4F3117;
height: 295px;
clear: both;
margin-top: 0;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
width: 100%;
position: absolute;
left: 0px;
bottom: -38px;
}
Is there an Internet Explorer 9 solution to that?
Ryan Fait has the best cross browser solution to a sticky footer
See Here
But there are countless examples of sticky footers using just CSS on stackoverflow.
Based on the code provided, I would guess that you need to change it to something like this-
#mastfooter {
background-color: #4F3117;
height: 295px;
clear: both;
margin-right: auto;
margin-left: auto;
width: 100%;
position: fixed; /* keeps the footer visible even when scrolling*/
bottom: 0px;
}
Note that the top and bottom margins have been removed, they were most likely the cause of the positioning problem.
I am having some problems with my DIV, it wont display over a a DIV that has a web user control in it. Below you can find my css. I believe I have done everything right and am hoping that someone can maybe see an error that I have made and help me out. If you need any other code let me know. I also wonder if its just IE rendering it wrong? Thanks for looking.
The Popup CSS:
{
background: #ececec;
position:absolute;
top: 236px;
left: 201px;
height: auto;
width: 280px;
border: solid 1px gray;
z-index: 50;
text-align:left;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 15px;
font-size: 8pt;
}
The Activity DIV (same the div above just changed position)
{
border: solid 2px #A9C5EB;
position: absolute;
top: 353px;
left: 290px;
width: 710px;
height: 227px;
font-size: small;
overflow: scroll;
overflow-x: hidden;
background-color: #F8FBFE;
z-index: 2;
}
To know the HTML is essential to fix your problem.
What is the html that contains your popup? Is it relative to the body tag or some other element? Is the containing element position: relative;?
Try setting the containing element's z-index and position:
#my-container {
position: relative;
z-index: 1;
}
See this SO post about absolute positioning.
On a side note, check out IE-7.js which fixes many IE browser issues, including - AFAIK - this bug.