I want to move the About button up to the point where it's right below the title but it won't work.
I tried:
In ButtonToScroll.css, margin-bottom: 40%; but it didn't work
In Main.css, I did margin-bottom: inherit; to accompany 1, but didn't work.
What am I doing wrong and how can I fix it?
If you need any other information please let me know.
Here's a sandbox of my project https://codesandbox.io/s/github/name/Encrypt-Your-Code
Easiest way in my opinion would be to give the button position: relative and set top: -80px or whatever you think looks best:
https://codesandbox.io/s/y0pm9l87x9
Set in ButtonToScroll.css
.about { margin-bottom: 10% }
and remove in Main.css
.boxSkull { margin-top: 10% }
Furthermore you should have only one <body> tag in html document.
Add a value in ButtonToScroll.css under text-decoration: none; called:
margin-top: -10%;
It will move everything up from the About button downwards.
Related
I have an <img> that I want to be able to hover over, and when hovering over it I would be able to animate or fade in a div or text to display information of sorts. The information displayed will be overlaid on the image.
I've seen this done on a website before, I can't remember or place where I've seen it, but the idea is very clear in my mind.
I'm sorry I don't have any good attempts at this, I've read around and can't find anything that works for my idea.
I have not understood JS fully, but I can think of a few ideas to try and make it work. I just need a little help to get me in the right direction, before I try and do the rest by myself.
My first idea would be to remove the image directly, then replace it with a div that has that image in background-image with text overlaying it.
document.getElementById("imageBox").onmouseover = function() {
imageMouseOver()};
var image = document.getElementById("imageBox");
var textHere = imagine a lot of html here;
function imageMouseOver() {
document.getElementById("imageBox").parentNode.removeChild(image);
document.getElementById("imageBox").add(textHere);
};
The above doesn't work, and my other ideas would be based off of the initial one, for example:
-instead of removing the image, have the opacity of the image be reduced and something be added over it to simulate that effect
-or, have opacity:0 to the actual overlay to hide it, and onmouseover, just make it appear with opacity:1 and maybe transition: opacity 200ms ease?
Sorry I am asking too much here, but I'm pretty much clueless where to start, could someone point me somewhere for me to get started? Ideally a few examples would be good, or a site explaining it would be great!
Here's an example with CSS using :hover to transition the opacity of your text element.
.wrap {
display: inline-block;
position: relative;
padding: 1em;
background: #fff;
box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
.text {
background: rgba(0,0,0,0.8);
color: #fff;
transition: opacity .5s;
opacity: 0;
position: absolute;
top: 1em; bottom: 1em; left: 1em; right: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.wrap:hover .text {
opacity: 1;
}
img {
max-width: 100%;
display: block;
}
<div class="wrap">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="text">text overlay</div>
</div>
Got a link that got a span, inside that span I will from jquery add a number of news. But I want it to be smaller and with a bit of padding so it looks like a notification on a app?
This is the code I got:
<a id="menyNavOptions" href="nyheter.php" >Nyheter<span style="margin-bottom: 30px; font-size: 0.8em;font-weight:bolder ; color: #ff0000!important; line-height:0.3em;" id="outPost"></span></a>
So the look I am going for is a Link with a number on the top right corner
Thanks
display:block won't help, because it will have the full width (100%). Use display:inline-block;
http://jsfiddle.net/M5TKv/
But I'm not sure if Padding bottom will do what you want.
I think you want to do this:
http://jsfiddle.net/M5TKv/1/
Try add display:inline-block in the CSS and it should behave as you expect :)
But I would rather use position relative on the link and position absolute on the span.
.linkclass {
position: relative;
}
.spanclass {
position: absolute;
top: -10px;
right: 0;
}
Add display: inline-block; float: right;
I have just encountered the strangest problem I've ever come across in my humble web developing freelance career. I'm building a web application for a job application site where applicants use their webcams to answer 3 short questions. For this I use a jQuery plugin called ScriptCam which uses Flash to activate the user's webcam. I had this all working just fine but now I have the following problem.
I use jQuery .show() and .hide() to show and hide buttons. One button, a replay button, doesn't show up when calling $("#replay").show(); but DOES show when I right click anywhere in the browser after calling this command and hit "Inspect Element"! I've been searching for what could cause this problem but haven't found anything... What could cause this behavior?
This is how I have defined the button:
<div onclick='replay();' id='replay' class="replay">Replay</div>
This is the button's CSS:
.replay{
float: left;
top: 150px;
left: 60px;
z-index: 100;
-webkit-box-shadow: 0 12px 36px -16px rgba(0,0,0,0.5);
background:url('../img/button-grey.png') no-repeat 100% 100%;
background-position: center center;
color: white;
width: 140px;
text-align: center;
padding: 10px;
cursor: pointer;
font-family: Archive;
display: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
Edit: This is CSS of the button's parent div:
.box{
margin-left: 100px;
height: 337px;
width: 300px;
float: left;
text-align: center;
}
I haven't used any delays anywhere and the button really appears only right after I click inspect element somewhere in the browser. I also cannot reproduce this problem anywhere else. Anyone got an idea what could cause this? Any help would be much appreciated, thanks in advance!
Update: It appears that only Safari on Mac is having issues.
Update 2: When moving the button out of it's parent div to directly below the body tag it works as it should! So it's probably a css conflict of the parent div?
Edit: You can see the problem live here, just hit the button "Volgende vraag" en wait for the small video to finish. After that the replay button should appear right above the video.
I've found the solution! The problem is caused by an earlier container div which has the CSS display:none. Although I change that with jQuery's .show() before the problem occurs and it's contents are visible, removing display:none in my CSS makes it work! Thanks for all the great help and suggestions!
For me I had to change the visibility of an element that I found hidden above the image in my stylesheet to fix the issue. I found it by using inspect-element.
Then after changing it the image moved up obviously so I had to change the margins to change it back to its original position.
wondered if any one knew of a way of creating a floating menu bar that sticks to a point on a page until the browser window gets far enough down the page and unsticks it and then the menu bar begins to scroll along with it. The effect I want is the exact same as this http://www.jtricks.com/javascript/navigation/floating.html javascript menu. However, I really want to do this with CSS. I am aware I can make the div Absolutely positioned and it will move down the page, I tried making one DIV relative positioned (parent div) and then another div inside this which was absolute positioned, but I could not get this to work. Does any one know how to make this work with CSS or does it need to be JS?
Thanks in advance.
Jon.
I believe using javascript is the only solution to get the effect you described. Here's a quick demo of a banner that starts in a absolute position and goes to fixed when the user scrolls.
<div style="height:1000px;width:500px;">
<div id="floatbar" style="background:gray;
width:200px;
height:40px;
position:absolute;
left:0;top:200px;">
</div>
</div>
$(window).scroll(function(){
if ($(window).scrollTop() >= 200)
{
$("#floatbar").css({position:'fixed',left:'0',top:'0'});
}
else
{
$("#floatbar").css({position:'absolute',left:'0',top:'200px'});
}
});
well if you do NOT need the animation, than just use
position: fixed;
in the css.
if you want it animated you need to use javascript.
for example in jquery:
$(window).scroll(function(){
$('#menu').css({
right: 0,
top: 0
})
})
Well you can't do it with absolute positioned div inside of a relative. Fixed position is basically an absolute positioned div, positioned relatively to the window. I'd say you definately need javascript here.
This should be rather easy with a fixed sidebar, and a floating content section. Try something like this...
#container {
width: 960px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Fix the sidenav to stay in one spot--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Keeps content to the right side--*/
width: 620px;
padding: 0 20px 20px;
}
This is old post but CSS has changed a lot since then, we can do a floating menu with plain CSS. See sample code below. Credit to https://www.quackit.com/css/codes/css_floating_menu.cfm
main {
margin-bottom: 200%;
}
.floating-menu {
font-family: sans-serif;
background: yellowgreen;
padding: 5px;;
width: 130px;
z-index: 100;
position: fixed;
right: 0px;/* You can change float left/right */
}
.floating-menu a,
.floating-menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}
<!DOCTYPE html>
<title>Example</title>
<main>
<p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>
<nav class="floating-menu">
<h3>Floating Menu</h3>
CSS
HTML
Database
</nav>
</main>
I believe it needs to be JS. I can imagine it can be rather simple with jQuery and I really cannot think of any way to achieve this only with CSS. I'll try to think about it, but I doubt I'll find a solution.
look this:
When the pointer is on the image I want a small dark rect at the bottom of this image with some text. How can I do this? Maybe with jquery?
Thanks guys.
You can achieve this many ways. Depending on the structure of your page, you could accomplish this with a couple of CSS classes.
HTML:
<div class="image_hover"><span>Text</span></div>
CSS:
.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; }
.image_hover span { display: none; }
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; }
You would need to make some updates based on your particular situation. Here is a working example on jsbin. This solution hides the text by default, and when the user hovers over the div, the :hover class will cause the text to be displayed.
You could also use jQuery to either add or show the div onmouseover.
Yeah, you can easily use jquery to achieve that.
If you want to learn the whole process and do it yourself, take a look at this - Sliding Boxes and Captions with jQuery
Or take a look at a few plugins for achieving the same effect - 10 Stylish jQuery caption plugins