Is it possible to restore the text to its original state?

Currently, I'm working on creating a simple website for server users to order items. However, I've encountered an issue related to the Navigator text.

Here is how it currently appears:

Upon inspecting the code below, you'll notice that there should be navigator text above the Back button and the Categories buttons below should display similarly to the back and prices buttons above since they share the same code.

I attempted several other approaches, but they were beyond my coding abilities so I turned to Google for assistance, yet didn't find any viable solutions.

Is there a way to resolve this issue?

Summary: Issue

  1. The "Navigator" text disappears at 100% zoom view
  2. Category buttons do not render as intended (same codes as buttons above with different IDs)

.title {
  color: #66d4ff;
  background-color: #444444;
  font-size: 62px;
  text-align: center;
  border: solid 10px #66d4ff;
  padding: 50px;
  margin-left: 302px;
}

body {
  background: #444444;
}

button {
  color: #66d4ff;
  background: #444444;
  font-size: 30px;
  font-family: 'Times New Roman', Times, serif;
}

a {
  color: #66d4ff
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background: #4a4a4a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: solid 2px #ffffff;
  overflow-y: scroll;
}

.nav::-webkit-scrollbar {
  display: hidden;
}

main {
  color: #66d4ff;
  background-color: #444444;
  font-size: 20px;
}

.navigator {
  display: block;
  margin-bottom: 50px;
  color: #66d4ff;
  font-size: 35px;
  text-align: center;
}

.store {
  padding: 0 99.5px 0 99.5px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

...

<main>
  <div class="title">
    <t1>MineGlobe | IchorDragon's Store</t1>
  </div>
</main>

<nav>

  <div id="navigator">
    <p class="navigator">Navigator</p>

    <div>
      <button class="store"><a href="store.html" style="text-decoration: none;">Back</a></button>
      <button class="prices"><a href="prices.html" style="text-decoration: none;">Prices</a></button>
    </div>
  </div>

  ...

htmlcss

Answer №1

It's difficult to articulate all the changes implemented, as there were numerous adjustments made. My goal was to enhance your code and provide a functional layout (hopefully meeting your expectations).

In 2021, there are superior layouts available as compared to fixed menus (such as using grids), which perform better in responsive design and offer a cleaner look. However, exploring these options would require a thorough analysis on your part.

body {
    background-color: #444444;
}
main {
    width: 100%;
    padding-left: 302px;
    box-sizing: border-box;
    overflow:hidden;
  
    color: #66d4ff;
    background-color: #444444;
    font-size: 20px;
    
}

.title {
    padding: 50px;
    
    border: solid 10px #66d4ff;
    
    font-size: 62px; 
    text-align: center;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    
    background-color: #4a4a4a;
    border-right: solid 2px #ffffff;
    overflow-y: scroll;
    
    color: #66d4ff;
}


.navigator {
    display: block;
    margin-bottom: 50px;
    
    font-size: 35px;
    text-align: center;
}


button {
    width:96%;
    margin: 10px auto;
    
    background: #444444;
    
    color: #66d4ff;
    font-size: 30px;
    font-family: 'Times New Roman', Times, serif;
    
    cursor:pointer;
}
<body>

  <main>
    <div class="title">
      <t1>MineGlobe | IchorDragon's Store</t1>
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> This is a long page content...
    <br/>
  </main>

  <nav>

    <div id="navigator">
      
      <p class="navigator">Navigator</p>

      <div>
        <a href="store.html" class="store" style="text-decoration: none;"><button>Back</button></a>
        <a href="prices.html" class="prices" style="text-decoration: none;"><button>Prices</button></a>
      </div>
      
    </div>



    <div id="category">
    
      <p class="navigator">Select Category</p>

      <div>
        <button class="Woods items" onclick="document.getElementById('Woods').scrollIntoView();">Woods</button>
        <button class="Stones items" onclick="document.getElementById('Stones').scrollIntoView();">Stones</button>
        <button class="ArmorsWeapon items" onclick="document.getElementById('ArmorsWeapon').scrollIntoView();">Armors & Weapons</button>
        <button class="Brewing items" onclick="document.getElementById('Brewing').scrollIntoView();">Brewing</button>
        <button class="Enchanting items" onclick="document.getElementById('Enchanting').scrollIntoView();">Enchanting</button>
        <button class="Color items" onclick="document.getElementById('Color').scrollIntoView();">Color</button>
        <button class="Redstone items" onclick="document.getElementById('Redstone').scrollIntoView();">Redstone</button>
        <button class="Nether items" onclick="document.getElementById('Nether').scrollIntoView();">Nether</button>
      </div>
      
    </div>


  </nav>

</body>

Answer №2

  1. "Navigator" text disappears: The reason for this is the use of justify-content: center; on the nav

  2. Even with display: block, buttons will not automatically take up a width of 100%. Refer to (more information). It needs to be specifically added as a styling rule. Also, note that since all categories share the same style, a single class should suffice.

.title {
  color: #66d4ff;
  background-color: #444444;
  font-size: 62px;
  text-align: center;
  border: solid 10px #66d4ff;
  padding: 50px;
  margin-left: 302px;
}

body {
  background: #444444;
}

button {
  color: #66d4ff;
  background: #444444;
  font-size: 30px;
  font-family: 'Times New Roman', Times, serif;
}

a {
  color: #66d4ff
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background: #4a4a4a;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  border-right: solid 2px #ffffff;
  overflow-y: scroll;
}

.nav::-webkit-scrollbar {
  display: hidden;
}

main {
  color: #66d4ff;
  background-color: #444444;
  font-size: 20px;
}

.navigator {
  display: block;
  margin-bottom: 50px;
  color: #66d4ff;
  font-size: 35px;
  text-align: center;
}

.store {
  padding: 0 99.5px 0 99.5px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.prices {
  padding: 0 93.5px 0 93.5px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.category {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
  width: 100%;
}
<main>
  <div class="title">
    <t1>MineGlobe | IchorDragon's Store</t1>
  </div>
</main>

<nav>

  <div id="navigator">
    <p class="navigator">Navigator</p>

    <div>
      <button class="store"><a href="store.html" style="text-decoration: none;">Back</a></button>
      <button class="prices"><a href="prices.html" style="text-decoration: none;">Prices</a></button>
    </div>
  </div>

  <div id="category">
    <p class="navigator">Select Category</p>

    <div>
      <button class="category Woods" onclick="document.getElementById('Woods').scrollIntoView();"><a style="text-decoration: none;">Woods</a></button>
      <button class="category Stones" onclick="document.getElementById('Stones').scrollIntoView();"><a style="text-decoration: none;">Stones</a></button>
      <button class="category ArmorsWeapon" onclick="document.getElementById('ArmorsWeapon').scrollIntoView();"><a style="text-decoration: none;">Armors & Weapons</a></button>
      <button class="category Brewing" onclick="document.getElementById('Brewing').scrollIntoView();"><a style="text-decoration: none;">Brewing</a></button>
      <button class="category Enchanting" onclick="document.getElementById('Enchanting').scrollIntoView();"><a style="text-decoration: none;">Enchanting</a></button>
      <button class="category Color" onclick="document.getElementById('Color').scrollIntoView();"><a style="text-decoration: none;">Color</a></button>
      <button class="category Redstone" onclick="document.getElementById('Redstone').scrollIntoView();"><a style="text-decoration: none;">Redstone</a></button>
      <button class="category Nether" onclick="document.getElementById('Nether').scrollIntoView();"><a style="text-decoration: none;">Nether</a></button>
    </div>
  </div>

</nav>

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

Some of the picture remains concealed without spilling over

I've been struggling to get my logo to display properly on my website. I have managed to position it, but the image isn't fully visible. Here's a screenshot for reference: http://gyazo.com/1d23c924cdb401fc0cca76b946e57dcb There doesn't ...

cssimage

Is there a potential bug in Chrome with the submit button appearing "depressed" when focused?

Why do submit buttons act differently in Chrome? <input type='text' placeholder='Dummy Input'/> <input type='submit'/> In Chrome, the active 'depressed' state of the submit button will only occur if the ...

htmlgoogle-chrome

What is the optimal resolution for a background image in a Cordova app?

Currently working on a Cordova application that requires different background images for various screens. Despite using media queries to provide the background image in different resolutions, we are facing an issue where the background image is not displ ...

androidioscsscordova

Execute JavaScript/AJAX solely upon the selection of a button

Currently, my script is being executed immediately after the page loads and then again after a button click. Is there any way to modify it so that the script waits until I click the button before running? As far as I understand, this code runs asynchronous ...

javascriptjqueryhtmlajax

Tips for maintaining sequential numbering in Mediawiki sections

Looking to enhance the formatting of numbered lists by adding section headers and restarting numbering? The old Mediawiki format supported this, but it no longer works in version 1.24. For example: ==First Header2== # # ==Second Header2== # Desired output ...

cssheadermediawikiindentationnumbered-list

The background image seems to be malfunctioning

I've been attempting to recreate a similar design to this website, and while most of it is working smoothly, I'm encountering an issue with using ::before to add a background image as desired. Below is the code snippet in question: /* Section ...

htmlcsscss-selectorsbackground-image

Nextjs exposes a bug in react-bootstrap's navbar component

After integrating react-bootstrap with nextjs, I encountered a strange issue with the NavBar component. The problem arises when I first load the navbar - everything appears as expected, https://i.stack.imgur.com/R9guE.png but upon refreshing the page, CS ...

cssreactjsnext.jsreact-bootstrap

Having trouble with the fancybox form

Take a look at this link for information on how to display a login form. Once you click on "Try now", follow these steps: A fancy box should open with fields for name and password. If both fields are left blank and the login button is clicked, an error ...

jqueryhtmlfancyboxfancybox-3

What is the process for assigning a value to the body in a div element?

Within a div, there is a body element structured like this: <div id = "TextBox1"> <iframe id = "TextBox1_1"> #document <html> <head></head> <body></body> </html> </iframe> </div> I have attempte ...

javascriptjqueryhtmlcss

Having trouble getting Javascript to reveal hidden elements based on their class

I am having some trouble making specific fields in a form appear based on the selection made from a dropdown menu. Below is a simplified snippet of my code, which should change the display from 'none' to 'block'. Can you help me figure ...

javascripthtmlcssdom

Develop a versatile JavaScript or jQuery script that automatically sets the focus on the first input field within a div or tag when the user clicks on it

I am currently working on creating a data entry form using a table layout. The form has two columns - the first column for input titles and the second column mostly for input tags. I styled the inputs in the second column to appear transparent with no bord ...

javascriptjqueryhtmlforms

Converting an HTML page into a JSON object by scraping it

Is there a way to convert an HTML page into a JSON object using web scraping? Here is the content of the page: <html><head><title>Index</title><meta charset="UTF-8"></head><body><div><p>[ <a href ...

javascripthtmljsonnode.js

Having difficulty toggling a <div> element with jQuery

I am attempting to implement a button that toggles the visibility of a div containing replies to comments. My goal is to have the ability to hide and display the replies by clicking the button. The "show all replies" button should only appear if there are ...

javascriptjqueryhtmlcss

Leveraging JSON data to dynamically create HTML elements with multiple class names and unique IDs, all achieved without relying on

Recently, I've been working on creating a virtual Rubik's cube using only JS and CSS on CodePen. Despite my limited experience of coding for less than 3 months, with just under a month focusing on JS, I have managed to develop two versions so far ...

javascripthtmlcssjsonrubiks-cube

Toggle the visibility of multiple divs by clicking on other divs

I have implemented a script on my webpage to toggle the visibility of certain divs by clicking on anchor tags. I found a solution that seems perfect for my needs, but unfortunately it is not working when I try to integrate it into my own website. I suspec ...

javascriptjqueryhtml

Ways to implement CSS styling to every input element excluding inputs located within list items of a specific class

input.not(li.tagit-new >input) { background-color: lightgrey; } <ul id="tagAdministrator" style="width: 505px" class="tagit ui-widget ui-widget-content ui-corner-all"> <li class="tagit-new" style="box-shadow: none;"> <input ty ...

htmlcss

What is the best way to access all of a class's properties in JavaScript?

Is there a way to retrieve all the properties of a class using JavaScript? For example, if I have a class like this: .menu { color: black; width: 10px; } How can I extract "color: black; width: 10px;" as a string using JavaScript? Thanks in advance! ...

javascriptjquerycsspropertiesstyles

When I try to share a link to my website on Google Plus, the thumbnail does not appear

Previously, I encountered a similar issue on Facebook, but by utilizing the following tag, I was able to resolve it: <meta property="og:image" content="link to image" /> The dimensions of the image in the "link to image" are 200px x 200px, which me ...

facebookhtmlgoogle-plus

Leverage JSON data in JavaScript

Having some trouble figuring out how to incorporate JSON values into my JS script. Any assistance would be greatly appreciated as I am still new to this! Below is the snippet of code where I need the values (lat and lon) to be inserted: var map; functio ...

javascripthtmljson

Positioning children in CSS Flexbox: one at the top and the

Is there a way to position the a element at the top and the button at the bottom, using only flex properties without absolute or fixed positioning? Currently, the button is at the bottom but the title is not at the top: .all { display: flex; hei ...

htmlcssflexbox