CODEWITHSUNDEEP
htmlcss
ireneec
ireneec

Reputation: 13

How to arrange the order of text on CSS and HTML

I was wondering how I could arrange the order of text on my website. In the picture attached below, I want to have the text show up in a different order and change the spacing between the text.

I want to change it to read "Work About Resume" instead of "Resume About Work"

Also, I'll be adding in the proper link to the resume later.

https://imgur.com/a/ooGVqFP

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;
}

Upvotes: 0

Views: 1272

Answers (1)

doğukan
doğukan

Reputation: 27441

possible with display:flex and 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 changed orders with order property. as you can see:

#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>

Upvotes: 2

Related Questions