Blackpiano1
New Coder
So this is my page as it stands now ( I know it's silly, it's just for practice):
I want to move the Related menu in the top right corner to the side of the article so it's next to the aqua boxes, with the menu items running down the right side of the page. How can I do this?
Any help would be much appreciated.
My HTML is below:
I want to move the Related menu in the top right corner to the side of the article so it's next to the aqua boxes, with the menu items running down the right side of the page. How can I do this?
Any help would be much appreciated.
My HTML is below:
HTML:
<!DOCTYPE html>
<html style="background-color:rgb(0, 43, 54);", style="max-width: 800px">
<head>
<meta charset="utf-8">
<title>My page title</title>
<link href="stylingsheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<aside id="aside_menu">
<h2>Related</h2>
<ul class="navigation_links1">
<li><a href="https://www.abc.net.au/news/rural/2023-07-05/wheatbelt-winery-produces-shiraz-and-chardonnay/102554796">Oh I do like to be beside the seaside</a></li>
<li><a href="https://www.tokyometro.jp/en/">Oh I do like to be beside the sea</a></li>
<li><a href="https://www.surfline.com/surf-report/kounoura/584204204e65fad6a7709850">Although in the North of England</a></li>
<li><a href="#https://en.wikipedia.org/wiki/Editors_(band)">It never stops raining</a></li>
<li><a href="https://www.youtube.com/watch?v=iyg5arKOGNQ">Oh well...</a></li>
</ul>
</aside>
</main>
<header id="header_colour_font">
<h1 class="header_footer_background_colour">Header</h1>
</header>
<nav>
<ul class="navigation_links2">
<li><a href="https://www.youtube.com/watch?v=oteyFLVSVB8">Home</a></li>
<li><a href="https://shimanami-cycle.or.jp/cycling/en-02.html">Our team</a></li>
<li><a href="https://www.carsguide.com.au/buy-a-car/all-new/sa/adelaide/all-bodytypes/all-makes">Projects</a></li>
<li><a href="https://www.jimmydean.com/recipes/?gclid=Cj0KCQjwho-lBhC_ARIsAMpgMofhIlF9V4G7RT2KNgHpVM5mTyqpCj2GAWO-V4MuMgabPxjh4J-Dmq0aAsaeEALw_wcB&gclsrc=aw.ds">Contact</a></li>
</ul>
<!-- A Search form is another common non-linear way to navigate through a website. -->
<form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value∫="Go!">
</form>
</nav>
<main>
<!-- It contains an article -->
<article>
<div id="text_colour">
<h2 class="headings_group">Article heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
<div id="box1">
<h3 class="headings_group">Subsection</h3>
<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
</div>
<div id="box2">
<h3 class="headings_group">Another subsection</h3>
<p lang="la">Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p lang="la">Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
</div>
</article>
<div class="header_footer_background_colour">
<footer id="text_colour">
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
</div>
</body>
</html>
