I have a banner with some Social media icons on the left:
.social_share-wrapper {
margin-top: 200px;
margin-left: 1px;
position: fixed;
width: 30px;
z-index: 99;
}
But when I click on an anchor in the page, like:
<img src="path/to/image/image.png" /><h3>Click</h3>
And scroll back to the top of my page, I get this:
Does it make any sense? Or did someone already had this before?
Related
I need to create a layout that has an inner border around the whole page that sits on top of the content like below.
So far I have
body::before {
border: 2px solid black;
border-radius: 22px;
content: '';
display: block;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
z-index: 1;
}
But that only extends to the height of the window, it doesn't extend to cover the whole of the page's content.
Some of the different sections of the page need to extend to the full width of the window so I can't wrap the whole page in a div and apply border styles to that, the element with the border needs to sit on top of everything else.
Any ideas on how to do that?
Easiest way I have found is to create an element that sits over the others on your site:
<div class="overlay">
<div class="overlay-border"></div>
</div>
And then add the appropriate styling:
.overlay{
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
padding: 20px;
box-sizing: border-box;
pointer-events: none;
z-index: 99;
}
.overlay-border{
border-radius: 10px;
border: 5px solid #111;
width: 100%;
height: 100%;
}
The "z-index: 99" might need to be increased if you start allocating z-index to other elements. "pointer-events: none" ensures that website users can still click on links and other elements behind the overlay.
You can also change "position: absolute" to "position: fixed" if you would like this overlay across the whole window.
And then if you want the overlay across the entire page you can add this simple javascript:
var body = document.body,
html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
document.querySelector('.overlay').style.height = height + 'px';
I am sure there is a better way to do this, however, this was just in the interim as I found my solution and I look forward to seeing the easier ways to do this :)
How do i get a fixed navigation for my website? i want the menu on my site to remain stick to the page as the user scroll downs to see the content.
The navigation disappears as the user scroll down at the very bottom of the page. How do i make it stay? I tried using this but it doesn't work.
/* The sticky class is added to the navbar */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Here's the link of my site.
https://kickthebuddyapk.com/
Thank you!
Try to remove
.nav-secondary {
margin-top: -100px;
padding-top: 100px;
}
and replace with
.nav-secondary {
position: sticky;
top: 0;
background: white;
}
Try to add:
#genesis-mobile-nav-secondary{top:0; position:sticky;}
so I have 3 boxes each box we have small share button that will sit in the top right of the box, (absolute css position).
Addthis will only show when hovering on the first one, if css absolute is taken out then it will work in all boxes. I've tried setting absolute on the actually sharethis element as well as putting it inside an absolute container. Neither works. I could not find an example on the addthis website.
This is the absolute container I tried around addthis, this div is inside the larger div
some content
<style>
.promotionItem { position:relative; }
#promotionsSlider .shareContainer {
width: 30px;
height: 29px;
position: absolute;
top: 0;
right: 0;
display: block;
}
</style>
Your positioning all your share buttons on top of one another, by using absolute position they won't respect each other's position in the Dom... You'll need to give each a left or vertical absolute position depending on where you want them to sit.
Below I'm presuming you have 3 icons you want to position and I'm aligning these horizontally.
#promotionsSlider .shareContainer {
width: 30px;
height: 29px;
position: absolute;
top: 0;
right: 0;
display: block;
}
#promotionsSlider .shareContainer:nth-of-type(2) {
right: 40px;
}
#promotionsSlider .shareContainer:nth-of-type(3) {
right: 80px;
}
Overview: I have a CSS3 pure navigation system on top of my page. I have a footer/copyright on bottom.
In the middle, I want a background image (parchment) cover, then on top of that parchment, I want a white layer for text with a left column and a right column. I can't seem to make it work using the relative position as my z-index doesn't seem to be working. If I put position "fixed", I can't use the right browser scroll anymore to go down. If I use position "absolute", then the background is right and the content on top is ok, but my navigation footer disappears. If I use position "relative", my navigation system is fine but the background doesn't show up anymore. It is ignoring the z-index....
The weird thing is I am using expression web 4 and it looks correct there...it just doesn't look correct on the web.
This is my site html to reproduce what I am seeing.
<!-- #BeginEditable "content" -->
<div id="page_content_back">
<div id="column_left">
<h1>About</h1>
<p>We are the best-Trust us</p>
</div>
<div id="column_right">
<h4>CONTACTS</h4>
</div>
</div>
<!-- #EndEditable -->
This is my css
#page_content_back {
position: relative;
background-image:url('../images/grayparchment_back.jpg');
background-size: cover;
z-index: 1;
width: 100%;
margin: auto;
padding: 0;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;
}
#column_left {
position: relative;
margin: 0 50px;
padding: 0 2%;
z-index: 2;
top: 0px;
background-color: #fff;
float: left;
width: 65%;
height: 100%;
color: #393939;
}
#column_right {
position: absolute;
z-index: 3;
float: right;
right: 50px;
top: 370px;
width: 20%;
height: 100%;
margin: 0;
padding: 10px;
background-color: #fff;
}
Okay, the problem is your div#column_left. It has a float: left property. Floating an element takes it out of the flow, so there's nothing within the div#page_content_back to give it any height. Remove that float: left property from the inner div and you'll see the image appear behind it. From there, you can add other elements after that nested div and the image will expand to encapsulate the new element. That said, if you use float or position: absolute, you're removing the element from the flow and that background image won't respond to its presence as a result.
This site http://doomedfromdayonemerch.bigcartel.com/ is currently scrolling too much down the page, this is because the footer (hidden) is at the bottom of the page. Even when i move the footer with CSS the page still scrolls the same amount. would like it to ideally to only scroll down a little bit. I did have overflow-y:hidden on the body, and although this did work, it doesn't allow for smaller screens/zooming in, as you then cannot scroll at all. Any help would be great! :)
In your CSS code add
html{
height:100%
}
The problem isn't with footer.
The problem resides in your div id="navigation"
I did some questions related to sticking footer into bottom of page. Check them out, maybe will help you.
I know an answer has been selected but let me explain a little further. You have the navigation div positioned relative, instead of absolute. It looks like you were trying to use absolute positioning because I see z-index in the navigation css. To use absolute positioning the parent element needs to be set to position: relative; and the element you want to have absolute needs to be set to position: absolute;
add position relative to #wrap
#wrap {
width: 740px;
height: 700px;
margin: 0 auto;
padding: 5px;
text-align: left;
position: relative;
}
and change navigation to absolute
#navigation {
z-index: 99;
position: absolute;
top: 175px;
padding-top: 10px;
padding-right: 5px;
margin-right: 4px;
height: 442px;
background: rgba(228, 228, 228, 0);
clear: both;
border-bottom-right-radius: 10px;
right: 10px;
}