Question 43853 in Html Question posted in
Some basic documentation can be found here.

How do i make a CSS Sidebar using tables? – Html

CSS Sidebar

Sidebar does not show up.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  display: block;
  min-height: 100%;
  background: url("https://4kwallpapers.com/images/wallpapers/macos-13-macos-ventura-macos-2022-stock-light-5k-retina-2048x1536-8135.jpg") no-repeat;
}

top {
  margin-bottom: 52px;
  position: top;
  display: inherit;
}

content {
  display: table;
}

sidebar {
  display: table-column;
  width: 200px;
}

mainse {
  appearance: none;
  -webkit-appearance: none;
  display: table-column;
}
<content>
  <sidebar></sidebar>
  <mainse>
    <label class="switch">
      <input type="checkbox" disabled checked>
      <span class="slider-switch"></span>
    </label><br><br>
    <label class="switch">
      <input type="checkbox">
      <span class="slider-switch"></span>
    </label><br><br>
    <checkbox>
      <input type="checkbox" name="hil">
      <label for="hil" cherad>Hil</label>
    </checkbox><br>
    <button class="primary pri-shadow">
      <label>Label</label>
      <gradient></gradient>
      <tint>
      </tint>
    </button>
    <button class="secondary sec-shadow">
      <label>Label</label>
      <gradient></gradient>
      <tint></tint>
    </button><br><br>
    <button class="primary" disabled>
      <label>Label</label>
      <gradient></gradient>
      <tint></tint>
    </button><br><br>
    <button class="secondary danger">
      <label>Label</label>
      <gradient></gradient>
      <tint></tint>
    </button><br><br>
    <input type="radio" name="rad">
    <label for="rad" cherad>Hil</label>
    <div style="width: 100px; height: 100px;" class="mat-NSVisualEffectMaterialSidebar shadow-primary"></div><br><br><br>
  </mainse>
</content>

When I run this, the content does not appear, I just see a blank window.

For more info and to run:
View the code: https://replit.com/@GabrielToy1/BigSurcss?v=1

I expected it to show a sidebar and the mainse content. What really happened is that everything in the mainse did not show.

Tags:

2

Answers


  1. 0

    Im a noob but I got some suggestions:

    1. try to re-write your code from background:url to background-image:url("")
    2. Then maybe you can set z-index:0 just to make sure the image is not covering anything
    3. OR put the image in your html document and try to spawn it in with css background property.

    hope it helps.

    Login or Signup to reply.
  2. 0

    The specification for display:table-column says

    Elements with display set to table-column or table-column-group are not rendered (exactly as if they had ‘display: none’), but they are useful, because they may have attributes which induce a certain style for the columns they represent.

    display:table-cell is probably what you are looking for.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search