So I'm trying to make an easy website for a server user ordering stuffs. But now I have a problem that will affect about the Navigator text.

Now it's looks like this:

As you can see in the code below, there should be a navigator text above the Back button and also the Categories button below should be shows like the back and prices button above too since they're the same code.

I tried for some other way but it's kinda out my coding range so I decide to find on Google but I don't find any helpful solve.

Is that actually can be fix?

Conclusion: problem

1. "Navigator" text disappear at 100% zoom view
2. Category buttons can't shows like buttons above (same codes as buttons above but different ID)

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

.Woods {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Stones {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Brewing {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Enchanting {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Color {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Nether {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Redstone {
  padding: 0 80px 0 80px;
  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>

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

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

</nav>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I honestly can't explain all the changes made, there are too many. My attempt was to clean up your code and give you a working layout (hopefully that's what you were looking for).

In 2021 there are better layouts compared to fixed menu (with grids for example), which work better in responsive and are more clean. But it would require an in-depth study that's up to you.

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

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

1. "Navigator" text disappear: This is because justify-content: center; on the nav

2. Buttons will not take a width of 100% even with display: block (more information), so it needs to be added. Note that since all cathegories have the same code a single class is enough.

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

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>