Hello i want to Inspect Element in Browser (FireFox 87) but the Page update the Content every 1 second so the inspect jumps to main Div of the page,The site address is as follows :
Page Address
So Is there a way I can keep the page steady other than disconnecting from the internet (that Work) ?
use position: fixed in your menu button instead of absolute
#menu_btns {
display: block;
position: fixed;
z-index: 800;
top: 8px;
left: 20px;
height: 32px;
width: 580px;
}
by doing this your problem will be , this is just for fix menu if you want to fix entire page add position fixed in MainContainer
.MainContainer {
text-align: center;
position: fixed;
}
add position:fixed in css rule whatever you want to fix
Related
In my splash screen I'd like to center the 'close' ('X') button on the bottom of the page, and it has to adjust itself to fit any computer or mobile device screen. In the CSS it can be found starting at line 206. I've tried these things:
position: absolute
I tried margins at different sizes or no margin
top: -999em;
right: 10px;
Here's my CSS.
Here's the whole App.
The close button in the splash screen of this app is placed how I'd like it, besides that it moves in certain browsers. I'm not able to figure out how they did it.: https://willcountygis.maps.arcgis.com/apps/StoryMapCrowdsource/index.html?appid=20ff154f5fbc4c99bc54bd2e6b8cea7e
The most similar question I could find was a post I largely based my CSS off of: Splash Page with Pure CSS and close button
centering of elements in the screen can be done with the following CSS. If you place it insode a parent element, make sure it has a position property in the CSS.
You can play with the top and bottom property settings to position it.
.screenbutton {
width: 120px;
height: 120px;
border-radius: 50%;
background-color: lightblue;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
<div class="screenbutton"></div>
I'm currently modifying a Xenforo theme for my website and I'm having trouble with my header bar after I downloaded a new theme.
http://www.ausfifa.com/forums/index.php?forums/head-to-head.2/
If you scroll down the page, you'll notice that certain elements such as the search bar, breadcrumb arrows and mini avatars are appearing above my header bar.
I'm not sure why this is happening as I've set the header bar's z-index to 9999 and its position is fixed (when you scroll down after a certain point, javascript sets position = fixed). All the elements that are overlapping it have z-indices that are lower than 9999. The odd thing is, this wasn't an issue on my older theme and I never modified any CSS for it to start doing this.
This is the div which contains my header:
#header-menu-cont {
font-family: DIN-Cond;
font-size: 15pt;
min-width: 1000px;
float: left;
width: 100%;
height: 52px;
background: #333333;
z-index: 9999;
position: relative;
}
This is the mini avatar that overlaps my header:
.discussionListItem .posterAvatar .miniMe {
bottom: 1px;
left: 29px;
padding: 0;
position: absolute;
z-index: 10;
}
The search bar that overlaps my header:
#searchBar {
position: relative;
z-index: 52;
}
I've also tried setting a high z-index to all of the elements inside my header bar but it makes no difference.
Feel free to inspect any of the HTML in my website if you'd like to get more information.
Any help would be greatly appreciated. Thanks.
When setting Z-index you need to do this on the containing element not the ones inside it.
In your case the #headerMover div has z-index:1; applied to it.
If you take this out of your CSS or add a higher z-index on #headerMover it solves your problem.
#headerMover, .footer, .footerLegal {
z-index: 1000;
}
You need to give the parent/container the z-index, not the elements inside it.
My fixed header is overlapping my content.
Much like here (Position fixed content overlapping problem)
but my header is dynamic so not always 50px in height sometimes 52, 100 ...
Try to position it in your box better.
When you create a fixed element, it requires an exact position:
Example:
#header{
height: 95px;
width: 640px;
position: fixed;
top: 30px;
right: 30px;
}
So, this is how your browser will read this: I will place a fixed element in the top-right corner of the screen: 30 pixels from the top, and 30 pixels from the right of my screen.
THE REASON those fixed elements are one on top of another it's because he didn't define a top/bottom and left/right position correctly. Add more text and you will see if you can scroll on the fixed elements (you can't..).
Put everything in a div and ID'it #bigBody. Give the #bigBody an exact width and height, let's say 1000 width and 600 height.
Now add these:
#header {
height: 50px;
width: 600px;
position: fixed;
top: 30px;
right: 30px;
}
#footer {
background: #fff;
bottom: 0;
right: 0;
height: 30px;
width: 600px;
position: fixed;
}
min-width is irrelevant here... you use this only if you design big websites that require multiple devices access like iPhones, Tablets etc... if your just playing with the code just stick with the basics.
You can do that via JavaScript, updating both the size of the header and the margin of other widgets. See my fiddle for an example (with CoffeeScript, tested on Firefox and Chrome), or this other fiddle that uses jQuery. Basically it's changing the CSS together for more than one element.
header { height: value + "px"; }
.contents { margin-top: anotherValue + "px"; }
If the size change isn't done by JavaScript/CoffeeScript, you'll have to put a event listener to update the .contents CSS.
I am trying to create a footer that is responsive and sticks to the bottom right of a page but can't get it to work consistently when a absolutely positioned div is on the same page.
The code I am using can be seen at:
http://192.241.203.146/sample-page/
I have tried:
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-top: 40px;
As well as:
float: right;
bottom: 0;
right: 0;
margin-bottom: 40px;
margin-top: 40px;
To get it to work, but it does not respect the absolutely positioned content on the page when it is resized down to mobile. It clashes like so:
I know that using position:absolute means that the div is removed from the flow of objects but I need to use it on the element in the middle of the page to avoid the objects jumping around when I use jQuery fades.
I suspect this is because it is not inside a span or row as per the bootstrap base I am using. Is that the problem?
I'm at a loss here - any guidance appreciated :)
Your problem is that the div is normal to the page, but his position is absolute. Inspecting your code i saw this:
if you want the footer is always visible in the bottom, you can wrap the footer to the div which width will be 100% of the width of the page. Like this:
div#footer_container{
min-width: 100%;
min-height: 100px;
position: relative;
}
div#footer_container div#footer{
position: absolute;
right: 0px;
bottom: 0px;
}
Result:
Red - main container of your page, Green - container of your footer (its always will be after the main container), Blue - your footer.
P.S. sorry for my english :)
I think I've found it!
Try this:
.main {
padding-bottom: 140px;
}
It works for me even if I reduce the width of the browser.
When i set my footer to relative it drops off the page and end up needing -1800px to get it to the bottom of the content but that then leaves a massive white space at the bottom what can cause this to happen? And what can you do to fix it?
#footer {
background-image: url(http://***.***.***.*/spvfooter.png);
background-repeat: no-repeat;
position: relative;
top: -1280px;
left: 550px;
width: 1025px;
height: 330px;
color: white;
line-height: 16px;
text-align: justify
}
Make sure your Divs are all closed.
Validate your code and use a css debugger to make sure all floats are cleared.
if your working with more relative elements and positioning(however) them you should remember that their static point (with width and height) contains. and if you put another element beneath it will be all their height down the page