I'm using the w3 schools sidebar navigation and I've been trying to get a side-nav that opens from one div.
exp:
http://www.w3schools.com/w3css/tryit.aspfilename=tryw3css_sidenav_left_right&stacked=h
(Only the right one though)
Later on I'd like to make this nav sit at the bottom and open upwards. To the problem at hand though. I can't get this sidebar to show above the already existing page. The page consists of a randomly selected flash file. I have a feeling that one of the already existing position attributes is affecting this one or maybe one of the styles that I haven't been able to find.
HTML
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-right" style="display:none;right:0;" id="rightMenu">
<a href="javascript:void(0)" onclick="closeRightMenu()"
class="w3-closenav w3-large">Close ×</a>
<i class="fa fa-home w3-xxlarge"></i>
<i class="fa fa-search w3-xxlarge"></i>
<i class="fa fa-envelope w3-xxlarge"></i>
<i class="fa fa-globe w3-xxlarge"></i>
</nav>
<object id="flash-container">
<embed id="flash-content" src="" type="application/x-shockwave-flash" />
</object>
CSS
html,
body {
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
height: 100%;
background-color: #2e1565;
}
#popup-container {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
#flash-container {
z-index: 0;
position: absolute;
min-width: 100%;
min-height: 100%;
width: 100% !important;
height: auto !important;
}
#flash-content {
position: absolute;
min-width: 100%;
min-height: 100%;
width: 100% !important;
height: auto !important;
overflow: hidden;
z-index: 1;
background-color: #2e1565;
}
#flash_name {
color: #5c5ce0;
z-index: 20;
position: absolute;
padding-left: 50%;
}
#rightMenu {
position: relative;
z-index: 3;
}
JS
function openRightMenu() {
document.getElementById("rightMenu").style.display = "block";
}
function closeRightMenu() {
document.getElementById("rightMenu").style.display = "none";
}
Remove the display:none from the style attribute of the nav tag and it will show.
Here it is with the display:none removed on jsbin: http://jsbin.com/nubewuragu/edit?html,css,js,output
Related
I am making an expanding radial member with Javascript. There are image buttons on the menu which expands out of a center image which is clicked to expand the menu. My problem is that the button images are not clickable because the center button's image is covering them.
var i=0;
function expand(){
if(i==0){
document.getElementById("menu").style.transform="scale(3)";
document.getElementById("plus").style.transform="rotate(45deg)";
i=1;
}
else{ document.getElementById("menu").style.transform="scale(0)";
document.getElementById("plus").style.transform="rotate(0deg)";
i=0;
}
}
body{
background-color: #303358;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.toggle {
background-color: #303358;
text-align: center;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.fa-plus{
height: 100%;
width:auto;
display: block;
transition: 0.7s;
}
.menu {
background-color: #000123;
height: 100px;
width: 100px;
transform: scale(0);
border-radius: 50%;
border-style: double;
border-color: #C8C8C8;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -1;
transition: 0.7s;
}
a {
display: inline-block;
position: absolute;
font-size: 15px;
color: #C8C8C8;
}
a:nth-child(1){
top: 6px;
left: 45px;
}
a:nth-child(2){
top: 24px;
left: 77px;
}
a:nth-child(3){
top: 58px;
left: 76px;
}
a:nth-child(4){
top: 78px;
left: 42px;
}
a:nth-child(5){
top: 58px;
left: 10px;
}
a:nth-child(6){
top: 23px;
left: 12px;
}
a:hover {
color: #989898;
}
<div class="toggle" id="toggle" onclick="menu-expand()">
<img src="CTicon.png" id="plus" class="fa fa-plus">
</div>
<div class="menu" id="menu">
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-private">
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public" >
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public2"></i>
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public3"></i>
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public4"></i>
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public5"></i>
</a>
</div>
The reason I've made a new question is because in most answers I found people suggest just adding a pointer-events: none; tag to my center expanding button, but I can't do this because it is also a button. To fix this I've tried using JS to change it, aswell as I have tried using pointer-events: none;. The only fix I have found so far is just changing the z-index of toggle, the issue with this is that the center button then my comes invisible when the menu expands because its placed below the menu itself which i would like to avoid.
Edit: Well now I'm more confused because the freakin thing works in the code snippet on here haha.
So once the code snippet worked on here I realized it must be something outside of the menu itself overlaying the buttons so I put the toggle button to z-index 2 and the menu to 1 and got it all working.
Can i change:
into:
without using a photo editor
Here Is CSS and HTML code
I couldn't upload the logo because i should have at least 10 reputation to post more than 2 links so i maybe insert it in another comment
header {
background-color: rgba(255, 255, 255, 0.9);
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
position: fixed;
width: 100%;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 2;
}
header .logo {
position: fixed;
left: 50%;
top: 13px;
display: inline-block;
}
.background-image {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: #fff url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg/800px-%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg') no-repeat center center;
background-size: 100%;
}
<body>
<header>
<div class="header-section logo">
<a href="/">
<img src="http://i.imgur.com/IB1gfZB.png" alt="...">
</a>
</div>
</header>
<div class="background-image"></div>
</body>
You can use opacity to create a semi-opaque image, and you may be fine with that by adjusting it to whatever you need.
But if you also want to change the color of the image darker, you can use CSS filters. You can make it darker/maroon/brown-ish by adjusting the hue. It's worth noting the browser support - https://caniuse.com/#feat=css-filters
header {
background-color: rgba(255, 255, 255, 0.9);
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
position: fixed;
width: 100%;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 2;
}
header .logo {
position: fixed;
left: 50%;
top: 13px;
max-width: 100%;
opacity: .7;
position: absolute;
top: 0; left: 0;
-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg);
}
.background-image {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: #fff url(http://environment.umn.edu/wp-content/uploads/2016/04/global_landscapes_initiative_directory_pages.jpg) no-repeat center center;
}
<body>
<header>
<div class="header-section logo">
<a href="/">
<img src="http://i.imgur.com/IB1gfZB.png" alt="...">
</a>
</div>
</header>
<div class="background-image"></div>
</body>
looks like a one time thing - i.e. it being a logo and all - It's just a lot easier to do such a thing with Photoshop.
I up-voted Michael's answer since I believe that's as close as you can get with CSS alone. Unless there's some "hacky" way to do this.
My method:
Use Photoshop.
Then add the photo as the background image of a one of the pseudo-elements for your header div / img
I created a sample below of the expected end result.
I encoded the overlay image as Base64 since it's only 1kb in size. It should be checked with your CSS file. Read more about Base64
You can control the opacity of the pseudo-element.
.content {
width: 100%;
max-width: 100%;
height: 500px;
position: relative;
background: url(https://unsplash.it/800/310) no-repeat
}
.content::before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: .25;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3AAAAExCAMAAAAKr7AFAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAP///v///v///yYLV3kAAAADdFJOUwB6xLOvUwsAAAN0SURBVHja7d3BroMgEEBRBv7/n7vsRqGMSGo8Zzs7zY0vhOkrDdimeAQgOBAcIDgQHCA4EBwIDhAcCA4QHAgOBAcIDgQHCA4EBwgOBAeCAwQHggMEB4IDwQGCA8EBggPBAYIDwYHgAMGB4ADBgeBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcCA4QHAgOEBwIDhAcCA4EBwgOBAcIDgQHggMEB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCC4J6pxYjiM3hDBcSTKsRgOT2aleqiCQ3CCQ3AITnCCExx3vadOUzU1FJzgmA6u9poafv0QHFPBNcEJDsEhOMEJTnD8JDJNCU5wrP3AxbUhgmP2L8oLQwSH4ASH4BDca9T0IWUVnOCY1T2HLOkhgmMmuPHtZDcpBYfgBIfgEByCExyb5RfeQnCCY1lww6GblIJDcIJDcAgOwQmO3fLbcJZzBMf8S0of/DukFBzLgrs4RHAITnAIDsG9Rk2fmYTgBMcs23CC4w+Cy19d9kwFh+AEh+AQnOAEJzhukl94c0gpONYFN/z6ubosOAQnOASH4BCc4Nj+itILb7bhBMey4IZD/1dAcAhOcAgOwSE4wbHb+l8Q8s4Fx/QHzjac4NgYXP4nuzxTwSE4wSE4BCc4wQmOm+S24VqzDSc4VgbXa8rVZcEhOAQnOATHVwhOcGx8QdltuGobTnAsC244dHVZcAhOcAgOwSE4wfGIMxPLOYIDBAeCA8EBggPBAYIDwYHgAMGB4ADBgeBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCA4EB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOBAcIDgQHAgOEBwIDhAcCA4QHAgOBAcIDgQHCA4EBwIDhAcCA4QHAgOEBwIDgQHCA4EBwgOBAeCAwQHggMEB4IDwXkEIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHggMEB4IDBAeCA8EBggPBAYIDwQGCA8GB4ADBgeAAwYHgQHCA4EBwgOBAcIDgQHAgOEBwIDjgwAeC1hN7ntJexAAAAABJRU5ErkJggg==')
}
<div class="content"></div>
I would like to create a boxed layout, where the boxed / frame stays in place and the content scroll within it. However I don't want to use the old fashioned scrolling frame method, where you have a panel scroll bar on that panel.
I want to achieve something similar to this > https://pixelgrade.com/demos/themes/?product=border - for this purpose, ignore the content, however you can see the white frame/border that stays in place - that is what I want. And the window has the standard scroll bar, not the frame itself.
I guess I might need to use something link sticky-kit.js however apologies if this is a red herring.
Can anyone point me in the right direction for what my search should begin. And before you ask, I have tried to look into this myself :)
The simplest thing I can think of is using some fixed divs along the edges to create a border for your box.
.container {
border: 1px solid red;
width: 100%;
}
.content {
height: 1000px;
background-color: lightblue;
padding: 50px;
}
.top {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
top: 0;
}
.left {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
left: 0;
top: 0;
bottom: 0;
}
.right {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
right: 0;
top: 0;
bottom: 0;
}
.bottom {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
bottom: 0;
}
<section class="container">
<section class="content">
this is my content...
</section>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</section>
Here's the alternative solution which allows the border to be transparent (in order to show a background image). It's a little hack that simply hides the scrollbar of the inner div. I highly recommend that if you choose to use this alternative, to make sure that it is apparent that there is more content on the page since there will be no visible scrollbars.
body,
html {
margin: 0;
padding: 0;
}
.container {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.wrapper {
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
background-color: lightblue;
overflow: hidden;
}
.wrapper2 {
overflow-y: scroll;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-right: -20px;
padding: 20px;
}
.content {
height: 1000px;
}
<div class="container">
<div class="wrapper">
<div class="wrapper2">
<div class="content">
This is my content...
</div>
</div>
</div>
</div>
I need to display div after clicking button over the content. Button that causes displaying dev is not at the top of the page (you have to scroll down). But overlay div displays wrong, like on the picture. How can I modify the code to display the overlay div always in the middle of the page.
HTML:
<div id="rating_overlay"></div>
<div id="rating_content">
<div class="overlay_exit">
<a href="javascript:void(0)" onmousedown="toggleOverlay()" title="Zavřít">
<i class="fa fa-times fa-2x"></i>
</a>
</div>
<h2>Přidat hodnocení</h2>
<div id="profil_add_rating">
<!-- Content -->
</div>
</div>
<div id="rating_wrapper"></div>
<script type="text/javascript">
function toggleOverlay() {
var overlay = document.getElementById('rating_overlay');
var specialBox = document.getElementById('rating_content');
overlay.style.opacity = .8;
if (overlay.style.display == "block") {
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
</script>
CSS:
#rating_overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
#rating_content {
display: none;
position: relative;
z-index: 3;
padding: 16px;
margin: 150px auto 0px auto;
width: 500px;
height: 260px;
background: #FFF;
text-align: left;
}
#rating_wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}
EDIT:
The solution with position: fixed works, but I will use http://drublic.github.io/css-modal/.
CSS' position: fixed; is your friend
Position fixed says "put this element in the absolute position according to the window"
CSS for "always on top & center(horizontaly) could be:
#rating_wrapper{
position: fixed;
top: 0;
left: 50%;
width: 200px;
margin-left: -100px;
}
EDIT: jsfiddle showcase: http://jsfiddle.net/m4Fbk/
CZ: fixni pozice je popsana i na jakpsatwebu ;) http://www.jakpsatweb.cz/css/position.html
You should use position: fixed for your content div instead of relative and correct position with top-left+margin values:
#rating_content {
display: none;
position: fixed;
left: 50%;
top: 50%;
margin: -130px 0 0 -250px;
width: 500px;
height: 260px;
...
}
Demo: http://jsfiddle.net/sRrBL/
I am trying to position a Twitter follow-button on top of a background splash image using:
<style>
div.splash
{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.twitter-follow-button
{
position: absolute; [Edit: Copy and paste error. This used to read "position: relative"]
top: 0px;
left: 0px;
}
</style>
<div class="splash">
<img src="image_1.png">
<a href="https://..." style="position: absolute; top: 320px; left: 225px;">
<img src="image_2.png">
</a>
Email
Link
<a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
Follow #twitter_handle
</a>
</div>
But I cannot get the Twitter anchor to share space with the splash image. Putting style="..." code in the Twitter anchor tag does not work either, even though it does for the other two anchors, one of which also displays an image.
EDIT:
This is the script Twitter provides for this button:
!function(d,s,id)
{
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id))
{
js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);
}
}
(document, 'script', 'twitter-wjs');
I rearranged your code somewhat. I don't know what your splash image so i have just used one of my own. Here is my latest fiddle
#splash {
position: absolute;
height: 100vh;
width: 100%;
top: 0;
left: 0;
background-image: url("http://www.musicmatters.ie/images/bara2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.twitter-follow-button {
position: absolute;
top: 0px;
left: 0px;
vertical-align: top;
}
a.links1 {
position: relative;
display: inline-block;
float: left;
top: 258px;
width: auto;
padding-right: 20px;
color: white;
text-decoration: none;
font-weight: 900;
}
a.links {
position: absolute;
display: inline-block;
top: 320px;
float: left;
color: white;
text-decoration: none;
font-weight: 900;
}
<div id="splash">
<a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
<img src="http://cdn.business2community.com/wp-content/uploads/2015/07/Twitter-icon.png.png" width="30px" height="30px">Follow twitter_handle
<a class="links" href="#">Home</a>
<a class="links1" href="#">Mailto</a>
<a class="links1" href="#">Other Link</a>
</a>
</div>
Try using a z index like so:
div.splash
{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
z-index: -1;
}