Unerwünschter Ladefehler beseitigen

[dyed05]

Hallo Leute,
wenn ich eine Seite öffne oder neu lade, dann verschiebt sich das Menü von der Mitte zur richtigen Position.
Das ganze dauert zwar nur einen Augenblick, aber es stört dennoch.
Hat jemand eine Idee, was man dagegen tun könnte?
Ich hab eine PHP-Datei, die sich "sidebar" nennt und dort ist die Navigation programmiert und wird von allen anderen Dateien eingefügt (mit include).
beispiel.png

[hausl]

Ohne Code? Sollen wir raten?

[dyed05]

Ohne Code? Sollen wir raten?

Ich dachte, dass jemand ein ähnliches Problem hatte und einfach sagen konnte, wo das Problem liegt oder was angepasst werden muss.

Code der Sidebar

<div class = "col-md-2 col-sm-1 hidden-xs display-table-cell" id="side-menu">

    <div  id="userPanel">
        <div class="pull-left userImage">
            <img width="50px" height="50px" class="img-circle" src="img/noPhoto.jpg" alt="...">'
        </div>

        <div class="pull-left userInfo">
            <p><?php echo $vorname . ", " . $name ?></p>
            <a>
                <i class="fa fa-circle text-success"></i>
              
            </a>
        </div>

    </div>

    <ul class="">
        <li class="link active">

            <a href="index.php">
                <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                <span>Dashboard</span>
            </a>

        </li>

        <li class="link">

            <a href="#collapse-post" data-toggle="collapse" aria-controls="collapse-post">
                <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
                <span>Artikel</span>
                <span class="label label-success pull-right">20</span>
            </a>

            <ul class="collapse collapseable" id="collapse-post">
                <li><a href="writeBeitrag.php">Beitrag schreiben</a></li>
                <li><a href="beitraege.php">Beiträge</a></li>
            </ul>

        </li>

        <li class="link">

            <a href="spieler.php">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                <span>Spieler</span>
            </a>

        </li>

        <li class="link">

            <a href="mannschaft.php">
                <span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
                <span>Mannschaften</span>
            </a>

        </li>
        
        <li class="link">

            <a href="liga.php">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                <span>Ligen</span>
            </a>

        </li>
        
        
        <li class="link">

            <a href="#collapse-games" data-toggle="collapse" aria-controls="collapse-games">
                <span class="glyphicon glyphicon-screenshot" aria-hidden="true"></span>
                <span>Spiele</span>
                
            </a>

            <ul class="collapse collapseable" id="collapse-games">
                <li>
                    <a href="#">Spiele diese Woche</a>
                    <span class="label label-success pull-right">10</span>
                </li>
                <li>
                    <a href="#">Offene Spiele</a>
                    <span class="label label-danger pull-right">3</span>
                </li>
                <li>
                    <a href="editGames.php">Spiele bearbeiten</a>                  
                </li>
                <li>
                    <a href="addGame.php">Spieltag bearbeiten</a>                  
                </li>
            </ul>

        </li>
        
        

        <li class="link settings-btn">

            <a href="#">
                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                <span>Einstellungen</span>
            </a>

        </li>

    </ul>
</div>

Aufruf der Sidbar in den PHP Dateien:

 <?php include ("sidebar.php"); ?>

CSS:

html, body{

    background-color: #f3f3f4;
    height: 100%;
}

#side-menu
{
    background-color: #2f4050;
    padding: 0px;
    margin: 0px;

}

#side-menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#side-menu a{
    padding: 12px 20px;
    text-decoration: none;
    color: #9fb1c2;
    font-weight: bold;
    display: block;
}

#side-menu .glyphicon
{
    margin-right: 6px;
}

#side-menu a:hover
{
    background-color: #293846;
    color: #fff;
    display: block;
}
#side-menu .active a
{
    color: #fff;
    background-color: #293846;
}

#side-menu .settings-btn{
    background-color: #1ab394;
}

#side-menu .settings-btn a{
    color: #fff;
}

#side-menu .settings-btn a:hover{
    background-color: #1ab394;
}

#side-menu .collapseable li
{
    padding-left: 20px;
    padding-top: 5px;
}

#side-menu .collapseable a{
    color: #9fb1c2;
    font-size: 12px;
    padding: 0px 10px;
    text-decoration: none;
    display: block;
}

#side-menu .collapseable a:hover
{
    color: #fff;
}

#side-menu .collapseable{
    border-left:  4px solid #1ab394;
    background-color: #293846;


}

#side-menu .link > ul > li
{
    padding-bottom: 10px;
}

.display-table{
    display: table;
    padding: 0px;
    height: 100%;
    width: 100%;
}

.display-table-row
{
    display: table-row;
    height: 100%;
}

.display-table-cell
{
    display: table-cell;
    float: none;
    height: 100%;
}

.valign-top{
    vertical-align: top;
}

#nav-header
{
    background-color: #fff;
    border-bottom: 1px solid #e7eaec;
    height: 50px;
}

#nav-header #header-search
{
    padding-top: 17px;
    vertical-align: central;
    border: none;
    width: 300px;
    outline: none;
}

#nav-header ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
    color: #676a6c;
}

#nav-header ul li
{
    float: left;
    margin-left: 15px;
    padding: 17px 0px;
}

#nav-header ul .glyphicon {
    color: #676a6c;
}

.label-message
{
    background-color: #1ab394;
}

#nav-header ul a{
    text-decoration: none;
}

#nav-header .logout:hover
{
    color: #676a6c;
}

#nav-header #welcome
{
    margin-right: 20px;
}

#nav-header ul .label
{
    position: absolute;
    margin-top: -10px;
    margin-left: -5px;
}

#nav-header .fixed-width
{
    width: 35px;
}

.navbar-default
{
    background-color: #fff;
}

.navbar-default .navbar-toggle
{
    border-color: #1ab394;
    background-color: #1ab394;
}

.navbar-default .icon-bar
{
    border: 1px white solid;
}

.navbar-default .navbar-toggle:hover
{
    background-color: #1ab394;
}

.navbar-default .navbar-toggle:focus
{
    background-color: #1ab394;
}

Alles andere an CSS ist Standart Bootstrap

[Arne Drews]

Ich könnte mir vorstellen, dass der Main-Container den Inhalt später bekommt und evtl. auf inline-block o.ä. definiert ist.
Dann ist der erstmal leer und ~0px breit. Wenn dann Content kommt, oder die width bzw. display im Nachgang angepasst wird, hauts wieder hin.

Abhilfe würde hier schaffen, wenn Du dem Main-Container von vornherein feste Breite und ein entsprechendes Display gibst.

Ist aber nur geraten...

[jspit]

Und ich rate mal daß du dein CSS mit @import holst. Diese Variante hat den Nachteil, das die Seite oder ein Teil davon kurzzeitig ohne CSS sichtbar sein kann.

[dyed05]

Und ich rate mal daß du dein CSS mit @import holst. Diese Variante hat den Nachteil, das die Seite oder ein Teil davon kurzzeitig ohne CSS sichtbar sein kann.

Was könnte mal alternativ machen?

[hausl]

Naja.. https://wiki.selfhtml.org/wiki/CSS/E...externen_Datei

[jspit]

Der Tipp von hausl wäre auch meine erste Wahl gewesen. Wenn du nicht auf @import verzichten kannst, bleibt wohl nur ein verzögertes Einblenden per css/javascript übrig.