Is there a way to display a vertical list in a horizontal orientation?

I am in the process of creating my portfolio on Cargo Collective and have customized one of their pre-made themes to suit my preferences. The only thing I'm currently struggling with is how to change a set of vertical links to display horizontally instead.

If you want to see how my site looks now, you can visit this link.

For reference, here is a mock-up image of how I envision the layout looking like.

Any help or advice would be greatly appreciated. Thank you!

Answer №1

To improve the layout of your website, consider removing the margin: 650px; from the css style for .navigation a. Instead, try adding float: right; to the ul element and adjusting margins as needed to achieve the desired look.

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

Anticipated the presence of a corresponding <tr> in the <table> within the server HTML, but encountered hydration failure due to discrepancies between the initial UI and the server-rendered content

Next.js Version 13.2.3 In Next.js, it is advised not to use the table element. "use client"; export default function index() { return ( <table> <tr> <th>Company</th> ...

Scraping data from the web using R and creating interactive plots with hover text in Plotly without

I'm attempting to extract hover text content from plotly traces that have been shared online. This is a new type of scraping for me, and I'm exploring ways to accomplish this task in R without relying on selenium or phantomjs, possibly with the u ...

Encoding Java Lists into JSON Arrays with Jackson Library and UTF-8 Support

Currently, I am facing a challenge in converting a Java List object to a JSON array and specifically struggling with converting UTF-8 strings. Despite trying various methods, none of them seem to be effective. Here are the settings: response.setContentTy ...

Creating a dynamic height sticky sidebar and footer in Bootstrap 5 using CSS/HTML

Looking to implement a sticky sidebar feature with a header and footer that remain visible while the middle content scrolls. The overall height of the page will vary, so I plan to use Bootstrap 5 grid for structuring. <!DOCTYPE html> <html la ...

How to Retrieve Content from an iFrame Using jQuery?

I am facing a challenge with an HTML form that is directed to an IFRAME upon clicking "submit". The iframe then loads a page after the submission, which indicates whether the user-input data is valid or not. It simply displays on screen as "TRUE" or "FALSE ...

What is the best way to insert a character (::before) before an element?

I am trying to add a circle/dot using ::before on an element. • • However, I cannot seem to make it visible! .line ::before{ content:'•'; } and .line ::before{ content:'•'; } (Still not showing) I ...

What is the best way to show the initial 20 words on the screen, followed by the next 20 words using

Within a single tag, I have a string as shown in the example below. My goal is to display the first 20-25 words on screen, then continue with the next set of words, and so forth. Once 20 words are displayed, the remaining text should be hidden. <p>Lo ...

Creating CSS Effects for Text Hover and Transition

Looking for help to implement the hover effect 4 on the following site: . I was able to create a test on JSFiddle, check it out here: https://jsfiddle.net/34aaqh70/ Struggling to make it auto-responsive, any tips would be appreciated. If there's a ...

Struggles encountered when choosing the initial visible item

I have a set of 3 tabs, each with its own heading and content. However, I only want to display the tabs that the user selects by checking the corresponding checkboxes. There are 3 checkboxes, one for each tab. Below is the code snippet: //Function to ...

CSS media queries with precise inequality restrictions

Imagine the following scenario: @media only screen and (max-width: 600px) { nav { display: none; } } @media only screen and (min-width: 601px) { nav { display: block; } } This setup can lead to undefined behavior for a wid ...

Countdown Timer App using Flask

I'm currently working on a Flask-based game that involves countdown timers for each round. My goal is to have the timer decrease by 1 second every round without the need to reload the page. I've tried using time.sleep in my Python code to update ...

Creating a Delicious Earth Progress Pie

I'm looking to incorporate a unique progress bar design on my website, similar to this one: The progress pie Can anyone guide me on how to create a progress pie with an image inside it that changes color as it moves? ...

Injecting a component in Angular 2 using an HTML selector

When I tried to access a component created using a selector within some HTML, I misunderstood the hierarchical provider creation process. I thought providers would look for an existing instance and provide that when injected into another component. In my ...

"Enhance Your Video Experience with a Custom

Currently, I am working on designing a front-page that features a YouTube video as the background with a fixed transparent navigation. Although I have successfully implemented both elements, I am struggling to make sure the video background starts at the t ...

The flex-basis property seems to be malfunctioning as the image suddenly vanishes when

While my question may seem similar to others, the issue at hand is actually quite different. Here's how it appears in Chrome Safari In Safari, you'll notice that the map disappears. I've tried several methods, including setting a minimum ...

Adjust the image size without losing sharpness

I'm currently working on a web application for Minecraft and I am looking for a way to resize someone's skin without losing quality. I believe javascript might be the solution to this issue. ...

What is preventing me from transforming a List into an Array?

My project encountered an error that I'm unsure about. Why am I unable to convert a list to type system.array? System.InvalidCastException: Unable to cast object of type 'System.Collections.Generic.List`1[DataLayer.Appoinment]' to type ...

The Java code on Leetcode is inexplicably limiting the output of the array

output(supposed to be the stdout) I am working on this code class Solution { public int removeElement(int[] nums, int val) { int k =0; int[] expectedNums = new int[nums.length]; for(int i =0,j=0; i<nums.length;i++) ...

How can you create an ordered list with letters and parentheses using HTML5 and CSS?

Is it possible to use letters with ")" instead of "." in an ordered list format? For example: a) Some text... b) Some text... c) Some text... Currently, I am seeing: a.) Some text... b.) Some text... c.) Some text... I need to remove the periods. CSS: ...

Maintain the original order of rows in the table while shuffling the columns they appear in randomly

I need help with my table setup. The left column contains words in English, while the right column has the same words translated into Korean. Is there a way to keep the rows intact while randomizing the order of the columns? Here's an example: <ta ...