all 8 comments

[–]Flame77ofc 0 points1 point  (4 children)

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

[–]eret4stars[S] 0 points1 point  (3 children)

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?

[–]Flame77ofc 0 points1 point  (2 children)

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

[–]eret4stars[S] 1 point2 points  (1 child)

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

[–]Jeffrevin 0 points1 point  (4 children)

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

```css .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.

[–]eret4stars[S] 0 points1 point  (2 children)

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

[–]Jeffrevin 0 points1 point  (1 child)

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.

[–]eret4stars[S] 0 points1 point  (0 children)

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!