Erstellen einer CSS/HTML-Sidebar

Question

Ich bin ein ziemlich neuer Webentwickler und bin auf ein Problem gestoßen (ein Teil davon könnte mangelndes Verständnis sein), aber ich habe eine schreckliche Zeit damit verbracht, eine Sidebar mit HTML oder CSS zu erstellen. Meine Website sieht derzeit wie folgt:

Es gibt nicht viel hier, aber mein Dilemma ist einfach: Ich möchte eine Sidebar erstellen. Vielleicht um aktuelle Updates oder andere wichtige Dinge zu setzen. Außerdem wäre es toll zu wissen, ob ich irgendwann in einen Webentwicklungs-Job gehen werde.

Hier ist der Code:

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

ich ziemlich neu bin, um Web-Entwicklung (und ganz Programmieren, wirklich), aber ich habe viele Dinge, mehrere Fragen, versuchte aufblickte, und nichts schien zu funktionieren. Ich habe beschlossen, hier selbst zu posten, um zu sehen, ob ich irgendwelche Lösungen bekommen kann?

Von was ich verstehe, HTML hat Elemente, die untereinander gehen. Ich habe nie herausgefunden, wie man Elemente dazu bringt, Seite an Seite zu gehen. Dies kann auch hilfreich sein, wenn Sie ein Bild hinzufügen und dann daneben einen Text eingeben!

Danke, wenn Sie in der Lage sind, mir zu helfen :)

Answer 1

diese einfache Sidebar kann helfen, sein kann:

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

CSS

diese

` 
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

Check-out.

*, :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