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.

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

Creating a Border Length Animation Effect for Button Hover in Material-UI

I'm currently exploring Material-UI and trying to customize a component. My goal is to add a 'Border Length Animation' effect when hovering over the button. Unfortunately, I have yet to successfully implement this animation as intended. For ...

javascriptcssreactjsmaterial-uicss-animations

Is there a way to customize the design of the "Browse" button within the HTML file upload control?

I've been searching high and low on the internet for a simple, sleek method to customize the appearance of the Browse button on an HTML <input type=file> element. However, all the solutions I've come across involve hiding controls, placing ...

htmlfile-uploadcss

Can you include the dollar symbol in the currency format?

I currently have this code that formats numbers into currency format, however I would like to include the dollar sign ($) before the numbers. document.getElementById("numbers").onblur = function (){ this.value = parseFloat(this.value.r ...

javascripthtmlnumberscurrency

modifying the arrangement of span elements

Currently, I am assisting a colleague in crafting articles for scientific journals. Interestingly, various publishers have distinct requirements regarding the format of cited authors in the bibliography. Some demand "last name, first name," while others pr ...

htmlcssbibliography

Assign a background image to a button using an element that is already present on the page

Is there a way to set the background-image of a button without using an image URL? I am hoping to use an element already in the DOM as the background-image to avoid fetching it again when the button is clicked. For example, caching a loading gif within the ...

javascriptjqueryhtmlcss

How can I place my container above my header in the layout?

I'm facing difficulty positioning the container above my header. Here is an example of what I am aiming for: No matter what I attempt, strange occurrences like the NAV disappearing or divs overlapping keep happening. HTML: <!DOCTYPE html PUBLIC ...

htmlcss

Space between an image and a div element

While creating a website in Dreamweaver CC, I noticed a significant gap between my image and a div tag. Here is a screenshot for reference: Below is the code from my index file: <!doctype html> <html> ... </div> Additionally, here is a ...

csshtmltagsspace

The incorrect indentation issue occurs when the text wraps around

I am looking to automatically indent wrapped contents based on the first line. To achieve this, I implemented the following HTML and CSS code: li { padding-left: 10px; text-indent: 10px; } .Slides { width: 20em; //Display wrap-around } <div cla ...

htmlcss

Is my page not displaying correctly due to compatibility view?

My client "jordanzad.com" has a website where the main page design appears broken when viewed in compatibility view. Can you help fix this issue? ...

htmlcss

Using sandboxed iframes in HTML for secure `src` loading on Internet Explorer 11 and Microsoft Edge

Is there a way in IE11/Edge with HTML5 to populate a sandboxed iframe (<iframe sandbox></iframe>) with HTML without using a src url? I am searching for a solution similar to srcdoc that is compatible with all other modern browsers. Attempting ...

htmliframeinternet-explorer-11sandboxmicrosoft-edge

Exploring CSS Shapes: Unveiling the secrets behind the star. What's the mechanism at

https://i.stack.imgur.com/0BgQr.png Take a look at the code snippet below showcasing The Shapes of CSS. I'm interested in delving into the intricacies of these CSS properties. How exactly do shapes in CSS function? This includes pseudo CSS, borders, ...

htmlcsscss-shapes

Center alignment of text and images within the button's image

Can someone help me format my CSS properly? I have a button image where the text should be on the left side and another image on the right side. Currently, everything is centered. Thank you in advance. Here is the current code: button { /* padding- ...

htmlcss

Apply SetTimeout exclusively for desktop devices

A website I'm working on has a background video from YouTube using YTPlayer. To enhance the user experience, I have implemented a CSS spinner that displays while the page is loading. However, I noticed that the spinner disappears before the video fini ...

javascriptjqueryhtmlcss

Generate a Selectpicker dynamically when a button is clicked

Wanting to insert a new row in an HTML table dynamically by clicking on an add button. The new row includes a select element with the selectpicker class. Interestingly, when I remove the selectpicker class in my script to append a new row, the select eleme ...

javascriptjqueryhtmlbootstrap-selectpicker

Display the contents in a textarea with modal, not as a string

I'm currently working on implementing a modal overlay window with simplemodal that will display the contents of a text area. My goal is to show the rendered output rather than just the string value. For example, if a user enters HTML or includes an im ...

javascriptjqueryhtmlsimplemodal

The canvas div wrapper flexbox item is in need of scrollbars

I am looking to display a canvas that may be larger than the viewport size. The layout structure will include navigation on the left and controls on the right, with the canvas positioned in between them. When the canvas is too large for the screen, I wan ...

htmlcssflexboxscrollbaroverflow

Guidance on incorporating static files with Spring MVC and Thymeleaf

I'm seeking guidance on how to properly incorporate static files such as CSS and images in my Spring MVC application using Thymeleaf. Despite researching extensively on this topic, I have not found a solution that works for me. Based on the recommenda ...

javacssspringspring-mvcthymeleaf

Uploading and downloading files to a localhost server using PHP

Currently facing an issue where I have successfully uploaded a Picture, PPTX, and PDF file to the database server. However, when viewing them in the browser: The Picture displays normally. However, The PDF file automatically downloads upon trying to view ...

phphtmlpdfxampp

Encountering a problem with ng-repeat when working with a JSON

Having a bit of trouble displaying the keys and values from a JSON object in an HTML table using ng-repeat. The JSON object is coming from the backend, but for some reason, it's not showing up on the frontend. I know there must be a simple mistake som ...

javascripthtmlangularjs

Tips for accessing a local file on a website through HTML - easy steps to follow!

Is it possible to open a local (jpg or pdf) file from a random website that is not under my control? I have tried editing the HTML code of a site in Chrome by replacing existing links with ones linking to my local file, but when I click on them, nothing ha ...

htmlgoogle-chromelocal