1. дома
  2. Вопрос и ответ
  3. Отдельная боковая панель с изображения

Отдельная боковая панель с изображения

2016-08-24 4 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 класс

.image { float:right; }

источник

2016-08-24 10:41:38

0

Вы используете "класс" (.) Тег на CSS вместо "ид" (#), поэтому попробуйте изменить все ваши теги «id» на вашем HTML на «класс». Как это:

<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

Ok спасибо, но это не исправить мою проблему ... Изображение еще за боковой, и я хочу его прямо рядом с боковой –

+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

Я хочу изображение прямо рядом с боковой панелью (не ovelaping) и 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

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

  • Нет связанных вопросов^_^