This is a follow up to my last post, I found a issue after putting the images on top not sure if this is directly related. The issue is where you can't click on the nav links as they are transparent.
Only one shows the hover color when the cursor is put in a specific position. None of them can be click other that one which only works in a specific position. They do not show the hover color.
Code:
CODE HAS BEEN DELETED AS WEBSITE IS POSTED
Your problem is located here:
div.staffimg {
top: 100px;
left: 0px;
right: 205px;
bottom: 0px;
position: fixed;
}
Instead of just positioning your element, you are creating a block element that covers your navigation as it extends to bottom of screen.
Remove the left and bottom properties to solve this:
div.staffimg {
top: 100px;
/* left: 0px; */
right: 205px;
/* bottom: 0px; */
position: fixed;
}
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'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 added a decorative triangle using a :before on the sub-menu class. However, it covers its own main menu-item.
The website is not live yet, but I hope my screenshots will make the situation clear enough.
This is what the menu looks like. It's a WordPress installation, with a basic navigation, nothing custom except the triangle.
This is what I see when I hover on the :before inside of Chrome's inspector. It covers the bottom half of the main menu-item, making the bottom half unclickable.
This is what it looks like when I give it a fixed height of 10px. As you can see the triangle is centered, but the highlighted part begins above it.
Here's my code:
menu-item
position: relative;
float: left;
z-index: 999999;
sub-menu
text-align: center;
width: auto;
color: #78A22F;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
sub-menu:before
content: "\f0d8";
font-family: FontAwesome;
font-size: 40px;
position: absolute;
top: -36px;
left: 0;
width: 100%;
color: #78A22F;
line-height: 0px;
z-index: 2;
Does anyone have a fix or an alternative way to be able to use this triangle?
EDIT:
Here's a jsFiddle: https://jsfiddle.net/48omajxx/1/
CSS
.sub-menu:before {
/* Your other css properties */
pointer-events:none;
}
Note
If there is a click event listener on the element. It will respect the pointer-events value and does not fire.
Interesting articles about pointer events:
CSS Tricks
Developer.mozilla
I have a situation where I cannot change the css files but not html/php. I have two buttons in the page with ID's "moveprevbtn" and "movenextbtn". They are at present closely located. Using Css or using any scripts I need to spread them away. I am not being able to do it.
With CSS I tried something like this,
#moveprevbtn {
position: relative;
left: -30px;
}
#movenextbtn {
position: relative;
right: 30px;
}
But didnt help me much. Any suggestion.
I am talking in context of LimeSurvey. PHP/MySql
Here the IDs Previous button and next button respectively. I can edit the CSS files. I have to move them to left and right by providing space between them.
It looks like you are looking to have the buttons side-by-side and just spaced further apart. If that is correct, this would work.
#moveprevbtn {
position: absolute;
left: 30px;
}
#movenextbtn {
position: absolute;
right: 30px;
}
ALTERNATIVELY:
you could just add space between the two buttons like this:
#moveprevbtn {
position: relative;
margin-left: -30px;
}
#movenextbtn {
position: relative;
margin-right: -30px;
}
The first option will put your buttons 30px from the right and 30px from the left side of your view port.
The second will should simply subtract space on the opposing sides of your buttons which adds space between the two.
If I understand the question right and you want your buttons side by side with space in middle:
Add margin-left to #movenextbtn
#movenextbtn {
background: transparent url(myNextImage.png) 0 0 no-repeat;
margin-left:100px;
position: relative;
}
DEMO
I dont know how to phrase this question correctly, I would like to create something like the logo on the upper right corner of this website: http://www.afterthecircle.com/
When the user scrolls down, the logo moves with the scrolling movement and always stays visible to the user.
Any suggestions?
Use position: fixed along with top or bottom and left or right:
.logo {
position: fixed;
bottom: 1em;
right: 1em;
}
As brbcoding said, you are looking for the CSS property position with the value fixed. With the properties top, bottom, left, and right, you can then position the element. An example:
CSS
.fixedElement {
position: fixed;
top: 100px;
left: 100px;
}
HTML
<div class=fixedElement>Hey!</div>
Fixed positioning will allow you to scroll and keep an item in it's original position.
#fixed-thing {
position: fixed;
top: 0;
right: 0;
}
DEMO