I want to get the Search Bar and Menu Button in the foreground. wearethenewmedia.com/indextrial.html This is a static page, with no CMS.
I tried using Z-index on everything and had no success.
In the above example, I haven simply put a negative margin on the search bar to put it in the top part of the website. It's hidden behind the solar system image, sticking out a bit.
Also, see original at WeAreTheNewMedia.com. It's seriously too much code to post in here. (Multiple CSS and JS pages involved.)
Can someone use Firebug (Firefox plugin) and tinker around? We have tried adding "z-index" variables almost everywhere, throughout the CSS pages with no luck.
We're also trying to implement this sidebar with our Menu button. But have conflicting CSS and JS Link: wearethenewmedia.com/menu/index.html
Basically z-index does not work without defining the element's position, e.g.:
#sticky{
...
z-index: 5;
position: absolute;
}
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Margin is not the solution here, and z-index, doesn't have effect if there is no one of the positions set (relative, absolute, or fixed).
As I saw in the website, the solution could be adding position absolute to the header:
#sticky {
position: absolute;
top: 0;
z-index: 5;
}
Hope it helps!
Related
How can I create a fixed control panel in the bottom of a web page?:
The grey coloured content should be scrollable (vertically). But the pink coloured panel should always be visible.
I am using Material-UI to sketch a design of my web page, because I am not a designer. I would appreciate a solution that uses Material-UI. But if Material-UI does not support it, then CSS solution is fine too.
Try position: fixed; bottom: 0;. This should solve your problem.
First you need to set the control panel to fixed position :
position: fixed
Afterwards, position it at the bottom of the page:
bottom: 0
Be careful though, if you have any content on the footer of your page it may overlap it, so use it wisely :)
I have created a small example here (without Material UI) : https://stackblitz.com/edit/react-fixed-menu
I am using AdminLTE free template for my site, did some changes in .js and a lot of new css, so I cant post some block of code here to see the problem, but, maybe someone would have a idea out of top of their heads. Here is also a link to my website to see it...try toggle, animations I had is turned off because of this problem...
This is my website
White box on top while navigation toggle or css animation
Most of the time this flickering comes from overflow: hidden.
Modify your wrapper, but I don't know why it has it. Could be a hack or a trick to clear any floats or anything.
Just disable it and your wrapper should look like:
.wrapper {
min-height: 100%;
position: static;
/* overflow: hidden; */
}
If you do that your animation won't flicker.
Why it happens? Badly structured HTML and CSS positioning (sorry for being mean).
Cheers!
I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.
So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}
I am currently working on a completly web-based app-looking layout.
My problem now is that the navigation makes a short jump when I let my S3 autoscroll to the topby dragging. If I scroll up normally (without releasing my finger) this problem does not occur.
It seems that there is a problem with fixed positioning and the regular browser-bar.
CSS:
#nav {
position: fixed;
bottom: 0;
..
}
Any ideas?
You can't make it scroll over other div's or anything. A screen following div on the bottom or top of the screen usually does not work great without javascript, jquery, or a huge css.
anyway,
Have you tried putting the margin on
margin: 0 auto;
Also giving it a specific size and/or height might help.
Did you try it cross browser?
I am developing an extension that will insert a horizontal div at the top of all web pages. It works fine for most pages, but for http://google.com, google's navbar is displayed on top of mine. The stumbleUpon chrome extension has a similar feature, except their horizontal div is displayed above google's navbar. I'm using a content script to insert the div. I've tried body.prepend() and it doesn't seem to do the job.
Also, I would like the bar to be fixed at the top regardless of scroll position. I have it as position:fixed, top:0% but still no luck.
Any help or pointing in the right direction would be appreciated.
When dealing with situations like this, be sure to use the computed style box in the webkit inspector. It may take some time to find the right element with the styling that is causing you the issue but it's worth it.
I prepended a div to the body at http://google.com and applied the following styles:
element.style {
position: fixed;
top: 0;
left: 0;
height: 35px;
width: 100%;
background-color: red;
}
I noticed that the red was poking out from behind Google's nav bar so I figured it was probably a z-index issue.
I set the z-index of my prepended div to 99999 and it showed up as expected. Upon further investigation I found that Google's div #gbx3 has a z-index of 990 and the nav links inside it have a z-index of 991. You don't want to cover up the Google nav bar so we are going to have to set some custom styling on it.
If you style Google's div #mngb to
element.style {
position: absolute;
top: 35px;
}
This will push Google's nav bar down but doesn't move anything else on the page.
This should be enough to get you started. It's not perfect and it doesn't handle pushing any of the other content down and it isn't generalized for any other sites but it is a good start for you.