2016-02-27 151 views
0

我在页面的左侧创建了一个固定菜单,现在我想通过设置左侧和右侧CSS值的值创建一个“内容”区域,但是,内容不会相应调整。DIV卡在页面左侧

JSFiddle

body { 
 
    margin: 0px; 
 
    background-image: url(_assets/bg_2.png); 
 
    background-position: center; 
 
    background-repeat: repeat; 
 
    height: 300%; 
 
} 
 
@font-face { 
 
    src: url("_assets/Socialico.ttf"); 
 
    font-family: nav-social-1; 
 
} 
 
@font-face { 
 
    src: url("_assets/Socialico Plus.ttf"); 
 
    font-family: nav-social-2; 
 
} 
 
@font-face { 
 
    src: url("_assets/Century Gothic.ttf"); 
 
    font-family: nav-item; 
 
} 
 
/*-----------------MENU CLASSES-----------------*/ 
 
.menu-gap { 
 
    height: 25px; 
 
    width: 100%; 
 
} 
 
.sidebar-menu { 
 
    position: fixed; 
 
    height: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 250px; 
 
    background-color: rgba(255, 255, 255, 0.75); 
 
} 
 
.logo { 
 
    margin: 0px; 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: transparent; 
 
} 
 
.logo-item { 
 
    width: 75%; 
 
    text-align: center; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    transition: background-image 0.25s; 
 
} 
 
.logo-item { 
 
    content: url(_assets/logo_up.png); 
 
} 
 
.logo-item:hover { 
 
    content: url(_assets/logo_over_2.png); 
 
} 
 
.nav-gap { 
 
    width: 22%; 
 
    height: 50px; 
 
    float: right; 
 
} 
 
.nav-menu { 
 
    margin: 0px; 
 
    width: 100%; 
 
    height: 375px; 
 
    background-color: transparent; 
 
} 
 
.nav-item { 
 
    margin: 0px; 
 
    width: 100%; 
 
    float: right; 
 
    text-align: right; 
 
    height: 75px; 
 
    line-height: 75px; 
 
    font-size: 14px; 
 
    text-shadow: 0.5px 0.5px 1px #c8c8c8; 
 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
    background-color: transparent; 
 
    -webkit-transition: color 0.35s; 
 
    -moz-transition: color 0.35s; 
 
    -o-transition: color 0.35s; 
 
    transition: color 0.35s; 
 
} 
 
.nav-item { 
 
    color: #555; 
 
} 
 
.nav-item:hover { 
 
    color: #b9a069; 
 
} 
 
.soc-menu { 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: transparent; 
 
} 
 
.soc-item { 
 
    margin: 0px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: block; 
 
    text-align: center; 
 
    -webkit-transition: opacity 0.25s ease; 
 
    -moz-transition: opacity 0.25s ease; 
 
    -o-transition: opacity 0.25s ease; 
 
    transition: opacity 0.25s ease; 
 
} 
 
.soc-item { 
 
    content: url(_assets/instagram_up.png); 
 
} 
 
.soc-item:hover { 
 
    content: url(_assets/instagram_over_2.png); 
 
} 
 
.copyright-menu { 
 
    height: auto; 
 
    margin: auto 0; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    background-color: transparent; 
 
} 
 
.copyright-item { 
 
    width: 100%; 
 
    height: 55px; 
 
    line-height: 10px; 
 
    font-size: 10px; 
 
    text-align: center; 
 
    color: #999; 
 
    font-family: nav-item; 
 
} 
 
a:link { 
 
    text-decoration: none; 
 
} 
 
a:visited { 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    text-decoration: none; 
 
} 
 
a:active { 
 
    text-decoration: none; 
 
} 
 
/*-----------------MENU CLASSES-----------------*/ 
 

 
/*-----------------CONTENT CLASSES-----------------*/ 
 
.content-wrapper { 
 
    left: 350px; 
 
    right: 50px; 
 
    height: auto; 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
} 
 
.header { 
 
    width: 100%; 
 
    height: 50px; 
 
    margin-top: 200px; 
 
    margin-bottom: 100px; 
 
} 
 
/*-----------------CONTENT CLASSES-----------------*/
<div class="sidebar-menu"> 
 
    <div class="menu-gap"> 
 
    <br /> 
 
    </div> 
 
    <div class="logo"> 
 
    <a href="http://www.stephanieengland.com/"> 
 
     <div class="logo-item"></div> 
 
    </a> 
 
    </div> 
 
    <div class="menu-gap"> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    </div> 
 
    <div class="nav-menu"> 
 
    <a href="http://www.stephanieengland.com/about-me"> 
 
     <div class="nav-item">About Me 
 
     <div class="nav-gap"></div> 
 
     </div> 
 
    </a> 
 
    <a href="http://www.stephanieengland.com/costumes"> 
 
     <div class="nav-item">Costumes 
 
     <div class="nav-gap"></div> 
 
     </div> 
 
    </a> 
 
    <a href="http://www.stephanieengland.com/personal-works"> 
 
     <div class="nav-item">Personal Works 
 
     <div class="nav-gap"></div> 
 
     </div> 
 
    </a> 
 
    <a href="http://www.stephanieengland.com/professional-credits"> 
 
     <div class="nav-item">Professional Credits 
 
     <div class="nav-gap"></div> 
 
     </div> 
 
    </a> 
 
    <a href="http://www.stephanieengland.com/contact"> 
 
     <div class="nav-item">Contact 
 
     <div class="nav-gap"></div> 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="menu-gap"> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    </div> 
 
    <div class="soc-menu"> 
 
    <a href="instagram"> 
 
     <div class="soc-item"></div> 
 
    </a> 
 
    </div> 
 
    <div class="menu-gap"> 
 
    <br /> 
 
    </div> 
 
    <div class="copyright-menu"> 
 
    <a href="#"> 
 
     <div class="copyright-item"> 
 
     <br /> 
 
     <br />Stephanie England 
 
     <br />© Copyright 2016</div> 
 
    </a> 
 
    </div> 
 
    <div class="menu-gap"> 
 
    <br /> 
 
    </div> 
 
</div> 
 
<!-----------------MENU END-----------------> 
 

 
<!-----------------CONTENT START-----------------> 
 
<div class="content-wrapper"> 
 
    <div class="header"> 
 
    <div class="header-text">Contact Header Here Not Yet Set</div> 
 
    </div> 
 
</div> 
 
<!-----------------CONTENT END-----------------> 
 

 
<!-----------------FOOTER START-----------------> 
 
<div class="footer"> 
 
    <div class="soc-footer"> 
 
    <div class="soc-footer-item"></div> 
 
    </div> 
 
</div> 
 
<!-----------------FOOTER END----------------->

+0

您使用的'。内容-wrapper''left'和'right'不使用非静态'position'(例如'的位置是:绝对的;')。因此,这些属性不会有任何影响。尝试将'position:absolute;'添加到'.content-wrapper'。这是你想要的吗? – Xufox

+0

我已经尝试过,甚至没有解决我的问题:( – Jesse

+0

然后你的预期结果是什么? – Xufox

回答

1

给予.sidebar-menu股利固定位置取出来的文件的流程。所以你的.content=wrapper div忽略它,并将自己定位到视口左侧。你可以给它的250像素保证金左:

.content-wrapper{ 
    margin-left:250px; 
} 

为了弥补这一点,但如果你只是想你的菜单坚持视口的左边,我建议浮它(和内容包装)代替。

https://jsfiddle.net/8rcws951/

+0

我试过,在我保存的HTML页面中,在Chrome浏览器中查看它并没有解决我的问题。将它上传到我的服务器并链接页面 – Jesse

+0

让我知道你什么时候做,我会去看看 – symlink

+0

www.djscimmia.com/test/ – Jesse