cannot make shape styled
in footer visible

Question

I want to have a horizontal bar shape within my footer div but I can't get it visible. In JS Fiddle it works but not in my chrome debugging.

HTML:

    <!DOCiTYPE html>
<html>
    <head>
        <title>Bootstrap Theme Simply Me</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../css/bootstrap.min.css">
        <link rel="stylesheet" href="../css/custom_css/custom.css">
    </head>

    <body>
        <div class="container-fluid logo">
            <div class="row">
                <div class="popup-nav header affix">
                    <div class="nav-bar header">
                    </div>
                </div>
            </div>
            <div class="container-fluid main">
                <div class="row header">
                    <h3>Welcome to the universe</h3>
                </div>
                <p>Welcome to my webpage. I'm glad to show off myself in a common egocentric manner.</p>
                <div class="col-xs-12 col-sm-6">
                    <p>Lorem Ipsum dolor kram dinge. Lorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dingeLorem Ipsum dolor kram dinge</p>
                </div>
                <div class="col-xs-12 col-sm-6">
                    <p>Bla bla bla bl Bla bla bla blBla bla bla bl Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bl
                        Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bl
                        Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bl
                        Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bl
                        Bla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla blBla bla bla bla</p>
                </div>
            </div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="../js/custom/init.js"></script>
            <script src="../js/custom/events.js"></script>
    </body>

    <footer class="container-fluid footer">
        <div class="nav">
            <div class="popup-nav footer affix">
                <div class="nav-bar footer">
                </div>
            </div>
        </div>
    </footer>
</html>

CSS:

body {
    background-color: #0099cc;
}

.logo-header {
    background: transparent;
    height : 100px;
}

.popup-nav{
    z-index: 1;
    padding-left: 0px;
    padding-right: 0px;

    height: 0px;
    border-style: solid;
}

.popup-nav.header{

    width: 0px;
    border-style: solid;
    border-width: 100px 100px 0 0;
    border-color: #000000 transparent transparent transparent;
}

.popup-nav.footer{
    right: 0;
    bottom: 0;
    height: 0px;
    width: 0px; 
    border-style: solid;
    border-width: 0 0 100px 100px;
    border-color: transparent transparent #000000 transparent;
}

.nav-bar.footer{

    height: 57px; 
    width: 500px; 
    background-color: #000000; 
}

.nav-bar.header{

    height: 650px;
    top: -80px;
    width: 75px; 
    background-color: #000000; 
}

.main {

}

.nav {
    padding-left: 0px;
    bottom:0px;
    left:0px;
    right:0px;
    margin-bottom:0px;
}

.mirror{
    transform : rotateX(0deg);
}

What I want to achieve is to have a horizontal bar of shape at the height of the .popup-nav.footer shape

So to say the equivalent to the stuff you can see on the left side.

Start by correcting your DOCTYPE. Your browser may be in quirks mode. — Michael Benjamin, Aug 16 '16 at 19:39
What's it supposed to look like?? https://jsfiddle.net/NotInUse/5y0cgs1z/1/ seems "off" considerably. — Scott, Aug 16 '16 at 20:11
In your jsfiddle link you can see that the bottom shape does not appear. It should appear and be on the same height as the bottom-right triangle is. Just like the top-left black triangle and the long shape bar on the left. Do you know what I mean? — xetra11, Aug 16 '16 at 20:31

score 2 · Answer 1 · answered Aug 16 '16 at 19:39

2

The <footer> tag should be inside the <body> tag. All your website should be in the body. Also there is a typo in the DOCTYPE.

answered Aug 16 '16 at 19:39

rm4

711
4
15

1

thanks for the tip - sadly that does not make the shape appear. – xetra11 Aug 16 '16 at 20:02

cannot make shape styled in footer visible

1 Answers1

cannot make shape styled
in footer visible