Moving UL to right side of page body text |
Moving UL to right side of page body text |
Blackpiano1 |
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! |
Christian J |
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.
|
Lo-Fi Version | Time is now: 27th April 2024 - 09:31 PM |