I am trying to create an overlay that shows a long message. You can scroll and read it and you can close the overlay.
The overlay has a background colour, but when I scroll the overlay to see the text the background scrolls with it. I want the background colour to stay there until the overlay is hidden.
<div id="message-overlay">
<p>
Blah blah blah - long message
</p>
<button>
Closes the overlay, this works
</button>
</div>
#message-overlay {
position: absolute;
left: 0;
width: 100vw;
height: 100vh;
background-color: red;
}
I just added:
overflow: auto;
to my overlay CSS and it works now.
Thanks for the support.
Related
I am using Wordpress, flatsome theme with UX Blocks.
Within a icon box I have a picture and I also have a text box underneath.
The text box contains a hyperlink which animates during mouse over.
I would like the animation to happen with the image icon is hovered over also.
Is there a way of making this happen whilst having them as separate elements?
The animation CSS is similar to:
a.crunchify-link-toright {
position: relative;
}
a.crunchify-link-toright:before {
content: "";
position: absolute;
width: 0;
height: 3px;
bottom: -5px;
left: 0;
background-color: #fff;
visibility: hidden;
transition: all 0.4s ease-in-out;
}
a.crunchify-link-toright:hover:before {
visibility: visible;
width: 100%;
}
and html for the hyperlink of
<h3>LINK<br />
</h3>
Have tried searching for code without success.
QUESTION:
Using the Gamepad API, i am having a problem when re-sizing the window; namely, a finite padding-bottom appears between the bottom of the #gameBoard and the bottom edge of the Browser window -- which I do not want:
Please note that I have tried a Sticky Footer which depends on position: absolute; which I would prefer to avoid.
EG,
with a padding-bottom > 0
I am looking for this with each window re-size:
padding-bottom = 0
HTML:
<div id="gameEnclosure">
<div id="header">
stuff here
</div>
<div id="gameBoard">
<canvas id="game">
game piece img's here
</canvas>
</div>
</div> <!-- gameEnclosure -->
CSS
/* COMMON RESET */
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
body {
background-color: blue;
}
#gameBoard {
display: block;
position: relative;
width: 100%;
height: auto;
background-color: #fff;
background-image: url("../images/room.gif");
background-size: cover;
}
As already stated, I have tried using a Sticky Footer and I just do not like using position: absolute. Also, the individual game piece images do not maintain their proper aspect ratio with window re-sizing = another no-no.
JS
function doBodyOnResize() {
let gameHeight = $('#gameBoard').outerHeight();
$('body').css('padding-bottom', gameHeight);
$('#gameBoard').css('height', gameHeight);
}
This is the onresize function I used to have with the Sticky Footer.
Without a Sticky Footer, game pieces zoom in and zoom out just great -- if I could just get keep padding-bottom = 0 upon window resizing.
I have checked my CSS and I never specify the logo as a background graphic. There is not logo in the background graphic - just a gray bar, but in IE8 and IE7 the logo is duplicating itself one over the other. Here is the website: www.americaninstrument.com.
I ran a W3 compatibility test and, while there were issues with the javascript analytics code and some links, there was nothing that would affect this logo.
The logo image is called object0.png
First child div of the one with class wk-shapes:
<div style='background: url("http://www.americaninstrument.com/images/object0.png") no-repeat 15px 37px; left: 0px; top: 0px; width: 100%; height: 100%; position: absolute;'>
has the following inline-style:
background-image: url("http://www.americaninstrument.com/images/object0.png")
I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?
I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.
html:
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
css:
#header {
background-color:transparent;
height:260px;
width:100%
}
#logo-img{
display: block;
margin-left: auto;
margin-right: auto;
}
Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!
What is happening is that you are already correctly centering your image.
Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.
Remove the white area from the image and it will center correctly.
Edit: in IE, you need to add the rule text-align:center to #header
Another way:
If you don't want to change your image, you can use this hack:
<style>
#header {
overflow-y: hidden;
background-color: transparent;
height: 260px;
width: 100%;
margin-left: 50%;
}
#logo-img{
display: block;
position: relative;
right: 50%;
}
</style>
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
I learned this hack a while ago here
Just use the logo at a size it's supposed to be (like this here), then all you need to do is add the align="center" attribute to your logo's div.
I have a fixed footer on my site here: http://starprovisions.com/dev/bacchanalia.html On my 1360x768 screen I can only see the top of the footer and when I try to scroll it either does not scroll or if it does, the footer does not scroll with the whole site, staying below the content. Is there a way to fix this so that the whole webpage scrolls up and down so we can see the footer?
You have to set its position to relative, so it will be below your main content. This way it will allow you to scroll down
#footer {
height: 75px;
background:
white;
margin: auto;
position: relative; /*Added this*/
width: 100%;
}
And also for your html css, you should remove the
overflow-y: scroll;
If you dont want to constantly show the scrollbar on the side of the window.