Navbar on Slanted Div

Я создал slated div для использования с моим навигатором, но это испортило остальную часть форматирования для сайта. Навигатор находится в верхнем правом углу, а наклоненный div находится под ним, но он испортил все остальное на веб-странице. Я пробовал все безрезультатно.Navbar on 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; 
}

"Бобкэтс услуга" Диво HTML:

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

"Бобкэтс услуга" Ди 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; 
}

источник

2016-07-29 Bobcat Battalion

Я не уверен, что полностью понимаю проблему. В чем проблема, как это испортится со страницей? Где вы хотите быть навигацией и где вы хотите, чтобы квадрат контента был вами? Также может помочь живой пример. –

@ ValentinVrinceanu Да, вещь, которая говорит, что Bobcats Services должна быть ниже, что я дал ей margin-top, но, похоже, полностью игнорирует ее. –

Пожалуйста, поделитесь html и css для «вещи», в которой говорится, что Bobcats Services –

При использовании поплавка вам необходимо очистить, поэтому последующие элементы выглядят правильно. Я добавил здесь: https://jsfiddle.net/44x11g34/ пример.

Что я добавил между 2 основными блоками:

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

и некоторые небольшие CSS

.clear { 
    clear: both; 
}

Надеется, что это поможет.

источник

2016-08-01 15:26:27

Большое вам спасибо! Это сработало! –

Navbar on Slanted Div

ответ

Смежные вопросы