Problem with structuring a Html5 web page

Recently, I created a web page using HTML5.

Check out the code below:

<header>
  <img src="img/logo.png" alt="logo">
  <hr class="hr-style">
  <h1>The Articles</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Articles</a></li>
    </ul>
  </nav>
</header>

<section>
  <article class="article">
    <img src="img/articles.png" alt="articles" />
  </article>
  <aside class="aside">
    <img src="img/agencies.png" alt="agencies" />
  </aside>
</section>

<footer>
</footer>

I also attempted to create a JSfiddle. You can view it here:

http://jsfiddle.net/3jet0dfu/

My goal is to achieve a layout similar to this:

Since I am new to HTML5, I am seeking guidance on how to properly align elements on the page using HTML5 tags.

Answer №1

First and foremost, it is essential to restrict the width of your content.

Check out this example!

In this demonstration, I am setting the body width to match that of your logo image (939px). Using margin: 0 auto; will center the page. However, providing an exact solution for your question would be difficult due to its broad nature.

body{
    margin: 0 auto;
    font-family: Raleway, sans-serif;
    width: 939px;
}

Instead of using the <hr> element, consider utilizing a border like so:

<img src="" alt="" id="logo">
#logo {
    border-bottom: solid 2px #CCC;
    padding-bottom: 50px;
}

To eliminate default margins, I have implemented a basic CSS reset. By selectively adding margins back to individual elements, you can easily control spacing. Additionally, exploring options such as a CSS Reset or CSS Normalize may prove beneficial (research which option suits your needs best).

* {
    margin: 0;
    padding: 0;
}

If you intend to utilize percentages, box-sizing: border-box is highly advantageous.

Here is a comprehensive guide on box-sizing.

* {
    box-sizing: border-box;
}

This simple adjustment lays the foundation for achieving your desired layout. From here, you can customize the width and incorporate margins/padding to suit your specific requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the mechanism behind YouTube automatically playing music videos when we visit a channel's homepage?

Since Chrome version 66, autoplay of videos with music has been restricted to muted playback. However, I recently noticed that on certain YouTube channel pages, the videos were autoplaying with sound, even when using the HTML video API. How is YouTube able ...

Unable to make boxes responsive to size changes in CSS when layered over video background

I am struggling to position my boxes on top of a video background in HTML/CSS. Despite my efforts, the boxes only appear at the bottom and do not move with any CSS adjustments I make. Is there something I am missing or doing wrong in my approach? I want to ...

Having issues with image hover and click functionality

My website has an image with the cursor set to pointer and a function that should show a hidden element when clicked. However, it's not working at all. When I hover over it or click on it, nothing happens. Here is a screenshot of the issue along with ...

What are the reasons and methods for storing multiple images within a single image?

Lately, I've observed a trend where websites are consolidating multiple images into one large image, similar to Google's homepage. Although we see many small images on the left side, it is actually just one single image: I am curious about how ...

What is the correct way to format the headings for sub-level pages, like chapters within a novel or sections within a lengthy article?

At times, the text and image content becomes too expansive to fit on a single page. However, preserving the context of the content is crucial, making it necessary to display it explicitly from a user experience perspective. This could include chapters of a ...

Guide to aligning MEGA MENU with navbar

I've implemented a navbar that includes dropdown nav-items with a mega menu. The mega menu is set to position:absolute. Is there a way to dynamically align the mega menu in the center of the page while using the same component for all nav-items? Ch ...

If the value stored in $_SESSION['uname'] is not "teacher", redirect back to the homepage

I am currently working on a webpage and I want to restrict access to only users with the username "teacher". I came across this code snippet: <?php session_start(); if(!isset($_SESSION['uname'])){ header('location:(main p ...

Utilize Selenium to easily navigate through joint selection and list elements

Attempting to scrape a website using beautifulSoup and selenium has led me to a roadblock with a particular dropdown select menu. The HTML structure in question looks something like this: <div class="selection-box" alt="selection" ti ...

The previously set display value remains unchanged when switching CSS files

I'm working on a project where I need to display three separate articles based on the screen size. Article 1 should only be visible when the screen width is less than 600 pixels Article 2 should be visible between 600 and 900 pixels Article 3 shoul ...

The HTML.php form displays boolean radio button values as 'on'

My html.php page includes three buttons: "Clear Page," "Retrieve," and "Update Details." Upon opening the form, users can input either a value for id="siteId" or id="siteName". By clicking the "Retrieve" button, the remaining details of a stored site are ...

send the value from the input field to the designated button - link the two buttons

My goal is to create a feature where users can click on a button within the map and open an external page in Google Maps with specific dimensions (500 X 600) and without the Menu bar, Tool bar, or Status bar. // Custom Button Functionality by salahineo ...

I cannot seem to alter the background color of my image through the use of external CSS

body { background-color: #f6f7d4; } h1, h3, hr { color: #68b8ab; } hr { width: 100px; border-style: dotted none none; border-color: gray; border-width: 5px; } img { background-color: black; } Although the external CSS code a ...

What are some ways to align text both vertically and horizontally within columns?

How can I center text both vertically and horizontally inside two columns using Bootstrap 4? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> <div class="row"> <div class="co ...

Preventing checkbox selection with CSS

Can CSS be used to deactivate clicks on checkboxes while still maintaining their functionality for dynamically setting values using Javascript? I have not been able to find a suitable solution. pointer-events:none Unfortunately, this did not work as expe ...

What could be the reason for my CSS animation with :hover @keyframes not functioning?

As a newcomer, I am struggling to understand why this code isn't functioning correctly. My goal is to create the illusion of a flying bird. This is my HTML: <img src="http://dl.dropboxusercontent.com/u/105046436/tw.png" /> <br> <div c ...

Attempting to eliminate the padding from the unordered list (ul) element within the pop-up box

Upon clicking the chip with chipName="button test IPA", a popup window appears. I am attempting to remove the padding from the ul tag within that popup. The issue I'm facing is that I cannot locate the ul tag in my HTML or JSX code. I have assigned a ...

Display my additional HTML content on the current page

Is it possible for my addon to open a predefined html page in the current window when it is started? And if so, how can this be achieved? Currently, I am able to open my addon page in a new window using the following command: bridge.boot = function() { ...

Extract the directory name from a URL using PHP, excluding any file names or extensions

Can anyone guide me on extracting the folder name only from a URL in PHP? For example, if my URL is I'm interested in retrieving just the part of the URL. Any suggestions on how to achieve this would be much appreciated. Thanks! ...

Ways to transfer a variable from a Node.js script to a JavaScript file on the client side

Seeking guidance on how to transfer the "myBlogs" variable from my Node.js file ("server.js") to a frontend JavaScript file ("blogs.js"). I intend to utilize this variable in the JS file to iterate through the array it contains, generating a template for e ...

Is it possible to change the button class within a div while ensuring only the last one retains the change?

Here is a code snippet I'm using to switch between classes for buttons: $('button').on('click', function(){ var btn=$(this); if(btn.attr('class')=='tct-button'){ btn.removeClass('tct-button ...