与图像分开的侧边栏

我不希望侧栏显示OVERLAP图像。所以基本上我希望他们，并排，我认为问题是我有一个位置：绝对;在侧栏中，但是当我删除它时，侧栏和图像不会保留在原位。与图像分开的侧边栏

body { 
 
    text-decoration: none; 
 
    margin: 0 auto; 
 
    max-width: 100% !important; 
 
    height: auto; 
 
} 
 
.fundo img { 
 
    max-width: 100% !important; 
 
    height: auto; 
 
} 
 
.menuleft { 
 
    background-color: #CDD0D2; 
 
    list-style-type: none; 
 
    position: absolute; 
 
    width: 9%; 
 
    height: 100%; 
 
    display: table; 
 
} 
 
.menuleft ul { 
 
    display: table-cell; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    vertical-align: middle; 
 
} 
 
#text { 
 
    -webkit-box-shadow: inset -7px 4px 5px 0px rgba(0, 0, 0, 0.22); 
 
    -moz-box-shadow: inset -7px 4px 5px 0px rgba(0, 0, 0, 0.22); 
 
    box-shadow: inset -7px 4px 5px 0px rgba(0, 0, 0, 0.22); 
 
    width: 100%; 
 
    height: 17%; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    background-color: #F06D22; 
 
} 
 
.menuleft li a { 
 
    font-family: Futura LT, 'Trebuchet MS', Arial; 
 
    letter-spacing: 0.28vw; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    height: 100%; 
 
    text-align: center; 
 
    display: flex; 
 
    vertical-align: middle; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 100%; 
 
    writing-mode: tb-rl; 
 
    -webkit-transform: rotate(180deg); 
 
    -moz-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
    white-space: nowrap; 
 
} 
 
.menuleft li:hover { 
 
    text-decoration: none; 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 
.menuleft li a:hover { 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 
#whitebar { 
 
    text-decoration: none; 
 
    display: table; 
 
    width: 100%; 
 
    height: 3px; 
 
    background-color: #fff; 
 
    writing-mode: tb-rl; 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    transform: rotate(180deg); 
 
    white-space: nowrap; 
 
    bottom: 0; 
 
    margin: 0 auto; 
 
} 
 
.image { 
 
    width: 92%; 
 
    height: 100%; 
 
} 
 
.image img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="menuleft"> 
 
    <ul> 
 
    <li id="text"> 
 
     <a href="#">Eficácia</a> 
 
    </li> 
 
    <li id="whitebar"> 
 
    </li> 
 
    <li id="text"> 
 
     <a href="#">Rapidez</a> 
 
    </li> 
 
    <li id="whitebar"> 
 
    </li> 
 
    <li id="text"> 
 
     <a href="#">Impacto <br> na vida real</a> 
 
    </li> 
 
    <li id="whitebar"> 
 
    </li> 
 
    <li id="text"> 
 
     <a href="#">Tecnologia <br> avançada</a> 
 
    </li> 
 
    <li id="whitebar"> 
 
    </li> 
 
    <li id="text"> 
 
     <a href="#">Segurança</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div class="image"> 
 
    <img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" /> 
 
</div>

来源

2016-08-24 João Guerreiro

加浮动属性类图像配

.image { float:right; }

来源

2016-08-24 10:41:38

你正在使用你的CSS，而不是 “ID” 的 “类”（。）标签（＃）标记，所以请尝试将HTML上的所有“id”标记更改为“class”。就像这样：

<body> 
    <div class="menuleft"> 
     <ul> 
      <li class="text"> 
       <a href="#">Eficácia</a> 
      </li> 
      <li class="whitebar"> 
      </li> 
      <li class="text"> 
       <a href="#">Rapidez</a> 
      </li> 
      <li class="whitebar"> 
      </li> 
      <li class="text"> 
       <a href="#">Impacto <br> na vida real</a> 
      </li> 
      <li id="whitebar"> 
      </li> 
      <li class="text"> 
       <a href="#">Tecnologia <br> avançada</a> 
      </li> 
      <li class="whitebar"> 
      </li> 
      <li class="text"> 
       <a href="#">Segurança</a> 
      </li> 
     </ul> 
</div> 
    <div class="image"> 
    <img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" /> 
</div>

来源

2016-08-24 10:46:19

好感谢你，但这并不解决我的问题...... 的图像仍然是落后侧边栏，我想它旁边的侧边栏 –

确定给予我一秒钟 –

我发布了一个新的答案。 –

更新演示据了解意见如下DEMO 2

DEMO 1

CSS改变

.menuleft { 
    background-color: #CDD0D2; 
    list-style-type: none; 
    /*position: absolute;*/ 
    width: 9%; 
    height: 100%; 
    /*display: table;*/ 
    float: left; /* float to left */ 
} 

.menuleft ul { 
    /*display: table-cell;*/ /* remove this */ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    vertical-align: middle; 
} 

.menuleft li a { 
    font-family: Futura LT, 'Trebuchet MS', Arial; 
    letter-spacing: 0.28vw; 
    color: #fff; 
    text-decoration: none; 
    /*height: 100%;*/ 
    text-align: center; 
    display: flex; 
    vertical-align: middle; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    writing-mode: tb-rl; 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    transform: rotate(180deg); 
    white-space: nowrap; 
} 

.image { 
    width: 91%; /* remaining space */ 
    height: 100%; 
    float: right; /* add this to float it to right */ 
}

来源

2016-08-24 10:50:36 4dgaurav

这样图像就在侧边栏下。它不再重叠，但它不在侧栏的右侧。 –

我没有收到你，似乎图像是在侧边栏的右侧。还是你需要你的边栏不滚动页面？ – 4dgaurav

我希望右边的图片旁边的图片（并非过度平铺）和100％屏幕宽度和高度 –

试试这个对你的CSS：

body{ 
text-decoration: none; 
margin: 0 auto; 
max-width:100% !important; 
height:auto;} 

.fundo img{ 
max-width:100% !important; 
height:auto;} 

.menuleft { 
background-color: #CDD0D2; 
list-style-type: none; 
position: relative; 
width: 9%; 
height: 100%; 
display:inline-block; 
} 

.menuleft ul{ 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
vertical-align: middle; 
position: absolute; 
top: 50%; 
left: 50%; 
margin-right: -50%; 
transform: translate(-50%, -50%); 
} 

#text { 
-webkit-box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22); 
-moz-box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22); 
box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22); 
width: 100%; 
height: 17%; 
color: white; 
text-align: center; 
text-decoration: none; 
background-color: #F06D22; 
} 

.menuleft li a { 
font-family: Futura LT,'Trebuchet MS', Arial; 
letter-spacing: 0.28vw; 
color: #fff; 
text-decoration: none; 
height: 100%; 
text-align: center; 
display: flex; 
vertical-align: middle; 
align-items: center; 
justify-content: center; 
width: 100%; 
writing-mode: tb-rl; 
-webkit-transform:rotate(180deg); 
-moz-transform:rotate(180deg); 
-o-transform: rotate(180deg); 
-ms-transform:rotate(180deg); 
transform: rotate(180deg); 
white-space:nowrap; 
} 

.menuleft li:hover { 
text-decoration: none; 
background: rgba(255,255,255,0.2); 
} 

.menuleft li a:hover { 
text-decoration: none; 
color: #fff; 
} 

#whitebar{ 
text-decoration: none; 
display: table; 
width: 100%; 
height: 3px; 
background-color: #fff; 
writing-mode:tb-rl; 
-webkit-transform:rotate(90deg); 
-moz-transform:rotate(90deg); 
-o-transform: rotate(90deg); 
-ms-transform:rotate(90deg); 
transform: rotate(180deg); 
white-space:nowrap; 
bottom:0; 
margin: 0 auto; 
} 

.image { 
width: 90%; 
height:100%; 
display:inline-block; 
} 

.image img { 
width: 100%; 
height: 100%; 
}

来源

2016-08-24 11:01:22

body{ 
 
    text-decoration: none; 
 
    margin: 0 auto; 
 
    max-width:100% !important; 
 
    height:auto; 
 
} 
 

 
.fundo img{ 
 
    max-width:100% !important; 
 
    height:auto; 
 
} 
 

 

 
.menuleft { 
 
    background-color: #CDD0D2; 
 
    list-style-type: none; 
 
    position: absolute; 
 
    width: 9%; 
 
    height: 100%; 
 
    display: table; 
 
} 
 
.menuleft ul{ 
 
    display: table-cell; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    vertical-align: middle; 
 
} 
 
.text { 
 
    -webkit-box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22); 
 
-moz-box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22); 
 
box-shadow: inset -7px 4px 5px 0px rgba(0,0,0,0.22); 
 
    width: 100%; 
 
    height: 17%; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    background-color: #F06D22; 
 
} 
 

 
.menuleft li a { 
 
    font-family: Futura LT,'Trebuchet MS', Arial; 
 
    letter-spacing: 0.28vw; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    height: 100%; 
 
    text-align: center; 
 
    display: flex; 
 
    vertical-align: middle; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 100%; 
 
    writing-mode: tb-rl; 
 
    -webkit-transform:rotate(180deg); 
 
    -moz-transform:rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    -ms-transform:rotate(180deg); 
 
    transform: rotate(180deg); 
 
    white-space:nowrap; 
 
} 
 

 
.menuleft li:hover { 
 
    text-decoration: none; 
 
    background: rgba(255,255,255,0.2); 
 
} 
 
.menuleft li a:hover { 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 

 
.whitebar{ 
 
    text-decoration: none; 
 
    display: table; 
 
    width: 100%; 
 
    height: 3px; 
 
    background-color: #fff; 
 
    writing-mode:tb-rl; 
 
    -webkit-transform:rotate(90deg); 
 
    -moz-transform:rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    -ms-transform:rotate(90deg); 
 
    transform: rotate(180deg); 
 
    white-space:nowrap; 
 
    bottom:0; 
 
    margin: 0 auto; 
 
} 
 

 
.image { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto auto auto 9%; 
 
} 
 
.image img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<body> 
 
     <div class="menuleft"> 
 
      <ul> 
 
       <li class="text"> 
 
        <a href="#">Eficácia</a> 
 
       </li> 
 
       <li class="whitebar"> 
 
       </li> 
 
       <li class="text"> 
 
        <a href="#">Rapidez</a> 
 
       </li> 
 
       <li class="whitebar"> 
 
       </li> 
 
       <li class="text"> 
 
        <a href="#">Impacto <br> na vida real</a> 
 
       </li> 
 
       <li class="whitebar"> 
 
       </li> 
 
       <li class="text"> 
 
        <a href="#">Tecnologia <br> avançada</a> 
 
       </li> 
 
       <li class="whitebar"> 
 
       </li> 
 
       <li class="text"> 
 
        <a href="#">Segurança</a> 
 
       </li> 
 
      </ul> 
 
    </div>     
 
    <div class="image"> 
 
     <img src="http://wallpaperfx.com/uploads/wallpapers/2016/04/14/18521/preview_vatna-glacier-icelend.jpg" /> 
 
    </div> 
 

 
    
 

 

 
</body>

来源

2016-08-24 12:04:44

与图像分开的侧边栏

回答

相关问题