Navbar auf Slanted Div

Ich habe eine div Div erstellt, um mit meiner Navbar zu verwenden, aber es vermasselt den Rest der Formatierung für die Website. Die Navigationsleiste befindet sich oben rechts und das schräge Div ist darunter, aber es macht alles andere auf der Webseite durcheinander. Ich habe alles vergebens versucht.Navbar auf Slanted Div

http://imgur.com/a/bmv6l

Navbar HTML:

<template name="navbar"> 
    <div class="navbar"> 
    <ul> 
     <li><a href="https://www.meteor.com/try">Contact</a></li> 
     <li><a href="http://guide.meteor.com">Services</a></li> 
     <li><a href="https://docs.meteor.com">Experience</a></li> 
     <li><a href="https://forums.meteor.com" class="active">Home</a></li> 
    </ul> 
    </div> 
</template>

Navbar CSS:

.navbar { 
    position: relative; 
    display: inline-block; 
    padding: 0em 0em 1em 10em; 
    overflow: hidden; 
    color: #fff; 
    float: right; 
} 

.navbar:after { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: #000; 
    -webkit-transform-origin: 100% 0; 
    -ms-transform-origin: 100% 0; 
    transform-origin: 100% 0; 
    -webkit-transform: skew(45deg); 
    -ms-transform: skew(45deg); 
    transform: skew(45deg); 
    z-index: -1; 
} 

ul { 
    list-style-type: none; 
    margin-left: 100px; 
    margin: 0; 
    padding: 0; 
    padding-top: 1em; 
    padding-right: 1em; 
    padding-bottom: 5px; 
    overflow: hidden; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 20px; 
    font-weight: bolder; 
    -webkit-font-smoothing: antialiased; 
    z-index: -1; 
} 

li { 
    margin-left: 1em; 
    margin-right: 2em; 
    float: right; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 16px 16px; 
    text-decoration: none; 
    -webkit-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75); 
    box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75); 
    border: 5px; 
    border-style: solid; 
    border-radius: 10px; 
    border-color: white; 
    transition: background 0.2s ease, 
       padding 0.8s linear; 
} 

li a:hover { 
    background-color: #111; 
} 

.active { 
    border-radius: 8px; 
    border-color: white; 
    background-color: #555; 
}

"Bobcats Services" Div HTML:

<body> 
    <div id="nav"> 
    {{> navbar}} 
    </div> 
    <div id="center"> 
     <h1>Bobcats Services</h1> 
     <h2>Everything you need!</h2> 
    </div> 
</body>

"Bobcats Services" Di v CSS:

/* CSS declarations go here */ 
html { 
    height: 100%; 
} 

body { 
    margin: 0; 
    padding: 0; 

    /*background-color: #0193ff;*/ 

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */ 
    background: rgb(135,224,253); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0); /* IE6-9 */ 

    /* Image instead of standard color 
    background-image: url("images/watch-plane.png"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    */ 
} 

#nav { 

} 

#center { 
    width: 30%; 
    padding-bottom: 2em; 
    padding-top: 2em; 
    margin: auto; 
    margin-top: 2em; 
    text-align: center; 
    background-color: rgba(0, 0, 0, 0.5); 
    color: white; 
    border-style: solid; 
    border-radius: 5px; 
    border-color: #008fc8; 
    font-family: 'Open Sans', sans-serif; 
}

Quelle

2016-07-29 Bobcat Battalion

Ich bin mir nicht sicher, ob ich das Problem vollständig verstehe. Was ist das Problem, wie geht es mit der Seite durcheinander? Wo möchten Sie die Navigation sein und wo möchten Sie den Inhalt von Ihnen quadriert? Ein Live-Beispiel könnte ebenfalls helfen. –

@ValentinVrinceanu Ja, die Sache, die sagt Bobcats Services soll weiter unten sein, die ich gab es die Marge oben, aber scheint es vollständig zu ignorieren. –

Bitte teilen Sie die HTML und CSS für "die Sache", die Bobcats Services –

Bei Verwendung von Float müssen Sie löschen, damit die folgenden Elemente richtig aussehen. Ich habe hier ein Beispiel hinzugefügt: https://jsfiddle.net/44x11g34/.

Was ich zwischen den zwei Hauptblöcke hinzugefügt hatte:

<div class="clear"></div>

und einige kleine css

.clear { 
    clear: both; 
}

Hope this helfen Ihnen.

Quelle

2016-08-01 15:26:27

Vielen Dank! Es funktionierte! –

Navbar auf Slanted Div

Antwort

Verwandte Themen