Guide to organizing the sequence of text in HTML and CSS

Seeking guidance on reordering text and adjusting spacing on my website. Below, I have attached an image where I intend to change the sequence of text and modify the spacing accordingly.

I aim to switch the order from "Resume About Work" to "Work About Resume."

Please note that I will include the appropriate resume link at a later time.

https://i.sstatic.net/osIGY.png

Thank you! 

HTML
<body>
<div class="page-wrapper">
   <div class="home-page-wrapper">
      <div id="navbar">
     <a href="index.html" class="navbar-item" id="current-navbar-item" style="margin-left": 50px">Irene Li</a>
     <a href="work.html" class="navbar-item" id="work-navbar-item" style="margin-right": 1000px">Work</a>
     <a href="about.html" class="navbar-item" id="about-navbar-item" style="margin-right": 900px">About</a>
     <a href="link" target="_blank" class="link, navbar-item" id="resume-navbar-item" style="margin-right": 800px">Resume</a>
   </div>

CSS
#navbar {
width: 100%;
height: 100%;
font-family: 'Mukta', sans-serif;
}

.navbar-item {
    display: inline-block;
    margin-top: 40px;
    margin-left: 45px;
    text-decoration: none;
    padding-bottom: 3px;
transition: .2s linear;
color: #3f3f3f;
font-size: 18px;
}

.navbar-item: hover {
border-bottom: 1.5px solid currentColor;
cursor: pointer;
transition: .2s linear;
}

#current-navbar-item {
color: #3f3f3f;
border-bottom: 2px solid currentColor;
line-height: 15px;
}

#work-navbar-item {
color: #3f3f3f;
line-height: 15px;
float:right;
margin-right: 40px;
z-index: 5;
line-height: 15px;
}

#about-navbar-item {
color: #3f3f3f;
line-height: 15px;
float:right;
margin-right: 0.1em;
z-index: 5;
}

#resume-navbar-item {
color: #3f3f3f;
line-height: 15px;
float:right;
margin-right: 0.1em;
z-index: 5;
}
htmlcss

Answer №1

achieved using display:flex along with its order property.

#navbar {
width: 100%;
height: 100%;
font-family: 'Mukta', sans-serif;
  display:flex;
  justify-content:space-between;
}

.flex_right {
  justify-content:flex-end;
  display:flex;
  margin-right:40px;
}

.navbar-item {
    display: inline-block;
    margin-top: 40px;
    margin-left: 45px;
    text-decoration: none;
    padding-bottom: 3px;
transition: .2s linear;
color: #3f3f3f;
font-size: 18px;
}

.navbar-item: hover {
border-bottom: 1.5px solid currentColor;
cursor: pointer;
transition: .2s linear;
}

#current-navbar-item {
color: #3f3f3f;
border-bottom: 2px solid currentColor;
line-height: 15px;
}

#work-navbar-item {
color: #3f3f3f;
line-height: 15px;
z-index: 5;
line-height: 15px;
  order:1; /* this is first */
}

#about-navbar-item {
color: #3f3f3f;
line-height: 15px;
z-index: 5;
  order:2; /* this is second */
}

#resume-navbar-item {
color: #3f3f3f;
line-height: 15px;
float:right;
z-index: 5;
  order:3; /* this is third */
}
<div class="page-wrapper">
   <div class="home-page-wrapper">
      <div id="navbar">
        <div class="flex_left">
     <a href="index.html" class="navbar-item" id="current-navbar-item" style="margin-left": 50px">Irene Li</a>
      </div>
                                                                                                 <div class="flex_right">
     <a href="work.html" class="navbar-item" id="work-navbar-item" style="margin-right": 1000px">Work</a>
     <a href="about.html" class="navbar-item" id="about-navbar-item" style="margin-right": 900px">About</a>
     <a href="link" target="_blank" class="link navbar-item" id="resume-navbar-item" style="margin-right": 800px">Resume</a>
        </div>
   </div>

i updated the orders using the order property. Here's a snippet:

#navbar {
width: 100%;
height: 100%;
font-family: 'Mukta', sans-serif;
  display:flex;
  justify-content:space-between;
}

.flex_right {
  justify-content:flex-end;
  display:flex;
  margin-right:40px;
}

.navbar-item {
    display: inline-block;
    margin-top: 40px;
    margin-left: 45px;
    text-decoration: none;
    padding-bottom: 3px;
transition: .2s linear;
color: #3f3f3f;
font-size: 18px;
}

.navbar-item: hover {
border-bottom: 1.5px solid currentColor;
cursor: pointer;
transition: .2s linear;
}

#current-navbar-item {
color: #3f3f3f;
border-bottom: 2px solid currentColor;
line-height: 15px;
}

#work-navbar-item {
color: #3f3f3f;
line-height: 15px;
z-index: 5;
line-height: 15px;
  order:3;
}

#about-navbar-item {
color: #3f3f3f;
line-height: 15px;
z-index: 5;
  order:2;
}

#resume-navbar-item {
color: #3f3f3f;
line-height: 15px;
float:right;
z-index: 5;
  order:1;
}
<div class="page-wrapper">
   <div class="home-page-wrapper">
      <div id="navbar">
        <div class="flex_left">
     <a href="index.html" class="navbar-item" id="current-navbar-item" style="margin-left": 50px">Irene Li</a>
      </div>
                                                                                                 <div class="flex_right">
     <a href="work.html" class="navbar-item" id="work-navbar-item" style="margin-right": 1000px">Work</a>
     <a href="about.html" class="navbar-item" id="about-navbar-item" style="margin-right": 900px">About</a>
     <a href="link" target="_blank" class="link navbar-item" id="resume-navbar-item" style="margin-right": 800px">Resume</a>
        </div>
   </div>

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

The animation in CSS seems to be malfunctioning, but strangely enough, the exact same code works elsewhere

Recently, I encountered a strange issue with my project. An animation effect that was working perfectly fine suddenly stopped working when I opened the project. To troubleshoot, I downloaded the same project from my GitHub repository and found that the ani ...

cssanimation

What is the method for configuring automatic text color in CKEditor?

https://i.sstatic.net/yEM3p.png Is there a way to change the default text color of CKEditor from #333333 to #000000? I have attempted to modify the contents.css in the plugin folder: body { /* Font */ font-family: sans-serif, Arial, Verdana, "Tr ...

javascripthtmlcssckeditoreditor

Can anyone advise on the proper way to import CSS within a React component?

I'm currently working on a React component named Comp1 and I've included a CSS file within it like so: import "./style.css"; Within the style.css file, I'm using the following line: @import "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi ...

cssreactjs

Troubleshoot: Unable to trigger change event for input type file

Hey, I'm trying to capture and display the file name that a user selects using an input type file control. Unfortunately, the jQuery onchange event doesn't seem to be working in IE 8. Does anyone have a solution for this? // Here's my jQuer ...

jqueryhtmlformsjquery-selectors

Trouble with Contact Form: PHP failing to display INPUTs

I've been grappling with this issue for a few days now, scouring through countless questions and tutorials. The Contact Form on my website seems to be working—it submits, confirms, and redirects as expected. However, there's one major problem: ...

phphtmlformsemailinput

Using the mouse scroll to activate the $anchorScroll effect in Angular instead of a click

I have been searching for a solution to my problem without any luck so far. Hopefully, someone here can provide guidance and help me find a solution. My goal is to replicate the behavior shown in the second example on the following page: https://docs.angu ...

htmlcssangularjsscrollanchor-scroll

Utilizing Vue.js components and properties to invoke a function

Trying to create a shopping cart button that keeps track of how many times it's clicked, but encountering an issue where the function called by the button doesn't receive the correct parameter. I attempted using {{id}} and :onClick="addThisToCar ...

javascripthtmlvue.js

Generating various fields within a single row

I am in the process of creating a dynamic form that should generate two new fields in the same line when the user clicks on the plus icon. Currently, the code I have only creates a single field. I attempted to duplicate the code within the function, but i ...

javascripthtml

Scrape dynamic web data with JSOUP

Having trouble grabbing the price? I cannot seem to get any output for the price and its weight. I've attempted different methods, but nothing is working Document doc = Jsoup.connect("https://www.jakmall.com/tokocamzone/mi-travel-charger-20a-output- ...

javahtmljsoup

Initially, the 'display none' CSS command may not take effect the first time it is used

I am currently working on a slideshow application using jquery.transit. My goal is to hide a photo after its display animation by setting the properties of display, transform, and translate to 'none' value. Although the slideshow application work ...

javascriptjquerycss

"Responsive header design using Bootstrap for both desktop and mobile devices

Is there a way to create a header that adjusts its width based on the device viewing it, with maximum width for desktop and no padding for mobile? Here is an example of the code: <div class="row"> <div class="span12"> ...

csstwitter-bootstrap

Rearrange the middle column to be the top column on smaller screens

I am trying to create a layout with 3 columns in a row. The challenge is to prioritize the middle column on top when viewed on small screens, with the left and right columns below it. To clarify, on large screens the order should be 1 2 3, while on small s ...

csstwitter-bootstrap

Looking for recommendations on effective jQuery plugins for drag and drop file uploading?

Can anyone recommend any drag-and-drop jQuery plugins that offer similar functionality to Gmail's attachment dragging and dropping feature? I would like the ability to track the upload progress. However, I am specifically looking for options without ...

jquerycsshtmldrag-and-drop

Shifted picture next to the accompanying words

I have successfully created a slideshow of images using JavaScript. <html> <head> <script language="JavaScript"> var i = 0; var path = new Array(); path[0] = "one.jpg"; path[1] = "two.jpg"; function swapImage() { document.slide ...

javascripthtmlcss

Alert: Ajax encountered an issue with the auto-refreshing field

When running a script I created for a self-updating field, I encountered the following error message: UpdateField.html:37 Uncaught ReferenceError: fieldname is not defined at HTMLInputElement.onchange (UpdateField.html:37) Script: <!DOCTYPE ht ...

javascriptphphtmlajax

The jQuery navbar's active class fails to function properly when an href is added

I'm facing a puzzling situation. I created a navbar using jQuery Mobile following the instructions on their official website: jQuery Mobile Navbar Demos Everything functions smoothly until I introduce href attributes in the list elements within the u ...

jquerycssjquery-mobilenavbarhref

Adjust the size of a Div/Element in real-time using a randomly calculated number

Currently, I am working on a script that is designed to change the dimensions of a div element when a button on the page is clicked. The JavaScript function connected to this button should generate a random number between 1 and 1000, setting it as both the ...

javascripthtmlcss

I am encountering an issue with Angular where the following error message is displayed: "src/app/app.component.html:18:20 - error TS2339: Property 'DepScreen' does not exist on type 'AppComponent'"

This code snippet is from my app.component.html file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" ...

javascripthtmlangularangular8

When it comes to using jQuery, I find that it only functions properly when I manually input the code into the Google Chrome console. Otherwise

Below is the HTML snippet: <textarea cols="5" disabled id="textareRSAKeypair"> @Model["keypair"] </textarea> <a href="#" class="btn btn-primary" id="downloadKeypair">Download Key</a> Here is the jQuery code: <script src="ht ...

javascriptjqueryhtmlcss

Troubleshooting Navigation Bar Toggle Button Issue in Bootstrap 5

Currently, I am in the process of working on a web project that requires the implementation of a responsive sidebar. This sidebar should be toggleable using a button located in the navigation bar. My choice for the layout is Bootstrap, and I have come acr ...

javascriptcssbootstrap-5