Why is my table stuck at the bottom of the screen?

HTML & CSS
1

I’ve got a vertical menu on the left and I’m trying to get my table to display next to it, but instead it keeps going underneath it. I tried sizing the width of the table so that it would fit next to it, but it still stays at the bottom, even though it clearly has room to move up. As far as I can tell there is nothing preventing it from moving up. Any ideas?

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home Page - Maintenance.Web</title>

    
        <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="/css/LayoutStyleSheet.css" />
    
    
</head>
<body>
<div style="background-color: green;">
    <nav class="navbar">
        <a class="navbar-brand"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
    </nav>
</div>
<nav class="mainmenu">
    <ul>
        <li class="menuheader">MRO Work Center
            <ul> <!-- Sub-menu nested list -->
                <li class="submenu"><a href="#">Work Orders</a></li>
                <li class="submenu"><a href="#">Preventive</a></li>
                <li class="submenu"><a href="#">Assets</a></li>
                <li class="submenu"><a href="#">Reports</a></li>
                <li class="submenu"><a href="#">Inventory Items</a></li>
            </ul> <!-- End the sub-list -->
        </li>
        <li class="menuheader">Technician <!-- ..and repeat -->
            <ul>
                <li class="submenu"><a href="#">Assigned</a></li>
            </ul>
        </li>
        <li class="menuheader">Requester
            <ul>
                <li class="submenu"><a href="/Home/TicketRequest">Submit Request</a></li>
            </ul>
        </li>
        <li class="menuheader">Settings
            <ul>
                <li class="submenu"><a href="#">Specs/Class</a></li>
            </ul>
        </li>
    </ul>
</nav>
<link rel="stylesheet" type="text/css" href="/css/IndexStyleSheet.css" />


    <table id="ticketsTable" class="table">
        <tr>
            <th>Ticket#</th>
            <th>Location</th>
            <th>Area</th>
            <th>Asset#</th>
            <th>Ticket Type</th>
            <th>Ticket Date</th>
            <th>Assigned To</th>
            <th>Date Assigned</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
    </table>




</body>
</html>

Layout page css:

.navbar {
    height: 145px;
    background: linear-gradient(#8c8c8c, #c4c4c4);
    border-bottom-style: solid;
    border-bottom-width: 10px;
    border-bottom-color: #002d62;
}

#logo {
    height: 120px;
    width: auto;
}
.mainmenu {
    width: 18%;
    background: linear-gradient(#8c8c8c, #c4c4c4);
    border-style: double;
    border-color: #002d62;
    border-radius: 10px;
}
.menuheader {
    list-style: none;
    font-size: 145%;
    font-weight: bolder;
    color: black;
}
.submenu {
    list-style: none;
    padding: 15px;
    border-style: double;
    border-radius: 2px;
    border-color: #002d62;
}

.submenu a {
    text-decoration: none;
    color: #002d62
}

.submenu:hover {
    background-color: #95bfe6;
    text-decoration: none;
    color: white;
}

index page css:

#ticketsTable {
    background: linear-gradient(#8c8c8c, #c4c4c4);
    width: 60%;
    margin-left: 20%;
}
2

Both the nav and the table are block elements, so will naturally stack one on top of the next in the absence of any css to instruct them to behave otherwise.
Plus there appears to be an errant link to a style sheet in-between them.

1 Like
3

Oh of course. So a display: inline block should take care of it?

4

There are a number of options to get that “sidebar” type layout, depending on how you want it to work.
A CSS table may be a fairly robust solution, though would require some extra wrapper over the elements.

5

So I added an display:inline block to the “ticketRequest” id on the RequesterStyleSheet, then to the “mainmenu” class on the LayoutStyleSheet. It moved it up some, but it still has a large amount of empty space up top. The only other thing on the layout page is the banner that goes across the top, but I don’t want to be inline with that so…? I’m not sure what else I can do.

6

Try putting a wrapper around both the menu and the table, make that display: table. Then make the menu and the table display: table-cell.
Though you may want an extra wrapper around the table and apply table-cell to the instead.

Other options are flex, float, grid, etc…
The issue you see with inline-block is that the elements will sit on the baseline by default, like text does.

7

Sorry, I should have explained, the menu is not actually on the same file as the table. This is an asp.net core project and the menu is on the layout page. So it’s shared between all of the other pages. So here is what it actually looks like when the page is not running.

Layout page:

<body>
<div>
    <nav class="navbar">
        <a class="navbar-brand"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
    </nav>
</div>
<nav class="mainmenu">
    <ul>
        <li class="menuheader">MRO Work Center
            <ul> <!-- Sub-menu nested list -->
                <li class="submenu"><a href="#">Work Orders</a></li>
                <li class="submenu"><a href="#">Preventive</a></li>
                @*<li class="submenu"><a href="#">Predictive</a></li>*@
                <li class="submenu"><a href="#">Assets</a></li>
                <li class="submenu"><a href="#">Reports</a></li>
                <li class="submenu"><a href="#">Inventory Items</a></li>
            </ul> <!-- End the sub-list -->
        </li>
        <li class="menuheader">Technician <!-- ..and repeat -->
            <ul>
                <li class="submenu"><a href="#">Assigned</a></li>
            </ul>
        </li>
        <li class="menuheader">Requester
            <ul>
                <li class="submenu">@Html.ActionLink("Submit Request", "TicketRequest", "Home")</li>
            </ul>
        </li>
        <li class="menuheader">Settings
            <ul>
                <li class="submenu"><a href="#">Specs/Class</a></li>
            </ul>
        </li>
    </ul>
</nav>
@RenderBody()
@RenderSection("Scripts", required: false)
</body>
</html>

Requester page:

<div id="ticketRequest">
        @using (Html.BeginForm("TicketRequest", "Home"))
        {
            <div>Serial # (Facility # if unavailable): @Html.TextBoxFor(m => m.SerialNum)</div>   
            <div>Priority: @Html.DropDownListFor(m => m.Priorities, new SelectList(Model.Priorities,"Id", "PriorityType"))
            </div>
            <div>TicketType: @Html.DropDownListFor(m => m.TicketTypes, new SelectList(Model.TicketTypes, "Id", "Type"))
            </div>
            <div>Condition: @Html.DropDownListFor(m => m.Conditions, new SelectList(Model.Conditions, "Id", "Condition1"))
            </div>
            <div>Desription: <div> @Html.TextAreaFor(m => m.Description, 10, 120, null)</div>
            </div>
            <input type="submit" value="Submit"/>
        }
</div>
8

It should still be possible, given that you are still able to make edits to the html & css.

<body>
<div>
    <nav class="navbar">
        <a class="navbar-brand"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
    </nav>
</div>
<div class="wrap"> <!-- Added this wrapper -->
<nav class="mainmenu">
    <ul>
        <li class="menuheader">MRO Work Center
            <ul> <!-- Sub-menu nested list -->
                <li class="submenu"><a href="#">Work Orders</a></li>
                <li class="submenu"><a href="#">Preventive</a></li>
                @*<li class="submenu"><a href="#">Predictive</a></li>*@
                <li class="submenu"><a href="#">Assets</a></li>
                <li class="submenu"><a href="#">Reports</a></li>
                <li class="submenu"><a href="#">Inventory Items</a></li>
            </ul> <!-- End the sub-list -->
        </li>
        <li class="menuheader">Technician <!-- ..and repeat -->
            <ul>
                <li class="submenu"><a href="#">Assigned</a></li>
            </ul>
        </li>
        <li class="menuheader">Requester
            <ul>
                <li class="submenu">@Html.ActionLink("Submit Request", "TicketRequest", "Home")</li>
            </ul>
        </li>
        <li class="menuheader">Settings
            <ul>
                <li class="submenu"><a href="#">Specs/Class</a></li>
            </ul>
        </li>
    </ul>
</nav>
@RenderBody()
@RenderSection("Scripts", required: false)
</div> <!-- New wrapper ends -->
</body>
</html>

Then css:-

.wrap {
   display: table;
}
.mainmenu, #ticketRequest {
   display: table-cell;
}
9

Ah I see! Yes, that did work! I think I’ll need just a little bit of tweaking to get it right how I want it but that is pretty dang close! Thank you, I was getting a bit frustrated with this! haha!

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.