CSS/HTMLサイドバーを作成する

Question

私はかなり新しいウェブ開発者ですが、問題の一部が理解できませんでしたが、HTMLまたはCSSを使ってサイドバーを作成するのに苦労しています。次のように私のウェブサイトは現在になります

ありあまりここではないですが、私のジレンマは単純です：私はサイドバーを作成したいと思います。たぶん最近の更新やその他の重要なことを書いているかもしれません。また、私は最終的にWeb開発の仕事に入るつもりかどうかを知ることは素晴らしいことです。ここで

コードです：

* { 
 
    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>

私は（実際に、そして完全にプログラミング）のWeb開発にかなり新しいですが、私は、複数の質問を見上げた多くのことを試してみました、何も動作していないようだ。私は何か解決策を得ることができるかどうか私自身がここに投稿することを決めたのですか？

私が理解しているところから、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