The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Multiple posts on website, unable to post multiple articles
APID
post Jul 23 2020, 12:16 PM
Post #1





Group: Members
Posts: 2
Joined: 23-July 20
Member No.: 27,453



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 23 2020, 12:52 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Hi!

QUOTE(APID @ Jul 23 2020, 07: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.

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

QUOTE
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/

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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
APID
post Jul 24 2020, 07:21 AM
Post #3





Group: Members
Posts: 2
Joined: 23-July 20
Member No.: 27,453



QUOTE(Christian J @ Jul 23 2020, 12:52 PM) *

Hi!

QUOTE(APID @ Jul 23 2020, 07: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.

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

QUOTE
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/

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.


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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 24 2020, 08:41 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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

CODE
<div class="middlecolum">

so the associated CSS isn't applied.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 06:15 AM