Создание боковой панели CSS/HTML

Question

Я довольно новый веб-разработчик, и я столкнулся с проблемой (часть из этого может быть недостатком понимания), но у меня есть ужасное время, создавая боковую панель с HTML или CSS. Мой сайт в настоящее время выглядит следующим образом:

Существует не так много здесь, но моя дилемма проста: я хотел бы создать боковую панель. Возможно, чтобы поместить последние обновления или другие важные вещи. Кроме того, было бы здорово узнать, смогу ли я в конечном итоге заняться разработкой веб-разработки.

Вот код:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: url("https://s-media-cache-ak0.pinimg.com/originals/ca/5d/a4/ca5da4df54f6fc88531cbfff469043b0.jpg"); 
 
    background-repeat: no-repeat; 
 
} 
 
.navbar { 
 
    width: 100%; 
 
    margin-top: 150px; 
 
} 
 
.navbar ul { 
 
    text-align: center; 
 
    border-top: solid 2px black; 
 
    border-left: solid 2px black; 
 
    border-right: solid 2px black; 
 
    margin-left: 400px; 
 
    margin-right: 400px; 
 
    background: #444444; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 
.navbar ul li { 
 
    display: inline-block; 
 
} 
 
.navbar ul li a { 
 
    text-decoration: none; 
 
    color: black; 
 
    font-size: 30px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    color: white; 
 
    transition: 0.3s; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 
.navbar ul li a:hover { 
 
    background: #8c8c8c; 
 
} 
 
.body { 
 
    background-color: rgba(158, 158, 158, 0.6); 
 
    margin-left: 400px; 
 
    margin-right: 400px; 
 
    border: solid 2px black; 
 
    border 
 
} 
 
.body p { 
 
    font-size: 20px; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    line-height: 30px; 
 
    font-weight: 600; 
 
}

<div class="navbar"> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">My Works</a> 
 
    </li> 
 
    <li><a href="#">Contact Me</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="body"> 
 

 
    <p>(paragraph related stuff) 
 
    </p> 
 
</div>

Я довольно новыми для веб-разработки (и программирование полностью, на самом деле), но я посмотрел на несколько вопросов, перепробовал много вещей, и ничего не работало. Я решил разместить здесь сам, чтобы узнать, смогу ли я получить какие-либо решения?

Из чего я понимаю, HTML содержит элементы, которые идут один под другим. Я никогда не понимал, как заставить элементы идти бок о бок. Это также может помочь при добавлении изображения, а затем текста рядом с ним!

Спасибо вам, если вы можете помочь мне :)

Answer 1

может быть это просто боковая панель может помочь:

http://codepen.io/Axeish/pen/GrEdMx

CSS

` 
html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    background-color: #e2e1e0; 
    overflow: hidden; 
} 

a, a:focus, a:active { 
    text-decoration: none; 
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms; 
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms; 
} 

.card { 
    border-radius: 2px; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 
    padding: 20px; 
    background-color: #fff; 
    margin-bottom: 30px; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
     -ms-flex-pack: center; 
      justify-content: center; 
    -webkit-box-align: center; 
     -ms-flex-align: center; 
      align-items: center; 
} 

.center { 
    width: 400px; 
    height: 200px; 
} 

.container { 
    height: 100%; 
    margin-left: 400px; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
     -ms-flex-pack: center; 
      justify-content: center; 
    -webkit-box-align: center; 
     -ms-flex-align: center; 
      align-items: center; 
    overflow-x: hidden; 
    overflow-y: auto; 
} 
.container p { 
    font-size: 20px; 
} 

.header { 
    position: fixed; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
     -ms-flex-direction: column; 
      flex-direction: column; 
    -webkit-box-align: center; 
     -ms-flex-align: center; 
      align-items: center; 
    width: 400px; 
    z-index: 20; 
    padding-top: 50px; 
    padding-bottom: 100px; 
    background-color: white; 
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.23); 
} 
.header .content .logo { 
    padding: 10px 20px; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
     -ms-flex-pack: center; 
      justify-content: center; 
    -webkit-box-align: center; 
     -ms-flex-align: center; 
      align-items: center; 
} 
.header .content .logo span { 
    text-transform: uppercase; 
    text-decoration: none; 
    font-size: 27px; 
    font-weight: 200; 
    color: #212121; 
} 
.header .content .logo img { 
    width: 50px; 
    height: 50px; 
    margin-right: 10px; 
} 
.header .content ul.navigation { 

    list-style: none; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
     -ms-flex-direction: column; 
      flex-direction: column; 
    -ms-flex-pack: distribute; 
     justify-content: space-around; 
    padding: 0; 
} 
.header .content ul.navigation li { 
    padding: 10px; 
    cursor: pointer; 
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms; 
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms; 
} 
.header .content ul.navigation li a { 

    color: #212121; 

} 
.header .content ul.navigation li a.active { 
    text-decoration: underline; 
} 
.header .content ul.navigation li:hover a { 
    background-color: #212121; 
    color: white; 
} 



` 

Answer 2

Проверьте это.

*, :before, :after { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background: url("https://s-media-cache-ak0.pinimg.com/originals/ca/5d/a4/ca5da4df54f6fc88531cbfff469043b0.jpg"); 
 
    background-repeat: no-repeat; 
 
} 
 

 
.unstyled { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.unstyled a { 
 
    text-decoration: none; 
 
} 
 

 
.list-inline { 
 
    overflow: hidden; 
 
} 
 
.list-inline li { 
 
    float: left; 
 
} 
 

 
.header { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 17.5em; 
 
    background: #D13513; 
 
} 
 

 
.logo { 
 
    font: 300 2em "Source Sans Pro", Helvetica, Arial, sans-serif; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.logo a { 
 
    display: block; 
 
    padding: 1em 0; 
 
    color: #DFDBD9; 
 
    text-decoration: none; 
 
    transition: .15s linear color; 
 
} 
 

 
.main-nav ul { 
 
    border-top: solid 1px #3C3735; 
 
} 
 
.main-nav li { 
 
    border-bottom: solid 1px #3C3735; 
 
} 
 
.main-nav a { 
 
    padding: 1.1em 0; 
 
    color: #DFDBD9; 
 
    font: 400 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif; 
 
    text-align: center; 
 
} 
 
.main-nav a:hover { 
 
    color: #fff; 
 
} 
 

 

 
.list-hover-slide li { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.list-hover-slide a { 
 
    display: block; 
 
    position: relative; 
 
    z-index: 1; 
 
    transition: .35s ease color; 
 
} 
 
.list-hover-slide a:before { 
 
    content: ''; 
 
    display: block; 
 
    z-index: -1; 
 
    position: absolute; 
 
    left: -100%; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-right: solid 5px #DF4500; 
 
    background: #3C3735; 
 
    transition: .35s ease left; 
 
} 
 
.list-hover-slide a.is-current:before, .list-hover-slide a:hover:before { 
 
    left: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/> 
 
<body> 
 
    <header class="header" role="banner"> 
 
    <h1 class="logo"> 
 
    <a href="#">SideNav</a> 
 
    </h1> 
 
    <div class="nav-wrap"> 
 
    <nav class="main-nav" role="navigation"> 
 
     <ul class="unstyled list-hover-slide"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">My Work</a></li> 
 
     <li><a href="#">Contact Me</a></li> 
 
     </ul> 
 
    </nav> 
 
    
 

 
    <script