How do I add space between links in a sidebar? - html

Question

So I've been trying to make my blog page sidebar look something like this:
A sidebar with space between each link and image, a visible border and a title.
However, I seem to be having difficulty finding a tutorial online on how to do so with only css and html, therefore I have came to here to ask for the help of the community.
Here is my code:
* {
box-sizing: border-box;
}
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
}
header {
background: #55d6aa;
flex: 0 0 100%;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
#sidebar {
flex: 0 0 25%;
max-width: 250px;
background-color: #DDD;
list-style-type: none;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.text-wrapper {
max-width: 800px;
margin: auto;
}
<header>
<div class="container">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</div>
</header>
<div id="sidebar">
<ul>
<li> Star wars movie review</li>
<li>E.T movie review</li>
<li>Happy Death Day Movie review</li>
<li>Thor ragnorok movie review</li>
</ul>
</div>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class="thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<div class="text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships
crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br> Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the
opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br> These shots
strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character
boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable
reply.<br><br> James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within
the traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br> We know before the movie begins that certain things must happen. We must see the Titanic sail
and sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the
ship's builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider
their actions.<br><br> All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation.
You know intellectually that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br> The human story involves an 17-year-old
woman named Rose DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly
does she hate this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br> The
screenplay tells their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first
in the awesome engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from
the command deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>
Please feel free to edit, the image is a what I'm trying to accomplish.

Answer 1

One way: Simply by top/bottom padding and borders.
Sometimes it's useful to use :first-child and :last-child selectors (If first/last child design is different) + Flexbox for the card layout.
One more important issue - it's better to wrap the all card with a tag (Better UI).
* {
box-sizing: border-box;
}
aside .articles{
list-style-type: none;
padding: 0px;
margin-top:0px;
}
.articles > li.card{
border-left: 1px solid lightgray;
border-right: 1px solid lightgray;
border-bottom: 1px solid lightgray;
}
.articles h3, .articles p {
margin-top: 0px;
margin-bottom: 5px;
}
.articles .content_col{
margin-left: 10px;
}
.card-link{
/* remove deafult link color + underline */
color: initial;
text-decoration: none;
/* change a display from deafult inline to block (all card area is clickbale) */
display: block;
/* transition */
transition: background-color 0.5s ease;
/* flex setting */
display: flex;
align-items: center;
/* extra padding around the card */
padding: 10px;
}
.card-link:hover{
background: #f3f3f3;
}
/* width setting - layout*/
.image_col{
flex-basis: 20%;
max-width: 200px;
min-width: 100px;
align-self: flex-start;
}
.content_col{
flex-grow: 1;
}
/*responsive image */
.image_col img{
width: 100%;
height: auto;
}
<aside>
<h2>Last news</h3>
<div style="height:5px; background: black;"></div>
<ul class="articles">
<!-- card 1 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/300" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
<!-- card 2 -->
<li class="card">
<a href="#" class="card-link">
<div class="image_col">
<img src="https://picsum.photos/400/301" />
</div>
<div class="content_col">
<h3>Article heading</h3>
<p>Short description</p>
<button>Read more</button>
</div>
</a>
</li>
</ul>
</aside>

Answer 2

You can achieve the layout using flexbox and other CSS properties. I'll focus my answer purely on the CSS, but in reality, you can do a lot to simplify your HTML.
For example, you're nesting links inside list elements inside nav and div containers. That's really not necessary anymore with the advent of HTML5. It's a lot of extra code. Bottom line, you can make your HTML much lighter (removing about 25%) by taking advantage of semantically meaningful tags.
Here's a more detailed explanation: Centering flex items inside a list
So here's one solution to the problem (again, addressing the CSS side only). Add this to your code:
#sidebar {
display: flex;
}
#sidebar > ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
#sidebar > ul > li {
flex: 0 0 100px; /* adjust height as desired */
display: flex;
list-style-type: none;
border-bottom: 1px solid gray;
}
#sidebar > ul > li > a {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 25px;
}
* {
box-sizing: border-box;
}
#font-face {
src: url(fonts/WaywardSans-Regular.otf);
font-family: wayward;
}
body {
margin: 0;
background: #fff;
font-family: wayward;
font-weight: 100;
height: 100vh; /* adjustment; https://stackoverflow.com/a/31728799/3597276 */
overflow-x: hidden;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
}
header {
background: #55d6aa;
flex: 0 0 100%;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
margin-left: 30px;
}
nav {
float: right;
}
nav ul {
margin-right: 60px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 100px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
h1 {
margin: 10px;
}
img {
max-width: 100%;
}
#sidebar {
flex: 0 0 25%;
max-width: 250px;
background-color: #DDD;
display: flex; /* new */
}
/* new */
#sidebar > ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
/* new */
#sidebar > ul > li {
flex: 0 0 100px; /* adjust height as desired */
display: flex;
list-style-type: none;
border-bottom: 1px solid gray;
}
/* new */
#sidebar > ul > li > a {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 25px;
}
.review {
line-height: 29.25px;
padding-top: 5px;
text-align: center;
border-width: 1px;
margin: 10px;
padding: 5px;
word-wrap: break-word;
flex: 1;
}
.text-wrapper {
max-width: 800px;
margin: auto;
}
<header>
<div class="container">
<div class="logo">
<img src="logo.png" height="90" width="280">
</div>
<nav>
<ul>
<li> Our Top Picks</li>
<li>Wall of Shame</li>
<li>Movies</li>
<li>Tv Shows</li>
</ul>
</nav>
</div>
</header>
<div id="sidebar">
<ul>
<li> Star wars movie review</li>
<li>E.T movie review</li>
<li>Happy Death Day Movie review</li>
<li>Thor ragnorok movie review</li>
</ul>
</div>
<div class="review">
<h1>Titanic Movie Review 1996</h1>
<h3>-By Some random guy</h3>
<div class="thumbnail">
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose from behind">
</div>
<div class="text-wrapper">
<p>
The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships
crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br> Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the
opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br> These shots
strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character
boasts, neatly dismissing the Pyramids and the Great Wall. There is a shot of her, early in the film, sweeping majestically beneath the camera from bow to stern, nearly 900 feet long and “unsinkable,” it was claimed, until an iceberg made an irrefutable
reply.
<br><br> James Cameron's 194-minute, $200 million film of the tragic voyage is in the tradition of the great Hollywood epics. It is flawlessly crafted, intelligently constructed, strongly acted and spellbinding. If its story stays well within the
traditional formulas for such pictures, well, you don't choose the most expensive film ever made as your opportunity to reinvent the wheel.<br><br> We know before the movie begins that certain things must happen. We must see the Titanic sail and
sink, and be convinced we are looking at a real ship. There must be a human story--probably a romance--involving a few of the passengers. There must be vignettes involving some of the rest and a subplot involving the arrogance and pride of the ship's
builders--and perhaps also their courage and dignity. And there must be a reenactment of the ship's terrible death throes; it took two and a half hours to sink, so that everyone aboard had time to know what was happening, and to consider their actions.<br><br> All of those elements are present in Cameron's “Titanic,” weighted and balanced like ballast, so that the film always seems in proportion. The ship was made out of models (large and small), visual effects and computer animation. You know intellectually
that you're not looking at a real ocean liner--but the illusion is convincing and seamless. The special effects don't call inappropriate attention to themselves but get the job done.<br><br> The human story involves an 17-year-old woman named Rose
DeWitt Bukater (Kate Winslet) who is sailing to what she sees as her own personal doom: She has been forced by her penniless mother to become engaged to marry a rich, supercilious snob named Cal Hockley (Billy Zane), and so bitterly does she hate
this prospect that she tries to kill herself by jumping from the ship. She is saved by Jack Dawson (Leonardo DiCaprio), a brash kid from steerage, and of course they will fall in love during the brief time left to them.<br><br> The screenplay tells
their story in a way that unobtrusively shows off the ship. Jack is invited to join Rose's party at dinner in the first class dining room, and later, fleeing from Cal's manservant, Lovejoy (David Warner), they find themselves first in the awesome
engine room, with pistons as tall as churches, and then at a rousing Irish dance in the crowded steerage. (At one point Rose gives Lovejoy the finger; did young ladies do that in 1912?) Their exploration is intercut with scenes from the command
deck, where the captain (Bernard Hill) consults with Andrews (Victor Garber), the ship's designer and Ismay (Jonathan Hyde), the White Star Line's managing director.<br><br>
</p>
</div>
</div>
jsFiddle demo