1. 首頁
  2. 問答
  3. 與圖像分開的側邊欄

與圖像分開的側邊欄

2016-08-24 59 views
0

我不希望側欄顯示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

回答

0

加浮動屬性類圖像配

.image { float:right; }

來源

2016-08-24 10:41:38

0

你正在使用你的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

+0

好感謝你，但這並不解決我的問題...... 的圖像仍然是落後側邊欄，我想它旁邊的側邊欄 –

+0

確定給予我一秒鐘 –

+0

我發佈了一個新的答案。 –

0

更新演示據瞭解意見如下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

+0

這樣圖像就在側邊欄下。它不再重疊，但它不在側欄的右側。 –

+0

我沒有收到你，似乎圖像是在側邊欄的右側。還是你需要你的邊欄不滾動頁面？ – 4dgaurav

+0

我希望右邊的圖片旁邊的圖片（並非過度平鋪）和100％屏幕寬度和高度 –

0

試試這個對你的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

0 

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

相關問題

 相關問題