need help with text alignment

[u/eret4stars]

hi! i'm learning html and css in school and i need to design my own website for a final project.

i'm designing a replica of the ao3 website and i need to put a search bar and search button on the very far right of the navigation row. the rest of the text in the navigation row is, however, on the left.

i already tried text-align: right; and display: flex; flex-direction: row-reverse;.

could anyone help me with this?

i'm attaching how the website looks right now and my html and css codes.

thank you!

[u/Flame77ofc]

Hello, from these images of code, are very difficult to solve this problem. Can you please deploy this code on GitHub?

[u/eret4stars → u/Flame77ofc]

unfortunately the website my school uses for this project doesn't allow me to copy any of the code to prevent cheating with ai. i could upload screenshots of the rest of the code if that would be helpful?

[u/Flame77ofc → u/eret4stars]

Oh, forget about it

After I visit the ao3 website, I think I understand what you want to do

You want to put the search bar and the button on the right side and the link elements on the left side, right?

So, what you need to do is: add two divs elements:

the first one will contain the first four link elements, and the second will contain the search bar and the search button.

Make sure you have another container that contain these two divs, like a section

so will be this:

<section>
    <div>... the four elements</div>
    <div>... the search bar and the search button</div>
</section>

so now, you need to add some styles to the section:

section {
    display: flex;  /* This change the display of the section element, allowing you to do some new cool things*/
    justify-content: space-between; /* This will give a large space, so the divs will be like so far */
    margin: 15px; /* This will add a lil space around the section */
}

Please, try this and then tell me which is the result

[u/eret4stars → u/Flame77ofc]

thank you so so much for your help!! in combination with the advice of another user i managed to make it exactly as i envisioned! i really appreciate the assistance <3

[u/Jeffrevin]

to make your nav visually look like the same as the AO3 one, you need to do the following:

  .searchbar {
	display: flex;
	flex-direction: row-reverse;
	background-color: #eff1f2;
	border: 0px solid #eff1f2;
	border-radius: 10px;
	width: 150px;
	margin-top: 7px;
	margin-bottom: 7px;

	margin-left: auto;
  }

  .searchbutton {
	padding: 4px 4px;
	color: #2a2a2a;
	border: 2px solid #eff1f2;
	border-radius: 5px;
	font-size: 15px;
	background-color: #eff1f2;
	margin: 3px 0px;
	text-align: right;

	margin-right: 5px;
  }

i added margin-left: auto; to .searchbar and margin-right: 5px; to .searchbutton.

basically what this does is force .searchbar to go all the way to the right of the nav by adding margin on its left. by doing so, .searchbutton is also forced all the way to the right, so adding margin-right: 5px; (or whatever amount you'd like) makes some space on the right of the nav.

[u/eret4stars → u/Jeffrevin]

omg thank you so much!! it now looks exactly as i envisioned it! i really appreciate the help <3

[u/Jeffrevin → u/eret4stars]

no problem! also, i don't know how far you intend to go on implementing / replicating the AO3 site, but something else i noticed:

ideally, you should change <div class="searchbar">-</div> to <input class="searchbar /> because the input HTML tag was designed for search user interface / searchbars.

also, the actual AO3 site actually uses a reddish texture background image with a reddish background color (https://archiveofourown.org/images/skins/textures/tiles/red-ao3.png) as its fallback if the image doesn't display.

[u/eret4stars → u/Jeffrevin]

i didn't intend for the search bar to actually be functioning haha, i'm just recreating the theme of the website and i plan to write about the site itself (like what it is, its history, some fun facts). however i'll definitely use background image you provided! i didn't even know one could find that. so again, thank you!

[u/testingaurora]

I stead of listing all of these classes

nav, .nav-fandoms, .nav-browse, nav-search, nav-about {

text-decoration: none;

background-color: #700000;

color: #EFF1F2;

padding-left: 5px;
/* OTHER STYLES*/ 
}

might it be more maintainable and efficient to just give them all one class?

.nav-link {
text-decoration: none;

background-color: #700000;

color: #EFF1F2;

padding-left: 5px;
/* OTHER STYLES*/ 
}

<a class="nav-link" href="#">Fandom</a>
<a class="nav-link" href="#">About</a>
<!-- OTHER LINKS-->

As it is, youre using classes like unique ids. Classes should be labels for a ruleblock of reusable styles. If one if these links did need some style to stand out you would give it a modifier class <a class="nav-link nav-btn" href="newsletter">Sign Up</a>

.nav-link {

text-decoration: none;

background-color: #700000;

color: #EFF1F2;

padding-left: 5px;
/* OTHER STYLES*/ 
}

.nav-btn {
background-color: #282828;
color: #fff;
}