Printable Version of Topic

Posted by: APID Jul 23 2020, 12:16 PM

Hi,

I am just learning HTML and CSS. I created a basic website and trying to post articles which I have written as blog posts. However, the page layout is getting all messed up.

Can someone help me to understand, how to create a blog page where I can post multiple articles. For example, something like this -
https://www.nomadicmatt.com/travel-blog/

Thank you.

AP

Posted by: Christian J Jul 23 2020, 12:52 PM

Hi!

We would need to see the page (or its code) to be able to comment.


I understand that's not your own site? It seems to use the Wordpress blog software (which relies on lots of server-side scripts written in PHP). If you want to learn HTML and CSS it's best to avoid such ready-made solutions.

Posted by: APID Jul 24 2020, 07:21 AM

Hi,

Thank you for replying. Here is the code however, when I try to add content the dimensions are getting all messed up.

HTML
<nav class="menu">
<a href="Home.html">Home</a> &nbsp; &nbsp; &nbsp;
<a href="About%20me.html">About me</a> &nbsp; &nbsp; &nbsp;
<a href="Read%20my%20blog.html">Read my blog</a> &nbsp;&nbsp; &nbsp;
<a href="Contact%20me.html">Contact me</a> &nbsp; &nbsp; &nbsp;
</nav>

<div class="row">
<div class="middlecolum">
<div class="card">
<h2>Article 1</h2>
<h5>Travel Story, July 23, 2020</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
</div>
<div class="card">
<h2>Article 2</h2>
<h5>Food Story, July 23, 2020</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
</div>
</div>
</div>

CSS
.middlecolumn {
float:none;
width: 80%;
text-align: center;
}
/* Add a card effect for articles */
.card {
background-color: seashell;
padding: 20px;
margin-top: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 50%;
margin-left: 20px;

padding: 20px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.middlecolumn {
width: 100%;
padding: 0;
}
}

Thank you for any insight.

AP

Posted by: Christian J Jul 24 2020, 08:41 AM

Some of the HTML and CSS is missing, but I also noticed a missing "n" character here:

so the associated CSS isn't applied.