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>
Related
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
I've got a site which is about to hit a traffic milestone. As we countdown to our millionth visitor, I thought it would be fun to move my stats widget from the right sidebar, and nest it in the corner of my site header element.
So far, I've managed to use this CSS to move the Widget out of the side menu... but I'm really struggling to figure out how to put this element into another div.
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
This popped the widget out of the sidebar, and made it hover always in the corner. Neat...
My goal though, is to move that widget into this spot
Following this guide from the W3 Schools page, I've tried to nest the widget into the div I want it to go inside of (which is called header.site-header)
Here's the element I want it to go inside:
If I set it's position absolute and fiddle with sizing, I can shove it where I want it to go, but this doesn't look good for tablets or mobiles.
#blog-stats-2 {
position: absolute;
top: 75px;
right:5px;
width: 300px;
border: 3px solid #73AD21;
z-index:5;
}
Is there any keyword I'm missing to nest this in the corner of the site-header div?
You'll need to move your hit counter into the header HTML first before using position: absolute; otherwise it simply won't work. Try something like this.
You'll need to work this into your HTML code.
<header class="site-header">
<div id="blog-stats-2">
<!-- code here -->
</div>
</header>
Then your CSS like this.
header.site-header {
position: relative;
}
#blog-stats-2 {
position: absolute;
right: 20px;
bottom: 20px;
z-index: 123;
}
What that does is moves your hit counter into the header section and positions it absolutely to the bottom right of the header. Using position: relative; on a parent container and position: absolute; on a child element will make sure the top, right, bottom and left attributes are relative to the parents location all the time.
For mobile you'll need to change this further using media queries to make sure it sits inside the header nicely.
#media screen and (max-width: 768px) {
#blog-stats-2 {
left: 10px;
right: auto;
bottom: 10px;
}
}
I have added a logo next to my menu bar, but anytime I minimize the browser window it moves and juts behind the menu tabs. I would like it to stay put no matter the size of the browser window.
Here is my HTML code for the logo:
<div class="headerlogo"><img src="http://passionpreneurenterprises.com/kerrizane/wp-content/uploads/2014/06/kerrizane2-small3.jpg"></div>
Here is the CSS speaking to the logo (I am using Thesis 1.8.4 so that's why the .custom is included):
.custom .headerlogo {
width: 236px;
margin-left: 160px;
margin-top: 0px;
position: absolute;
top: 5px;
left: 0px;
}
Also, here is the CSS code for the menu bar that is next to the logo:
.custom .menu {
margin-top: -474px;
margin-left: 165px;
width: 950px;
margin-bottom: 11px;
}
And here is the CSS code for the header image that is below the menu and the logo:
.custom #header_area {
background: none repeat scroll 0 0 #03989c;
height: 100px;
margin-top: 475px;
}
.custom #header_area .page {
background:transparent;
}
.custom #header {
background:url('http://kerrizane.com/newsite/wp-content/uploads/2013/10/Kerri-Zane-Header.png') no-repeat center transparent;
width: 1265px;
height:400px;
padding-top: 0px;
margin-bottom: 26px;
margin-left: -140px;
border-bottom:0;
}
Here is a link to the site: http://passionpreneurenterprises.com/kerrizane/about-kerri/ if your browser is maximized, you'll see the logo on the top left and the menu to the right of it. But if you minimize your browser window, you'll see that the logo moves and sits slightly behind the menu, which is not what I want. If I can find a way to make it stay put, that would be ideal. Thanks for any help you can give.
UPDATE: I see what was happening, when I was signed in and viewing the site, the admin toolbar was across the top of the site and making things look off when I was trying to position them. So I've removed the admin toolbar and put the logo where it's supposed to go....
BUT, there's still a problem. When I view it on my PC without the admin tool bar, here is how it looks:
The picture above is how it's supposed to look. But when I view it on my phone, here is how the logo appears:
Any suggestions on how to fix this? I have also updated the CSS code of the logo to depict the recent changes I made. Thanks.
Your current page seems to be different than the code you've posted, but see if this helps.
Most smartphones will try to scale images so they fit the screen, so if this isn't giving the result you want, you want to override this default behaviour and tell the smartphone what to do.
Try editing the CSS for your header image to something like
#teaser-image{
margin:0 0 10px 0;
width:90%; /* force image to scale on narrow viewports. to get the results you want, play with this percentage and or the margin values above or a margin on the page */
max-width: 1265px; /* set max width for image */
}
Good luck!
I ended up finding an answer to this in another forum. I needed to adjust my .headerlogo CSS code to include "position: relative" instead of "position: absolute" (the "position: absolute" was part of the original CSS I posted above in my question). Wanted to share in case anyone else came across this problem. The corrected code I used is as follows:
.custom .headerlogo {
height: 71px;
position: relative;
top: -240px;
width: 200px;
}
I have two images on the background of the website I am working on, now for me on a 15" screen the position of these look fine, just behind and right/left of the content container. But on a big widescreen (or just other much larger screen sizes than mine) they end up being further away from the content container and look like they are on their own.
They are percentage based but, 25% from the left/right on my screen is different to someone with a widescreen. I need them in the same position regardless. X% from the center is probably more like it. Anyone know a suitable option? I've attached some code of what the images are using right now.
http://bit.ly/1aNgkfa
CSS for the background image of the herbs on the homepage (top-left)
.herb-bg-img {
margin-left: -15%;
margin-top: 5%;
position: absolute;
float: left;
z-index: -2;
}
CSS for the background image of the peppers on the homepage (bottom-right)
.peppers-bg-img-index {
float: right;
position: absolute;
margin-top: -30%;
margin-left: 880px;
z-index: -2;
}
Use the left property along with a minus margin-left to align as needed:
.herb-bg-img {
position: absolute;
left: 50%;
margin-left: -600px; // Change as needed
margin-top: 5%;
z-index: -2;
}
Same with the right-hand image, only use a positive margin-left instead.
This should stay the same regardless of screen width.
You're positioning these two images absolutely. They should be absolutely positioned in relation to a parent element with position: relative, however. Right now they are in relation to the page, which will continue to cause you problems.
I'd recommend adding position: relative to your .container elements.
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.