The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Moving UL to right side of page body text
Blackpiano1
post Jul 6 2023, 12:16 PM
Post #1





Group: Members
Posts: 1
Joined: 6-July 23
Member No.: 28,981
This is what my page looks like so far (I know it's silly, but it's just for practice):

https://ibb.co/Nn81Crx

I want to move the related menu currently in the top right corner to the right of the main body text of the article and have the menu items running down the page vertically (next to the cyan boxes).

I've tried a lot of things without much luck. What would be the best way to go about this?

This is my code at this point:


[code] <!DOCTYPE html>
<html style="background-color:rgb(180, 210, 218);", style="max-width: 800px">
<head>
<meta charset="utf-8">

<title>My page title</title>
<link href="stylingsheet copy.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">Menu 1</a></li>
<li><a href="https://www.tokyometro.jp/en/">Menu 2</a></li>
<li><a href="https://www.surfline.com/surf-report/kounoura/584204204e65fad6a7709850">Menu 3</a></li>
<li><a href="#https://en.wikipedia.org/wiki/Editors_(band)">Menu 4</a></li>
<li><a href="https://www.youtube.com/watch?v=iyg5arKOGNQ">Menu 5</a></li>
</ul>
</aside>

</main>


<header id="header_colour_font">
<h1 class="header_footer_background_colour">SpongeBob</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>


<form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value∫="Go!">
</form>
</nav>





<main>



<article>
<div id="text_colour">
<h2 class="headings_group">Article heading</h2>

<p>sdjfmnwaueojsfkjhnaersdkgfyaejhrngfuaejrshgnfkarsgf.</p>

<div id="box1">
<h3 class="headings_group">Subsection</h3>

<p& gt;jdgnvesodfilguhjserndogfiulhjesdfngoileuskdjfghnoseidlufgjhsneodufgivjhesndrf
goilukeajrdhfgn</p>

<p& gt;sjdfnvaiskldufjgnvedlgkfuvjendfgoluvesjrdngfvlseurdjfgnvseldfugjvnsdlfgkuvjda
nmfg.</p>
</div>

<div id="box2">
<h3 class="headings_group">Subway</h3>

<p lang="la">blah blah jgljghedogilkjaenrdigfukvjsendfgioulvkserjdkfhgnoisruldkjfhgnsrldugjsnrdlgkusjrd
nglisrudjkgnlsrdukfjgnsrkjdgf</p>


<p lang="la"& gt;idfghjeaufgkjhneugruhjegnoiuaeirhgjoeiaurgheoairughjeaordiufgjheanrgluejhngoe
iujghneiugjneairgujhanedioguhejdnfgoviuesrjdghfnoiearudlkgjfh</p>




</article>
</div>



<div class="header_footer_background_colour">
<footer id="text_colour">
<p>©Copyright 2050 by Buddy.</p>
</footer>
</div>

</body>
</html>







Any help would be much appreciated. Thank you!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 10 2023, 03:52 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
Hard to say without seeing the CSS, but in general you might use things like CSS float or flex for this.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 08:25 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC