Adding a button to my website HTML & CSS

Question

0.00/5 (No votes)

See more:

Im trying to add this button that I found on JsFiddle to my website but I cant seem to make it show up, I've been off this project for about 1 month and I might have forgotten a thing or two, anyone who could explain why the button is now showing up?

HTML

<!DOCTYPE html>

<!-- Developer: Varga Developments -->
<!-- Project: Fully Responsive Website With A Background Image Slider. -->


<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Full Width Responsive Image Slider</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.cycle2.js"></script>
    <style type="text/css">
            html, body, img {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
                background: url(.container);
            }
 
            body {
                font-family: "Helvetica Neue", Helvetica, Arial;
            }
 
        .container {
                height: 100%;
                width: 100%;
                overflow: hidden;
                z-index: 900;
            }
 
            .cycle-slideshow {
                height: 100%;
                width: 100%;
                display: block;
                position: relative;
                margin: 0 auto;
            }
 
            .cycle-prev, .cycle-next {
                font-size: 200;
                color: #FFF;
                display: block;
                position: absolute;
                top: 50%;
                margin-top: -16px;
                z-index: 9999;
                cursor: pointer;
            }
 
            .cycle-prev {
                left: 10%;
            }
 
            .cycle-next {
                right: 10%;
            }
 
            .cycle-pager {
                width: 100%;
                text-align: center;
                display: block;
                position: absolute;
                position: top;
                bottom: 20px;
                z-index: 9999;
            }
 
                .cycle-pager span {
                    text-indent: 100%;
                    white-space: nowrap;
                    ;
                    width: 12px;
                    height: 12px;
                    display: inline-block;
                    border: 1px solid #FFF;
                    border-radius: 50%;
                    margin: 0 10px;
                    cursor: pointer;
                }
 
                .cycle-pager .cycle-pager-active {
                    background: #FFF;


                }
                     button.contact-us {
   background-color: red;
   border: 2px solid blue;
   position: fixed;
   top: calc((100vh - 38px) / 2);
   left: calc((100vw - 120px) / 2);
 }
 
 button:hover {
   color: #fff;
   background: rgba(255, 255, 255, 0.2);
 }







/*Menu CSS*/
 
            #sidebar {
                background: #151718;
                width: 200px;
                height: 17%;
                display: block;
                position: absolute;
                left: -200px;
                top: 0px;
                transition: left 0.3s linear;
                z-index: 1000;
            }
 
                #sidebar.visible {
                    left: 0px;
                    transition: left 0.3s linear;
                }
 
            ul {
                margin: 0;
                padding: 0;
            }
 
                ul li {
                    list-style: none;
                }
 
                    ul li a {
                        background: #1C1E1F;
                        color: #ccc;
                        border-bottom: 1px solid #111;
                        display: block;
                        width: 180px;
                        padding: 10px;
                        text-decoration: none;
                    }
 
            #sidebar-btn {
                display: inline-block;
                vertical-align: middle;
                width: 20px;
                height: 150px;
                cursor: pointer;
                margin: 20px;
                position: absolute;
                top:0px;
                right:-60px;
            }
 
                #sidebar-btn span {
                    height: 1px;
                    background:#ffffff;
                    margin-bottom: 5px;
                    display: block;
                }
 
                    #sidebar-btn span:nth-child(2) {
                        width: 75%;
                    }
 
                    #sidebar-btn span:nth-child(3) {
                        width: 50%;
                    }
 


/*Menu CSS*/




    </style>
</head>
<body>
    <div id="sidebar">
 
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="servicesPage.html">Services</a></li>
            <li><a href="aboutPage.html">About</a></li>
            <li><a href="aboutPage.html">Contact</a></li>
        </ul>
            

    <div id="sidebar-btn">
        <span></span>
        <span></span>
        <span></span>
    </div>




    </div>


<!-- Buttons for email subscriptions and stuff -->

 



<button class="contact-us">Contact Us</button>

    <!-- Full Width Responsive Slider -->
 
    <div class="container">
    
            <div class="cycle-slideshow">s
            <span class="cycle-prev">〈</span>
            <span class="cycle-next">〉</span>
            <span class="cycle-pager"></span>
            <img src="images/wp5.jpg">
            <img src="images/wp6.jpg">
            <img src="images/wp7.jpg">
          </div>
        <!-- Full Width Responsive Slider -->
 
        </div>
    <script type="text/javascript">
    $(document).ready(function(){
 
        $('#sidebar-btn').click(function(){
            $('#sidebar').toggleClass('visible');
 
        });
    }); 
    </script>
</body>
 
</html>

What I have tried:

I've tried changing the code a few times and moving it around but no go

Posted 12-Apr-16 17:28pm

BladeLogan

Updated 12-Apr-16 19:30pm

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 13-Apr-16 1:20am

In your whole sample, there are no any buttons, only CSS. This way, the question makes no sense.
It seems ridiculously simple: the button will appear where you put it. Lean CSS position (rarely used, mostly if you need to overlap some elements) and box model. Have you done that so far? It may take no more than an hour to learn and play with.

It seems that your only problem is that you try everything, instead of planning your steps. In reasonable work, trial-and-error approach takes amazingly little place.

—SA

BladeLogan 13-Apr-16 1:35am

These are the times where I wish I could Teamview with you but never the less, I forgot to update the code to my current one, The issue is that the button is hiding behind the Background images
https://gyazo.com/54fa47aca79468f1b73f985f038763d2 here is an example on what it looks like

Sergey Alexandrovich Kryukov 13-Apr-16 1:47am

All right. This is because of absolute. To put it on top, just make the background content a parent of the button.

For your understanding: "absolute" really means "relative to parent", and then parent needs to be "relative". Very, very simple. At the same time, one single "absolute" can create overlapping mess-up which is simply impossible without "absolute". I hope this simple idea, "relative to parent", can quickly resolve your problem...

CSS terminology is just confusing...

—SA

BladeLogan 13-Apr-16 1:44am

Never mind I got it working, I removed the automated background feature and went with <img src=""> instead, sure it doesnt look as nice but it works.

Sergey Alexandrovich Kryukov 13-Apr-16 1:48am

Good, thank you for the note. Still, I hope my comment above will be useful for you.
—SA

BladeLogan 13-Apr-16 1:53am

It will! As soon as im done with this I will take my time to read up upon the subject, At the same time as im starting some WPF projects!

BladeLogan 13-Apr-16 2:22am

Once im done with this il post an article about it :-)

Akhil kurian 10-Jan-17 3:28am

aqAQQ

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)